<div class="app-sidebar__overlay" data-bs-toggle="sidebar"></div>
<div class="app-sidebar">
    <div class="side-header">
        <a class="header-brand1" href="{{ route('dashboard') }}">
            <img src="{{ asset('assets/images/brand/logo-white.png') }}" class="header-brand-img desktop-logo" alt="logo">
            <img src="{{ asset('assets/images/brand/logo-dark.png') }}" class="header-brand-img toggle-logo" alt="logo">
        </a>
    </div>
    <div class="main-sidemenu">
        <ul class="side-menu">
            @can('view dashboard')
            <li class="slide">
                <a class="side-menu__item" href="{{ route('dashboard') }}">
                    <i class="side-menu__icon fe fe-home"></i>
                    <span class="side-menu__label">Dashboard</span>
                </a>
            </li>
            @endcan

            @can('manage branches')
            <li class="slide">
                <a class="side-menu__item" href="{{ route('branches.index') }}">
                    <i class="side-menu__icon fe fe-map-pin"></i>
                    <span class="side-menu__label">Branches</span>
                </a>
            </li>
            @endcan

            @can('manage customers')
            <li class="slide">
                <a class="side-menu__item" href="{{ route('customers.index') }}">
                    <i class="side-menu__icon fe fe-users"></i>
                    <span class="side-menu__label">Customers</span>
                </a>
            </li>
            @endcan

            @can('manage staff')
            <li class="slide">
                <a class="side-menu__item" href="{{ route('staff.index') }}">
                    <i class="side-menu__icon fe fe-user-check"></i>
                    <span class="side-menu__label">Staff</span>
                </a>
            </li>
            @endcan

            @can('manage services')
            <li class="slide">
                <a class="side-menu__item" href="{{ route('service-categories.index') }}">
                    <i class="side-menu__icon fe fe-layers"></i>
                    <span class="side-menu__label">Service Categories</span>
                </a>
            </li>
            <li class="slide">
                <a class="side-menu__item" href="{{ route('services.index') }}">
                    <i class="side-menu__icon fe fe-scissors"></i>
                    <span class="side-menu__label">Services</span>
                </a>
            </li>
            @endcan

            @can('manage appointments')
            <li class="slide">
                <a class="side-menu__item" href="{{ route('appointments.index') }}">
                    <i class="side-menu__icon fe fe-calendar"></i>
                    <span class="side-menu__label">Appointments</span>
                </a>
            </li>
            <li class="slide">
                <a class="side-menu__item" href="{{ route('appointments.calendar') }}">
                    <i class="side-menu__icon fe fe-clock"></i>
                    <span class="side-menu__label">Calendar</span>
                </a>
            </li>
            @endcan

            @can('manage walk-ins')
            <li class="slide">
                <a class="side-menu__item" href="{{ route('walk-ins.index') }}">
                    <i class="side-menu__icon fe fe-users"></i>
                    <span class="side-menu__label">Walk-In Queue</span>
                </a>
            </li>
            @endcan
        </ul>
    </div>
</div>

