@extends('layouts.admin')

@section('content')

<div class="container-fluid">

    <!-- Page Header -->
    <div class="admin-page-header">
        <div>
            <h2><i class="fas fa-bible me-2" style="color: var(--admin-accent);"></i> Manage Sermons</h2>
            <small>View, edit, or remove sermons displayed on the church website.</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.sermons.export') }}" class="btn btn-admin-secondary btn-sm">
                <i class="fas fa-download me-1"></i> Export CSV
            </a>
            <a href="{{ route('admin.sermons.add') }}" class="btn btn-admin-primary">
                <i class="fas fa-plus me-1"></i> Add Sermon
            </a>
        </div>
    </div>

    <!-- Info Box -->
    <div class="admin-info-box">
        <p><strong>Admin Note:</strong> Use this page to manage sermons on the public sermons page. Keep this section updated so visitors can easily access recent teachings.</p>
        <p class="scripture mb-0">"Preach the word; be ready in season and out of season." — 2 Timothy 4:2</p>
    </div>

    <!-- Alerts -->
    @include('partials.alerts')

    <!-- Filter / Search -->
    <form method="GET" action="{{ route('admin.sermons') }}" class="admin-filter-bar mb-3">
        <div class="row g-2 align-items-center">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="Search by title, preacher, or passage…">
                </div>
            </div>
            <div class="col-md-3">
                <select name="preacher" class="form-select">
                    <option value="">All preachers</option>
                    @foreach($preachers as $p)
                        <option value="{{ $p }}" {{ $preacher === $p ? 'selected' : '' }}>{{ $p }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-admin-primary flex-grow-1"><i class="fas fa-filter me-1"></i> Filter</button>
                @if($q !== '' || $preacher !== '')
                    <a href="{{ route('admin.sermons') }}" class="btn btn-outline-secondary"><i class="fas fa-times"></i></a>
                @endif
            </div>
        </div>
    </form>

    @if($q !== '' || $preacher !== '')
        <p class="text-muted small mb-3">Showing {{ $sermons->total() }} result{{ $sermons->total() === 1 ? '' : 's' }}@if($q) for "<strong>{{ $q }}</strong>"@endif.</p>
    @endif

    @if($sermons->count() > 0)
        <div class="admin-table">
            <table class="table table-striped table-hover mb-0">
                <thead class="admin-table-head">
                    <tr>
                        <th><i class="fas fa-heading me-1"></i> Title</th>
                        <th><i class="fas fa-user me-1"></i> Preacher</th>
                        <th><i class="fas fa-book-open me-1"></i> Passage</th>
                        <th><i class="fas fa-calendar me-1"></i> Date</th>
                        <th width="180"><i class="fas fa-cogs me-1"></i> Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sermons as $sermon)
                        <tr>
                            <td class="fw-semibold">{{ $sermon->title }}</td>
                            <td>{{ $sermon->preacher }}</td>
                            <td>{{ $sermon->main_reading }}</td>
                            <td>{{ \Carbon\Carbon::parse($sermon->sermon_date)->format('j F Y') }}</td>
                            <td>
                                @include('partials.admin-actions', ['actions' => [
                                    ['type' => 'modal', 'label' => 'View', 'icon' => 'fa-eye', 'target' => '#sermonModal-'.$sermon->id],
                                    ['type' => 'link', 'label' => 'Edit', 'icon' => 'fa-pen', 'url' => route('admin.sermons.edit', $sermon)],
                                    ['type' => 'form', 'label' => 'Delete', 'icon' => 'fa-trash', 'url' => route('admin.sermons.delete', $sermon), 'method' => 'DELETE', 'danger' => true,
                                        'confirm' => ['title' => 'Delete Sermon?', 'message' => 'This will permanently remove this sermon. This cannot be undone.', 'confirmText' => 'Yes, Delete']],
                                ]])
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-3">
            {{ $sermons->links() }}
        </div>
    @else
        <div class="admin-empty-state">
            <div class="empty-icon">
                <i class="fas fa-bible"></i>
            </div>
            @if($q !== '' || $preacher !== '')
                <h4>No Matching Sermons</h4>
                <p class="text-muted mb-4">No sermons match your search. Try different keywords or clear the filter.</p>
                <a href="{{ route('admin.sermons') }}" class="btn btn-admin-secondary"><i class="fas fa-times me-1"></i> Clear Filter</a>
            @else
                <h4>No Sermons Found</h4>
                <p class="text-muted mb-4">
                    There are currently no sermons in the system. Once sermons are added, they will appear here and on the public sermons page.
                </p>
                <a href="{{ route('admin.sermons.add') }}" class="btn btn-admin-primary">
                    <i class="fas fa-plus me-1"></i> Add the First Sermon
                </a>
            @endif
        </div>
    @endif

</div>

{{-- Sermon View Modals --}}
@if(isset($sermons) && $sermons->count() > 0)
    @foreach($sermons as $sermon)
        <div class="modal fade" id="sermonModal-{{ $sermon->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content sermon-modal">
                    <div class="sermon-modal-header">
                        <span class="sermon-modal-eyebrow"><i class="fas fa-bible me-2"></i> Sermon</span>
                        <h4 class="sermon-modal-title">{{ $sermon->title }}</h4>
                        <button type="button" class="btn-close btn-close-white sermon-modal-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        @if($sermon->youtube_link)
                            <div class="ratio ratio-16x9 mb-4 rounded-3 overflow-hidden shadow-sm">
                                <iframe src="https://www.youtube.com/embed/{{ $sermon->youtube_id }}" title="{{ $sermon->title }}" allowfullscreen></iframe>
                            </div>
                        @endif

                        <div class="sermon-meta-grid">
                            <div class="sermon-meta">
                                <span class="sermon-meta-ico"><i class="fas fa-user"></i></span>
                                <span><small>Preacher</small><strong>{{ $sermon->preacher }}</strong></span>
                            </div>
                            <div class="sermon-meta">
                                <span class="sermon-meta-ico"><i class="fas fa-book-open"></i></span>
                                <span><small>Main Reading</small><strong>{{ $sermon->main_reading }}</strong></span>
                            </div>
                            <div class="sermon-meta">
                                <span class="sermon-meta-ico"><i class="fas fa-calendar"></i></span>
                                <span><small>Date Preached</small><strong>{{ \Carbon\Carbon::parse($sermon->sermon_date)->format('j F Y') }}</strong></span>
                            </div>
                        </div>

                        @if($sermon->message)
                            <div class="mt-4">
                                <label class="fw-bold text-muted small d-block mb-1"><i class="fas fa-quote-left me-1" style="color: var(--admin-accent);"></i> Key Message</label>
                                <p class="mb-0" style="white-space: pre-wrap; line-height:1.7;">{{ $sermon->message }}</p>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer justify-content-between border-0 px-4 pb-4">
                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.sermons.edit', $sermon) }}" class="btn btn-sm btn-admin-primary">
                                <i class="fas fa-pen me-1"></i> Edit
                            </a>
                            @if($sermon->youtube_link)
                                <a href="{{ $sermon->youtube_link }}" target="_blank" class="btn btn-sm btn-outline-danger">
                                    <i class="fab fa-youtube me-1"></i> Watch
                                </a>
                            @endif
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endif

@endsection