{{--
    The cart button, with the number of lines in the cart and, on hover or
    keyboard focus, what they are. Drawn in the client area's top bar
    ($variant 'client') and the public site's ($variant 'site').

    The count comes with the page (CartCountComposer); the lines are fetched
    from cart/summary the first time the panel opens, so the button costs a
    page nothing more than one cart lookup. On a touch screen the button is a
    plain link to the cart page.
--}}
@php
    $variant = $variant ?? 'client';
    $cartCount = (int) ($cartCount ?? 0);
    $miniCartI18n = [
        'title' => __('client.cart.mini_title'),
        'loading' => __('common.loading'),
        'empty' => __('client.cart.empty'),
        'error' => __('client.cart.mini_error'),
        'remove' => __('common.actions.remove'),
        'subtotal' => __('client.cart.subtotal'),
        'discount' => __('client.cart.discount'),
        'tax' => __('client.cart.tax'),
        'total' => __('client.cart.total'),
    ];
@endphp
<div class="pn-minicart pn-minicart--{{ $variant }}"
     data-summary-url="{{ route('client.cart.summary') }}"
     data-remove-url="{{ route('client.cart.remove', ['line' => '__LINE__']) }}"
     data-cart-url="{{ route('client.cart.index') }}"
     data-csrf="{{ csrf_token() }}"
     data-i18n='@json($miniCartI18n)'>
    <a href="{{ route('client.cart.index') }}"
       class="pn-minicart__btn {{ $variant === 'site' ? 'main-nav__cart' : '' }}"
       aria-label="{{ trans_choice('client.cart.mini_aria', $cartCount, ['count' => $cartCount]) }}"
       aria-haspopup="true">
        @if($variant === 'site')
            <i class="ri-shopping-cart-2-line" aria-hidden="true"></i>
        @else
            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        @endif
        <span class="pn-minicart__badge" @if($cartCount === 0) hidden @endif>{{ $cartCount > 99 ? '99+' : $cartCount }}</span>
    </a>
    <div class="pn-minicart__panel" role="region" aria-label="{{ __('client.cart.mini_title') }}">
        <div class="pn-minicart__head">{{ __('client.cart.mini_title') }}</div>
        <div class="pn-minicart__body" aria-live="polite"></div>
        <div class="pn-minicart__foot" hidden>
            <div class="pn-minicart__totals"></div>
            <div class="pn-minicart__actions">
                <a href="{{ route('client.cart.index') }}" class="pn-minicart__link">{{ __('client.cart.view_cart') }}</a>
                <a href="{{ route('client.cart.checkout') }}" class="pn-minicart__link pn-minicart__link--primary">{{ __('client.cart.checkout') }} &rarr;</a>
            </div>
        </div>
    </div>
</div>

@once
<style>
    .pn-minicart{position:relative;display:inline-flex;align-items:center}
    .pn-minicart__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
    .pn-minicart--client .pn-minicart__btn{border:1px solid var(--border,#e5e7eb);border-radius:8px;padding:6px 10px;color:var(--muted,#6b7280);transition:all .15s}
    .pn-minicart--client .pn-minicart__btn:hover{color:var(--primary,#2563eb);border-color:var(--primary,#2563eb)}
    .pn-minicart__badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger,#ef4444);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--card,#fff)}
    .pn-minicart--site .pn-minicart__badge{top:0;right:0;box-shadow:none}
    .pn-minicart__badge[hidden]{display:none}
    .pn-minicart__panel{display:none;position:absolute;top:100%;right:0;width:340px;max-width:calc(100vw - 32px);margin-top:8px;background:var(--card,var(--theme-card-bg,#fff));color:var(--text,var(--theme-text-color,#111827));border:1px solid var(--border,var(--theme-border-color,#e5e7eb));border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.15);z-index:1000;text-align:left;font-size:13px}
    .pn-minicart__panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
    @media (hover:hover){.pn-minicart:hover .pn-minicart__panel{display:block}}
    .pn-minicart.is-open .pn-minicart__panel{display:block}
    .pn-minicart__head{padding:12px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border,var(--theme-border-color,#e5e7eb))}
    .pn-minicart__body{max-height:320px;overflow-y:auto}
    .pn-minicart__msg{padding:20px 16px;text-align:center;color:var(--muted,var(--theme-muted-color,#6b7280))}
    .pn-minicart__item{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--border,var(--theme-border-color,#f1f5f9))}
    .pn-minicart__item:last-child{border-bottom:0}
    .pn-minicart__info{flex:1;min-width:0}
    .pn-minicart__name{font-weight:600;overflow-wrap:anywhere}
    .pn-minicart__sub{color:var(--muted,var(--theme-muted-color,#6b7280));font-size:12px;overflow-wrap:anywhere}
    .pn-minicart__price{font-weight:700;white-space:nowrap}
    .pn-minicart__remove{background:none;border:0;padding:0;margin-top:2px;color:var(--danger,#ef4444);font-size:12px;cursor:pointer;font-family:inherit}
    .pn-minicart__remove:disabled{opacity:.5;cursor:wait}
    .pn-minicart__foot{padding:12px 16px;border-top:1px solid var(--border,var(--theme-border-color,#e5e7eb))}
    .pn-minicart__foot[hidden]{display:none}
    .pn-minicart__row{display:flex;justify-content:space-between;color:var(--muted,var(--theme-muted-color,#6b7280));margin-bottom:4px}
    .pn-minicart__row--total{color:inherit;font-weight:700;font-size:14px;margin:6px 0 0}
    .pn-minicart__actions{display:flex;gap:8px;margin-top:12px}
    .pn-minicart__link{flex:1;text-align:center;padding:8px 10px;border-radius:8px;font-weight:600;text-decoration:none;border:1px solid var(--border,var(--theme-border-color,#e5e7eb));color:inherit}
    .pn-minicart__link--primary{background:var(--primary,var(--theme-welcome-accent,#2563eb));border-color:transparent;color:#fff}
    .pn-minicart__link:hover{opacity:.9}
</style>
<script>
(function () {
    function init(root) {
        var t = JSON.parse(root.getAttribute('data-i18n') || '{}');
        var body = root.querySelector('.pn-minicart__body');
        var foot = root.querySelector('.pn-minicart__foot');
        var totals = root.querySelector('.pn-minicart__totals');
        var badges = document.querySelectorAll('.pn-minicart__badge');
        var loadedAt = 0, loading = false;

        function csrf() {
            var meta = document.querySelector('meta[name="csrf-token"]');
            return (meta && meta.content) || root.getAttribute('data-csrf') || '';
        }

        function el(tag, cls, text) {
            var e = document.createElement(tag);
            if (cls) e.className = cls;
            if (text !== undefined && text !== null) e.textContent = text;
            return e;
        }

        function message(text) {
            body.replaceChildren(el('div', 'pn-minicart__msg', text));
            foot.hidden = true;
        }

        // Every cart button on the page (a layout can draw more than one).
        function setCount(n) {
            badges.forEach(function (b) {
                b.textContent = n > 99 ? '99+' : String(n);
                b.hidden = n === 0;
            });
        }

        function row(label, value, cls) {
            var r = el('div', 'pn-minicart__row' + (cls ? ' ' + cls : ''));
            r.append(el('span', null, label), el('span', null, value));
            return r;
        }

        function render(data) {
            setCount(data.count || 0);
            if (!data.count) { message(t.empty); return; }

            body.replaceChildren();
            data.items.forEach(function (item) {
                var li = el('div', 'pn-minicart__item');
                var info = el('div', 'pn-minicart__info');
                info.append(el('div', 'pn-minicart__name', item.name));
                var sub = [item.detail, item.term].filter(Boolean).join(' · ');
                if (sub) info.append(el('div', 'pn-minicart__sub', sub));
                if (item.extras && item.extras.length) info.append(el('div', 'pn-minicart__sub', item.extras.join(', ')));
                var side = el('div');
                side.style.textAlign = 'right';
                side.append(el('div', 'pn-minicart__price', item.price));
                if (item.removable && item.line_id) {
                    var btn = el('button', 'pn-minicart__remove', t.remove);
                    btn.type = 'button';
                    btn.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); remove(item.line_id, btn); });
                    side.append(btn);
                }
                li.append(info, side);
                body.append(li);
            });

            totals.replaceChildren();
            if (data.discount || data.tax) totals.append(row(t.subtotal, data.subtotal));
            if (data.discount) totals.append(row(t.discount, data.discount));
            if (data.tax) totals.append(row(t.tax, data.tax));
            totals.append(row(t.total, data.total, 'pn-minicart__row--total'));
            foot.hidden = false;
        }

        function load() {
            // Fresh for every opening, but not for every mouse move.
            if (loading || Date.now() - loadedAt < 5000) return;
            loading = true;
            if (!loadedAt) message(t.loading);
            fetch(root.getAttribute('data-summary-url'), { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
                .then(function (r) { if (!r.ok) throw r; return r.json(); })
                .then(function (data) { loadedAt = Date.now(); render(data); })
                .catch(function () { message(t.error); })
                .finally(function () { loading = false; });
        }

        function remove(lineId, btn) {
            btn.disabled = true;
            var form = new FormData();
            form.append('_method', 'DELETE');
            fetch(root.getAttribute('data-remove-url').replace('__LINE__', encodeURIComponent(lineId)), {
                method: 'POST',
                body: form,
                credentials: 'same-origin',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest' }
            })
                .then(function (r) { return r.json().catch(function () { return {}; }); })
                .then(function (data) {
                    // On the cart page itself the page is the source of truth.
                    if (location.pathname === new URL(root.getAttribute('data-cart-url'), location.href).pathname) {
                        location.reload();
                        return;
                    }
                    var wasOpen = root.classList.contains('is-open');
                    if (data && data.items) { loadedAt = Date.now(); render(data); }
                    // The removed line took the focused button with it; keep
                    // a keyboard user's panel open on the cart button.
                    if (wasOpen) { root.classList.add('is-open'); root.querySelector('.pn-minicart__btn').focus(); }
                    if (data && data.success === false && data.message) {
                        body.prepend(el('div', 'pn-minicart__msg', data.message));
                    }
                })
                .catch(function () { btn.disabled = false; message(t.error); });
        }

        root.addEventListener('mouseenter', load);
        root.addEventListener('focusin', function () { root.classList.add('is-open'); load(); });
        root.addEventListener('focusout', function (e) { if (!root.contains(e.relatedTarget)) root.classList.remove('is-open'); });
        root.addEventListener('keydown', function (e) { if (e.key === 'Escape') { root.classList.remove('is-open'); root.querySelector('.pn-minicart__btn').blur(); } });
    }

    function boot() { document.querySelectorAll('.pn-minicart').forEach(init); }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); else boot();
})();
</script>
@endonce