{{-- Navbar Superior --}}
<nav class="main-navbar">
    {{-- Toggle Sidebar (móvil) --}}
    <button class="navbar-toggle" id="sidebarToggle" type="button">
        <i class="fas fa-bars"></i>
    </button>

    {{-- Breadcrumb --}}
    <div class="navbar-breadcrumb">
        <h1>@yield('page-title', 'Dashboard')</h1>
        @hasSection('breadcrumb')
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Inicio</a></li>
                    @yield('breadcrumb')
                </ol>
            </nav>
        @endif
    </div>

    {{-- Actions --}}
    <div class="navbar-actions">
        {{-- Notificaciones --}}
        <div class="dropdown">
            <button class="btn-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-bell"></i>
                @php
                    $notificaciones = \App\Models\Alerta::where('estado', 'ACTIVA')
                        ->orderBy('fecha_genera', 'desc')
                        ->limit(5)
                        ->get();
                    $totalNotif = $notificaciones->count();
                @endphp
                @if($totalNotif > 0)
                <span class="badge rounded-pill">{{ $totalNotif }}</span>
                @endif
            </button>
            <div class="dropdown-menu dropdown-menu-end" style="width: 320px;">
                <h6 class="dropdown-header">Notificaciones</h6>
                @forelse($notificaciones as $notif)
                <a class="dropdown-item" href="{{ route('web.alertas.show', $notif->alerta_id) }}">
                    <i class="fas fa-exclamation-triangle text-{{ $notif->prioridad == 'ALTA' ? 'danger' : ($notif->prioridad == 'MEDIA' ? 'warning' : 'info') }}"></i>
                    <div class="flex-grow-1">
                        <div class="small text-truncate">{{ $notif->titulo }}</div>
                        <small class="text-muted">{{ $notif->fecha_genera?->diffForHumans() ?? '-' }}</small>
                    </div>
                </a>
                @empty
                <div class="dropdown-item text-muted text-center py-3">
                    <i class="fas fa-check-circle d-block mb-2" style="font-size: 1.5rem;"></i>
                    Sin alertas pendientes
                </div>
                @endforelse
                @if($totalNotif > 0)
                <div class="dropdown-divider"></div>
                <a class="dropdown-item text-center text-primary" href="{{ route('web.alertas.index') }}">
                    Ver todas las alertas
                </a>
                @endif
            </div>
        </div>

        {{-- Usuario --}}
        <div class="dropdown">
            <button class="btn-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-user-circle"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-end">
                <div class="px-3 py-2 border-bottom">
                    <div class="fw-semibold">{{ auth()->user()->name }}</div>
                    <small class="text-muted">{{ auth()->user()->email }}</small>
                </div>
                <a class="dropdown-item" href="{{ route('web.perfil') }}">
                    <i class="fas fa-user"></i>
                    Mi Perfil
                </a>
                <a class="dropdown-item" href="{{ route('web.cambiar-password') }}">
                    <i class="fas fa-key"></i>
                    Cambiar Contraseña
                </a>
                <div class="dropdown-divider"></div>
                <form action="{{ route('web.logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="dropdown-item text-danger">
                        <i class="fas fa-sign-out-alt"></i>
                        Cerrar Sesión
                    </button>
                </form>
            </div>
        </div>
    </div>
</nav>