@extends('layouts.dashboard')

@section('content')
@php
/**
 * Kitchen Pipeline (KDS) board.
 *
 * @var string $serverNow     DB clock anchor (Y-m-d H:i:s)
 * @var int    $prepMinutes   Target prep time for late highlighting
 * @var array  $columns       ['new'=>[...], 'preparing'=>[...], 'ready'=>[...]]
 * @var array  $stations      the kitchen's active stations (empty ⇒ one undivided board)
 * @var string $activeStation '' = whole kitchen, a station id, or 'unassigned'
 */
$columns = $columns ?? ['new' => [], 'preparing' => [], 'ready' => []];
$prepMinutes = (int) ($prepMinutes ?? 30);
$serverNow = (string) ($serverNow ?? '');
$stations = $stations ?? [];
$activeStation = (string) ($activeStation ?? '');

/** Render one order card; markup must mirror kitchen.js so a refresh is seamless. */
$renderCard = static function (array $c) use ($activeStation, $__env): void {
    $late  = !empty($c['late']);
    $items = $c['items'] ?? [];
    $next  = $c['next'] ?? null;
@endphp
    @php $sched = !empty($c['scheduled_at']) ? fmt_clock($c['scheduled_at']) : '';
@endphp
    @php /* When the ticket is DUE — the pre-order's slot when it has one, otherwise when it was
             placed. The same instant buildBoard() measures `minutes` from, carried here in
             machine-readable form because kitchen.js re-derives every card's timer from the DOM
             every 15 seconds and had only data-placed to work from: fifteen seconds after load a
             pre-order's card was rewritten to the hours since it was ORDERED and flagged late — a
             false late alarm on a ticket that is not due yet, clearing only on a reload. */
@endphp
    @php $due = !empty($c['scheduled_at']) ? (string) $c['scheduled_at'] : (string) $c['placed_at'];
@endphp
    <div class="qm-kds-card{{ $late ? ' is-late' : '' }}" data-id="{{ (int) $c['id'] }}" data-status="{{ (string) $c['status'] }}" data-placed="{{ (string) $c['placed_at'] }}" data-due="{{ $due }}">
        <div class="qm-kds-card-top">
            <span class="qm-kds-no">#{{ (string) $c['order_number'] }}</span>
            @php /* A dine-in ticket names its TABLE, so the pass knows where to take it — the order
                     carried table_id all along and no staff-facing screen ever showed it. kitchen.js
                     builds the same badge on a live refresh, so the card is identical either way. */
@endphp
            <span class="qm-kds-mode qm-kds-mode-{{ (string) $c['service_mode'] }}">{{ t_raw('common.' . (string) $c['service_mode']) }}{!! !empty($c['table_label']) ? ' &middot; ' . e((string) $c['table_label']) : '' !!}</span>
            @if (!empty($c['paid']))<span class="qm-kds-pay is-paid"><i class="fas fa-check-circle" aria-hidden="true"></i> {{ t_raw('status.payment.paid') }}</span>@else<span class="qm-kds-pay is-due"><i class="fas fa-coins" aria-hidden="true"></i> {{ t_raw('status.payment.unpaid') }}</span>@endif
        </div>
        @if (!empty($c['customer_name']))
        <div class="qm-kds-cust"><i class="fas fa-user" aria-hidden="true"></i> {{ (string) $c['customer_name'] }}@if (!empty($c['customer_phone'])) <span class="qm-kds-phone">{{ (string) $c['customer_phone'] }}</span>@endif</div>
        @endif
        <div class="qm-kds-meta">
            <span class="qm-kds-timer"><i class="fas fa-clock" aria-hidden="true"></i> <span class="qm-kds-mins">{{ (int) $c['minutes'] }}</span> {{ t_raw('vendor.kitchen.minutes_suffix') }}</span>
            @php $itTotal = (int) ($c['items_total'] ?? 0); $itReadyN = (int) ($c['items_ready'] ?? 0);
@endphp
            @if ($itTotal > 0)<span class="qm-kds-prog{{ $itReadyN >= $itTotal ? ' is-done' : '' }}"><i class="fas fa-check-double" aria-hidden="true"></i> {{ t_raw('vendor.kitchen.items_progress', [':done' => (string) $itReadyN, ':total' => (string) $itTotal]) }}</span>@endif
            @if ($sched !== '')<span class="qm-kds-sched"><i class="fas fa-calendar-alt" aria-hidden="true"></i> {{ $sched }}</span>@endif
        </div>
        @if ($items)
        <ul class="qm-kds-items">
            @foreach ($items as $it)
@php $itReady = !empty($it['ready']); @endphp
            <li{!! $itReady ? ' class="is-ready"' : '' !!}>
                <div class="qm-kds-item-row">
                    @php /* One line, one cook. The tick is the control; the whole ticket's state
                       follows from these, so it is the primary gesture on the card rather than a
                       decoration beside the name. */
@endphp
                    <button type="button" class="qm-kds-tick" data-item="{{ (int) $it['id'] }}" data-order="{{ (int) $c['id'] }}" data-to="{{ $itReady ? 'pending' : 'ready' }}" aria-pressed="{{ $itReady ? 'true' : 'false' }}" aria-label="{!! $itReady ? t('vendor.kitchen.tick_reopen_aria', [':name' => (string) $it['name']]) : t('vendor.kitchen.tick_ready_aria', [':name' => (string) $it['name']]) !!}"><i class="fas fa-check" aria-hidden="true"></i></button>
                    <span class="qm-kds-item-name">{{ (string) $it['name'] }}</span>
                    @if (!empty($it['station']))<span class="qm-kds-station">{{ (string) $it['station'] }}</span>@endif
                    <span class="qm-kds-qty">&times;{{ (int) $it['qty'] }}</span>
                </div>
                @if (!empty($it['options']))<div class="qm-kds-opt">{{ (string) $it['options'] }}</div>@endif
            </li>
            @endforeach
        </ul>
        @endif
        @if (!empty($c['notes']))
        <div class="qm-kds-note"><i class="fas fa-comment-dots" aria-hidden="true"></i> {{ (string) $c['notes'] }}</div>
        @endif
        @if (!empty($c['loyalty_label']))
        <div class="qm-kds-loyalty"><i class="fas fa-gift" aria-hidden="true"></i> {{ t_raw('vendor.kitchen.loyalty_reward_prefix', [':label' => (string) $c['loyalty_label']]) }} ({{ (int) ($c['loyalty_points'] ?? 0) }} {{ t_raw('vendor.kitchen.pts_abbrev') }})</div>
        @endif
        @if ($next !== null)
        <div class="qm-kds-foot">
            <button type="button" class="qm-btn qm-kds-advance" data-id="{{ (int) $c['id'] }}" data-to="{{ (string) $next }}">{{ (string) $c['next_label'] }}</button>
            @php /* Recall — a plain form, so a ticket can always be pulled back even on a
               station whose scripts never loaded. The board's poller rebuilds cards from
               JSON and knows nothing about this control, so the page script below puts it
               straight back after every repaint (see the observer). */
@endphp
            @php /* Only where the whole ticket is on screen — a station cannot pull back
                     a ticket it can only see part of. */
@endphp
            @if ($activeStation === '' && in_array((string) $c['status'], ['preparing', 'out_for_delivery'], true))
            <form method="post" action="{{ route('vendor.kitchen.advance') }}" class="qm-kds-recall d-inline">
                @csrf
                <input type="hidden" name="intent" value="recall">
                <input type="hidden" name="order_id" value="{{ (int) $c['id'] }}">
                <button type="submit" class="qm-btn qm-btn-outline qm-btn-xs"><i class="fas fa-undo me-1" aria-hidden="true"></i> {{ t_raw('vendor.kitchen.recall_btn') }}</button>
            </form>
            @endif
        </div>
        @endif
    </div>
    @php

};


// The same two readings the page script maintains in the browser, painted here from the
// snapshot the server already holds. Without this the board would open showing an empty
// age chip and four zeroed health chips until the first script pass — and would keep
// showing them on a station running without JavaScript.
$colAge = [];
foreach ($columns as $colKey => $colCards) {
    $oldest = -1;
    foreach ($colCards as $card) {
        $mins = (int) ($card['minutes'] ?? 0);
        if ($mins > $oldest) {
            $oldest = $mins;
        }
    }
    $colAge[$colKey] = $oldest;
}
/** The chip tone an age wears: within target, past it, or half again past it. */
$ageTone = static function (int $mins) use ($prepMinutes, $__env): string {
    return $mins > $prepMinutes * 1.5 ? 'red' : ($mins > $prepMinutes ? 'amber' : 'green');
};

$cols = [
    ['key' => 'new',       'label' => t_raw('vendor.kitchen.col_new'),       'extra' => ' is-new'],
    ['key' => 'preparing', 'label' => t_raw('vendor.kitchen.col_preparing'), 'extra' => ''],
    ['key' => 'ready',     'label' => t_raw('vendor.kitchen.col_ready'),     'extra' => ''],
];
@endphp
<div class="qm-ops-head">
    <div>
        <h2 class="qm-snap-section-title mb-1"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('vendor.kitchen.board_heading') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.kitchen.board_subtitle') }}</p>
    </div>
    <div class="d-flex align-items-center flex-wrap gap-2">
        @php /* Which part of the kitchen this screen is. Plain links, the same period-bar
           control the reports use to scope a view — a station screen is left on one choice
           for a whole service, so it must survive a reload and be bookmarkable rather than
           live in a script's memory. Absent entirely until a kitchen has stations, which is
           what keeps every install that never adopts routing exactly as it was. */
@endphp
        @if (count($stations))
        <div class="qm-period" role="group" aria-label="{{ t_raw('vendor.kitchen.station_filter_aria') }}">
            <a class="qm-period-btn{{ $activeStation === '' ? ' is-active' : '' }}" href="{{ route('vendor.kitchen') }}" aria-current="{{ $activeStation === '' ? 'true' : 'false' }}">{{ t_raw('vendor.kitchen.station_all') }}</a>
            @foreach ($stations as $st)
@php $on = $activeStation === (string) (int) $st['id']; @endphp
            <a class="qm-period-btn{{ $on ? ' is-active' : '' }}" href="{{ url('/vendor/kitchen?station=' . (int) $st['id']) }}" aria-current="{{ $on ? 'true' : 'false' }}">{{ (string) $st['name'] }}</a>
            @endforeach
            @php $unOn = $activeStation === 'unassigned';
@endphp
            <a class="qm-period-btn{{ $unOn ? ' is-active' : '' }}" href="{{ route('vendor.kitchen', ['station' => 'unassigned']) }}" aria-current="{{ $unOn ? 'true' : 'false' }}">{{ t_raw('vendor.kitchen.station_unassigned') }}</a>
        </div>
        @endif
        <span id="qm-kds-clock" aria-live="off"></span>
        <span id="qm-kds-stale" class="qm-pill qm-pill-red" hidden><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> {{ t_raw('vendor.kitchen.stale_badge') }}</span>
        <button type="button" class="qm-btn qm-btn-outline" id="qm-kds-refresh"><i class="fas fa-redo" aria-hidden="true"></i> {{ t_raw('vendor.kitchen.refresh_btn') }}</button>
    </div>
</div>

<!-- Polite live region: announces board counts after each poll/refresh and any advance failure. -->
<p id="qm-kds-live" class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"></p>

@php /* Two readings the column of cards can never give on its own: how much of each dish
   is outstanding across every ticket, and how the board is running against the target
   prep time — not just "late or not", but how late. */
@endphp

@php
$kdsI18n = [
    'paid' => t_raw('status.payment.paid'),
    'unpaid' => t_raw('status.payment.unpaid'),
    'modes' => [
        'delivery' => t_raw('common.delivery'),
        'pickup' => t_raw('common.pickup'),
        'dine_in' => t_raw('common.dine_in'),
    ],
    'cols' => [
        'new' => t_raw('vendor.kitchen.col_new'),
        'preparing' => t_raw('vendor.kitchen.col_preparing'),
        'ready' => t_raw('vendor.kitchen.col_ready'),
    ],
    'noOrders' => t_raw('vendor.kitchen.no_orders_empty'),
    'loyaltyPrefix' => t_raw('vendor.kitchen.loyalty_reward_prefix'),
    'ptsAbbrev' => t_raw('vendor.kitchen.pts_abbrev'),
    'minsSuffix' => t_raw('vendor.kitchen.minutes_suffix'),
    'advanceFallback' => t_raw('vendor.kitchen.advance_fallback'),
    'staleRetrying' => t_raw('vendor.kitchen.stale_badge'),
    'sessionExpired' => t_raw('vendor.kitchen.err_session_expired'),
    'boardUpdateFailed' => t_raw('vendor.kitchen.err_board_update_failed'),
    'announceUpdated' => t_raw('vendor.kitchen.announce_board_updated'),
    'announceNotLive' => t_raw('vendor.kitchen.announce_not_live'),
    'toastRefreshed' => t_raw('vendor.kitchen.toast_refreshed'),
    'advanceFailed' => t_raw('vendor.kitchen.err_advance_failed'),
    'networkAdvance' => t_raw('vendor.kitchen.err_network_advance'),
    'tickReady' => t_raw('vendor.kitchen.tick_ready_aria'),
    'tickReopen' => t_raw('vendor.kitchen.tick_reopen_aria'),
    'itemsProgress' => t_raw('vendor.kitchen.items_progress'),
    'prepFailed' => t_raw('vendor.kitchen.err_prep_failed'),
    'networkPrep' => t_raw('vendor.kitchen.err_network_prep'),
    // The clock format the scheduled chip above is drawn with. That chip goes through
    // fmt_clock(), i.e. the pattern the operator chose in Settings → Time; kitchen.js
    // rebuilds the same chip from JSON on every poll and had no way to learn it, so the
    // slot silently changed shape after the first poll. Not copy, but the same kind of
    // thing: something the script cannot resolve for itself.
    'timePattern' => qm_pattern('time'),
];
@endphp
<div id="qm-kds" class="qm-kds" data-now="{{ $serverNow }}" data-prep="{{ (int) $prepMinutes }}" data-station="{{ $activeStation }}" data-i18n="{{ json_encode($kdsI18n) }}">
    @foreach ($cols as $col)
@php $cards = $columns[$col['key']] ?? []; @endphp
    <div class="qm-kds-col{{ $col['extra'] }}" data-col="{{ $col['key'] }}">
        <div class="qm-kds-col-head">
            <h2>{{ $col['label'] }}</h2>
            @php /* Column age — how long the OLDEST ticket in this column has been
               waiting. A column of ten fresh tickets and a column of ten stalled ones look
               identical when all the header carries is a count. The board's poller only
               rewrites .qm-kds-count, so this chip survives every repaint and is kept
               current by the page script below. */
@endphp
            @php $age = $colAge[$col['key']] ?? -1;
@endphp
            <span class="qm-pill qm-pill-{{ $age < 0 ? 'grey' : $ageTone($age) }}" data-col-age>{!! $age < 0 ? t('vendor.kitchen.col_age_none') : t('vendor.kitchen.col_age', [':n' => (string) $age]) !!}</span>
            <span class="qm-kds-count">{{ count($cards) }}</span>
        </div>
        <div class="qm-kds-col-body">
            @if ($cards)
                @php foreach ($cards as $c) { $renderCard($c); }
@endphp
            @else
                <div class="qm-kds-empty">{{ t_raw('vendor.kitchen.no_orders_empty') }}</div>
            @endif
        </div>
    </div>
    @endforeach
</div>

@php
/* Copy the page script needs but cannot call t() for. */
$kdsExtraI18n = [
    'recall'     => t_raw('vendor.kitchen.recall_btn'),
    'colAgeNone' => t_raw('vendor.kitchen.col_age_none'),
    'colAge'     => t_raw('vendor.kitchen.col_age'),
];
@endphp
<script>
/* Column ages + recall, kept correct across the poller's repaints.
 *
 * The KDS poller owns the three column bodies: every 15 seconds it discards the cards it
 * finds there and rebuilds them from a JSON snapshot. Anything this page adds INSIDE a
 * card is therefore temporary by definition, so rather than fight that, this watches the
 * board and re-derives its own regions from the DOM after each repaint. Reading the cards
 * that are on screen also means these figures can never disagree with them.
 *
 * Everything outside .qm-kds-col-body (the all-day strip, the health chips, the column-age
 * chips) is untouched by the poller and only needs recomputing, not restoring. */
(function () {
    var board = document.getElementById('qm-kds');
    if (!board) { return; }

    var I18N = {!! json_encode($kdsExtraI18n) !!};
    var prep = parseInt(board.getAttribute('data-prep'), 10);
    // Only a missing/unreadable attribute falls back — the stored target is honoured
    // whatever it is, including 0. Substituting 30 for a stored 0 put two different
    // targets on one screen: the cards used 0 (buildBoard and kitchen.js both keep it)
    // while these chips and the column-age tone used 30, so the board could paint a
    // ticket late and count it on time in the same breath.
    if (isNaN(prep)) { prep = 30; }
    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var CSRF = csrfMeta ? csrfMeta.getAttribute('content') : '';
    var BASE = (window.QM && window.QM.base) ? window.QM.base : '';
    var RECALLABLE = { preparing: 1, out_for_delivery: 1 };
    // A station screen shows part of a ticket, so it never carries the ticket-level
    // recall — and must not have one put back after a repaint either.
    var WHOLE_KITCHEN = (board.getAttribute('data-station') || '') === '';

    function fill(tpl, n) { return String(tpl).split(':n').join(String(n)); }

    /** Put the recall form back on any card that has lost it to a repaint. */
    function restoreRecall() {
        if (!WHOLE_KITCHEN) { return; }
        var cards = board.querySelectorAll('.qm-kds-card');
        for (var i = 0; i < cards.length; i++) {
            var card = cards[i];
            var foot = card.querySelector('.qm-kds-foot');
            if (!foot || !RECALLABLE[card.getAttribute('data-status')]) { continue; }
            if (foot.querySelector('.qm-kds-recall')) { continue; }
            var form = document.createElement('form');
            form.method = 'post';
            form.action = BASE + '/vendor/kitchen/advance';
            form.className = 'qm-kds-recall d-inline';
            form.innerHTML = '<input type="hidden" name="_csrf">'
                + '<input type="hidden" name="intent" value="recall">'
                + '<input type="hidden" name="order_id">'
                + '<button type="submit" class="qm-btn qm-btn-outline qm-btn-xs">'
                + '<i class="fas fa-undo me-1" aria-hidden="true"></i> </button>';
            form.querySelector('input[name="_csrf"]').value = CSRF;
            form.querySelector('input[name="order_id"]').value = card.getAttribute('data-id') || '';
            // textContent, never innerHTML, for the translated label.
            form.querySelector('button').appendChild(document.createTextNode(I18N.recall));
            foot.appendChild(form);
        }
    }

    /**
     * Rebuild each column's age chip.
     *
     * Writes only when something actually changed. Repainting identical text would still
     * count as a DOM mutation, and the observer that called this is watching for exactly
     * those — so an unconditional rewrite would keep waking itself up forever.
     */
    var lastSignature = null;
    function refreshSummary() {

        // Column ages, gathered before the signature so a changed age still forces a write.
        var cols = board.querySelectorAll('.qm-kds-col');
        var ages = [];
        for (var c = 0; c < cols.length; c++) {
            var colCards = cols[c].querySelectorAll('.qm-kds-card .qm-kds-mins');
            var oldest = -1;
            for (var m = 0; m < colCards.length; m++) {
                var v = parseInt(colCards[m].textContent, 10);
                if (!isNaN(v) && v > oldest) { oldest = v; }
            }
            ages.push(oldest);
        }

        // Only the column ages are repainted now, so only they gate the write.
        var signature = JSON.stringify(ages);
        if (signature === lastSignature) { return; }
        lastSignature = signature;


        for (var a = 0; a < cols.length; a++) {
            var chip = cols[a].querySelector('[data-col-age]');
            if (!chip) { continue; }
            var age = ages[a];
            if (age < 0) {
                chip.textContent = I18N.colAgeNone;
                chip.className = 'qm-pill qm-pill-grey';
            } else {
                chip.textContent = fill(I18N.colAge, age);
                chip.className = 'qm-pill qm-pill-' + (age > prep * 1.5 ? 'red' : (age > prep ? 'amber' : 'green'));
            }
        }
    }

    // Both passes write into the board, which would re-trigger the observer that called
    // them. The flag makes those self-inflicted mutations invisible, and the queue
    // collapses a repaint's many mutation records into a single pass.
    var syncing = false;
    function sync() {
        if (syncing) { return; }
        syncing = true;
        try { restoreRecall(); refreshSummary(); } finally {
            // Released once the observer has delivered the records this pass generated, so
            // our own writes are ignored instead of starting another pass.
            setTimeout(function () { syncing = false; }, 0);
        }
    }

    sync();
    // The poller replaces column bodies wholesale, so react to the change itself rather
    // than racing its 15-second interval with one of our own.
    new MutationObserver(sync).observe(board, { childList: true, subtree: true });
    // Card timers tick without any DOM structure changing, and this also repairs the rare
    // repaint that landed while a pass was already running.
    setInterval(sync, 15000);
})();
</script>
@endsection