<div class="side-nav vertical-menu nav-menu-light scrollable">
    <div class="nav-logo">
        <div class="w-100 logo">
            <img class="img-fluid" src="{{ $settings->site_logo }}" alt="logo">
        </div>
        <div class="mobile-close">
            <i class="icon-arrow-left feather"></i>
        </div>
    </div>
    <ul class="nav-menu">
        <li class="nav-menu-item">
            <a href="{{ route('dashboard') }}" wire:navigate>
                <i class="feather icon-home"></i>
                <span class="nav-menu-item-title">Dashboard</span>
            </a>
        </li>
        <li class="nav-group-title">SHIPMENTS & TRACKING</li>
        <li class="nav-submenu">
            <a class="nav-submenu-title">
                <i class="feather icon-box"></i>
                <span>Manage Shipments</span>
                <i class="nav-submenu-arrow"></i>
            </a>
            <ul class="nav-menu menu-collapse">
                <li class="nav-menu-item">
                    <a href="{{ route('shipments') }}" wire:navigate>All Shipments</a>
                </li>

                <li class="nav-menu-item">
                    <a href="{{ route('shipment.create') }}" wire:navigate>Create Shipment</a>
                </li>
            </ul>
        </li>

        <li class="nav-menu-item">
            <a href="{{ route('trackings') }}" wire:navigate>
                <i class="feather icon-globe"></i>
                <span class="nav-menu-item-title">Manage Trackings</span>
            </a>
        </li>

        <li class="nav-group-title">Settings & Configurations</li>
        <li class="nav-submenu">
            <a class="nav-submenu-title">
                <i class="feather icon-settings"></i>
                <span>Manage Settings</span>
                <i class="nav-submenu-arrow"></i>
            </a>
            <ul class="nav-menu menu-collapse">
                <li class="nav-menu-item">
                    <a href="{{ route('settings.general') }}" wire:navigate>General Settings</a>
                </li>

                <li class="nav-menu-item">
                    <a href="{{ route('settings.config') }}" wire:navigate>Email Configuration</a>
                </li>
            </ul>
        </li>

        <li class="nav-menu-item">
            <a href="{{ route('contact-messages') }}" wire:navigate>
                <i class="feather icon-mail"></i>
                <span class="nav-menu-item-title">Contact Messages</span>
            </a>
        </li>

        
        <li class="nav-group-title">PROFILE & LOGOUT</li>
        <li class="nav-menu-item">
            <a href="{{ route('profile') }}" wire:navigate>
                <i class="feather icon-user"></i>
                <span class="nav-menu-item-title">Profile</span>
            </a>
        </li>

        <li class="nav-menu-item" x-data="logout">
            <a href="{{ route('logout') }}" class="text-danger" @click.prevent="logout">
                <span x-show="!processing">
                    <i class="feather icon-power text-danger"></i>
                    <span class="nav-menu-item-title">Logout</span>
                </span>

                <span x-show="processing" x-cloak>
                    <i class="feather icon-loader text-danger animate__rotateOut animate__animated animate__infinite"></i>
                    <span class="nav-menu-item-title fst-italic">Logging out...</span>
                </span>
            </a>
        </li>
    </ul>
</div>
