{{-- Menu latéral élargi sur toute la partie vendeur --}}
<style>
    .sidebar_left {
        width: 320px;
    }
    .ekomart_dashboard .right-area-body-content {
        width: calc(100% - 320px);
    }
    @media only screen and (max-width: 991px) {
        .sidebar_left {
            left: -320px;
        }
        .ekomart_dashboard .right-area-body-content {
            width: 100%;
        }
    }
</style>

<div class="sidebar_left">
    <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="{{ url('/vendor/account') }}">
                <img src="{{ asset('vendor/images/icons/01.svg') }}" alt="icon" class="icon">
                <p>{{ __('messages.dashboard') }}</p>
            </a>
        </li>

        <li class="single-menu-item">
            <a href="#" class="with-plus">
                <img src="{{ asset('vendor/images/icons/02.svg') }}" alt="icon" class="icon">
                <p>{{ __('messages.products') }} <span class="badge bg-danger ms-2" style="padding-top: 5px;padding-bottom: 4px;padding-left: 15px;padding-right: 15px;">
                                {{ $userProductsCount }}
                            </span></p>
            </a>
            <ul class="submenu mm-collapse">
                <li><a class="mobile-menu-link" href="{{ route('add-product') }}">{{ __('messages.add_product') }}</a></li>
            </ul>
            <ul class="submenu mm-collapse parent-nav">
                <li><a class="mobile-menu-link" href="{{ route('vendor.products.index') }}">{{ __('messages.products_list') }}</a></li>
            </ul>
        </li>
        
        <li class="single-menu-item">
            <a href="{{ route('vendor.orders.index') }}">
                <img src="{{ asset('vendor/images/icons/09.svg') }}" alt="icon" class="icon">
                <p>{{ __('messages.orders_recieved') }} <span class="badge bg-danger ms-2" style="padding-top: 5px;padding-bottom: 4px;padding-left: 15px;padding-right: 15px;">
                                {{ $sellerOrdersCount }}
                            </span></p>
            </a>
        </li>
        
        <li class="single-menu-item">
            <a href="#" class="with-plus">
                <img src="{{ asset('vendor/images/icons/06.svg') }}" alt="icon" class="icon">
                <p>{{ __('messages.promo_codes') }} <span class="badge bg-danger ms-2" style="padding-top: 5px;padding-bottom: 4px;padding-left: 15px;padding-right: 15px;">
                                {{ $userPromoCodesCreatedCount }}
                            </span></p>
            </a>
            <ul class="submenu mm-collapse">
                <li><a class="mobile-menu-link" href="{{ route('vendor.promocodes.create') }}">{{ __('messages.add_promo_codes') }}</a></li>
            </ul>
            <ul class="submenu mm-collapse parent-nav">
                <li><a class="mobile-menu-link" href="{{ route('vendor.promocodes.index') }}">{{ __('messages.promo_codes_list') }}</a></li>
            </ul>
        </li>
        
        <li class="single-menu-item">
            <a href="{{ route('vendor.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;">
                    {{ $vendorUnreadMessages }}
                </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>{{ __('messages.user_profile') }}</p>
            </a>
            <ul class="submenu mm-collapse parent-nav">
                <li><a class="mobile-menu-link" href="{{ route('vendor.profile') }}">{{ __('messages.profile') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('vendor.password') }}">{{ __('messages.security') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('vendor.billing') }}">{{ __('messages.billing') }}</a></li>
            </ul>
        </li>

        <li class="single-menu-item">
            <a href="{{ route('vendor.url') }}">
                <img src="{{ asset('vendor/images/icons/08.svg') }}" alt="icon" class="icon">
                <p>URL</p>
            </a>
        </li>
    </ul>
</div>