{{-- Header --}}
{{--
    IMPORTANTE: Se usa session() en lugar de Auth::user() para los datos del usuario
    porque el modelo User puede resolver su conexión desde la config por defecto
    en lugar de la BD elegida al login (cosmos79 o tarapaca).
    Los datos de sesión se graban en LoginController antes del Auth::loginUsingId().
--}}
@php
    $tipoLabels = [
        1 => ['label' => 'Administrador',              'color' => 'danger'],
        2 => ['label' => 'Cobrador',                   'color' => 'primary'],
        3 => ['label' => 'Tramitador',                 'color' => 'info'],
        4 => ['label' => 'Cobrador / 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á';
@endphp

<header id="page-header">

    {{-- Header Content --}}
    <div class="content-header">

        {{-- Left Section --}}
        <div class="d-flex align-items-center">
            <button type="button" class="btn btn-sm btn-alt-secondary me-2 d-lg-none"
                data-toggle="layout" data-action="sidebar_toggle">
                <i class="fa fa-fw fa-bars"></i>
            </button>
            <button type="button" class="btn btn-sm btn-alt-secondary d-md-none"
                data-toggle="layout" data-action="header_search_on">
                <i class="fa fa-fw fa-search"></i>
            </button>
            <form class="d-none d-md-inline-block" action="{{ route('dashboard') }}" method="GET">
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control form-control-alt" placeholder="Buscar.." name="q">
                    <span class="input-group-text border-0">
                        <i class="fa fa-fw fa-search"></i>
                    </span>
                </div>
            </form>
        </div>
        {{-- END Left Section --}}

        {{-- Right Section --}}
        <div class="d-flex align-items-center">

            {{-- Info BD, fecha y T.C. activos --}}
            <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>

            {{-- User Dropdown --}}
            <div class="dropdown d-inline-block ms-2">
                <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">
                    {{-- Avatar con inicial del nombre --}}
                    <span class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold"
                        style="width:28px;height:28px;font-size:12px;flex-shrink:0">
                        {{ strtoupper(substr($nombreUsuario, 0, 1)) }}
                    </span>
                    <span class="d-none d-sm-inline-block ms-2" style="max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                        {{ $nombreUsuario }}
                    </span>
                    <i class="fa fa-fw fa-angle-down d-none d-sm-inline-block opacity-50 ms-1 mt-1"></i>
                </button>

                <div class="dropdown-menu dropdown-menu-md dropdown-menu-end p-0 border-0"
                    aria-labelledby="page-header-user-dropdown">

                    {{-- Info del usuario —  datos de sesión, no Auth::user() --}}
                    <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:48px;height:48px;font-size:20px">
                            {{ strtoupper(substr($nombreUsuario, 0, 1)) }}
                        </span>
                        <p class="mt-2 mb-0 fw-semibold" style="font-size:14px">
                            {{ $nombreUsuario }}
                        </p>
                        <p class="mb-1 text-muted" style="font-size:12px">
                            {{ $loginUsuario }}
                        </p>
                        <span class="badge bg-{{ $tipoInfo['color'] }}">
                            {{ $tipoInfo['label'] }}
                        </span>
                        <br>
                        <small class="text-muted" style="font-size:10px">
                            <i class="fa fa-database me-1"></i>{{ $bdActiva }}
                        </small>
                    </div>

                    {{-- Acciones rápidas del dropdown --}}
                    <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>

                        @if(session('tipo_usuario') == 1)
                        <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">
                                <i class="fa fa-fw fa-sign-out-alt"></i>
                                Cerrar sesión
                            </button>
                        </form>
                    </div>

                </div>
            </div>
            {{-- END User Dropdown --}}

            {{-- Toggle Side Overlay --}}
            <button type="button" class="btn btn-sm btn-alt-secondary ms-2"
                data-toggle="layout" data-action="side_overlay_toggle">
                <i class="fa fa-fw fa-list-ul fa-flip-horizontal"></i>
            </button>
        </div>
        {{-- END Right Section --}}

    </div>
    {{-- END Header Content --}}

    {{-- Header 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 presione ESC.." name="q">
                </div>
            </form>
        </div>
    </div>

    {{-- Header Loader --}}
    <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>
{{-- END Header --}}