@extends('layouts.main')

@section('title', 'Sermons - Grace Family Church')
@section('meta_description', 'Watch sermons and teachings from Grace Family Church. Biblical preaching and worship available on YouTube.')

@section('content')

<!-- HERO -->
<section class="page-header-section text-center text-white">
    <div class="container">
        <h1 class="display-4 fw-bold">Sermons</h1>
        <div class="section-divider" style="background: var(--gfc-accent);"></div>
        <p class="lead">Catch up on our latest sermons and teachings. Watch on YouTube for more!</p>
        <a href="{{ setting('social.youtube', 'https://www.youtube.com/@gracefamilychurchcapetown') }}" class="btn btn-gfc-primary btn-lg mt-3" target="_blank">
            <i class="fab fa-youtube me-2"></i> Visit Our YouTube Channel
        </a>
    </div>
</section>

<!-- SERMONS GRID -->
<section class="py-5">
    <div class="container">
        <div class="row g-4">
            @if($sermons->count() > 0)
                @foreach($sermons as $sermon)
                <div class="col-md-6 col-lg-4">
                    <div class="sermon-card h-100">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/{{ $sermon->youtube_id }}"
                                    title="{{ $sermon->title }}"
                                    loading="lazy"
                                    allowfullscreen></iframe>
                        </div>
                        <div class="card-body p-3">
                            <h5 class="fw-bold mb-2">{{ $sermon->title }}</h5>
                            <p class="text-muted mb-2 small">
                                <i class="fas fa-user me-1" style="color: var(--gfc-accent);"></i> {{ $sermon->preacher }}
                                <span class="mx-1">|</span>
                                <i class="fas fa-book-open me-1" style="color: var(--gfc-accent);"></i> {{ $sermon->main_reading }}
                            </p>
                            <p class="text-muted small mb-3">
                                <i class="fas fa-calendar me-1" style="color: var(--gfc-accent);"></i>
                                {{ \Carbon\Carbon::parse($sermon->sermon_date)->format('j F Y') }}
                            </p>
                            @if($sermon->message)
                                <div class="mb-3">
                                    <p class="small mb-0 sermon-desc-short">{{ Str::limit($sermon->message, 150) }}</p>
                                    @if(strlen($sermon->message) > 150)
                                        <p class="small mb-0 sermon-desc-full d-none" style="white-space: pre-wrap;">{{ $sermon->message }}</p>
                                        <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none toggle-sermon-desc" style="color: var(--gfc-accent); font-size: 0.8rem;">
                                            Read more <i class="fas fa-chevron-down ms-1" style="font-size: 0.65rem;"></i>
                                        </button>
                                    @endif
                                </div>
                            @endif
                            <div class="text-center">
                                <a href="{{ $sermon->youtube_link }}" target="_blank" class="btn btn-gfc-secondary btn-sm">
                                    <i class="fab fa-youtube me-1"></i> Watch on YouTube
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="col-12 text-center text-muted py-5">
                    <i class="fab fa-youtube fa-3x mb-3" style="color: var(--gfc-accent);"></i>
                    <h5 class="fw-bold">Sermons Coming Soon</h5>
                    <p class="mb-3">Our latest messages will be posted here. In the meantime, watch and subscribe on YouTube.</p>
                    @if(setting('social.youtube'))
                        <a href="{{ setting('social.youtube') }}" target="_blank" class="btn btn-gfc-primary">
                            <i class="fab fa-youtube me-1"></i> Visit Our YouTube Channel
                        </a>
                    @endif
                </div>
            @endif
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-4">
            {{ $sermons->links() }}
        </div>

        <!-- CTA for more sermons -->
        <div class="cta-banner mt-5">
            <i class="fab fa-youtube fa-2x mb-3" style="color: var(--gfc-accent);"></i>
            <h4 class="mb-3">Looking for More Sermons?</h4>
            <p class="mb-4">
                We are showing the <strong>8 most recent sermons</strong> (covering approximately the last 2 months).
                Visit our YouTube channel to explore previous sermons and search for specific topics.
            </p>
            <a href="{{ setting('social.youtube', 'https://www.youtube.com/@gracefamilychurchcapetown') }}" target="_blank" class="btn btn-gfc-primary btn-lg">
                <i class="fab fa-youtube me-2"></i> Visit Our YouTube Channel
            </a>
        </div>

    </div>
</section>

@endsection

@section('javascript')
<script>
document.querySelectorAll('.toggle-sermon-desc').forEach(btn => {
    btn.addEventListener('click', function() {
        const parent = this.parentElement;
        const short = parent.querySelector('.sermon-desc-short');
        const full = parent.querySelector('.sermon-desc-full');
        const isExpanded = !full.classList.contains('d-none');

        if (isExpanded) {
            full.classList.add('d-none');
            short.classList.remove('d-none');
            this.innerHTML = 'Read more <i class="fas fa-chevron-down ms-1" style="font-size: 0.65rem;"></i>';
        } else {
            full.classList.remove('d-none');
            short.classList.add('d-none');
            this.innerHTML = 'Show less <i class="fas fa-chevron-up ms-1" style="font-size: 0.65rem;"></i>';
        }
    });
});
</script>
@endsection