@props(['navbar' => true])

@if ($navbar)
    <div x-data="{ open: false, worklistOpen: false, agendaOpen: false  }" class="bg-sky-700 text-white flex flex-col justify-between shadow-lg h-screen">

        <div @mouseover="open = true" @mouseleave="open = false"
             class="transition-all duration-300 ease-in-out overflow-y-auto overflow-x-hidden w-20 hover:w-64">
            <div class="flex flex-col h-full">

                <div class="flex items-center h-20 px-6 border-b border-sky-800">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 flex-shrink-0">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h7.5" />
                    </svg>
                    <span x-show="open" x-cloak class="ml-4 text-lg font-bold whitespace-nowrap">
                        {{ auth()->user()->empresa->nombre ?? 'RIS-PACS' }}
                    </span>
                </div>

                <nav class="flex-1 px-4 py-4 space-y-2">
                    
                    <a href="{{ route('admin.panel') }}" class="flex items-center px-2 py-2.5 rounded-md hover:bg-sky-600 transition-colors duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 100 15 7.5 7.5 0 000-15zM21 21l-5.197-5.197" /></svg>
                        <span x-show="open" x-cloak class="ml-4 whitespace-nowrap">Dashboard</span>
                    </a>
                    <div>
                        <button @click="agendaOpen = !agendaOpen" class="w-full flex justify-between items-center px-2 py-2.5 rounded-md hover:bg-sky-600 transition-colors duration-200">
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 flex-shrink-0">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75v-1.5A1.5 1.5 0 019.75 3.75h4.5a1.5 1.5 0 011.5 1.5v1.5m2.25 0H5.25M18.75 6.75v12A2.25 2.25 0 0116.5 21H7.5a2.25 2.25 0 01-2.25-2.25v-12h13.5z" />
                                </svg>
                                <span x-show="open" x-cloak class="ml-4 whitespace-nowrap">Agenda</span>
                            </div>
                            <svg x-show="open" x-cloak :class="{'rotate-180': agendaOpen}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div x-show="open && agendaOpen" x-cloak x-collapse class="pl-8 pt-2 space-y-1">
                            @php
                            $tipo = session('tipo_agenda');
                            \Illuminate\Support\Facades\Log::info("🧭 Tipo de agenda actual desde la sesión: {$tipo}");
                        @endphp
                        
                        @if ($tipo === 'psicologo')
                            <a href="{{ route('psicologo.index') }}" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">Agenda Psicológica</a>
                        @elseif ($tipo === 'clinica')
                            <a href="{{ route('agenda.index') }}" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">Agenda Clínica</a>
                        @elseif ($tipo === 'fisioterapeuta')
                            <a href="{{ route('agenda.fisio.index') }}" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">Agenda Fisioterapia</a>
                        @elseif ($tipo === 'laboratorio')
                            <a href="{{ route('agenda.lab.index') }}" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">Agenda Laboratorio</a>
                        @else
                            <a href="{{ route('agenda.index') }}" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">Agenda Médica</a>
                        @endif
                                                </div>
                    </div>
                    
                    <div>
                        <button @click="worklistOpen = !worklistOpen" class="w-full flex justify-between items-center px-2 py-2.5 rounded-md hover:bg-sky-600 transition-colors duration-200">
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08H4.123a48.424 48.424 0 00-1.123.08C1.845 3.965 1 4.973 1 6.108V18.75A2.25 2.25 0 003.25 21h10.5M15 12h3.75M15 15h3.75M15 18h3.75" /></svg>
                                <span x-show="open" x-cloak class="ml-4 whitespace-nowrap">Worklist</span>
                            </div>
                            <svg x-show="open" x-cloak :class="{'rotate-180': worklistOpen}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div x-show="open && worklistOpen" x-cloak x-collapse class="pl-8 pt-2 space-y-1">
                            <a href="#" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">Por Realizar</a>
                            <a href="#" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">En Progreso</a>
                            <a href="#" class="block px-2 py-1.5 text-sm rounded-md hover:bg-sky-600 transition-colors duration-200 whitespace-nowrap">Validados</a>
                        </div>
                    </div>

                    <a href="#" class="flex items-center px-2 py-2.5 rounded-md hover:bg-sky-600 transition-colors duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.003c0 1.113.285 2.16.786 3.07M15 19.128c-1.113 0-2.16-.285-3.07-.786m7.533-6.163a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0zM12.75 18.75a4.5 4.5 0 000-9 .5.5 0 01.485.404l.168.672A4.5 4.5 0 0018.75 9.75h.375a4.5 4.5 0 000-9h-.375a4.5 4.5 0 00-4.06 6.672l-.168.672a.5.5 0 01-.485.404z" /></svg>
                        <span x-show="open" x-cloak class="ml-4 whitespace-nowrap">Pacientes</span>
                    </a>

                </nav>
            </div>
        </div>

        <div class="px-4 py-3 border-t border-sky-800" :class="{'w-64': open, 'w-20': !open}">
            <a href="{{ route('logout') }}"
               onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
               class="flex items-center px-2 py-2 rounded-md hover:bg-sky-600 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>
                <span x-show="open" x-cloak class="ml-4 whitespace-nowrap">Cerrar sesión</span>
            </a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">@csrf</form>
        </div>
    </div>
@endif

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>