@auth
@php
    $u = auth()->user();
    $isSuper = $u->isSuperAdmin();

    // Build nav items conditionally so we never link to a missing route.
    $has = fn ($r) => \Route::has($r);

    if ($isSuper) {
        $items = [
            ['label' => _lang('Home'), 'icon' => 'bi-speedometer2', 'route' => 'admin.dashboard', 'active' => 'admin.dashboard'],
            ['label' => _lang('Organizations'), 'icon' => 'bi-building', 'route' => 'admin.organizations.index', 'active' => 'admin.organizations.*'],
        ];
        $fab = $has('admin.organizations.create') ? ['icon' => 'bi-plus-lg', 'route' => 'admin.organizations.create', 'label' => _lang('Add')] : null;
    } else {
        $items = [
            ['label' => _lang('Home'), 'icon' => 'bi-house-door', 'route' => 'dashboard', 'active' => 'dashboard'],
        ];
        if ($has('customers.index') && (function_exists('organization_module_enabled') ? organization_module_enabled('crm_module') : true)) {
            $items[] = ['label' => _lang('Customers'), 'icon' => 'bi-people', 'route' => 'customers.index', 'active' => 'customers.*'];
        }
        if ($has('staff.index') && ($u->isOrganizationOwner() || user_can('staff.manage'))) {
            $items[] = ['label' => _lang('Staff'), 'icon' => 'bi-person-badge', 'route' => 'staff.index', 'active' => 'staff.*'];
        }
        $fab = $has('customers.create') ? ['icon' => 'bi-plus-lg', 'route' => 'customers.create', 'label' => _lang('Add')] : null;
    }

    $items = array_slice($items, 0, 4);
@endphp

<nav class="wk-mnav d-lg-none">
    @foreach ($items as $i => $item)
        <a href="{{ $has($item['route']) ? route($item['route']) : 'javascript:void(0)' }}"
           class="wk-mnav-item {{ request()->routeIs($item['active']) ? 'active' : '' }}">
            <i class="bi {{ $item['icon'] }}"></i>
            <span>{{ $item['label'] }}</span>
        </a>

        @if ($fab && $i === (int) floor((count($items) - 1) / 2))
            <a href="{{ route($fab['route']) }}" class="wk-mnav-fab" aria-label="{{ $fab['label'] }}">
                <i class="bi {{ $fab['icon'] }}"></i>
            </a>
        @endif
    @endforeach

    <a href="javascript:void(0);" class="wk-mnav-item sidemenu-toggle" data-bs-toggle="sidebar">
        <i class="bi bi-list"></i>
        <span>{{ _lang('Menu') }}</span>
    </a>
</nav>

<style>
    .wk-mnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        display: flex; align-items: stretch; justify-content: space-around;
        background: #fff;
        border-top: 1px solid #eef2f7;
        box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, .25);
        padding-bottom: env(safe-area-inset-bottom, 0);
        height: calc(62px + env(safe-area-inset-bottom, 0));
    }
    .wk-mnav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; text-decoration: none; color: #94a3b8; font-size: .68rem; font-weight: 600;
        transition: color .15s ease; position: relative;
    }
    .wk-mnav-item i { font-size: 1.25rem; }
    .wk-mnav-item.active { color: #2563eb; }
    .wk-mnav-item.active::before {
        content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, #2563eb, #38bdf8);
    }
    .wk-mnav-fab {
        flex: 0 0 auto; width: 56px; height: 56px; margin: -18px 4px 0; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.5rem; text-decoration: none;
        background: linear-gradient(135deg, #2563eb, #0ea5e9);
        box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .65);
        border: 4px solid #fff;
        transition: transform .15s ease;
    }
    .wk-mnav-fab:active { transform: scale(.92); }

    /* Give page content room above the bar + hide desktop footer on phones */
    @media (max-width: 991.98px) {
        .main-content.app-content { padding-bottom: 80px; }
        .footer { display: none; }
    }

    /* ---- Mobile sidebar backdrop (slide-in handled by app-shell.css) ---- */
    @media (max-width: 991.98px) {
        #wk-sb-overlay {
            display: none; position: fixed; inset: 0; z-index: 1025;
            background: rgba(15, 23, 42, .45);
        }
        html[data-toggled="open"] #wk-sb-overlay { display: block; }
    }
</style>

{{-- Backdrop for the mobile left menu --}}
<div id="wk-sb-overlay" aria-hidden="true"></div>

<script>
    (function () {
        var html = document.documentElement;
        function closeSidebar() { html.setAttribute('data-toggled', 'close'); }

        // NOTE: the .sidemenu-toggle buttons (header + bottom "Menu") are wired in
        // /theme-wk/app-shell.js. Here we only handle the backdrop + auto-close.

        // Tap the backdrop to close.
        var ov = document.getElementById('wk-sb-overlay');
        if (ov) ov.addEventListener('click', closeSidebar);

        // Close ONLY when an actual navigation link is tapped (it loads a new page).
        // Submenu parents (Assets ▸, HR & Payroll ▸ …) just expand — keep the menu open.
        document.querySelectorAll('.app-sidebar a.side-menu__item').forEach(function (a) {
            var href = a.getAttribute('href') || '';
            // Submenu parents sit on an <li class="...has-sub"> and use a void href.
            var isParent = a.closest('li')?.classList.contains('has-sub')
                || /^(#|javascript:)/.test(href) || href === '';
            if (isParent) return;              // submenu toggle → leave sidebar open
            a.addEventListener('click', function () {
                if (window.innerWidth <= 991) closeSidebar();   // real link → close (page reloads anyway)
            });
        });
    })();
</script>
@endauth