@php
    /** @var \V2\Modules\Publicacoes\Agenda\Models\Evento $evento */
    /** @var string $htmlContent */
    /** @var array $topicos */
    /** @var array $schedule */
    $pageTitle = $evento->title . ' — Agenda SUCESU';
    $metaDescription = strip_tags($evento->description ?? '');
    $metaImage = $evento->getImageUrl();
    $eventId = str_replace('-', '_', $evento->id);
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => $pageTitle,
    'title'                 => $evento->title,
    'pageDescription'       => str_limit($metaDescription, 160),
    'coverImage'            => $metaImage,
    'gtag'                  => ['page_context' => 'evento'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'Event',
            'name' => $evento->title,
            'description' => $metaDescription,
            'image' => $metaImage,
            'startDate' => $evento->event_date_start->toIso8601String(),
            'endDate' => $evento->event_date_end ? $evento->event_date_end->toIso8601String() : $evento->event_date_start->toIso8601String(),
            'location' => $evento->location ? [
                '@type' => 'Place',
                'name' => $evento->location,
            ] : null,
            'organizer' => $evento->organizer ? [
                '@type' => 'Organization',
                'name' => $evento->organizer,
            ] : null,
            'mainEntityOfPage' => ['@type' => 'WebPage', '@id' => request()->url()]
        ]
    ],
    'showAccessibilityBar'  => true,
    'stickyAccessibilityBar'=> false,
    'showHeader'            => true,
    'showMainHeader'        => true,
    'showMainFooter'        => true,
    'showFooter'            => true,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
    'fullWidthMain'         => false,
])

@section('breadcrumbs')
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="{{ route('v2.agenda.portal.index') }}" itemprop="item" class="text-muted text-decoration-none"><span itemprop="name">Agenda</span></a>
        <meta itemprop="position" content="2">
    </li>
    <li class="breadcrumb-item active" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
        <span itemprop="name">{{ $evento->title }}</span>
        <meta itemprop="position" content="3">
    </li>
@endsection

@section('main-section-area')
    <article id="evento-conteudo-{{ $eventId }}" class="evento-detalhe py-4">

        {{-- HERO COVER --}}
        @if($evento->getImageUrl())
            <div class="mb-4">
                <img alt="{{ $evento->title }}"
                     src="{{ $evento->getImageUrl() }}"
                     class="w-100"
                     style="max-height: 420px; object-fit: cover; border-radius: 8px;"
                     loading="eager" decoding="async">
            </div>
        @endif

        {{-- HEADER: Título + Metadados --}}
        <header class="evento-header mb-4">
            <h2 class="evento-title fw-bold mb-3">
                {{ $evento->title }}
            </h2>

            <div class="d-flex flex-wrap gap-3 align-items-center mb-3">
                {{-- Data/Hora --}}
                <span class="d-inline-flex align-items-center gap-2 text-dark fw-medium">
                    <i class="bi bi-calendar3 evento-icon" aria-hidden="true"></i>
                    <time datetime="{{ $evento->event_date_start->toIso8601String() }}">
                        {{ $evento->event_date_start->format('d/m/Y') }}
                    </time>
                    <span class="text-muted">•</span>
                    <time datetime="{{ $evento->event_date_start->format('H:i') }}">
                        {{ $evento->event_date_start->format('H:i') }}
                    </time>
                    @if($evento->event_date_end)
                        <span class="text-muted">–</span>
                        <time datetime="{{ $evento->event_date_end->format('H:i') }}">
                            {{ $evento->event_date_end->format('H:i') }}
                        </time>
                        @if($evento->event_date_end->format('d/m/Y') !== $evento->event_date_start->format('d/m/Y'))
                            <span class="text-muted">•</span>
                            <time datetime="{{ $evento->event_date_end->toIso8601String() }}">
                                {{ $evento->event_date_end->format('d/m/Y') }}
                            </time>
                        @endif
                    @endif
                </span>

                {{-- Local --}}
                @if($evento->location)
                    <span class="d-inline-flex align-items-center gap-2 text-dark fw-medium">
                        <i class="bi bi-geo-alt evento-icon" aria-hidden="true"></i>
                        {{ $evento->location }}
                    </span>
                @endif

                {{-- Organizador --}}
                @if($evento->organizer)
                    <span class="d-inline-flex align-items-center gap-2 text-dark fw-medium">
                        <i class="bi bi-person evento-icon" aria-hidden="true"></i>
                        {{ $evento->organizer }}
                    </span>
                @endif
            </div>
        </header>

        {{-- DESCRIÇÃO — adaptada ao tema SUCESU, sem bg-white/shadow que conflitam --}}
        @if(!empty($htmlContent))
            <section class="evento-body mb-5 py-4 px-3 evento-sidebar">
                {!! $htmlContent !!}
            </section>
        @elseif($evento->description)
            <section class="evento-body mb-5 py-4 px-3 evento-sidebar">
                <p class="mb-0 text-dark">{{ $evento->description }}</p>
            </section>
        @endif

        {{-- TÓPICOS --}}
        @if(!empty($topicos))
            <section class="mb-5">
                <h2 class="h5 fw-bold mb-3 d-flex align-items-center gap-2 evento-section-title">
                    <i class="bi bi-check2-square" aria-hidden="true"></i>
                    Tópicos do Evento
                </h2>
                <ul class="list-unstyled mb-0 row g-2">
                    @foreach($topicos as $topico)
                        <li class="col-md-6 col-lg-4">
                            <span class="d-flex align-items-center gap-2 px-3 py-2 text-dark fw-medium" style="background: var(--color-bg-canvas); border-radius: 6px;">
                                <i class="bi bi-check-circle-fill flex-shrink-0 evento-icon" style="font-size: 0.875rem;" aria-hidden="true"></i>
                                {{ $topico }}
                            </span>
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif

        {{-- PÚBLICO-ALVO --}}
        @if($evento->target_audience)
            <section class="mb-5">
                <h2 class="h5 fw-bold mb-3 d-flex align-items-center gap-2 evento-section-title">
                    <i class="bi bi-people" aria-hidden="true"></i>
                    Público-Alvo
                </h2>
                <p class="mb-0 px-3 py-3 text-dark fw-medium" style="background: var(--color-bg-canvas); border-radius: 6px;">
                    <i class="bi bi-person-badge me-2 evento-icon" aria-hidden="true"></i>
                    {{ $evento->target_audience }}
                </p>
            </section>
        @endif

        {{-- PROGRAMAÇÃO — Interactive Table --}}
        @if(!empty($schedule))
            <section class="mb-5" id="programacao-{{ $eventId }}">
                <h2 class="h5 fw-bold mb-3 d-flex align-items-center gap-2 evento-section-title">
                    <i class="bi bi-table" aria-hidden="true"></i>
                    Programação
                </h2>

                {{-- Search --}}
                <div class="mb-3 schedule-interactive-table"
                     data-event-id="{{ $eventId }}"
                     role="region"
                     aria-label="Tabela interativa da programação do evento {{ $evento->title }}">
                    <div class="d-flex justify-content-end">
                        <div class="position-relative" style="max-width: 300px; width: 100%;">
                            <label for="schedule-search-{{ $eventId }}" class="visually-hidden">Pesquisar na programação</label>
                            <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary" aria-hidden="true"></i>
                            <input type="text"
                                   id="schedule-search-{{ $eventId }}"
                                   class="form-control form-control-sm schedule-search-input"
                                   style="padding-left: 2.25rem; padding-right: 2.25rem;"
                                   placeholder="Pesquisar na programação..."
                                   aria-controls="schedule-table-{{ $eventId }}">
                            <button type="button"
                                    class="btn btn-sm position-absolute top-50 end-0 translate-middle-y border-0 text-secondary schedule-search-clear"
                                    aria-label="Limpar pesquisa"
                                    style="display: none; background: transparent;">
                                <i class="bi bi-x-lg" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Table --}}
                    <div class="table-responsive">
                        <table id="schedule-table-{{ $eventId }}"
                               class="table table-bordered table-hover align-middle mb-0 schedule-table" aria-label="Detalhes do evento">
                            <caption class="visually-hidden">Programação do evento {{ $evento->title }}</caption>
                            <thead class="table-dark">
                                <tr>
                                    <th scope="col" style="width: 20%;">Horário</th>
                                    <th scope="col" style="width: 45%;">Atividade</th>
                                    <th scope="col" style="width: 35%;">Palestrante</th>
                                </tr>
                            </thead>
                            <tbody aria-live="polite">
                                @forelse($schedule as $item)
                                    <tr class="schedule-row">
                                        <td class="text-nowrap fw-medium text-dark">
                                            <i class="bi bi-clock-history me-1 evento-icon" aria-hidden="true"></i>
                                            {{ $item['time'] ?? '-' }}
                                        </td>
                                        <td class="text-dark">{{ $item['activity'] ?? '-' }}</td>
                                        <td>
                                            @if(!empty($item['speaker']))
                                                <span class="d-inline-flex align-items-center gap-1 text-dark">
                                                    <i class="bi bi-person-circle text-secondary" aria-hidden="true"></i>
                                                    {{ $item['speaker'] }}
                                                </span>
                                            @else
                                                <span class="text-secondary">–</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center py-4 text-secondary">
                                            <i class="bi bi-info-circle d-block mb-2" style="font-size: 1.5rem;" aria-hidden="true"></i>
                                            Nenhum item na programação.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- No results message --}}
                    <div class="schedule-no-results text-center py-3 text-secondary" role="status" aria-live="assertive" style="display: none;">
                        <i class="bi bi-search d-block mb-1" style="font-size: 1.25rem;" aria-hidden="true"></i>
                        <p class="mb-0">Nenhum item encontrado para <strong class="schedule-search-term"></strong>.</p>
                    </div>
                </div>
            </section>
        @endif

        {{-- BACK --}}
        <div class="text-center mt-4 pt-3" style="border-top: 1px solid var(--color-bg-canvas, #dee2e6);">
            <a href="{{ route('v2.agenda.portal.index') }}"
               class="btn btn-outline-primary px-5">
                <i class="bi bi-arrow-left me-2" aria-hidden="true"></i>
                Voltar para Agenda
            </a>
        </div>
    </article>
@endsection

@push('head-styles')
<style>
    .evento-title {
        font-size: 2.25rem;
        line-height: 1.2;
        color: var(--tenant-primary, #1075ad);
    }
    .evento-icon {
        color: var(--tenant-primary, #1075ad);
    }
    .evento-section-title {
        color: var(--tenant-primary, #1075ad);
    }
    .evento-sidebar {
        border-left: 4px solid var(--tenant-primary, #1075ad);
        background: #f8f9fa;
    }
    .evento-badge {
        background-color: var(--tenant-primary, #1075ad) !important;
        border-color: var(--tenant-primary, #1075ad) !important;
    }

    .evento-detalhe {
        max-width: 960px;
        margin: 0 auto;
    }

    /* Descrição rica — estilos otimizados para o conteúdo renderizado */
    .evento-body {
        font-size: 1.0625rem;
        line-height: 1.85;
        color: #212529;
        border-radius: 4px;
    }
    .evento-body h2,
    .evento-body h3,
    .evento-body h4 {
        margin-top: 1.75rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
        color: var(--tenant-primary, #1075ad);
    }
    .evento-body p {
        margin-bottom: 1.125rem;
    }
    .evento-body img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        margin: 1.5rem 0;
    }
    .evento-body ul,
    .evento-body ol {
        margin-bottom: 1.125rem;
        padding-left: 1.5rem;
    }
    .evento-body li {
        margin-bottom: 0.35rem;
    }
    .evento-body blockquote {
        border-left: 4px solid var(--tenant-primary, #1075ad);
        padding: 0.75rem 1.25rem;
        margin: 1.25rem 0;
        background: #f1f3f5;
        border-radius: 0 4px 4px 0;
        font-style: italic;
    }
    .evento-body a {
        color: var(--tenant-primary, #1075ad);
        text-decoration: underline;
        font-weight: 500;
    }

    /* Tabela de programação */
    .schedule-table th {
        background-color: var(--tenant-primary) !important;
        color: #fff !important;
        font-weight: 600;
        border-color: var(--tenant-primary) !important;
    }
    .schedule-table td {
        border-color: #dee2e6 !important;
    }
    .schedule-table tbody tr:last-child td {
        border-bottom: 1px solid #dee2e6 !important;
    }

    /* Busca */
    .schedule-search-input:focus {
        border-color: var(--tenant-primary, #1075ad);
        box-shadow: 0 0 0 2px rgba(26, 60, 110, 0.15);
    }
</style>
@endpush

@push('scripts')
<script>
    (function() {
        var eventId = '{{ $eventId }}';
        var container = document.querySelector('.schedule-interactive-table[data-event-id="' + eventId + '"]');
        if (!container) return;

        var searchInput = container.querySelector('.schedule-search-input');
        var table = container.querySelector('.schedule-table');
        if (!searchInput || !table) return;

        var tbody = table.querySelector('tbody');
        var rows = tbody.querySelectorAll('tr.schedule-row');
        var noResults = container.querySelector('.schedule-no-results');
        var clearBtn = container.querySelector('.schedule-search-clear');
        var searchTermSpan = container.querySelector('.schedule-search-term');

        var rowCache = Array.from(rows).map(function(row) {
            var cells = row.querySelectorAll('td');
            return {
                el: row,
                text: Array.from(cells).map(function(c) { return c.textContent.trim().toLowerCase(); }).join(' ')
            };
        });

        function filterTable() {
            var term = searchInput.value.trim().toLowerCase();

            if (term === '') {
                rowCache.forEach(function(r) { r.el.style.display = ''; });
                noResults.style.display = 'none';
                if (clearBtn) clearBtn.style.display = 'none';
                return;
            }

            if (clearBtn) clearBtn.style.display = '';

            var terms = term.split(/\s+/);
            var visible = 0;

            rowCache.forEach(function(r) {
                var match = terms.every(function(t) {
                    try { return new RegExp(t, 'i').test(r.text); }
                    catch (e) { return r.text.indexOf(t) !== -1; }
                });
                r.el.style.display = match ? '' : 'none';
                if (match) visible++;
            });

            if (visible === 0) {
                if (searchTermSpan) searchTermSpan.textContent = searchInput.value.trim();
                noResults.style.display = 'block';
            } else {
                noResults.style.display = 'none';
            }
        }

        var debounceTimer;
        searchInput.addEventListener('input', function() {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(filterTable, 200);
        });

        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                clearTimeout(debounceTimer);
                filterTable();
            }
        });

        if (clearBtn) {
            clearBtn.addEventListener('click', function() {
                searchInput.value = '';
                filterTable();
                searchInput.focus();
            });
        }
    })();
</script>
@endpush