<x-layout title="Agenda">
    <style>
        :root {
            --fc-border-color: #979393a4 !important; 
        }
        html.dark {
            --fc-border-color: #5c5a5b !important; 
        }
    </style>

    <div class="flex w-full justify-between items-end mb-6">

        <div>
            <x-section-header 
                subtitle="Gestor de Eventos" 
                title="Agenda" 
                highlight="Lauck" 
            />
        </div>
    
        <a href="{{ route('taller.index') }}" 
           class="px-5 py-2.5 bg-neutral-900 text-white hover:bg-neutral-700 dark:bg-neon-lime dark:text-neutral-900 dark:hover:bg-[#b3e600] font-bold rounded-lg uppercase tracking-wide text-xs flex items-center gap-2">
            Volver a Taller
        </a>
        
    </div>

    <script>
        window.appointments = @json($appointments);
    </script>
    <script>
        window.appointmentShowTemplate = "{{ route('appointments.show', ':id') }}";
    </script>
    
    <div id="calendar" class="w-full rounded-xl py-3 px-3 bg-white border border-neutral-200 shadow-sm dark:bg-neutral-900/50 dark:border-neutral-800 dark:shadow-none"></div>

</x-layout>

<div id="eventModal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center">

    <div class="relative p-6 rounded-xl w-96 shadow-2xl border
                bg-white border-neutral-200 text-neutral-900
                dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">

        <h2 id="modalTitle" class="text-xl font-bold mb-2 text-neutral-900 dark:text-white"></h2>

        <p id="modalDate" class="mb-4 text-neutral-500 dark:text-gray-300"></p>

        <div class="flex justify-end gap-2">
            <button id="closeModal"
                class="px-4 py-2 rounded-lg
                       bg-neutral-100 hover:bg-neutral-200 text-neutral-700
                       dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">
                Cerrar
            </button>

            <a id="viewEventBtn"
               class="px-4 py-2 font-bold rounded-lg
                      bg-neutral-900 hover:bg-neutral-700 text-white
                      dark:bg-neon-lime dark:hover:bg-[#b3e600] dark:text-neutral-900">
                Ver turno
            </a>
        </div>
    </div>
</div>