LauckCycles/resources/views/agenda.blade.php

<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="w-full xl:w-auto text-center px-5 py-3 text-sm font-bold text-neon-lime dark:text-neutral-900 bg-neutral-950 dark:bg-neon-lime rounded-lg hover:bg-neutral-900/80 hover:dark:bg-[#b3e600] transition-colors uppercase tracking-wide">
            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 p-4 bg-neutral-950/60 backdrop-blur-sm transition-all duration-300">

    <div class="relative p-6 rounded-2xl w-full max-w-sm shadow-2xl border transition-all transform scale-100
                bg-white border-neutral-200 text-neutral-900
                dark:bg-neutral-900 dark:border-neutral-800 dark:text-white">

        <!-- Close button (X) -->
        <button id="closeModalCross" class="absolute top-4 right-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-350 transition-colors p-1.5 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        <!-- Header -->
        <div class="flex justify-between items-center mb-5 pb-3 border-b border-neutral-200 dark:border-neutral-800 pr-8">
            <h3 class="text-base font-black text-neutral-900 dark:text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-neutral-500 dark:text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
                </svg>
                Detalle del Turno
            </h3>
            <span id="modalStatusBadge" class="px-2.5 py-0.5 text-xs font-black rounded-full uppercase tracking-wider border"></span>
        </div>

        <!-- Info Grid -->
        <div class="space-y-4 mb-6">
            <!-- Dueño -->
            <div class="flex items-start gap-3">
                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
                </div>
                <div>
                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Dueño</p>
                    <p id="modalClientName" class="font-extrabold text-sm text-neutral-800 dark:text-neutral-100"></p>
                </div>
            </div>

            <!-- Modelo de Bicicleta -->
            <div class="flex items-start gap-3">
                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581a1.125 1.125 0 0 0 1.591 0l7.261-7.26a1.125 1.125 0 0 0 0-1.591L12.51 3.659A2.25 2.25 0 0 0 10.917 3H9.568Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z"/></svg>
                </div>
                <div>
                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Modelo de Bicicleta</p>
                    <p id="modalBikeModel" class="font-bold text-sm text-neutral-800 dark:text-neutral-100"></p>
                </div>
            </div>

            <!-- Día y Horario Pactado -->
            <div class="flex items-start gap-3">
                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
                </div>
                <div>
                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Día y Horario Pactado</p>
                    <p id="modalDateTime" class="font-bold text-sm text-neutral-800 dark:text-neutral-100"></p>
                </div>
            </div>
        </div>

        <!-- Acciones -->
        <div class="flex justify-end gap-2 pt-3 border-t border-neutral-100 dark:border-neutral-800">
            <button id="closeModal"
                class="px-4 py-2 text-xs font-bold rounded-lg transition-colors
                       bg-neutral-100 hover:bg-neutral-200 text-neutral-700
                       dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-white">
                Cerrar
            </button>

            <a id="viewEventBtn"
               class="px-4 py-2 text-xs font-bold rounded-lg transition-colors flex items-center gap-1.5
                      bg-neutral-950 hover:bg-neutral-900/80 text-neon-lime
                      dark:bg-neon-lime dark:hover:bg-[#b3e600] dark:text-neutral-900">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                Ver Detalle Completo
            </a>
        </div>
    </div>
</div>