{{--
    Pestaña "Demo en vivo" del formulario de eventos: la fila de la agenda y
    la página del evento en miniatura, con lo que el usuario lleva escrito.
    Datos: App\Filament\Resources\Events\Schemas\EventDemoData::fromForm().
--}}
@php
    $title = filled($event->title) ? $event->title : 'El título del evento aparecerá aquí';
    $type = $type ?? 'Tipo de evento';
    $cancelled = $event->is_cancelled;
    $label = $hasDate && ! $cancelled ? $event->timeLabel() : null;
    $canJoin = $hasDate && ! $cancelled && $event->isUpcoming();
    $month = $hasDate ? rtrim($event->starts_at->translatedFormat('M'), '.') : 'mes';
    $day = $hasDate ? $event->starts_at->format('j') : '–';
    $weekday = $hasDate ? rtrim($event->starts_at->translatedFormat('D'), '.') : 'día';
    $schedule = $hasDate ? $event->scheduleLabel() : 'Elige la fecha y la hora de inicio';
    $draft = $event->status !== \App\Enums\PublicationStatus::Published;
@endphp

{{-- Al abrir la pestaña se pide el estado actual del formulario (el editor
     solo lo envía al salir del campo). "armed" evita un bucle de refrescos. --}}
<div
    x-data="{ device: 'desktop' }"
    x-init="
        window.eventDemoArmed ??= true;
        new IntersectionObserver(([entry]) => {
            if (! entry.isIntersecting) { window.eventDemoArmed = true; return; }
            if (window.eventDemoArmed) { window.eventDemoArmed = false; $wire.$refresh(); }
        }).observe($el);
    "
    class="grid gap-6 2xl:grid-cols-[1fr_22rem]"
>
    <section class="min-w-0">
        <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
            <p class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                <x-filament::icon icon="heroicon-o-arrow-path" class="size-4" aria-hidden="true" />
                Muestra lo que llevas escrito. Aún no se guarda nada.
                @if ($draft)
                    <span class="rounded-md bg-gray-100 px-2 py-0.5 font-semibold dark:bg-white/10">Borrador: el público no lo verá</span>
                @endif
            </p>
            <div class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-white/10" role="group" aria-label="Tamaño de pantalla">
                @foreach (['desktop' => ['heroicon-o-computer-desktop', 'Escritorio'], 'mobile' => ['heroicon-o-device-phone-mobile', 'Celular']] as $key => [$icon, $text])
                    <button
                        type="button"
                        x-on:click="device = @js($key)"
                        x-bind:aria-pressed="device === @js($key)"
                        class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-semibold text-gray-600 transition dark:text-gray-300"
                        x-bind:class="device === @js($key) ? 'bg-[#122b57]! text-white! shadow-sm' : ''"
                    >
                        <x-filament::icon :icon="$icon" class="size-4" aria-hidden="true" />
                        {{ $text }}
                    </button>
                @endforeach
            </div>
        </div>

        {{-- Marco de navegador --}}
        <div
            class="mx-auto overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-gray-950/10 transition-all duration-300 dark:bg-gray-950 dark:ring-white/10"
            x-bind:class="device === 'mobile' ? 'max-w-[380px]' : 'max-w-[1000px]'"
        >
            <div class="flex items-center gap-2 border-b border-gray-200 bg-gray-50 px-3 py-2 dark:border-white/10 dark:bg-white/5" aria-hidden="true">
                <span class="size-2.5 rounded-full bg-[#ff5f57]"></span><span class="size-2.5 rounded-full bg-[#febc2e]"></span><span class="size-2.5 rounded-full bg-[#28c840]"></span>
                <span class="ms-2 flex-1 truncate rounded-md bg-white px-3 py-1 text-xs text-gray-500 ring-1 ring-gray-200 dark:bg-white/10 dark:text-gray-400 dark:ring-white/10">facultad.unamba.edu.pe/eventos/…</span>
            </div>

            <div class="nd-page @container max-h-[70vh] overflow-y-auto" x-bind:class="device === 'mobile' ? 'nd-mobile' : ''">
                <div class="flex items-center gap-2 bg-[#122b57] px-4 py-2.5 text-white">
                    <img src="{{ asset('images/brand/escudo-unamba.jpg') }}" alt="" class="size-6 rounded-full bg-white p-0.5">
                    <span class="text-xs font-bold [font-stretch:112%]">Facultad de Administración</span>
                </div>

                <header class="flex items-start gap-4 bg-[#122b57] px-5 pt-4 pb-6 text-white @lg:px-8">
                    <div class="hidden w-14 shrink-0 overflow-hidden rounded-lg bg-white text-center text-[#122b57] @lg:block" aria-hidden="true">
                        <span class="block bg-[#f28c28] py-0.5 text-[10px] font-bold tracking-wider text-[#1b1206] uppercase">{{ $month }}</span>
                        <span class="block pt-1 text-2xl leading-none font-extrabold">{{ $day }}</span>
                        <span class="block pb-1 text-[10px]">{{ $weekday }}</span>
                    </div>
                    <div class="min-w-0">
                        <p class="text-[11px] text-[#d5def0]">Inicio / Eventos</p>
                        <p class="mt-2 flex flex-wrap items-center gap-1.5 text-[11px]">
                            @if ($cancelled)
                                <span class="rounded bg-white px-2 py-0.5 font-bold text-[#122b57]">Cancelado</span>
                            @elseif ($label)
                                <span class="rounded bg-[#f28c28] px-2 py-0.5 font-bold text-[#1b1206]">{{ $label }}</span>
                            @endif
                            <span class="rounded bg-white/15 px-2 py-0.5 font-semibold">{{ $type }}</span>
                        </p>
                        <h1 class="nd-title mt-2 font-extrabold [font-stretch:120%] [overflow-wrap:anywhere] {{ $cancelled ? 'line-through' : '' }}">{{ $title }}</h1>
                        <p class="mt-2 text-sm text-[#d5def0]">{{ $schedule }}</p>
                    </div>
                </header>

                <div class="grid gap-5 px-5 py-5 @lg:grid-cols-[1fr_15rem] @lg:px-8">
                    {{-- Ficha --}}
                    <aside class="@lg:order-2">
                        <div class="rounded-xl bg-[#eef2f7] p-4 text-sm dark:bg-white/5">
                            @if ($cancelled)
                                <div class="mb-3 rounded-lg bg-white p-3 ring-1 ring-gray-950/10 dark:bg-white/5 dark:ring-white/10">
                                    <p class="font-bold">Evento cancelado</p>
                                    @if (filled($event->cancellation_note))
                                        <p class="mt-0.5 text-gray-600 [overflow-wrap:anywhere] dark:text-gray-400">{{ $event->cancellation_note }}</p>
                                    @endif
                                </div>
                            @endif
                            <dl class="grid gap-3">
                                <div>
                                    <dt class="text-xs font-semibold text-gray-500 dark:text-gray-400">Cuándo</dt>
                                    <dd class="font-semibold">{{ $schedule }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs font-semibold text-gray-500 dark:text-gray-400">Modalidad</dt>
                                    <dd class="font-semibold">{{ $event->modality->getLabel() }}</dd>
                                </div>
                                @if (filled($venue) || $campus)
                                    <div>
                                        <dt class="text-xs font-semibold text-gray-500 dark:text-gray-400">Dónde</dt>
                                        <dd class="font-semibold [overflow-wrap:anywhere]">
                                            {{ $venue }}
                                            @if ($campus)
                                                <span class="block font-normal text-gray-600 dark:text-gray-400">{{ $campus }}</span>
                                            @endif
                                            @if ($hasMap)
                                                <span class="text-[#22498f] underline dark:text-[#8fb0ee]">Ver en el mapa</span>
                                            @endif
                                        </dd>
                                    </div>
                                @endif
                                @if (filled($event->organizer))
                                    <div>
                                        <dt class="text-xs font-semibold text-gray-500 dark:text-gray-400">Organiza</dt>
                                        <dd class="font-semibold [overflow-wrap:anywhere]">{{ $event->organizer }}</dd>
                                    </div>
                                @endif
                            </dl>
                            @if ($canJoin && ($hasRegistration || $hasMeeting))
                                <div class="mt-4 grid gap-2 border-t border-gray-950/10 pt-4 dark:border-white/10">
                                    @if ($hasRegistration)
                                        <span class="rounded-lg bg-[#f28c28] px-3 py-2 text-center font-bold text-[#1b1206]">Inscribirme</span>
                                    @endif
                                    @if ($hasMeeting)
                                        <span class="rounded-lg px-3 py-2 text-center font-bold ring-1 ring-gray-950/15 dark:ring-white/20 {{ $hasRegistration ? '' : 'bg-[#f28c28] text-[#1b1206] ring-0' }}">Unirme a la videollamada</span>
                                    @endif
                                </div>
                            @elseif ($hasDate && ! $cancelled)
                                <p class="mt-4 border-t border-gray-950/10 pt-3 text-xs text-gray-600 dark:border-white/10 dark:text-gray-400">La fecha ya pasó: saldrá en «Pasados», sin botones de inscripción.</p>
                            @endif
                        </div>
                    </aside>

                    <div class="min-w-0 @lg:order-1">
                        @if ($cover)
                            <div class="mb-5 flex justify-center rounded-xl bg-[#eef2f7] p-2 dark:bg-white/5">
                                <img src="{{ $cover }}" alt="" class="max-h-80 w-auto max-w-full rounded-lg object-contain">
                            </div>
                        @endif
                        <div class="nd-body rich-content">
                            @if (filled($descriptionHtml))
                                {!! $descriptionHtml !!}
                            @else
                                <p class="text-gray-400">La descripción del evento aparecerá aquí: programa, ponentes, costo y todo lo que el asistente deba saber.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Fila en la agenda --}}
    <aside>
        <p class="mb-2 flex items-center gap-2 font-bold text-gray-950 dark:text-white">
            <x-filament::icon icon="heroicon-o-calendar-days" class="size-5 text-[#22498f] dark:text-[#8fb0ee]" aria-hidden="true" />
            Así sale en la agenda y en el inicio
        </p>
        <div class="flex items-start gap-3 rounded-2xl bg-white p-4 ring-1 ring-gray-950/10 dark:bg-gray-950 dark:ring-white/10">
            <div class="w-14 shrink-0 overflow-hidden rounded-lg text-center {{ $cancelled ? 'bg-gray-100 text-gray-500 dark:bg-white/10' : 'bg-[#122b57] text-white' }}" aria-hidden="true">
                <span class="block py-0.5 text-[10px] font-bold tracking-wider uppercase {{ $cancelled ? 'bg-gray-200 dark:bg-white/10' : 'bg-[#f28c28] text-[#1b1206]' }}">{{ $month }}</span>
                <span class="block pt-1 text-2xl leading-none font-extrabold {{ $cancelled ? 'line-through' : '' }}">{{ $day }}</span>
                <span class="block pb-1 text-[10px]">{{ $weekday }}</span>
            </div>
            <div class="min-w-0 flex-1 text-sm">
                <p class="flex flex-wrap items-center gap-1.5 text-xs">
                    @if ($cancelled)
                        <span class="rounded-md px-2 py-0.5 font-bold text-gray-600 ring-1 ring-gray-950/15 dark:text-gray-300 dark:ring-white/20">Cancelado</span>
                    @elseif ($label)
                        <span class="rounded-md bg-[#f28c28] px-2 py-0.5 font-bold text-[#1b1206]">{{ $label }}</span>
                    @endif
                    <span class="rounded-md bg-[#5a9a46]/15 px-2 py-0.5 font-semibold text-[#2f6522] dark:text-[#8fd07a]">{{ $type }}</span>
                </p>
                <p class="mt-1.5 leading-snug font-bold text-gray-950 [overflow-wrap:anywhere] dark:text-white {{ $cancelled ? 'line-through opacity-70' : '' }}">{{ $title }}</p>
                <p class="mt-1 text-gray-600 dark:text-gray-400">
                    {{ $hasDate ? $event->starts_at->format('H:i') : '--:--' }} · {{ $event->modality->getLabel() }}@if (filled($venue)) · {{ $venue }}@endif
                </p>
            </div>
        </div>
        @unless ($cover)
            <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Sin portada no pasa nada: en la agenda manda la fecha.</p>
        @endunless
    </aside>
</div>