{{-- Menu latéral back-office Viki Chauffeur --}}
<style>
    .sidebar_left { width: 320px; }
    .ekomart_dashboard .right-area-body-content { width: calc(100% - 320px); }

    .sidebar_left.collapsed { left: -320px !important; }
    .ekomart_dashboard .right-area-body-content.collapsed { width: 100% !important; margin-left: 0 !important; }

    .right-area-body-content { padding-left: 34px; padding-right: 34px; box-sizing: border-box; }
    .right-area-body-content > header.header-one { margin-left: -34px; margin-right: -34px; }

    @media only screen and (max-width: 991px) {
        .sidebar_left { left: -320px; }
        .sidebar_left.collapsed { left: 0 !important; }
        .ekomart_dashboard .right-area-body-content { width: 100%; }
        .right-area-body-content { padding-left: 16px; padding-right: 16px; }
        .right-area-body-content > header.header-one { margin-left: -16px; margin-right: -16px; }
    }

    .sm-sidebar-close {
        display: none;
        position: absolute;
        top: 14px; right: 14px;
        width: 38px; height: 38px;
        border: none; border-radius: 50%;
        background: #111; color: #C3AD66;
        font-size: 22px; line-height: 1;
        cursor: pointer; z-index: 1001;
        align-items: center; justify-content: center;
    }
    @media only screen and (max-width: 991px) {
        .sm-sidebar-close { display: flex; }
    }
</style>

<div class="sidebar_left">
    <button type="button" class="sm-sidebar-close" aria-label="{{ __('chauffeur.close_menu') }}">&times;</button>

    <a href="{{ url('/') }}" class="logo" style="justify-content:center;display:flex;">
        <img src="{{ asset('vendor/images/logo/logo.png') }}" alt="logo" height="32" width="131" style="margin-bottom:-30px;width: 70px;">
    </a>

    <ul class="rts-side-nav-area-left menu-active-parent">
        <li class="single-menu-item">
            <a href="{{ route('chauffeur.dashboard') }}">
                <img src="{{ asset('vendor/images/icons/01.svg') }}" alt="icon" class="icon">
                <p>{{ __('chauffeur.dashboard') }}</p>
            </a>
        </li>

        <li class="single-menu-item">
            <a href="{{ route('chauffeur.bookings') }}">
                <img src="{{ asset('vendor/images/icons/03.svg') }}" alt="icon" class="icon">
                <p>{{ __('chauffeur.bookings') }}
                    <span class="badge bg-danger ms-2" style="padding-top: 5px;padding-bottom: 4px;padding-left: 15px;padding-right: 15px;">
                        {{ $chauffeurBookingsCount ?? 0 }}
                    </span>
                </p>
            </a>
        </li>

        <li class="single-menu-item">
            <a href="{{ route('chauffeur.agenda') }}">
                <img src="{{ asset('vendor/images/icons/02.svg') }}" alt="icon" class="icon">
                <p>{{ __('chauffeur.agenda') }}</p>
            </a>
        </li>

        <li class="single-menu-item">
            <a href="{{ route('chauffeur.chat.index') }}">
                <img src="{{ asset('vendor/images/icons/07.svg') }}" alt="icon" class="icon">
                <p>{{ __('messages.messaging') }}
                    <span class="badge bg-danger ms-2" style="padding-top: 5px;padding-bottom: 4px;padding-left: 15px;padding-right: 15px;">
                        {{ $chauffeurUnreadMessages ?? 0 }}
                    </span>
                </p>
            </a>
        </li>

        <li class="single-menu-item">
            <a href="#" class="with-plus">
                <img src="{{ asset('vendor/images/icons/05.svg') }}" alt="icon" class="icon">
                <p>{{ __('chauffeur.my_account') }}</p>
            </a>
            <ul class="submenu mm-collapse parent-nav">
                <li><a class="mobile-menu-link" href="{{ route('chauffeur.profile') }}">{{ __('chauffeur.profile') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('chauffeur.password') }}">{{ __('chauffeur.security') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('chauffeur.billing') }}">{{ __('chauffeur.billing') }}</a></li>
            </ul>
        </li>

        <li class="single-menu-item">
            <a href="#" onclick="event.preventDefault(); document.getElementById('chauffeur-logout-form').submit();">
                <img src="{{ asset('vendor/images/icons/05.svg') }}" alt="icon" class="icon">
                <p>{{ __('chauffeur.logout') }}</p>
            </a>
            <form id="chauffeur-logout-form" action="{{ route('chauffeur.logout') }}" method="POST" style="display:none;">
                @csrf
            </form>
        </li>
    </ul>
</div>

<script>
    (function () {
        function closeSidebar() {
            document.querySelector('.sidebar_left')?.classList.remove('collapsed');
            document.querySelector('.right-area-body-content')?.classList.remove('collapsed');
            document.querySelector('.collups-show-icon')?.classList.remove('collapsed');
        }

        document.querySelector('.sm-sidebar-close')?.addEventListener('click', closeSidebar);

        // On ne ferme PAS le menu au clic sur un lien : on laisse la navigation se
        // faire normalement. La nouvelle page se charge avec le menu fermé par
        // défaut (en mobile, .sidebar_left est hors écran sans la classe
        // « collapsed »), donc le menu est bien fermé sur la page d'arrivée.
    })();
</script>