@php

// Current request path (query-string stripped) for route-aware highlighting.
$cur = \App\Support\App::path();
// Normalise to the controller whitelist (AccountController::orders), so a bogus
// ?f= still highlights the All link.
$qs  = (string) (is_scalar($f = request()->query('f')) ? $f : '');
$qs  = in_array($qs, ['active', 'past'], true) ? $qs : '';

/**
 * Decide whether a sidebar link is the active one.
 * Matches on path; for the three Orders tabs we disambiguate by the exact ?f= flag.
 */
$isActive = static function (string $path) use ($cur, $qs, $__env): bool {
    [$p, $query] = array_pad(explode('?', $path, 2), 2, '');
    parse_str($query, $params);
    $linkFlag = (string) ($params['f'] ?? '');

    if ($p === '/account') {
        // Exact match only, so it doesn't light up on every /account/* sub-page.
        return $cur === '/account';
    }
    if ($p === '/account/orders') {
        if ($cur !== '/account/orders' && !str_starts_with($cur, '/account/orders/')) {
            return false;
        }
        // Same path for All/Active/Past — disambiguate by the exact ?f= flag.
        return $qs === $linkFlag;
    }
    return $cur === $p || str_starts_with($cur, $p . '/');
};

// Grouped sidebar sections - parity with the header account dropdown ($acctLinks).
// The 4th item is the accent-chip colour, one per group, matching the dropdown.
$groups = [
    t_raw('account.orders') => [
        ['/account/orders',          'fa-history',         t_raw('account.all_orders'), 'blue'],
        ['/account/orders?f=active', 'fa-clock',           t_raw('account.active_orders'), 'blue'],
        ['/account/orders?f=past',   'fa-check-circle',    t_raw('account.past_orders'), 'blue'],
        ['/account/reservations',    'fa-calendar-check',  t_raw('nav.reservations'), 'blue'],
        ['/account/reviews',         'fa-star-half-alt',   t_raw('account.my_reviews'), 'blue'],
    ],
    t_raw('account.saved') => [
        ['/account/favorites',       'fa-bookmark', t_raw('account.saved'), 'pink'],
        ['/account/notifications',   'fa-bell',     t_raw('nav.notifications'), 'pink'],
        ['/account/notification-settings', 'fa-sliders-h', t_raw('notif.settings_title'), 'pink'],
    ],
    t_raw('account.group_wallet') => [
        ['/account/addresses',       'fa-map-marker-alt', t_raw('account.addresses'), 'green'],
        ['/account/payment',         'fa-credit-card',    t_raw('account.payment'), 'green'],
    ],
    t_raw('nav.loyalty') => [
        ['/account/loyalty',         'fa-star',      t_raw('account.loyalty'), 'amber'],
        ['/account/perks',           'fa-gem',       t_raw('account.perks'), 'amber'],
    ],
    t_raw('common.account') => [
        ['/account',                 'fa-user',            t_raw('common.account'), 'teal'],
        ['/help',                    'fa-question-circle', t_raw('account.help'), 'teal'],
    ],
];
@endphp
@php
// Friendly label for the current page (used in the mobile collapse summary).
$currentLabel = t_raw('account.menu_label');
foreach ($groups as $links) {
    foreach ($links as [$href, , $text]) {
        if ($isActive($href)) { $currentLabel = $text; break 2; }
    }
}
@endphp
<div class="qm-card qm-acct-nav-card">
    @php /* `open` by default so the nav is always visible on desktop (the summary is
        CSS-hidden ≥992px); on mobile the summary shows and toggles this collapse. */
@endphp
    <details class="qm-acct-nav-details" open>
        <summary class="qm-acct-nav-summary">
            <span class="qm-acct-nav-summary-label"><i class="fas fa-bars" aria-hidden="true"></i> {{ $currentLabel }}</span>
            <i class="fas fa-chevron-down qm-acct-nav-summary-caret" aria-hidden="true"></i>
        </summary>
        <nav class="qm-acct-nav" aria-label="{{ t_raw('account.nav_aria') }}">
            @foreach ($groups as $label => $links)
            <p class="qm-acct-nav-label">{{ $label }}</p>
            @foreach ($links as [$href, $icon, $text, $accent])
            <a href="{{ url($href) }}" class="{!! $isActive($href) ? 'active' : '' !!}"{!! $isActive($href) ? ' aria-current="page"' : '' !!}>
                <i class="fas {{ $icon }} qm-head-chip qm-head-chip--{{ $accent }}" aria-hidden="true"></i><span>{{ $text }}</span>
            </a>
            @endforeach
            @endforeach

            <form action="{{ route('logout') }}" method="post" class="qm-acct-nav-logout">
                @csrf
                <button type="submit"><i class="fas fa-sign-out-alt qm-head-chip qm-head-chip--rose" aria-hidden="true"></i><span>{{ t_raw('common.sign_out') }}</span></button>
            </form>
        </nav>
    </details>
</div>
<script>
/* The sidebar is a <details> accordion on mobile; on desktop its summary/arrow is
   CSS-hidden (always-open by design). If it was collapsed on a narrow view the browser
   drops the `open` attribute, so widening back to desktop would leave it stuck closed with
   no way to reopen. Force it open at desktop widths, including when resizing across the
   992px breakpoint; the mobile accordion is untouched. */
(function () {
    var nav = document.querySelector('.qm-acct-nav-details');
    if (!nav) { return; }
    var mq = window.matchMedia('(min-width: 992px)');
    var sync = function () { if (mq.matches) { nav.open = true; } };
    sync();
    if (mq.addEventListener) { mq.addEventListener('change', sync); }
    else if (mq.addListener) { mq.addListener(sync); }
})();
</script>