@props(['activePage'])
<style>
    .navbar-vertical.navbar-expand-xs .navbar-nav .nav-link {
        padding-top: 0.10rem;
        padding-bottom: 0.10rem;
    }
    .icon-container {
        width: 24px;
        height: 24px;
    }

    .navbar-vertical.navbar-expand-xs .navbar-collapse{
        overflow-x: hidden;
    }
    .navbar-vertical.navbar-expand-xs{
        overflow:hidden;
    }
</style>
<aside
    class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark"
    id="sidenav-main">
    <div class="sidenav-header visually-hidden">
        <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
            aria-hidden="true" id="iconSidenav"></i>
        <a class="navbar-brand m-0 d-flex text-wrap align-items-center" href=" {{ route('dashboard') }} ">
            <img src="{{ asset('assets') }}/img/logo-ct.png" class="navbar-brand-img h-100" alt="main_logo">
            <span class="ms-2 font-weight-bold text-white">Empresa</span>
        </a>
    </div>
    <hr class="horizontal light mt-0 mb-2 visually-hidden">
    <div class="collapse navbar-collapse  w-auto " id="sidenav-collapse-main">
        <ul class="navbar-nav">
            <li class="nav-item mt-2">
                <h6 class="ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">Dashboard</h6>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'dashboard.financeiro' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('dashboard.financeiro') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-chart-line ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Financeiro</span>
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'dashboard.movimentacao' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('dashboard.movimentacao') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-chart-line ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Extrato</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'dashboard.produto' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('dashboard.produto') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg  fa-chart-bar  ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Produto</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'dashboard.tags' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('dashboard.tags') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fa fa-calendar-check-o fa-lg ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Tags</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'dashboard.evento' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('dashboard.evento') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fa fa-lg  fa-calendar  ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Evento</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'dashboard.veiculo' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('dashboard.veiculo') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fa fa-lg  fa-tachometer  ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Frota Consumo</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'dashboard.veiculocusto' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('dashboard.veiculocusto') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fa fa-lg  fa-tachometer  ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Frota Manutenção</span>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item mt-2">
                <h6 class="ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">Finanças</h6>
            </li>
            {{-- Compras --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'compras' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.compras.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-shopping-cart ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Compras</span>
                </a>
            </li>
            {{-- Débito --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'nfparcelasdebito' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.nfparcelasdebito.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-dollar-sign ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1"> Contas a Pagar</span>
               </a>
            </li>
            {{-- Pedidos --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'pedidos' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.pedidos.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-dolly ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Pedidos</span>
                </a>
            </li>
            {{-- Vendas --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'vendas' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.vendas.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-money-bill ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Vendas</span>
                </a>
            </li>
            {{-- Parcelas --}}
            <li class="nav-item d-none">
                <a class="nav-link text-white {{ $activePage == 'nfparcelas' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.nfparcelas.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-dollar-sign ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1"> Parcelas</span>
                </a>
            </li>


            {{-- Crédito --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'nfparcelascredito' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.nfparcelascredito.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-hand-holding-usd ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1"> Contas a Receber</span>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item mt-2">
                <h6 class="ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">Gestão</h6>
            </li>

            {{-- Gestão de Tags --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'tagsretira' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.tagsretira.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-tag ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Gestão de Tags</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'empresas' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.empresas.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-building ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Empresas</span>
                </a>
            </li>
            {{-- Veiculos --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'veiculos' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.veiculos.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-truck ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Frota</span>
                </a>
            </li>
            {{-- Contratos --}}
            <li class="nav-item">
                <a class="nav-link text-white {{ $activePage == 'contratos' ? ' active bg-gradient-secundary' : '' }} "
                    href="{{ route('admin.contratos.index') }}">
                    <div class="icon-container text-white text-center me-2 d-flex align-items-center justify-content-center">
                        <i style="font-size: 1rem;" class="fas fa-lg fa-file-contract ps-2 pe-2 text-center"></i>
                    </div>
                    <span class="nav-link-text ms-1">Assinaturas</span>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item mt-2">
                <h6 class="ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">Config</h6>
            </li>
            {{-- Agenda --}}