{{-- Side Overlay — Sistema Cosmos --}}
<aside id="side-overlay">

{{-- ── Cabecera: usuario logueado ─────────────────────────────────────── --}}
<div class="content-header border-bottom">
    {{-- Avatar con iniciales --}}
    <div class="flex-shrink-0">
        <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold"
             style="width:36px;height:36px;font-size:13px;letter-spacing:0">
            {{ strtoupper(substr(session('nombre_usuario', 'U'), 0, 2)) }}
        </div>
    </div>

    {{-- Nombre y ubicación --}}
    <div class="ms-2 flex-grow-1 overflow-hidden">
        <div class="text-dark fw-semibold fs-sm text-truncate">
            {{ session('nombre_usuario', Auth::user()->nombre ?? 'Usuario') }}
        </div>
        <div class="text-muted" style="font-size:11px;">
            @php
                $tipo = session('tipo_usuario', 0);
                $tipos = [1=>'Administrador', 2=>'Cobrador', 3=>'Tramitador',
                          4=>'Cob. / Trámites', 5=>'Informaciones'];
            @endphp
            <span class="badge bg-{{ $tipo == 1 ? 'danger' : ($tipo == 2 ? 'success' : ($tipo == 4 ? 'warning text-dark' : 'secondary')) }} fs-xs">
                {{ $tipos[$tipo] ?? 'Usuario' }}
            </span>
            <span class="ms-1">
                {{ session('db_connection') === 'cosmos79' ? 'Cosmos 79' : 'Tarapacá' }}
            </span>
        </div>
    </div>

    {{-- Cerrar --}}
    <a class="ms-2 btn btn-sm btn-alt-danger flex-shrink-0" href="javascript:void(0)"
       data-toggle="layout" data-action="side_overlay_close">
        <i class="fa fa-fw fa-times"></i>
    </a>
</div>
{{-- ── FIN Cabecera ─────────────────────────────────────────────────── --}}

{{-- ── Fecha y TC del sistema ─────────────────────────────────────────── --}}
<div class="px-3 py-2 border-bottom bg-body-light">
    <div class="d-flex justify-content-between align-items-center fs-xs text-muted">
        <span><i class="fa fa-calendar-alt me-1"></i>{{ session('fecha_sistema', now('America/La_Paz')->format('d/m/Y')) }}</span>
        <span><i class="fa fa-dollar-sign me-1 text-success"></i>TC: <strong class="text-dark">{{ session('tc_sistema', '—') }}</strong></span>
        <span><i class="fa fa-database me-1 text-primary"></i>{{ session('db_connection') === 'cosmos79' ? 'C79' : 'TAR' }}</span>
    </div>
</div>
{{-- ── FIN Fecha y TC ───────────────────────────────────────────────── --}}

{{-- ── Contenido principal ─────────────────────────────────────────────── --}}
<div class="content-side">
    <div class="block block-transparent pull-x pull-t">

        {{-- Tabs --}}
        <ul class="nav nav-tabs nav-tabs-block nav-justified" role="tablist">
            <li class="nav-item">
                <button type="button" class="nav-link active" id="so-accesos-tab"
                    data-bs-toggle="tab" data-bs-target="#so-accesos"
                    role="tab" aria-selected="true">
                    <i class="fa fa-fw fa-bolt text-warning opacity-75 me-1"></i> Accesos
                </button>
            </li>
            <li class="nav-item">
                <button type="button" class="nav-link" id="so-sistema-tab"
                    data-bs-toggle="tab" data-bs-target="#so-sistema"
                    role="tab" aria-selected="false">
                    <i class="fa fa-fw fa-cog text-secondary opacity-75 me-1"></i> Sistema
                </button>
            </li>
        </ul>

        <div class="block-content tab-content overflow-hidden">

            {{-- ── TAB 1: Accesos Rápidos ─────────────────────────────── --}}
            <div class="tab-pane pull-x fade fade-left show active"
                 id="so-accesos" role="tabpanel" tabindex="0">

                {{-- Cobranza --}}
                <div class="block block-transparent mb-0">
                    <div class="block-header block-header-default py-2">
                        <h3 class="block-title fs-sm">
                            <i class="fa fa-cash-register me-1 text-success"></i> Cobranza
                        </h3>
                    </div>
                    <div class="block-content pt-0 pb-2">
                        <div class="d-grid gap-1">
                            @if(in_array(session('tipo_usuario'), [1,2,4]))
                            <a href="{{ route('recibos.create') }}"
                               class="btn btn-sm btn-alt-success d-flex align-items-center gap-2">
                                <i class="fa fa-plus-circle"></i>
                                <span>Nuevo Recibo</span>
                            </a>
                            @endif
                            <a href="{{ route('recibos.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-list"></i>
                                <span>Ver Recibos</span>
                            </a>
                            @if(in_array(session('tipo_usuario'), [1,4]))
                            <a href="{{ route('ajustes.create') }}"
                               class="btn btn-sm btn-alt-warning d-flex align-items-center gap-2">
                                <i class="fa fa-sliders-h"></i>
                                <span>Nuevo Ajuste</span>
                            </a>
                            @endif
                            <a href="{{ route('extractos.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-journal-whills"></i>
                                <span>Extractos / Kardex</span>
                            </a>
                        </div>
                    </div>
                </div>

                <hr class="my-1">

                {{-- Contratos --}}
                <div class="block block-transparent mb-0">
                    <div class="block-header block-header-default py-2">
                        <h3 class="block-title fs-sm">
                            <i class="fa fa-file-signature me-1 text-primary"></i> Contratos
                        </h3>
                    </div>
                    <div class="block-content pt-0 pb-2">
                        <div class="d-grid gap-1">
                            @if(in_array(session('tipo_usuario'), [1,4]))
                            <a href="{{ route('clientes.create') }}"
                               class="btn btn-sm btn-alt-primary d-flex align-items-center gap-2">
                                <i class="fa fa-user-plus"></i>
                                <span>Nuevo Cliente + Contrato</span>
                            </a>
                            @endif
                            <a href="{{ route('contratos.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-list"></i>
                                <span>Ver Contratos</span>
                            </a>
                            <a href="{{ route('clientes.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-users"></i>
                                <span>Ver Clientes</span>
                            </a>
                        </div>
                    </div>
                </div>

                <hr class="my-1">

                {{-- Trámites --}}
                <div class="block block-transparent mb-0">
                    <div class="block-header block-header-default py-2">
                        <h3 class="block-title fs-sm">
                            <i class="fa fa-diagram-project me-1 text-info"></i> Trámites
                        </h3>
                    </div>
                    <div class="block-content pt-0 pb-2">
                        <div class="d-grid gap-1">
                            @if(in_array(session('tipo_usuario'), [1,4]))
                            <a href="{{ route('autorizaciones.create') }}"
                               class="btn btn-sm btn-alt-info d-flex align-items-center gap-2">
                                <i class="fa fa-plus-circle"></i>
                                <span>Nueva Autorización</span>
                            </a>
                            @endif
                            <a href="{{ route('tramites.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-list"></i>
                                <span>Ver Trámites</span>
                            </a>
                            <a href="{{ route('pagos-tramites.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-receipt"></i>
                                <span>Pagos de Trámite</span>
                            </a>
                            <a href="{{ route('notificaciones.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-bell"></i>
                                <span>Notificaciones</span>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
            {{-- ── FIN TAB 1 ────────────────────────────────────────── --}}

            {{-- ── TAB 2: Sistema ─────────────────────────────────────── --}}
            <div class="tab-pane pull-x fade fade-right"
                 id="so-sistema" role="tabpanel" tabindex="0">

                {{-- Gestión --}}
                <div class="block block-transparent mb-0">
                    <div class="block-header block-header-default py-2">
                        <h3 class="block-title fs-sm">
                            <i class="fa fa-cogs me-1 text-secondary"></i> Gestión
                        </h3>
                    </div>
                    <div class="block-content pt-0 pb-2">
                        <div class="d-grid gap-1">
                            <a href="{{ route('lotes.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-map"></i><span>Lotes</span>
                            </a>
                            <a href="{{ route('distritos.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-th-large"></i><span>Distritos</span>
                            </a>
                            <a href="{{ route('urbanizaciones.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-building"></i><span>Urbanizaciones</span>
                            </a>
                            @if(session('tipo_usuario') == 1)
                            <a href="{{ route('cobradores-vendedores.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-id-badge"></i><span>Cobradores / Vendedores</span>
                            </a>
                            @endif
                            @if(session('tipo_usuario') == 1)
                            <a href="{{ route('usuarios.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-user-shield"></i><span>Usuarios</span>
                            </a>
                            @endif
                        </div>
                    </div>
                </div>

                <hr class="my-1">

                {{-- Reportes principales --}}
                @if(session('tipo_usuario') == 1)
                <div class="block block-transparent mb-0">
                    <div class="block-header block-header-default py-2">
                        <h3 class="block-title fs-sm">
                            <i class="fa fa-file-pdf me-1 text-danger"></i> Reportes rápidos
                        </h3>
                    </div>
                    <div class="block-content pt-0 pb-2">
                        <div class="d-grid gap-1">
                            <a href="{{ route('reportes.estados-sector') }}"
                               class="btn btn-sm btn-alt-danger d-flex align-items-center gap-2">
                                <i class="fa fa-grid"></i><span>Estados por Sector</span>
                            </a>
                            <a href="{{ route('reportes.estados-sector') }}"
                               class="btn btn-sm btn-alt-danger d-flex align-items-center gap-2">
                                <i class="fa fa-dollar-sign"></i><span>Lotes Estados por Sector</span>
                            </a>
                            <a href="{{ route('reportes.recibos-anulados') }}"
                               class="btn btn-sm btn-alt-danger d-flex align-items-center gap-2">
                                <i class="fa fa-ban"></i><span>Recibos Anulados</span>
                            </a>
                            <a href="{{ route('reportes.resumen-situacion') }}"
                               class="btn btn-sm btn-alt-danger d-flex align-items-center gap-2">
                                <i class="fa fa-chart-pie"></i><span>Resumen Situación</span>
                            </a>
                        </div>
                    </div>
                </div>
                @endif

                <hr class="my-1">

                {{-- Sesión --}}
                <div class="block block-transparent mb-0">
                    <div class="block-header block-header-default py-2">
                        <h3 class="block-title fs-sm">
                            <i class="fa fa-user-circle me-1"></i> Sesión
                        </h3>
                    </div>
                    <div class="block-content pt-0 pb-3">
                        <div class="d-grid gap-1">
                            <a href="{{ route('fecha-tc') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-calendar-check"></i><span>Cambiar Fecha / TC</span>
                            </a>
                            @if(session('tipo_usuario') == 1)
                            <a href="{{ route('backup.index') }}"
                               class="btn btn-sm btn-alt-secondary d-flex align-items-center gap-2">
                                <i class="fa fa-database"></i><span>Backup</span>
                            </a>
                            @endif
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit"
                                    class="btn btn-sm btn-alt-danger w-100 d-flex align-items-center gap-2">
                                    <i class="fa fa-sign-out-alt"></i><span>Cerrar Sesión</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
            {{-- ── FIN TAB 2 ────────────────────────────────────────── --}}

        </div>
    </div>
</div>
{{-- ── FIN Contenido ────────────────────────────────────────────────── --}}

</aside>
{{-- END Side Overlay --}}