@php
/**
 * POS action screens — one shell + one shared keypad. @var string $cur currency symbol.
 * Opened by pos-modals.js from [data-pos-open="<name>"] triggers; each screen
 * acts on the live ticket (window.qmPos) and the POS endpoints.
 */
$cur = $cur ?? (preg_replace('/[0-9.,\s]/', '', money(0)) ?: '$');

/** Reusable number pad. $mode = 'currency' | 'plain' | 'pin'. */
$keypad = function (string $mode = 'currency') use ($__env) {
    ob_start();
@endphp
    <div class="qm-posm-keypad" data-keypad="{{ $mode }}">
        @foreach (['7','8','9','4','5','6','1','2','3'] as $k)
        <button type="button" class="qm-posm-key" data-k="{{ $k }}">{{ $k }}</button>
        @endforeach
        <button type="button" class="qm-posm-key" data-k="clear">{{ t_raw('vendor.pos.keypad_clear_short') }}</button>
        <button type="button" class="qm-posm-key" data-k="0">0</button>
        <button type="button" class="qm-posm-key" data-k="back" aria-label="{{ t_raw('vendor.pos.keypad_backspace_aria') }}"><i class="fas fa-backspace" aria-hidden="true"></i></button>
    </div>
    @php return ob_get_clean();
};
@endphp

<!-- ============ Guests / covers ============ -->
<div class="qm-posm-overlay" id="posm-guests"><div class="qm-posm-dialog qm-posm-sm" role="dialog" aria-modal="true" aria-labelledby="posm-guests-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-guests-title"><i class="fas fa-user-friends" aria-hidden="true"></i> {{ t_raw('vendor.pos.guests_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <div class="qm-posm-readout"><dt>{{ t_raw('vendor.pos.covers_label') }}</dt><dd data-guests-readout>4</dd></div>
        <div class="qm-posm-chips mb-3">
            @foreach ([1, 2, 4, 6, 8, 10, 12, 16, 20, 24] as $g)<button type="button" class="qm-posm-chip" data-guests="{{ $g }}">{{ $g }}</button>@endforeach
            <button type="button" class="qm-posm-chip" data-guests-custom>{{ t_raw('vendor.pos.custom') }}</button>
        </div>
        <div data-guests-keypad class="mb-3" hidden>{!! $keypad('plain') !!}</div>
        <label class="qm-posm-label" for="posm-guests-party">{{ t_raw('vendor.pos.party_name_label') }}</label>
        <input type="text" class="form-control" id="posm-guests-party" placeholder="{{ t_raw('vendor.pos.party_name_placeholder') }}">
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-guests-set>{{ t_raw('vendor.pos.set_covers_btn') }}</button></div>
</div></div>

<!-- ============ Move / merge table ============ -->
<div class="qm-posm-overlay" id="posm-move"><div class="qm-posm-dialog qm-posm-md" role="dialog" aria-modal="true" aria-labelledby="posm-move-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-move-title"><i class="fas fa-exchange-alt" aria-hidden="true"></i> {{ t_raw('vendor.pos.move_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <div class="qm-posm-movecard"><span class="qm-posm-label">{{ t_raw('vendor.pos.moving_party_label') }}</span><div data-move-current><strong>{{ t_raw('vendor.pos.no_table_picked') }}</strong></div></div>
        <div class="qm-posm-seg my-3" data-move-mode><button class="is-active" data-v="move"><i class="fas fa-arrow-right" aria-hidden="true"></i> {{ t_raw('vendor.pos.seg_move_to') }}</button><button data-v="merge"><i class="fas fa-object-group" aria-hidden="true"></i> {{ t_raw('vendor.pos.seg_merge_with') }}</button></div>
        <span class="qm-posm-label">{{ t_raw('vendor.pos.destination_table_label') }}</span>
        <div class="qm-posm-movetables">
            @foreach (($tablesByZone ?? []) as $zid => $zTables)
            <div class="qm-posm-movezone">
                <span class="qm-posm-movezone-name">{{ $zoneName[$zid] ?? t_raw('vendor.pos.zone_fallback') }}</span>
                <div class="qm-posm-movegrid">
                    @foreach ($zTables as $t)
@php $st = (string) $t['status']; @endphp
                    <button type="button" class="qm-posm-movet {{ $st !== 'vacant' ? 'is-busy' : '' }}" data-move-table-id="{{ (int) $t['id'] }}" data-move-table="{{ $t['label'] }}"><span>{{ $t['label'] }}</span><small><i class="fas fa-user" aria-hidden="true"></i> {{ (int) $t['seats'] }}</small></button>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-move-confirm disabled>{{ t_raw('vendor.pos.move_party_btn') }}</button></div>
</div></div>

<!-- ============ Discount ============ -->
<div class="qm-posm-overlay" id="posm-discount"><div class="qm-posm-dialog" role="dialog" aria-modal="true" aria-labelledby="posm-discount-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-discount-title"><i class="fas fa-percent" aria-hidden="true"></i> {{ t_raw('common.discount') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <div class="qm-posm-section"><span class="qm-posm-label">{{ t_raw('vendor.pos.apply_to_label') }}</span>
            <div class="qm-posm-seg" data-disc-scope><button class="is-active" data-v="order">{{ t_raw('vendor.pos.scope_whole_order') }}</button><button data-v="item" data-needs-line>{{ t_raw('vendor.pos.scope_selected_item') }}</button></div>
        </div>
        <div class="qm-posm-section"><span class="qm-posm-label">{{ t_raw('common.type') }}</span>
            <div class="qm-posm-seg" data-disc-type><button class="is-active" data-v="percent">{{ t_raw('vendor.pos.type_percent') }}</button><button data-v="amount">{{ t_raw('vendor.pos.type_amount', [':cur' => $cur]) }}</button><button data-v="price" hidden>{{ t_raw('vendor.pos.type_price') }}</button></div>
        </div>
        <div class="qm-posm-section"><span class="qm-posm-label">{{ t_raw('vendor.pos.value_label') }}</span>
            <div class="qm-posm-chips" data-disc-presets>@foreach (['5','10','15','20','100'] as $p)<button type="button" class="qm-posm-chip" data-disc="{{ $p }}">{{ $p }}%</button>@endforeach<button type="button" class="qm-posm-chip" data-disc-custom>{{ t_raw('vendor.pos.custom') }}</button></div>
        </div>
        <div class="qm-posm-section" data-disc-keypad hidden>
            <div class="qm-posm-readout"><dt data-disc-kplabel>{{ t_raw('vendor.pos.custom_value_label') }}</dt><dd data-keypad-readout>0</dd></div>
            {!! $keypad('currency') !!}
        </div>
        <div class="qm-posm-section"><label class="qm-posm-label" for="posm-discount-reason">{{ t_raw('vendor.pos.reason_required_label') }}</label>
            @php $discountReasons = $discountReasons ?? [];
@endphp
            <select class="form-select" id="posm-discount-reason" data-choices data-disc-reason data-placeholder="{{ t_raw('vendor.pos.select_reason_placeholder') }}"><option value="">{{ t_raw('vendor.pos.select_reason_placeholder') }}</option>@foreach ($discountReasons as $dr)<option>{{ $dr }}</option>@endforeach<option>{{ t_raw('common.other') }}</option></select>
        </div>
        <dl class="qm-posm-totals qm-posm-section"><div class="qm-posm-grand"><dt>{{ t_raw('vendor.pos.new_total_label') }}</dt><dd><span class="qm-posm-was" data-disc-was></span> <span data-disc-new>—</span></dd></div></dl>
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-disc-apply>{{ t_raw('vendor.pos.apply_discount_btn') }}</button></div>
</div></div>

<!-- ============ Coupon ============ -->
<div class="qm-posm-overlay" id="posm-coupon"><div class="qm-posm-dialog qm-posm-sm" role="dialog" aria-modal="true" aria-labelledby="posm-coupon-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-coupon-title"><i class="fas fa-ticket-alt" aria-hidden="true"></i> {{ t_raw('vendor.pos.coupon_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <label class="qm-posm-label" for="posm-coupon-code">{{ t_raw('vendor.pos.enter_code_label') }}</label>
        <input type="text" class="form-control qm-input-upper" id="posm-coupon-code" data-coupon-input placeholder="{{ t_raw('checkout.coupon') }}">
        <div class="qm-posm-result" data-coupon-result></div>
        <p class="qm-posm-hint">{{ t_raw('vendor.pos.coupon_hint') }}</p>
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-coupon-clear>{{ t_raw('common.remove') }}</button><button type="button" class="qm-btn" data-coupon-apply>{{ t_raw('common.apply') }}</button></div>
</div></div>

<!-- ============ Customer & Loyalty ============ -->
<div class="qm-posm-overlay" id="posm-loyalty"><div class="qm-posm-dialog qm-posm-md" role="dialog" aria-modal="true" aria-labelledby="posm-loyalty-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-loyalty-title"><i class="fas fa-gift" aria-hidden="true"></i> {{ t_raw('vendor.pos.loyalty_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <div class="qm-posm-search"><i class="fas fa-search" aria-hidden="true"></i><input type="text" class="form-control" data-cust-search placeholder="{{ t_raw('vendor.pos.search_customer_placeholder') }}" aria-label="{{ t_raw('vendor.pos.search_customers_aria') }}"></div>
        <div class="qm-posm-custresults" data-cust-results></div>
        <div class="qm-posm-cust" data-cust-card hidden>
            <span class="qm-posm-cust-av"><i class="fas fa-user" aria-hidden="true"></i></span>
            <div><strong class="qm-posm-cust-name" data-cust-name></strong><div class="qm-posm-cust-meta" data-cust-meta></div></div>
            <div class="qm-posm-cust-pts"><strong data-cust-balance>0</strong><span data-cust-ptslabel>{{ t_raw('common.points') }}</span></div>
        </div>
        @php /* NEW CUSTOMER - only when a search finds nobody. A loyalty member is a phone number: name +
                 phone make the account, email is optional. The footer's one button does the adding
                 ("Add & attach to order"); validation is inline, never a toast. */
@endphp
        <div class="qm-posm-section" data-custnew hidden>
            <span class="qm-posm-label">{{ t_raw('vendor.pos.custnew_title') }}</span>
            <p class="qm-posm-note">{{ t_raw('vendor.pos.custnew_hint') }}</p>
            <div class="qm-form-grid">
                <input type="text" class="form-control" data-custnew-name placeholder="{{ t_raw('common.name') }}" maxlength="120" autocomplete="off">
                <input type="tel" class="form-control" data-custnew-phone placeholder="{{ t_raw('vendor.pos.custnew_phone_placeholder') }}" maxlength="40" inputmode="tel" autocomplete="off">
                <input type="email" class="form-control" data-custnew-email placeholder="{{ t_raw('vendor.pos.custnew_email_placeholder') }}" maxlength="190" autocomplete="off">
            </div>
            <p class="qm-posm-err" data-custnew-err role="alert" hidden></p>
        </div>
        @php /* Rewards: only once a customer is picked - no floating label over nothing. */
@endphp
        <div data-loy-rewards-wrap hidden>
            <span class="qm-posm-label">{{ t_raw('vendor.pos.redeem_reward_label') }}</span>
            <div data-loy-rewards></div>
        </div>
        <div data-loy-wallet hidden>
            <div class="qm-posm-section">
                <span class="qm-posm-label">{{ t_raw('vendor.pos.wallet_section_label') }}</span>
                <dl class="qm-posm-totals mt-0">
                    <div><dt>{{ t_raw('vendor.pos.wallet_credit_label') }}</dt><dd data-wallet-credit>—</dd></div>
                    <div><dt>{{ t_raw('vendor.pos.wallet_debt_label') }}</dt><dd data-wallet-debt>—</dd></div>
                </dl>
                <div class="d-flex gap-2 mb-2"><input type="number" step="0.01" min="0" class="form-control" data-wallet-amount placeholder="{{ t_raw('common.placeholder_amount') }}"><button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-wallet-action="topup">{{ t_raw('vendor.pos.wallet_topup_btn') }}</button><button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-wallet-action="paydown">{{ t_raw('vendor.pos.wallet_paydown_btn') }}</button></div>
                <div class="d-flex gap-2"><input type="number" step="0.01" min="0" class="form-control" data-wallet-limit placeholder="{{ t_raw('vendor.pos.wallet_limit_ph') }}"><button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-wallet-action="limit">{{ t_raw('vendor.pos.wallet_setlimit_btn') }}</button></div>
            </div>
        </div>
    </div>
    @php /* Detach unlinks an attached customer from THIS ticket (nothing is deleted); it only exists while one is attached, and sits to the right of Attach. */
@endphp
    <div class="qm-posm-foot"><button type="button" class="qm-btn" data-loy-attach disabled data-label-attach="{{ t_raw('vendor.pos.attach_to_order_btn') }}" data-label-create="{{ t_raw('vendor.pos.attach_new_btn') }}">{{ t_raw('vendor.pos.attach_to_order_btn') }}</button><button type="button" class="qm-btn qm-btn-outline" data-loy-detach hidden>{{ t_raw('vendor.pos.detach_customer_btn') }}</button></div>
</div></div>

<!-- ============ Split bill ============ -->
<div class="qm-posm-overlay" id="posm-split"><div class="qm-posm-dialog qm-posm-lg" role="dialog" aria-modal="true" aria-labelledby="posm-split-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-split-title"><i class="fas fa-columns" aria-hidden="true"></i> {{ t_raw('vendor.pos.func_split_bill') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <div class="qm-posm-seg" data-split-mode><button class="is-active" data-v="guests">{{ t_raw('vendor.pos.split_by_guests') }}</button><button data-v="item">{{ t_raw('vendor.pos.split_by_item') }}</button><button data-v="amount">{{ t_raw('vendor.pos.split_by_amount') }}</button></div>
        <div class="qm-posm-readout mt-3"><dt>{{ t_raw('vendor.pos.balance_to_collect_label') }}</dt><dd data-split-balance>{{ $cur }}0.00</dd></div>
        <div data-split-pane="guests">
            <div class="qm-posm-readout mt-3"><dt>{{ t_raw('vendor.pos.split_between_label') }}</dt><dd><span data-split-n>4</span> {{ t_raw('vendor.pos.guests_word') }}</dd></div>
            <div class="d-flex justify-content-center gap-2 mb-2"><button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-split-dec>&minus;</button><button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-split-inc>+</button></div>
            <div class="qm-posm-shares" data-split-shares></div>
        </div>
        <div data-split-pane="item" hidden><p class="qm-posm-hint mt-3">{{ t_raw('vendor.pos.split_by_item_hint') }}</p></div>
        <div data-split-pane="amount" hidden>
            <div class="qm-posm-readout mt-3"><dt>{{ t_raw('vendor.pos.amount_this_payment_label') }}</dt><dd data-keypad-readout>{{ $cur }}0.00</dd></div>
            {!! $keypad('currency') !!}
            <div class="d-flex gap-2 mt-2">@php /* The tender is carried in data-method, a machine value, and the two translated words ride
         along as data-label-*. The button's TEXT used to be both the label and the value: the JS
         compared it against the English literal 'Card', so in Arabic it read "بطاقة", matched
         neither branch, and the split posted pay_method='other' — which Ledger::recordTenders then
         classified as neither card nor cash, mis-stating the drawer's own Z-report. */
@endphp
<button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-split-amt-method
        data-method="card"
        data-label-card="{{ t_raw('status.payment_method.card') }}"
        data-label-cash="{{ t_raw('status.payment_method.cash') }}">{{ t_raw('status.payment_method.card') }}</button><button type="button" class="qm-btn qm-btn-sm flex-grow-1" data-split-amt-add>{{ t_raw('vendor.pos.add_payment_btn') }}</button></div>
            <div class="qm-posm-shares mt-2" data-split-amt-list></div>
        </div>
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-split-settle disabled>{{ t_raw('vendor.pos.settle_shares_btn') }}</button></div>
</div></div>

<!-- ============ Tip / gratuity ============ -->
<div class="qm-posm-overlay" id="posm-tip"><div class="qm-posm-dialog qm-posm-sm" role="dialog" aria-modal="true" aria-labelledby="posm-tip-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-tip-title"><i class="fas fa-hand-holding-usd" aria-hidden="true"></i> {{ t_raw('vendor.pos.add_tip_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <div class="qm-posm-chips" data-tip-presets>@foreach (['15','18','20','25'] as $p)<button type="button" class="qm-posm-chip" data-tip="{{ $p }}">{{ $p }}%<small class="qm-posm-chip-sub" data-tip-amt></small></button>@endforeach</div>
        <div class="qm-posm-chips qm-posm-chips-2 mt-2"><button type="button" class="qm-posm-chip" data-tip="0">{{ t_raw('vendor.pos.no_tip_chip') }}</button><button type="button" class="qm-posm-chip" data-tip-custom>{{ t_raw('vendor.pos.custom') }}</button></div>
        <div data-tip-keypad class="mt-3" hidden>
            <div class="qm-posm-readout"><dt>{{ t_raw('vendor.pos.custom_tip_label') }}</dt><dd data-keypad-readout>{{ $cur }}0.00</dd></div>
            {!! $keypad('currency') !!}
        </div>
        <dl class="qm-posm-totals qm-posm-section"><div class="qm-posm-grand"><dt>{{ t_raw('vendor.pos.new_total_label') }}</dt><dd data-tip-new>—</dd></div></dl>
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-tip-set>{{ t_raw('vendor.pos.add_tip_title') }}</button></div>
</div></div>

<!-- ============ Hold / park ============ -->
<div class="qm-posm-overlay" id="posm-hold"><div class="qm-posm-dialog qm-posm-sm" role="dialog" aria-modal="true" aria-labelledby="posm-hold-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-hold-title"><i class="fas fa-pause" aria-hidden="true"></i> {{ t_raw('vendor.pos.hold_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body"><label class="qm-posm-label" for="posm-hold-label">{{ t_raw('vendor.pos.name_ticket_label') }}</label><input type="text" class="form-control" id="posm-hold-label" data-hold-label placeholder="{{ t_raw('vendor.pos.hold_name_placeholder') }}"><p class="qm-posm-hint">{{ t_raw('vendor.pos.hold_hint') }}</p></div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-hold-save>{{ t_raw('vendor.pos.park_order_btn') }}</button></div>
</div></div>

<!-- ============ Recall (parked tickets) ============ -->
<div class="qm-posm-overlay" id="posm-recall"><div class="qm-posm-dialog qm-posm-lg" role="dialog" aria-modal="true" aria-labelledby="posm-recall-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-recall-title"><i class="fas fa-list-ul" aria-hidden="true"></i> {{ t_raw('vendor.pos.recall_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <div class="qm-posm-seg mb-3" data-recall-filter><button type="button" class="is-active" data-v="all">{{ t_raw('common.all') }}</button><button type="button" data-v="dine_in">{{ t_raw('common.dine_in') }}</button><button type="button" data-v="pickup">{{ t_raw('common.pickup') }}</button><button type="button" data-v="delivery">{{ t_raw('common.delivery') }}</button></div>
        <div class="qm-posm-parked" data-recall-list></div>
    </div>
</div></div>

<!-- ============ Void ============ -->
<div class="qm-posm-overlay" id="posm-void"><div class="qm-posm-dialog" role="dialog" aria-modal="true" aria-labelledby="posm-void-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-void-title"><i class="fas fa-ban" aria-hidden="true"></i> {{ t_raw('vendor.pos.func_void') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <p class="qm-posm-void-scope" data-void-scope>{{ t_raw('vendor.pos.void_scope_default') }}</p>
        <span class="qm-posm-label">{{ t_raw('vendor.pos.reason_required_label') }}</span>
        <div class="qm-posm-reasons" data-void-reasons>
            @foreach (($voidReasons ?? []) as $vr)
            <button type="button" class="qm-posm-reason"><i class="fas fa-circle qm-posm-reason-dot" aria-hidden="true"></i> {{ $vr }}</button>
            @endforeach
        </div>
        <p class="qm-posm-hint" data-void-mgr hidden><i class="fas fa-user-shield" aria-hidden="true"></i> {{ t_raw('vendor.pos.void_needs_manager_hint') }}</p>
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-void-confirm>{{ t_raw('vendor.pos.func_void') }}</button></div>
</div></div>

<!-- ============ Note ============ -->
<div class="qm-posm-overlay" id="posm-note"><div class="qm-posm-dialog qm-posm-sm" role="dialog" aria-modal="true" aria-labelledby="posm-note-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-note-title"><i class="fas fa-sticky-note" aria-hidden="true"></i> {{ t_raw('vendor.pos.order_note_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body"><label class="qm-posm-label" for="posm-note-input">{{ t_raw('vendor.pos.kitchen_allergy_note_label') }}</label><textarea class="form-control" rows="3" id="posm-note-input" data-note-input placeholder="{{ t_raw('vendor.pos.note_placeholder') }}"></textarea></div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-note-save>{{ t_raw('vendor.pos.save_note_btn') }}</button></div>
</div></div>

<!-- ============ Manager PIN ============ -->
<div class="qm-posm-overlay" id="posm-manager"><div class="qm-posm-dialog qm-posm-sm" role="dialog" aria-modal="true" aria-labelledby="posm-manager-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-manager-title"><i class="fas fa-user-shield" aria-hidden="true"></i> {{ t_raw('vendor.pos.manager_approval_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <p class="qm-posm-authline" data-mgr-context>{{ t_raw('vendor.pos.enter_manager_pin_default') }}</p>
        <div class="qm-posm-pin" data-keypad-readout><span></span><span></span><span></span><span></span></div>
        {!! $keypad('pin') !!}
        <div class="qm-posm-result text-center" data-mgr-result></div>
    </div>
</div></div>

<!-- ============ Bill / receipt preview ============ -->
<div class="qm-posm-overlay" id="posm-bill"><div class="qm-posm-dialog qm-posm-receipt" role="dialog" aria-modal="true" aria-labelledby="posm-bill-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-bill-title"><i class="fas fa-print" aria-hidden="true"></i> {{ t_raw('vendor.pos.bill_preview_title') }}</h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
@php $rcfg = \App\Services\Receipt::config($restaurant ?? []);
@endphp
    <div class="qm-posm-receipt-body" data-rc='{{ json_encode($rcfg, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}' style="{{ \App\Services\Receipt::previewStyle($rcfg) }}">
        <div class="qm-posm-rc-head">
            @if (!empty($rcfg['logo']) && !empty($restaurant['logo']))<div class="mb-2">{!! restaurant_logo_html($restaurant, 'md', 'qm-brandmark--round') !!}</div>@endif
            <strong>{{ $restaurant['name'] ?? t_raw('common.restaurant') }}</strong>
            @if (($rcfg['headline'] ?? '') !== '')<div>{{ $rcfg['headline'] }}</div>@endif
            @if ((!empty($rcfg['address']) && !empty($restaurant['address'])) || (!empty($rcfg['phone']) && !empty($restaurant['phone'])) || (!empty($rcfg['website']) && !empty($restaurant['website'])))
            <p class="mb-0">@php
                if (!empty($rcfg['address']) && !empty($restaurant['address'])) { echo e($restaurant['address']) . '<br>'; }
                if (!empty($rcfg['phone']) && !empty($restaurant['phone'])) { echo e($restaurant['phone']) . '<br>'; }
                if (!empty($rcfg['website']) && !empty($restaurant['website'])) { echo e($restaurant['website']); }
@endphp</p>
            @endif
        </div>
        <hr class="qm-posm-rc-rule">
        @if (!empty($rcfg['orderno']) || !empty($rcfg['ticket']))<div data-bill-head>{{ t_raw('vendor.pos.current_ticket_label') }}</div>@endif
        @if (!empty($rcfg['server']))<div>{{ \App\Support\Auth::user()['name'] ?? t_raw('vendor.pos.server_fallback') }}</div>@endif
        @if (!empty($rcfg['datetime']))<div data-bill-date></div>@endif
        <hr class="qm-posm-rc-rule">
        <div data-bill-lines></div>
        <hr class="qm-posm-rc-rule">
        <div data-bill-totals></div>
        @if (!empty($rcfg['show_tax_number']) && !empty($restaurant['tax_number']))<p class="text-center mt-2 mb-0"><small>{{ $restaurant['tax_number'] }}</small></p>@endif
        @if (($rcfg['footer'] ?? '') !== '' || !empty($rcfg['qr']) || !empty($rcfg['powered']))
        <hr class="qm-posm-rc-rule">
        <div class="qm-posm-rc-head">
            @if (($rcfg['footer'] ?? '') !== '')<p class="mb-0">{{ $rcfg['footer'] }}</p>@endif
            @if (!empty($rcfg['qr']))<div class="my-2"><span data-bill-qr data-qr-text="{{ \App\Services\Receipt::qrUrl($restaurant ?? []) }}" class="d-inline-block"></span></div>@endif
            @if (!empty($rcfg['powered']))<p class="mb-0">{{ t_raw('vendor.receipt.powered_by') }} {{ setting('site_name', 'QuickMunch') }}</p>@endif
        </div>
        @endif
        @if (($rcfg['back_text'] ?? '') !== '')
        <hr class="qm-posm-rc-rule">
        <div class="qm-posm-rc-head"><p class="mb-0"><small>{!! nl2br(e($rcfg['back_text'])) !!}</small></p></div>
        @endif
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.close') }}</button><button type="button" class="qm-btn" data-pos-print><i class="fas fa-print" aria-hidden="true"></i> {{ t_raw('common.print') }}</button></div>
</div></div>

<!-- ============ Payment / tender ============ -->
<div class="qm-posm-overlay" id="posm-payment"><div class="qm-posm-dialog qm-posm-md" role="dialog" aria-modal="true" aria-labelledby="posm-payment-title">
    <div class="qm-posm-head"><h2 class="qm-posm-title" id="posm-payment-title"><i class="fas fa-money-bill-wave" aria-hidden="true"></i> {{ t_raw('vendor.pos.take_payment_title') }} <small data-pay-ref></small></h2><button type="button" class="qm-posm-close" data-pos-close aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button></div>
    <div class="qm-posm-body">
        <dl class="qm-posm-totals mt-0">
            <div class="qm-posm-grand"><dt>{{ t_raw('vendor.pos.total_due_label') }}</dt><dd data-pay-total>{{ $cur }}0.00</dd></div>
            <div class="qm-posm-due" data-pay-balance-row><dt>{{ t_raw('vendor.pos.balance_remaining_label') }}</dt><dd data-pay-balance>{{ $cur }}0.00</dd></div>
            <div class="qm-posm-change" data-pay-change-row hidden><dt>{{ t_raw('vendor.pos.change_due_label') }}</dt><dd data-pay-change>{{ $cur }}0.00</dd></div>
        </dl>
        <div class="qm-posm-section"><span class="qm-posm-label">{{ t_raw('vendor.pos.method_label') }}</span>
            <div class="qm-posm-seg" data-pay-method><button class="is-active" data-m="cash"><i class="fas fa-money-bill-wave" aria-hidden="true"></i> {{ t_raw('status.payment_method.cash') }}</button><button data-m="card"><i class="fas fa-credit-card" aria-hidden="true"></i> {{ t_raw('status.payment_method.card') }}</button><button data-m="split"><i class="fas fa-columns" aria-hidden="true"></i> {{ t_raw('vendor.orders.split_tender_label') }}</button>@if (!empty($payQrEnabled))<button data-m="qr"><i class="fas fa-qrcode" aria-hidden="true"></i> {{ t_raw('vendor.pos.pay_qr_method') }}</button>@endif<button data-m="credit" hidden><i class="fas fa-wallet" aria-hidden="true"></i> {{ t_raw('vendor.pos.tender_store_credit') }}</button><button data-m="account" hidden><i class="fas fa-file-invoice-dollar" aria-hidden="true"></i> {{ t_raw('vendor.pos.tender_account') }}</button></div>
        </div>
        <div class="qm-posm-section">
            <!-- Cash: keypad + quick-cash -->
            <div data-pay-panel="cash">
                <div class="qm-posm-readout"><dt>{{ t_raw('vendor.pos.amount_tendered_label') }}</dt><dd data-keypad-readout>{{ $cur }}0.00</dd></div>
                <div class="qm-posm-chips mb-2"><button type="button" class="qm-posm-chip" data-tender="exact">{{ t_raw('vendor.pos.tender_exact_chip') }}</button><button type="button" class="qm-posm-chip" data-tender="20">{{ $cur }}20</button><button type="button" class="qm-posm-chip" data-tender="50">{{ $cur }}50</button><button type="button" class="qm-posm-chip" data-tender="100">{{ $cur }}100</button></div>
                {!! $keypad('currency') !!}
                <button type="button" class="qm-btn qm-btn-outline w-100 mt-2" data-pay-add><i class="fas fa-plus" aria-hidden="true"></i> {{ t_raw('vendor.pos.add_payment_btn') }}</button>
            </div>
            <!-- Card: reader prompt -->
            <div data-pay-panel="card" hidden>
                <div class="qm-posm-terminal">
                    <span class="qm-posm-terminal-ic"><i class="fas fa-credit-card" aria-hidden="true"></i></span>
                    <strong>{{ t_raw('vendor.pos.card_reader_prompt') }}</strong>
                    <p>{!! t_raw('vendor.pos.charging_card_reader', [':amount' => '<b data-pay-cardamt>' . e($cur) . '0.00</b>']) !!}</p>
                    <button type="button" class="qm-btn" data-pay-card>{{ t_raw('vendor.pos.charge_card_btn') }}</button>
                </div>
            </div>
            <!-- Split: route to the split screen -->
            <div data-pay-panel="split" hidden>
                <div class="qm-posm-terminal">
                    <span class="qm-posm-terminal-ic"><i class="fas fa-columns" aria-hidden="true"></i></span>
                    <strong>{{ t_raw('vendor.pos.split_this_check_heading') }}</strong>
                    <p>{{ t_raw('vendor.pos.split_instructions_hint') }}</p>
                    <button type="button" class="qm-btn qm-btn-outline" data-pay-split>{{ t_raw('vendor.pos.open_split_bill_btn') }}</button>
                </div>
            </div>
            @if (!empty($payQrEnabled))
            <!-- QR: dynamic bill QR - the customer scans and pays on their phone via the hosted gateway -->
            <div data-pay-panel="qr" hidden>
                <div class="qm-posm-terminal">
                    <span class="qm-posm-terminal-ic"><i class="fas fa-qrcode" aria-hidden="true"></i></span>
                    <strong>{{ t_raw('vendor.pos.pay_qr_heading') }}</strong>
                    <div data-pay-qr></div>
                    <div data-pay-qr-status hidden></div>
                    <button type="button" class="qm-btn" data-pay-qr-start>{{ t_raw('vendor.pos.pay_qr_show_btn') }}</button>
                </div>
            </div>
            @endif
            <!-- Store credit: draw the attached customer's prepaid balance for the whole bill -->
            <div data-pay-panel="credit" hidden>
                <div class="qm-posm-terminal">
                    <span class="qm-posm-terminal-ic"><i class="fas fa-wallet" aria-hidden="true"></i></span>
                    <strong>{{ t_raw('vendor.pos.pay_credit_heading') }}</strong>
                    <div data-pay-wallet-credit></div>
                    <button type="button" class="qm-btn" data-pay-wallet-go="credit">{{ t_raw('vendor.pos.pay_credit_btn') }}</button>
                </div>
            </div>
            <!-- House account: charge the whole bill to the attached customer's running tab -->
            <div data-pay-panel="account" hidden>
                <div class="qm-posm-terminal">
                    <span class="qm-posm-terminal-ic"><i class="fas fa-file-invoice-dollar" aria-hidden="true"></i></span>
                    <strong>{{ t_raw('vendor.pos.pay_account_heading') }}</strong>
                    <div data-pay-wallet-account></div>
                    <button type="button" class="qm-btn" data-pay-wallet-go="account">{{ t_raw('vendor.pos.pay_account_btn') }}</button>
                </div>
            </div>
            <div class="qm-posm-tenders-list" data-pay-tenders></div>
        </div>
    </div>
    <div class="qm-posm-foot"><button type="button" class="qm-btn qm-btn-outline" data-pos-close>{{ t_raw('common.cancel') }}</button><button type="button" class="qm-btn" data-pay-complete disabled>{{ t_raw('vendor.pos.complete_payment_btn') }}</button></div>
</div></div>