@extends('layouts.dashboard')

@section('content')
@php

/**
 * POS (waiter / cashier) inside the vendor dashboard.
 * @var array $categories @var array $items @var iterable $zones @var iterable $tables
 * @var array $deliveryZones @var array $optJson @var array $ingJson
 * @var string $taxMode @var float $taxRate @var string $taxLabel @var float $serviceChargePercent @var bool $tipsEnabled
 *
 * The ticket is built client-side (assets/js/pos.js) and submitted in one
 * request; the server re-validates and re-prices every line before the order
 * is committed. Sent orders appear on the kitchen display immediately.
 */
$curSym = preg_replace('/[0-9.,\s]/', '', money(0)) ?: '$';

/* Till chrome the operator switched off on POS settings. Absent column = nothing hidden. */
$posHidden = $posHidden ?? [];
$posShow = static fn (string $k): bool => \App\Services\PosChrome::shows($posHidden, $k);

$zoneName = [];
foreach ($zones as $z) { $zoneName[(int) $z['id']] = (string) $z['name']; }
$tablesByZone = [];
foreach ($tables as $t) { $tablesByZone[(int) $t['zone_id']][] = $t; }

/** Render the data-* attributes that open the shared customize modal. */
$czAttrs = function (array $it) use ($optJson, $ingJson, $__env): string {
    $id = (int) $it['id'];
    return 'data-cz'
        . ' data-cz-id="' . $id . '"'
        . ' data-cz-name="' . e($it['name']) . '"'
        . ' data-cz-price="' . e(number_format((float) $it['price'], 2, '.', '')) . '"'
        . ' data-cz-img="' . e(media($it['image'] ?? '', 'assets/client/dish/dish-1.png')) . '"'
        . ' data-cz-desc="' . e((string) ($it['description'] ?? '')) . '"'
        . ' data-cz-options="' . e($optJson[$id] ?? '[]') . '"'
        . ' data-cz-ings="' . e($ingJson[$id] ?? '[]') . '"';
};
@endphp
@php // The till opens on the two things a cashier works with continuously — the CART and the
      // additional-options deck — so neither costs a tap to reach. Floor zones and the pinned
      // quick keys are occasional, so they start collapsed and their pill in the bar opens them.
      // The toggles in pos-modals.js drive these same root classes.
@endphp
@php /* The three chrome switches ride on this root as classes; the bars themselves are drawn by
         the dashboard layout, outside this element, so the CSS reaches them with :has() - the
         same mechanism the header-offset rules already use. Photos are hidden by class too,
         rather than by dropping the <img>, so the tile keeps its width either way. */
@endphp
<div class="qm-pos tables-closed quick-closed funcs-open{!! $posShow('images') ? '' : ' images-off' !!}{!! $posShow('subheader') ? '' : ' no-subheader' !!}{!! $posShow('topheader') ? '' : ' no-topheader' !!}{!! $posShow('sidebar') ? '' : ' no-sidebar' !!}" id="qm-pos"
     data-cur="{{ $curSym }}"
     data-tax="{{ number_format((float) $taxRate, 2, '.', '') }}"
     data-tax-mode="{{ $taxMode }}"
     data-sc="{{ number_format((float) $serviceChargePercent, 2, '.', '') }}"
     data-dfee="{{ number_format((float) ($restaurant['delivery_fee'] ?? 0), 2, '.', '') }}"
     data-tips="{{ $tipsEnabled ? '1' : '0' }}"
     data-comp-approval-pct="{{ (int) ($compApprovalPct ?? 50) }}"
     data-role="{{ \App\Support\Auth::user()['role'] ?? '' }}">

    <!-- ============ LEFT: menu browser ============ -->
    <section class="qm-pos-menu">
        <div class="qm-pos-bar">
            <div class="qm-pos-modes" role="group" aria-label="{{ t_raw('vendor.pos.order_type_aria') }}">
                <button type="button" class="qm-pos-mode is-active" data-mode="dine_in"><i class="fas fa-utensils" aria-hidden="true"></i> {{ t_raw('common.dine_in') }}</button>
                <button type="button" class="qm-pos-mode" data-mode="pickup"><i class="fas fa-shopping-bag" aria-hidden="true"></i> {{ t_raw('common.pickup') }}</button>
                <button type="button" class="qm-pos-mode" data-mode="delivery"><i class="fas fa-motorcycle" aria-hidden="true"></i> {{ t_raw('common.delivery') }}</button>
            </div>
            <div class="qm-pos-search">
                <i class="fas fa-search" aria-hidden="true"></i>
                <input type="text" id="qm-pos-search" class="form-control" placeholder="{{ t_raw('vendor.pos.search_menu_placeholder') }}" aria-label="{{ t_raw('vendor.pos.search_menu_aria') }}">
            </div>
            @php $drawerShift = $drawerShift ?? null;
@endphp
            <a class="qm-pos-drawer {{ $drawerShift ? 'is-open' : 'is-closed' }}" href="{{ route('vendor.shifts') }}"
               title="{!! $drawerShift ? t('vendor.pos.drawer_open_since', [':time' => fmt_clock($drawerShift['opened_at'])]) : t('vendor.pos.drawer_closed_hint') !!}">
                <i class="fas fa-wallet" aria-hidden="true"></i>
                <span>{!! $drawerShift ? t('vendor.pos.drawer_open_label') : t('vendor.pos.drawer_closed_label') !!}</span>
            </a>
            @if ($tablesByZone && $posShow('tables'))
            @php // Toggle the dine-in floor-zones section (indoor / patio / upper level…).
@endphp
            <button type="button" class="qm-pos-drawer qm-pos-morebtn" data-pos-tables-toggle aria-controls="qm-pos-tablewrap" aria-expanded="false" title="{{ t_raw('vendor.pos.tables_toggle') }}">
                <i class="fas fa-chair" aria-hidden="true"></i>
                <span>{{ t_raw('vendor.pos.tables_toggle') }}</span>
                <i class="fas fa-chevron-down qm-pos-more-chev" aria-hidden="true"></i>
            </button>
            @endif
            @if ($posShow('funcs'))
            @php // Toggles the function deck below (guests, discounts, print…) — same pill as the drawer
                  // chip. Open by default on desktop, collapsed on tablet/phone (CSS default + JS).
@endphp
            <button type="button" class="qm-pos-drawer qm-pos-morebtn" data-pos-funcs-toggle aria-controls="qm-pos-funcs" aria-expanded="true" title="{{ t_raw('vendor.pos.more_actions') }}">
                <i class="fas fa-sliders-h" aria-hidden="true"></i>
                <span>{{ t_raw('vendor.pos.more_actions') }}</span>
                <i class="fas fa-chevron-down qm-pos-more-chev" aria-hidden="true"></i>
            </button>
            @endif
            @if (!empty($quickKeys))
            @php /* Show/hide the pinned strip. Guarded like the floor-zones toggle above: a till with
                     nothing pinned has nothing to collapse, so the button is not drawn at all. Reuses
                     the strip's own label key rather than minting a second wording for one thing. */
@endphp
            <button type="button" class="qm-pos-drawer qm-pos-morebtn" data-pos-quick-toggle aria-controls="qm-pos-quick" aria-expanded="false" title="{{ t_raw('vendor.pos.quick_keys_label') }}">
                <i class="fas fa-bolt" aria-hidden="true"></i>
                <span>{{ t_raw('vendor.pos.quick_keys_label') }}</span>
                <i class="fas fa-chevron-down qm-pos-more-chev" aria-hidden="true"></i>
            </button>
            @endif
            @if ($posShow('shortcuts'))
            <button type="button" class="qm-pos-drawer qm-pos-morebtn" data-bs-toggle="modal" data-bs-target="#posShortcutsModal" title="{{ t_raw('vendor.pos.shortcuts_label') }}">
                <i class="fas fa-keyboard" aria-hidden="true"></i>
                <span>{{ t_raw('vendor.pos.shortcuts_label') }}</span>
            </button>
            @endif
            @php // Collapse the New-Order panel away to the right (the menu takes the full width) and back.
                  // Sits last so the cart control docks beside the panel it collapses.
@endphp
            <button type="button" class="qm-pos-drawer qm-pos-morebtn" data-pos-ticket-toggle aria-controls="qm-pos-ticket-panel" aria-expanded="true" title="{{ t_raw('vendor.pos.cart') }}">
                <i class="fas fa-shopping-cart" aria-hidden="true"></i>
                <span>{{ t_raw('vendor.pos.cart') }}</span>
                <i class="fas fa-chevron-right qm-pos-chev-h" aria-hidden="true"></i>
            </button>
            @php /* Both belong to offline mode: a connection pill on a till that cannot hold a
                     sale only tells staff something they can do nothing with, and there is nothing
                     to install when the manifest 404s. */
@endphp
            @php $offlineCap = \App\Services\Capability::has(\App\Services\Capability::OFFLINE);
@endphp
            @if ($offlineCap)
            <span class="qm-pill qm-pill-green ms-2" data-net-status hidden></span>
            @endif
            @if ($offlineCap && $posShow('install'))
            <button type="button" class="qm-pos-drawer qm-pos-morebtn" data-pwa-install title="{{ t_raw('vendor.pos.install_app') }}" hidden>
                <i class="fas fa-download" aria-hidden="true"></i>
                <span>{{ t_raw('vendor.pos.install_app') }}</span>
            </button>
            @endif
        </div>

        @if ($tablesByZone && $posShow('tables'))
        <div class="qm-pos-tables" id="qm-pos-tablewrap">
            @foreach ($tablesByZone as $zid => $zTables)
            <div class="qm-pos-zone">
                <span class="qm-pos-zone-name">{{ $zoneName[$zid] ?? t_raw('vendor.pos.zone_fallback') }}</span>
                @foreach ($zTables as $t)
@php $st = (string) $t['status']; @endphp
                <button type="button" class="qm-pos-table {{ $st !== 'vacant' ? 'is-busy' : '' }}" data-table-id="{{ (int) $t['id'] }}" data-table="{{ $t['label'] }}" data-seats="{{ (int) $t['seats'] }}" title="{{ status_label('table', $st) }} &middot; {{ (int) $t['seats'] }} {{ t_raw('vendor.pos.seats_suffix') }}">
                    <span class="qm-pos-table-lbl">{{ $t['label'] }}</span>
                    <span class="qm-pos-table-seats"><i class="fas fa-user" aria-hidden="true"></i>{{ (int) $t['seats'] }}</span>
                </button>
                @endforeach
            </div>
            @endforeach
        </div>
        @endif

        @php /* Quick keys — the dishes this restaurant rings all day, pinned by the operator in
                 Terminals → Quick keys and resolved here against the live menu, so a key for a dish
                 that has been deleted or taken off simply is not drawn. Rendered into the page, not
                 fetched: the deck has to keep working through an outage, which it cannot do if
                 pressing a key needs the network. Each key carries the same data-cz attributes as
                 the grid tile below, so the tap runs through the one customize path. */
@endphp
        @if (!empty($quickKeys))
        <div class="qm-pos-tables qm-pos-quick" id="qm-pos-quick">
            <div class="qm-pos-zone">
                <span class="qm-pos-zone-name">{{ t_raw('vendor.pos.quick_keys_label') }}</span>
                @foreach ($quickKeys as $qk)
                @php /* Same wrapper as the grid tile below, image included. A quick key is a tile for a
                         dish the cashier rings by sight; without the photo it was the one tile on the
                         till identified by name alone — and these are the dishes being reached for
                         fastest, so they are the last ones that should be harder to spot. */
@endphp
                <button type="button" class="qm-pos-item" {!! $czAttrs($qk) !!}>
                    <span class="qm-pos-item-img">
                        <img src="{{ media($qk['image'] ?? '', 'assets/client/dish/dish-1.png') }}" alt="" width="72" height="72" loading="lazy">
                    </span>
                    <span class="qm-pos-item-body">
                        <span class="qm-pos-item-name">{{ $qk['name'] }}</span>
                    </span>
                    <span class="qm-pos-item-price">{{ money($qk['price']) }}</span>
                </button>
                @endforeach
            </div>
        </div>
        @endif

        <div class="qm-pos-cats" role="tablist" aria-label="{{ t_raw('vendor.pos.menu_categories_aria') }}">
            <button type="button" class="qm-pos-cat is-active" data-cat="all">{{ t_raw('common.all') }}</button>
            @foreach ($categories as $c)
            <button type="button" class="qm-pos-cat" data-cat="{{ (int) $c['id'] }}">{{ $c['name'] }}</button>
            @endforeach
        </div>

        <div class="qm-pos-grid" id="qm-pos-grid">
            @foreach ($items as $it)
@php $avail = (int) ($it['is_available'] ?? 1) === 1; @endphp
            @php // data-barcode is read by the scanner bridge in pos-hardware.js: the whole menu is
                  // already in this page, so a scan resolves from the DOM with no round trip and
                  // cannot reach another restaurant's items.
@endphp
            <button type="button"
                    class="qm-pos-item {{ $avail ? '' : 'is-off' }}"
                    data-cat="{{ (int) $it['menu_category_id'] }}"
                    data-name-lc="{{ strtolower((string) $it['name']) }}"
                    @if (($it['barcode'] ?? '') !== '')data-barcode="{{ (string) $it['barcode'] }}"@endif
                    {!! $avail ? $czAttrs($it) : 'disabled' !!}>
                <span class="qm-pos-item-img">
                    <img src="{{ media($it['image'] ?? '', 'assets/client/dish/dish-1.png') }}" alt="" width="72" height="72" loading="lazy">
                    @if (!$avail)<span class="qm-pos-item-off">{{ t_raw('vendor.pos.item_86d') }}</span>@endif
                </span>
                <span class="qm-pos-item-body">
                    <span class="qm-pos-item-name">{{ $it['name'] }}</span>
                </span>
                <span class="qm-pos-item-price">{{ money($it['price']) }}</span>
            </button>
            @endforeach
        </div>

        <!-- POS function deck — the quick actions a restaurant POS uses most, in
             workflow order (guests → discounts & loyalty → held → corrections → print). -->
        <div class="qm-pos-funcs" id="qm-pos-funcs" role="group" aria-label="{{ t_raw('vendor.pos.func_actions_aria') }}">
            <button type="button" class="qm-pos-func" data-pos-open="guests"><i class="fas fa-user-friends" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_guests') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="move"><i class="fas fa-exchange-alt" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_move_table') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="discount"><i class="fas fa-percent" aria-hidden="true"></i>{{ t_raw('common.discount') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="coupon"><i class="fas fa-ticket-alt" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_coupon') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="loyalty"><i class="fas fa-gift" aria-hidden="true"></i>{{ t_raw('nav.loyalty') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="split"><i class="fas fa-columns" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_split_bill') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="tip"><i class="fas fa-hand-holding-usd" aria-hidden="true"></i>{{ t_raw('checkout.tip') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="hold"><i class="fas fa-pause" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_hold') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="recall"><i class="fas fa-list-ul" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_recall') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="void"><i class="fas fa-ban" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_void') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="note"><i class="fas fa-sticky-note" aria-hidden="true"></i>{{ t_raw('common.note') }}</button>
            <button type="button" class="qm-pos-func" data-pos-open="bill"><i class="fas fa-print" aria-hidden="true"></i>{{ t_raw('vendor.pos.func_print_bill') }}</button>
        </div>
    </section>

    <!-- ============ RIGHT: order ticket (kitchen-pipeline style) ============ -->
    <aside class="qm-pos-ticket" id="qm-pos-ticket-panel" aria-label="{{ t_raw('vendor.pos.current_order_aria') }}">
        <div class="qm-pos-ticket-hd">
            <div class="qm-pos-ticket-where">
                <strong id="qm-pos-where">{{ t_raw('vendor.pos.new_order_default') }}</strong>
                <span class="qm-pos-ticket-sub" id="qm-pos-sub">{{ t_raw('vendor.pos.dinein_pick_table_default') }}</span>
                <span class="qm-pos-ticket-meta" id="qm-pos-meta" hidden><span id="qm-pos-ref"></span></span>
            </div>
            <div class="qm-pos-ticket-waiter">
                <img src="{{ avatar_src(\App\Support\Auth::user()['avatar'] ?? null) }}" alt="" width="30" height="30">
                <span>{{ \App\Support\Auth::user()['name'] ?? t_raw('vendor.pos.waiter_fallback') }}</span>
            </div>
        </div>

        <!-- Delivery orders taken over the phone need the customer's details. -->
        <div class="qm-pos-delivery" id="qm-pos-delivery" hidden>
            <input type="text" class="form-control form-control-sm" id="qm-pos-cust-name" placeholder="{{ t_raw('vendor.pos.customer_name_placeholder') }}" aria-label="{{ t_raw('vendor.pos.customer_name_placeholder') }}">
            <input type="tel" class="form-control form-control-sm" id="qm-pos-cust-phone" placeholder="{{ t_raw('common.phone') }}" aria-label="{{ t_raw('vendor.pos.customer_phone_aria') }}">
            <input type="text" class="form-control form-control-sm" id="qm-pos-cust-address" placeholder="{{ t_raw('checkout.delivery_address') }}" aria-label="{{ t_raw('checkout.delivery_address') }}">
            @if (count($deliveryZones))
            <select class="form-select form-select-sm" id="qm-pos-cust-zone" aria-label="{{ t_raw('vendor.pos.delivery_zone_aria') }}">
                @foreach ($deliveryZones as $dz)
                <option value="{{ (int) $dz['id'] }}" data-fee="{{ number_format((float) $dz['delivery_fee'], 2, '.', '') }}">{{ $dz['zone_name'] }} &middot; {{ money($dz['delivery_fee']) }}</option>
                @endforeach
            </select>
            @endif
        </div>

        <div class="qm-pos-lines" id="qm-pos-lines"></div>

        <div class="qm-pos-empty" id="qm-pos-empty">
            <i class="fas fa-receipt" aria-hidden="true"></i>
            <p>{{ t_raw('vendor.pos.empty_ticket_hint') }}</p>
        </div>

        <div class="qm-pos-ticket-ft">
            <dl class="qm-pos-totals">
                <div><dt>{{ t_raw('checkout.subtotal') }}</dt><dd id="qm-pos-subtotal">{{ money(0) }}</dd></div>
                <div id="qm-pos-row-discount" hidden><dt id="qm-pos-lbl-discount">{{ t_raw('common.discount') }}</dt><dd id="qm-pos-discount"></dd></div>
                <div id="qm-pos-row-reward" hidden><dt>{{ t_raw('vendor.pos.row_reward_label') }}</dt><dd id="qm-pos-reward"></dd></div>
                <div id="qm-pos-row-fee" hidden><dt>{{ t_raw('checkout.delivery_fee') }}</dt><dd id="qm-pos-fee"></dd></div>
                <div><dt>{{ t_raw('checkout.tax') }}</dt><dd id="qm-pos-tax">{{ money(0) }}</dd></div>
                <div id="qm-pos-row-sc" hidden><dt>{{ t_raw('checkout.service_charge') }}</dt><dd id="qm-pos-sc"></dd></div>
                <div id="qm-pos-row-tip" hidden><dt>{{ t_raw('checkout.tip') }}</dt><dd id="qm-pos-tip"></dd></div>
                <div class="qm-pos-grand"><dt>{{ t_raw('common.total') }}</dt><dd id="qm-pos-total">{{ money(0) }}</dd></div>
            </dl>
            <div class="qm-pos-pay" role="group" aria-label="{{ t_raw('checkout.payment_method') }}">
                <button type="button" class="qm-pos-paybtn is-active" data-pay="cash"><i class="fas fa-money-bill-wave" aria-hidden="true"></i> {{ t_raw('status.payment_method.cash') }}</button>
                <button type="button" class="qm-pos-paybtn" data-pay="card"><i class="fas fa-credit-card" aria-hidden="true"></i> {{ t_raw('status.payment_method.card') }}</button>
            </div>
            <div class="qm-pos-actions qm-pos-actions-2">
                <button type="button" class="qm-btn qm-btn-outline qm-pos-send" id="qm-pos-send"><i class="fas fa-paper-plane" aria-hidden="true"></i> {{ t_raw('common.send') }}</button>
                <button type="button" class="qm-btn qm-pos-charge" id="qm-pos-chargebtn" data-pos-open="payment">{{ t_raw('vendor.pos.charge_btn_prefix') }} <span id="qm-pos-charge">&mdash;</span></button>
            </div>
            <div class="qm-pos-sentbar" id="qm-pos-sentbar" hidden>
                <span><i class="fas fa-check-circle" aria-hidden="true"></i> {{ t_raw('vendor.pos.sent_to_kitchen') }} &middot; <strong id="qm-pos-sentno"></strong></span>
                <button type="button" class="qm-btn qm-btn-outline qm-btn-sm" id="qm-pos-new">{{ t_raw('vendor.pos.new_order_default') }}</button>
            </div>
        </div>
    </aside>
</div>

@partial('order-customize-modal', ['cur' => $curSym])
@partial('pos/modals', ['cur' => $curSym, 'tablesByZone' => $tablesByZone, 'zoneName' => $zoneName, 'restaurant' => $restaurant ?? [], 'discountReasons' => $discountReasons ?? [], 'voidReasons' => $voidReasons ?? [], 'payQrEnabled' => $payQrEnabled ?? false])

@php
/*
 * Preview-only starter ticket.
 *
 * On the public demo the till is the first screen most visitors open, and an empty
 * New-Order panel shows none of the line anatomy, the tax line or the totals. Four real
 * lines drawn from this restaurant's own menu render the panel exactly as a working
 * service would, with genuine names, prices and tax.
 *
 * Gated on demo_mode(): a restaurant that bought the product always opens a clean ticket,
 * because starting a shift with phantom items on the bill would be a serious defect.
 * It also seeds ONLY when the ticket is empty, so it never overwrites real work.
 */
$demoTicket = [];
if (function_exists('demo_mode') && demo_mode()) {
    foreach ($items as $it) {
        if (count($demoTicket) >= 4) { break; }
        if ((float) ($it['price'] ?? 0) <= 0 || (int) ($it['is_available'] ?? 1) !== 1) { continue; }
        $demoTicket[] = ['id' => (int) $it['id'], 'name' => (string) $it['name'], 'price' => (float) $it['price']];
    }
}
@endphp
@if ($demoTicket)
<script>
document.addEventListener('DOMContentLoaded', function () {
    // pos.js publishes both of these; bail rather than throw if the bundle changed.
    if (!window.qmOnCustomizeAdd || !window.qmPos || !qmPos.state) { return; }
    if (qmPos.state.lines && qmPos.state.lines.length) { return; }   // never clobber a real ticket
    @php
 /* Dish names are vendor-typed, so this inline-script blob carries the same hex flags
             menu-item-form.php uses on the very same data: without JSON_HEX_TAG a name holding a
             literal "</script" closes this element and runs whatever follows it. */
@endphp
    var seed = {!! json_encode($demoTicket, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!};
    seed.forEach(function (d, i) {
        // A believable spread: one line doubled, the rest single, like a real cover.
        qmOnCustomizeAdd({ id: d.id, name: d.name, unitPrice: d.price, qty: i === 1 ? 2 : 1 });
    });
});
</script>
@endif

@php // POS device bridge (card reader / receipt printer / cash drawer). QMPOS is read by
      // pos-reader.js + pos-hardware.js, which the controller enqueues only when the bound device
      // has the capability. Card data never touches this server — the Terminal SDK talks to Stripe.
@endphp
<script>
window.QMPOS = {
    csrf: {!! json_encode(csrf_token()) !!},
    currency: {!! json_encode(setting('currency_symbol', '$')) !!},
    receiptTitle: {!! json_encode((string) (($restaurant ?? [])['name'] ?? '')) !!},
    receiptFooter: {!! json_encode(t_raw('vendor.pos.receipt_thanks')) !!},
    readerTokenUrl: {!! json_encode(route('vendor.pos.reader.token')) !!},
    readerIntentUrl: {!! json_encode(route('vendor.pos.reader.intent')) !!},
    drawerOpenUrl: {!! json_encode(route('vendor.pos.drawer.open')) !!},
    readerLabel: {!! json_encode((string) (($device ?? [])['card_reader_ref'] ?? '')) !!},
    @php
 /* The bound till's own token, sent back on the order POST so each sale is attributed to
             this terminal (PosController::posDeviceId). Same shape as the kiosk's KIOSK_TOKEN;
             empty on an unbound till, where attribution is simply optional. */
@endphp
    deviceToken: {!! json_encode((string) (($device ?? [])['token'] ?? '')) !!},
    autoPrint: {!! json_encode((bool) (($printerOn ?? false) && (int) (($device ?? [])['auto_print'] ?? 0) === 1)) !!},
    @php
 /* Both empty unless the operator switched offline terminals on: with no worker URL the
             script registers nothing, and queue:false leaves window.QM.post untouched, so the till
             behaves exactly as it did before the feature existed. The script still loads — it is
             harmless inert — rather than the page growing a conditional <script> tag. */
@endphp
    @php
 $offlineOn = \App\Services\Capability::has(\App\Services\Capability::OFFLINE);
@endphp
    swUrl: {!! json_encode($offlineOn ? route('sw.js') : '') !!},
    queue: {!! $offlineOn ? 'true' : 'false' !!},
    i18nOnline: {!! json_encode(t_raw('vendor.pos.net_online')) !!},
    i18nOffline: {!! json_encode(t_raw('vendor.pos.net_offline')) !!},
    scanner: {!! json_encode((bool) ($scannerOn ?? false)) !!},
    i18nScanNotFound: {!! json_encode(t_raw('vendor.pos.scan_not_found')) !!},
    i18nScanMatches: {!! json_encode(t_raw('vendor.pos.scan_matches')) !!},
    printerTransport: {!! json_encode((string) (($device ?? [])['printer_transport'] ?? 'none')) !!},
    hasDrawer: {!! (!empty($device) && (int) (($device ?? [])['has_drawer'] ?? 0) === 1) ? 'true' : 'false' !!}
};
</script>
@if (!empty($readerOn))
<script src="https://js.stripe.com/terminal/v1/"></script>
@endif

@php // Keyboard shortcuts: F2 search · F3 discount · F4 hold · F9 pay · F1 this reference.
@endphp
<div class="modal fade" id="posShortcutsModal" tabindex="-1" aria-labelledby="posShortcutsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title h5" id="posShortcutsLabel">{{ t_raw('vendor.pos.shortcuts_label') }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button>
            </div>
            <div class="modal-body">
                <table class="qm-table"><tbody>
                    <tr><td><span class="qm-pill qm-pill-grey">F2</span></td><td>{{ t_raw('vendor.pos.sc_search') }}</td></tr>
                    <tr><td><span class="qm-pill qm-pill-grey">F3</span></td><td>{{ t_raw('vendor.pos.sc_discount') }}</td></tr>
                    <tr><td><span class="qm-pill qm-pill-grey">F4</span></td><td>{{ t_raw('vendor.pos.sc_hold') }}</td></tr>
                    <tr><td><span class="qm-pill qm-pill-grey">F9</span></td><td>{{ t_raw('vendor.pos.sc_pay') }}</td></tr>
                </tbody></table>
            </div>
        </div>
    </div>
</div>
<script>
(function () {
    // POS action hotkeys: fire the existing controls so all logic stays in pos.js / pos-modals.js.
    function fire(sel) { var el = document.querySelector(sel); if (el) { el.click(); } }
    document.addEventListener('keydown', function (e) {
        if (e.ctrlKey || e.altKey || e.metaKey) { return; }
        // F1 (shortcuts help) always works; the action hotkeys are ignored while the cashier is
        // typing in a field or a POS overlay is already open, so they cannot interrupt data entry
        // or stack a second overlay over an open one.
        if (e.key !== 'F1') {
            var el = document.activeElement;
            if (el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName))) { return; }
            if (document.querySelector('[id^="posm-"].is-open')) { return; }
        }
        switch (e.key) {
            case 'F1': e.preventDefault(); fire('[data-bs-target="#posShortcutsModal"]'); break;
            case 'F2': e.preventDefault(); var s = document.getElementById('qm-pos-search'); if (s) { s.focus(); s.select(); } break;
            case 'F3': e.preventDefault(); fire('[data-pos-open="discount"]'); break;
            case 'F4': e.preventDefault(); fire('[data-pos-open="hold"]'); break;
            case 'F9': e.preventDefault(); fire('[data-pos-open="payment"]'); break;
        }
    });
})();
</script>
@endsection