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

    /* Repli / dépli du menu (correctif : masquage complet des 320px) */
    .sidebar_left.collapsed { left: -320px !important; }
    .ekomart_dashboard .right-area-body-content.collapsed { width: 100% !important; margin-left: 0 !important; }

    /* Espace à gauche et à droite du contenu (en-tête en pleine largeur) */
    .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; }
    }

    /* Bouton de fermeture du menu (mobile uniquement) */
    .vl-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) {
        .vl-sidebar-close { display: flex; }
    }
</style>

<div class="sidebar_left">
    <button type="button" class="vl-sidebar-close" aria-label="Fermer le 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('viki-location.dashboard') }}">
                <img src="{{ asset('vendor/images/icons/01.svg') }}" alt="icon" class="icon">
                <p>{{ __('viki.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>{{ __('viki.my_houses') }}
                    <span class="badge bg-danger ms-2" style="padding-top: 5px;padding-bottom: 4px;padding-left: 15px;padding-right: 15px;">
                        {{ $maisonsCount ?? 0 }}
                    </span>
                </p>
            </a>
            <ul class="submenu mm-collapse">
                <li><a class="mobile-menu-link" href="{{ route('viki-location.maisons.create') }}">{{ __('viki.add_house') }}</a></li>
            </ul>
            <ul class="submenu mm-collapse parent-nav">
                <li><a class="mobile-menu-link" href="{{ route('viki-location.maisons.index') }}">{{ __('viki.houses_list') }}</a></li>
            </ul>
        </li>

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

        <li class="single-menu-item">
            <a href="{{ route('viki-location.bookings') }}">
                <img src="{{ asset('vendor/images/icons/09.svg') }}" alt="icon" class="icon">
                <p>{{ __('viki.bookings_title') }}</p>
            </a>
        </li>

        <li class="single-menu-item">
            <a href="{{ route('viki-location.chat.index') }}">
                <img src="{{ asset('vendor/images/icons/07.svg') }}" alt="icon" class="icon">
                <p>{{ __('viki.chat') }}
                    <span class="badge bg-danger ms-2" style="padding-top: 5px;padding-bottom: 4px;padding-left: 12px;padding-right: 12px;">
                        {{ $vlUnreadMessages ?? 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>{{ __('viki.my_account') }}</p>
            </a>
            <ul class="submenu mm-collapse parent-nav">
                <li><a class="mobile-menu-link" href="{{ route('viki-location.profile') }}">{{ __('viki.profile') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('viki-location.password') }}">{{ __('viki.security') }}</a></li>
                <li><a class="mobile-menu-link" href="{{ route('viki-location.billing') }}">{{ __('viki.billing') }}</a></li>
            </ul>
        </li>

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

        // Sur mobile, fermer aussi le menu quand on clique sur un lien
        if (window.matchMedia('(max-width: 991px)').matches) {
            document.querySelectorAll('.sidebar_left a[href]:not([href="#"])').forEach(function (link) {
                link.addEventListener('click', closeSidebar);
            });
        }
    })();
</script>