{{-- Header --}}
@php
    $tipoLabels = [
        1 => ['label' => 'Administrador', 'color' => 'danger'],
        2 => ['label' => 'Cobrador',       'color' => 'primary'],
        3 => ['label' => 'Tramitador',     'color' => 'info'],
        4 => ['label' => 'Cob/Trámites',   'color' => 'warning'],
        5 => ['label' => 'Informaciones',  'color' => 'secondary'],
    ];
    $tipoActual    = session('tipo_usuario', 0);
    $tipoInfo      = $tipoLabels[$tipoActual] ?? ['label' => 'Usuario', 'color' => 'secondary'];
    $nombreUsuario = session('nombre_usuario', Auth::user()->nombre ?? '');
    $loginUsuario  = session('login_usuario',  Auth::user()->login  ?? '');
    $bdActiva      = session('db_connection') === 'cosmos79' ? 'Cosmos 79' : 'Tarapacá';

    // Sección activa — determinada por la ruta actual
    $seccionActiva = 'principal';
    if (request()->routeIs('dashboard.reportes', 'reportes.*')) {
        $seccionActiva = 'reportes';
    } elseif (request()->routeIs('dashboard.tramites', 'autorizaciones.*', 'notas.*', 'pagos-tramites.*', 'tramites.*')) {
        $seccionActiva = 'tramites';
    } elseif (request()->routeIs('dashboard.gestion', 'usuarios.*', 'cobradores-vendedores.*', 'seguimiento.*', 'backup.*')) {
        $seccionActiva = 'gestion';
    } elseif (request()->routeIs('dashboard.principal', 'urbanizaciones.*', 'distritos.*', 'lotes.*', 'clientes.*', 'contratos.*', 'recibos.*', 'ajustes.*', 'extractos.*', 'notificaciones.*')) {
        $seccionActiva = 'principal';
    }

    $canRecibo   = in_array($tipoActual, [1, 2, 4]);
    $canContrato = in_array($tipoActual, [1, 2, 4]);
    $canTramites = in_array($tipoActual, [1, 3, 4]);
@endphp

<header id="page-header">
    <div class="content-header">

        {{-- ── LEFT: toggle + botones de sección + acciones rápidas ── --}}
        <div class="d-flex align-items-center gap-1">

            <button type="button" class="btn btn-sm btn-alt-secondary me-1 d-lg-none"
                data-toggle="layout" data-action="sidebar_toggle">
                <i class="fa fa-fw fa-bars"></i>
            </button>

            {{-- BOTONES DE SECCIÓN --}}
            <div class="d-none d-md-flex align-items-center gap-1">

                {{-- Principal: clientes, contratos, recibos, extractos, lotes, etc. --}}
                <a href="{{ route('dashboard') }}"
                   class="btn btn-sm {{ $seccionActiva === 'principal' ? 'btn-primary' : 'btn-alt-secondary' }}">
                    <i class="fa fa-fw fa-home me-1"></i>
                    <span class="d-none d-lg-inline">Principal</span>
                </a>

                {{-- Reportes --}}
                @if($tipoActual == 1)
                <a href="{{ route('dashboard.reportes') }}"
                   class="btn btn-sm {{ $seccionActiva === 'reportes' ? 'btn-primary' : 'btn-alt-secondary' }}">
                    <i class="fa fa-fw fa-chart-bar me-1"></i>
                    <span class="d-none d-lg-inline">Reportes</span>
                </a>
                @endif


                {{-- Trámites: solo tipos 1, 3, 4 --}}
                @if($canTramites)
                <a href="{{ route('dashboard.tramites') }}"
                   class="btn btn-sm {{ $seccionActiva === 'tramites' ? 'btn-primary' : 'btn-alt-secondary' }}">
                    <i class="fa fa-fw fa-clipboard-list me-1"></i>
                    <span class="d-none d-lg-inline">Trámites</span>
                </a>
                @endif

                {{-- Gestión: catálogos, usuarios, cobradores, backup --}}
                @if($tipoActual == 1)
                <a href="{{ route('dashboard.gestion') }}"
                   class="btn btn-sm {{ $seccionActiva === 'gestion' ? 'btn-primary' : 'btn-alt-secondary' }}">
                    <i class="fa fa-fw fa-cog me-1"></i>
                    <span class="d-none d-lg-inline">Gestión</span>
                </a>
                @endif

            </div>

            {{-- Separador --}}
            <div class="d-none d-md-block border-start mx-1" style="height:22px; opacity:.3"></div>

            {{-- ACCIONES RÁPIDAS --}}
            @if($canRecibo)
            <a href="{{ route('recibos.create') }}"
               class="btn btn-sm btn-alt-primary d-none d-md-inline-flex align-items-center gap-1">
                <i class="fa fa-fw fa-receipt"></i>
                <span class="d-none d-xl-inline">Nuevo Recibo</span>
            </a>
            @endif

        </div>

        {{-- ── RIGHT: BD + usuario ── --}}
        <div class="d-flex align-items-center">

            <div class="d-none d-sm-inline-block me-3 text-end">
                <small class="d-block text-muted" style="font-size:11px">
                    <i class="fa fa-database me-1"></i>{{ $bdActiva }}
                </small>
                <small class="d-block text-muted" style="font-size:11px">
                    <i class="fa fa-calendar me-1"></i>
                    {{ session('fecha_sistema', now('America/La_Paz')->format('d/m/Y')) }}
                    &nbsp;|&nbsp;
                    <i class="fa fa-dollar-sign me-1"></i>TC: {{ session('tc_sistema', '—') }}
                </small>
            </div>

            <div class="dropdown d-inline-block ms-1">
                <button type="button"
                    class="btn btn-sm btn-alt-secondary d-flex align-items-center"
                    id="page-header-user-dropdown"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold"
                        style="width:26px;height:26px;font-size:11px;flex-shrink:0">
                        {{ strtoupper(substr($nombreUsuario, 0, 1)) }}
                    </span>
                    <span class="d-none d-sm-inline-block ms-2"
                        style="max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px">
                        {{ $nombreUsuario }}
                    </span>
                    <i class="fa fa-fw fa-angle-down d-none d-sm-inline-block opacity-50 ms-1"></i>
                </button>

                <div class="dropdown-menu dropdown-menu-md dropdown-menu-end p-0 border-0"
                    aria-labelledby="page-header-user-dropdown">
                    <div class="p-3 text-center bg-body-light border-bottom rounded-top">
                        <span class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold mx-auto"
                            style="width:44px;height:44px;font-size:17px">
                            {{ strtoupper(substr($nombreUsuario, 0, 1)) }}
                        </span>
                        <p class="mt-2 mb-0 fw-semibold" style="font-size:13px">{{ $nombreUsuario }}</p>
                        <p class="mb-1 text-muted" style="font-size:11px">{{ $loginUsuario }}</p>
                        <span class="badge bg-{{ $tipoInfo['color'] }}" style="font-size:10px">
                            {{ $tipoInfo['label'] }}
                        </span>
                    </div>
                    <div class="p-1">
                        <a class="dropdown-item d-flex align-items-center gap-2 py-2 fs-sm fw-medium"
                            href="{{ route('perfil.index') }}">
                            <i class="fa fa-fw fa-user-circle text-primary"></i> Mi Perfil
                        </a>
                        {{-- Acciones rápidas solo en móvil --}}
                        <div class="d-md-none">
                            <div class="dropdown-divider my-1"></div>
                            @if($canContrato)
                            <a class="dropdown-item d-flex align-items-center gap-2 py-2 fs-sm fw-medium"
                                href="{{ route('contratos.create') }}">
                                <i class="fa fa-fw fa-file-contract text-success"></i> Nuevo Contrato
                            </a>
                            @endif
                            @if($canRecibo)
                            <a class="dropdown-item d-flex align-items-center gap-2 py-2 fs-sm fw-medium"
                                href="{{ route('recibos.create') }}">
                                <i class="fa fa-fw fa-receipt text-primary"></i> Nuevo Recibo
                            </a>
                            @endif
                        </div>
                        @if($tipoActual == 1)
                        <div class="dropdown-divider my-1"></div>
                        <a class="dropdown-item d-flex align-items-center gap-2 py-2 fs-sm fw-medium"
                            href="{{ route('usuarios.index') }}">
                            <i class="fa fa-fw fa-users text-secondary"></i> Gestión de Usuarios
                        </a>
                        @endif
                        <div class="dropdown-divider my-1"></div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit"
                                class="dropdown-item d-flex align-items-center gap-2 py-2 fs-sm fw-medium text-danger w-100">
                                <i class="fa fa-fw fa-sign-out-alt"></i> Cerrar sesión
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-sm btn-alt-secondary ms-1"
                data-toggle="layout" data-action="side_overlay_toggle">
                <i class="fa fa-fw fa-list-ul fa-flip-horizontal"></i>
            </button>
        </div>

    </div>

    {{-- Search overlay --}}
    <div id="page-header-search" class="overlay-header bg-body-extra-light">
        <div class="content-header">
            <form class="w-100" action="{{ route('dashboard') }}" method="GET">
                <div class="input-group">
                    <button type="button" class="btn btn-alt-danger"
                        data-toggle="layout" data-action="header_search_off">
                        <i class="fa fa-fw fa-times-circle"></i>
                    </button>
                    <input type="text" class="form-control" placeholder="Buscar o ESC.." name="q">
                </div>
            </form>
        </div>
    </div>
    <div id="page-header-loader" class="overlay-header bg-body-extra-light">
        <div class="content-header">
            <div class="w-100 text-center"><i class="fa fa-fw fa-circle-notch fa-spin"></i></div>
        </div>
    </div>

</header>