{{-- =========================================
     📱 OVERLAY
========================================= --}}
<div class="sidebar-overlay" id="sidebarOverlay"></div>

{{-- =========================================
     📌 SIDEBAR
========================================= --}}
<aside class="admin-sidebar" id="adminSidebar">

    {{-- HEADER --}}
    <div class="sidebar-header">
        <div class="sidebar-logo">
            <img src="{{ asset('logo.jpeg') }}" alt="Logo">
        </div>
        <div class="sidebar-title">Painel Técnico</div>
        <div class="sidebar-subtitle">Operações</div>
    </div>

    {{-- MENU --}}
    <nav class="sidebar-menu">

        <ul class="nav flex-column">

            {{-- DASHBOARD --}}
            <li class="nav-item">
                <a href="{{ route('dashboard.tecnico.index') }}"
                   class="nav-link {{ request()->routeIs('dashboard.tecnico.index') ? 'active' : '' }}">
                    <i class="fas fa-gauge-high"></i>
                    <span>Dashboard</span>
                </a>
            </li>

            <li class="sidebar-section">Gestão de Produtos</li>

            <li class="nav-item">
                <a href="{{ route('dashboard.tecnico.produtos.index') }}"
                   class="nav-link {{ request()->routeIs('dashboard.tecnico.produtos.*') ? 'active' : '' }}">
                    <i class="fas fa-boxes"></i>
                    <span>Produtos</span>
                </a>
            </li>

            <li class="nav-item">
                <a href="{{ route('dashboard.tecnico.stock.index') }}"
                   class="nav-link {{ request()->routeIs('dashboard.tecnico.stock.*') ? 'active' : '' }}">
                    <i class="fas fa-warehouse"></i>
                    <span>Atualizar Stock</span>
                </a>
            </li>

            <li class="nav-item">
                <a href="{{ route('dashboard.tecnico.promocoes.index') }}"
                   class="nav-link {{ request()->routeIs('dashboard.tecnico.promocoes.*') ? 'active' : '' }}">
                    <i class="fas fa-percent"></i>
                    <span>Promoções</span>
                </a>
            </li>

            <li class="sidebar-section">Atendimento</li>

            <li class="nav-item">
                <a href="{{ route('dashboard.tecnico.encomendas.index') }}"
                   class="nav-link {{ request()->routeIs('dashboard.tecnico.encomendas.*') ? 'active' : '' }}">
                    <i class="fas fa-truck-fast"></i>
                    <span>Pedidos de Clientes</span>
                </a>
            </li>

            <li class="sidebar-section">Conta</li>

            <li class="nav-item">
                <a href="{{ route('dashboard.tecnico.perfil') }}"
                   class="nav-link {{ request()->routeIs('dashboard.tecnico.perfil') ? 'active' : '' }}">
                    <i class="fas fa-user"></i>
                    <span>Meu Perfil</span>
                </a>
            </li>

        </ul>

    </nav>
</aside>

{{-- =========================================
     🎨 CSS PROFISSIONAL
========================================= --}}
<style>

/* ===== SIDEBAR BASE ===== */
.admin-sidebar{
    width:280px;
    height:100vh;
    background:#020617;
    border-right:1px solid #1e293b;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    flex-direction:column;
    z-index:1050;
    transition:transform .28s ease;
}

/* ===== HEADER ===== */
.sidebar-header{
    padding:22px 16px 18px;
    border-bottom:1px solid #1e293b;
    text-align:center;
}

.sidebar-logo img{
    height:56px;
    object-fit:contain;
}

.sidebar-title{
    color:#38bdf8;
    font-weight:600;
    font-size:15px;
    margin-top:8px;
}

.sidebar-subtitle{
    font-size:11px;
    color:#64748b;
}

/* ===== MENU ===== */
.sidebar-menu{
    flex:1;
    overflow-y:auto;
    padding:14px 10px 20px;
}

/* ===== SECTIONS ===== */
.sidebar-section{
    font-size:11px;
    text-transform:uppercase;
    color:#94a3b8;
    margin:18px 8px 6px;
    letter-spacing:.08em;
}

/* ===== LINKS ===== */
.admin-sidebar .nav-link{
    color:#cbd5f5;
    padding:10px 12px;
    border-radius:10px;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:12px;
    transition:all .22s ease;
}

.admin-sidebar .nav-link i{
    width:20px;
    text-align:center;
    color:#38bdf8;
}

/* hover */
.admin-sidebar .nav-link:hover{
    background:linear-gradient(135deg,#1e40af,#2563eb);
    color:#fff;
}

/* active */
.admin-sidebar .nav-link.active{
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    color:#fff;
    font-weight:600;
    box-shadow:0 10px 28px rgba(14,165,233,.25);
}

/* ===== OVERLAY ===== */
.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.65);
    backdrop-filter:blur(2px);
    z-index:1045;
    opacity:0;
    visibility:hidden;
    transition:.25s;
}

.sidebar-overlay.show{
    opacity:1;
    visibility:visible;
}

/* ===== MOBILE ===== */
@media (max-width:991px){
    .admin-sidebar{
        transform:translateX(-100%);
    }
    .admin-sidebar.show{
        transform:translateX(0);
    }
}

</style>

{{-- =========================================
     🧠 JS
========================================= --}}
<script>
function toggleSidebar(){
    const sidebar=document.getElementById('adminSidebar');
    const overlay=document.getElementById('sidebarOverlay');
    sidebar.classList.toggle('show');
    overlay.classList.toggle('show');
}

document.getElementById('sidebarOverlay')
?.addEventListener('click',()=>{
    document.getElementById('adminSidebar').classList.remove('show');
    document.getElementById('sidebarOverlay').classList.remove('show');
});
</script>