{{-- Menu latéral back-office Viki Restaurant --}}
@php
    $restoMenuCount = \App\Models\RestaurantMenuItem::where(
        'restaurateur_id',
        auth(\App\Http\Controllers\Restaurant\LoginController::GUARD)->id()
    )->count();
@endphp
<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="{{ __('restaurant.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('restaurant.dashboard') }}">
                <img src="{{ asset('vendor/images/icons/01.svg') }}" alt="icon" class="icon">
                <p>{{ __('restaurant.dashboard') }}</p>
            </a>
        </li>

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

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

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

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

        <li class="single-menu-item">
            <a href="{{ route('restaurant.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;">
                        {{ $restaurateurUnreadMessages ?? 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>{{ __('restaurant.my_account') }}</p>
            </a>
            <ul class="submenu mm-collapse parent-nav">
                <li><a class="mobile-menu-link" href="{{ route('restaurant.profile') }}">{{ __('restaurant.profile') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('restaurant.password') }}">{{ __('restaurant.security') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('restaurant.billing') }}">{{ __('restaurant.billing') }}</a></li>
            </ul>
        </li>

        <li class="single-menu-item">
            <a href="#" onclick="event.preventDefault(); document.getElementById('restaurant-logout-form').submit();">
                <img src="{{ asset('vendor/images/icons/05.svg') }}" alt="icon" class="icon">
                <p>{{ __('restaurant.logout') }}</p>
            </a>
            <form id="restaurant-logout-form" action="{{ route('restaurant.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>