@extends('layouts.dashboard')

@section('content')
@php

/**
 * Vendor → POS settings: the deck of fastest-selling dishes pinned above the till's menu grid.
 *
 * ONE card, not two. The whole feature is an ordered list of at most ten ids, and it had been given
 * a full dashboard table — thumbnail, price and actions columns — plus a second card below it, for
 * a job the till itself draws as one row of tiles. The deck is now that same row: draggable chips
 * in the order the cashier sees them, sitting directly above the menu they are chosen from.
 * Ticking, unticking and arranging all edit one hidden field (assets/js/pos-settings.js), which is
 * what the controller stores in restaurants.pos_quick_keys.
 *
 * Arranging is the shared assets/js/qm-row-order.js — the same grip Dishes and Menu structure use,
 * drag or Up/Down on the handle. It is not table-only: it sets draggable on whatever row it is given.
 *
 * @var array $categories this restaurant's categories (MenuTree::picker)
 * @var array $items      every dish the deck may draw on, same read
 * @var array $chosen     the pinned dishes, resolved and in the operator's order
 * @var int   $max        how many keys a deck holds (QuickKeys::MAX)
 * @var array $restaurant this restaurant's row — the Kiosk, KDS and QR panels read their saved values from it
 * @var array $panels     the tabs this install offers (PosSettingsController::panels), in strip order
 */
/* The Kiosk, KDS and QR panels below read $r, and nothing defined it: VendorController::render()
   passes the row as $restaurant, so every one of those controls fell through to its ?? default on
   every load. A switch turned on and saved came back off, and saving that tab again wrote the
   default straight over the stored value — the settings were being kept, the screen just never
   showed them. Same alias, same place in the file, as vendor/settings.php. */
$r = $restaurant ?? [];

/* FOUR SERVICES, FOUR SWITCHES — a tab belongs to whichever one is on.
   All four tabs used to be drawn unconditionally, so an install with kiosk, QR or the kitchen
   display switched off still saw their tabs, still saved them ("Settings saved." and the value
   survived a reload), and was still offered the QR panel's link to a page that now refuses. The
   controller decides which services this install offers; this page draws exactly those, and the
   first of them opens. */
$dsPanels = $panels ?? ['pos', 'kiosk', 'qr', 'kds'];
$dsFirst  = $dsPanels[0] ?? '';
/** Is this tab offered? Used for both its button and its panel, so the two can never disagree. */
$dsOn = static fn (string $panel): bool => in_array($panel, $dsPanels, true);
/** The `is-active` the tab strip and the panels open on — the first tab this install has. */
$dsActive = static fn (string $panel): string => $dsFirst === $panel ? ' is-active' : '';

$qkChosenIds = array_map(static fn (array $r): int => (int) $r['id'], $chosen);

$qkByCat = [];
foreach ($items as $qkIt) {
    $qkByCat[(int) $qkIt['menu_category_id']][] = $qkIt;
}

/** The data a chip needs, carried on the chooser's checkbox so there is one source for it. */
$qkData = static function (array $it): string {
    return ' data-qk-id="' . (int) $it['id'] . '"'
        . ' data-qk-name="' . e((string) $it['name']) . '"'
        . ' data-qk-price="' . e(money($it['price'])) . '"'
        . ' data-qk-img="' . e(media($it['image'] ?? '', 'assets/client/dish/dish-1.png')) . '"';
};
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // The phrases pos-settings.js writes ride on the form as :placeholder templates, so the script
      // stays translated without a lang key having to be published to JS.
@endphp
@php /* Same shell as Restaurant profile: one .qm-settings-nav, one panel per tab, driven by
         the shared qm-tabs.js. POS settings is the first tab; the next device surface added
         here is a button and a section, not a new mechanism. */
@endphp
<div class="qm-settings">
    <nav class="qm-settings-nav" aria-label="{{ t_raw('nav.device_settings') }}">
        @if ($dsOn('pos'))
        <button type="button"{!! $dsActive('pos') ? ' class="is-active"' : '' !!} data-panel="pos"><i class="fas fa-cash-register" aria-hidden="true"></i>{{ t_raw('vendor.settings.devices_pos_tab') }}</button>
        @endif
        @php /* Kiosk and QR ordering moved here from the Settings "Dine-In" tab: both describe how
                 an in-venue SCREEN behaves, which is what this page is for. Reservation rules stayed
                 behind. */
@endphp
        @if ($dsOn('kiosk'))
        <button type="button"{!! $dsActive('kiosk') ? ' class="is-active"' : '' !!} data-panel="kiosk"><i class="fas fa-tablet-alt" aria-hidden="true"></i>{{ t_raw('vendor.settings.devices_kiosk_tab') }}</button>
        @endif
        @if ($dsOn('qr'))
        <button type="button"{!! $dsActive('qr') ? ' class="is-active"' : '' !!} data-panel="qr"><i class="fas fa-qrcode" aria-hidden="true"></i>{{ t_raw('vendor.settings.devices_qr_tab') }}</button>
        @endif
        @if ($dsOn('kds'))
        <button type="button"{!! $dsActive('kds') ? ' class="is-active"' : '' !!} data-panel="kds"><i class="fas fa-utensils" aria-hidden="true"></i>{{ t_raw('vendor.settings.devices_kds_tab') }}</button>
        @endif
    </nav>
    @if ($dsOn('pos'))
    <section class="qm-settings-panel{!! $dsActive('pos') !!}" id="pos">
<form method="post" action="{{ route('vendor.device-settings') }}" data-quick-keys data-qk-max="{{ (int) $max }}"
      data-qk-t-count="{{ t_raw('vendor.quickkeys.count_of_max') }}"
      data-qk-t-reorder="{{ t_raw('vendor.menu.reorder_label') }}"
      data-qk-t-unpin="{{ t_raw('vendor.quickkeys.aria_unpin') }}">
    @csrf
    @php /* No data-order-input. The shared arranger keeps one for lists that are a PAGE of a longer
             set; this deck is never paged or filtered, so the DOM is the whole truth and
             pos-settings.js rewrites this field from it at submit — whichever of the two moved a chip. */
@endphp
    <input type="hidden" name="keys" id="qk-keys" value="{{ json_encode($qkChosenIds, JSON_UNESCAPED_SLASHES) }}">

    <div class="qm-card">
        <div class="qm-ops-head">
            <div>
                <h2 class="qm-snap-section-title mb-0"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('vendor.quickkeys.deck_heading') }}</h2>
            </div>
            <span class="qm-pill qm-pill-grey" data-qk-count>{{ t_raw('vendor.quickkeys.count_of_max', [':n' => count($qkChosenIds), ':max' => (int) $max]) }}</span>
        </div>

        @php /* The deck, drawn the way the till draws it: left to right, in cashier order. */
@endphp
        <div class="qm-qk-deck" data-qk-deck data-order-list role="list" aria-label="{{ t_raw('vendor.quickkeys.caption_table') }}">
            @foreach ($chosen as $it)
            <div class="qm-qk-chip" role="listitem" data-qk-row="{{ (int) $it['id'] }}" data-order-row data-order-id="{{ (int) $it['id'] }}">
                <button type="button" class="qm-qk-grip" data-order-handle aria-label="{{ t_raw('vendor.menu.reorder_label') }}" title="{{ t_raw('vendor.menu.reorder_label') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button>
                <img src="{{ media($it['image'] ?? '', 'assets/client/dish/dish-1.png') }}" alt="" width="32" height="32" loading="lazy">
                <span class="qm-qk-name">{{ (string) $it['name'] }}</span>
                <button type="button" class="qm-qk-x" data-qk-remove aria-label="{{ t_raw('vendor.quickkeys.aria_unpin', [':name' => (string) $it['name']]) }}"><i class="fas fa-times" aria-hidden="true"></i></button>
            </div>
            @endforeach
            @php // Shown only while the deck is empty; pos-settings.js hides it on the first pin.
@endphp
            <p class="qm-qk-empty"{{ $qkChosenIds ? ' hidden' : '' }}>{{ t_raw('vendor.quickkeys.empty') }}</p>
        </div>

        @if ($items)
        <div class="qm-tabs" role="tablist" aria-label="{{ t_raw('vendor.pos.menu_categories_aria') }}">
            @php $qkFirst = true; @endphp
            @foreach ($categories as $c)
            @php $cid = (int) $c['id']; @endphp
            @continue(empty($qkByCat[$cid]))
            <button type="button" class="qm-tab{{ $qkFirst ? ' is-active' : '' }}" role="tab" data-qk-tab="qk-pane-{{ $cid }}" aria-selected="{{ $qkFirst ? 'true' : 'false' }}">{{ (string) $c['name'] }} <span class="qm-tab-count">{{ count($qkByCat[$cid]) }}</span></button>
            @php
$qkFirst = false;
@endphp
@endforeach
        </div>
        <div class="qm-ing-panes">
            @php $qkFirst = true; @endphp
            @foreach ($categories as $c)
            @php $cid = (int) $c['id']; @endphp
            @continue(empty($qkByCat[$cid]))
            <div class="qm-ing-pane{{ $qkFirst ? ' is-active' : '' }}" id="qk-pane-{{ $cid }}" role="tabpanel">
                @foreach ($qkByCat[$cid] as $it)
@php $on = in_array((int) $it['id'], $qkChosenIds, true); @endphp
                <div class="qm-ing-row{{ $on ? ' is-on' : '' }}">
                    <label class="qm-ing-pick">
                        <input type="checkbox" class="qm-ing-check" data-qk-pick{!! $qkData($it) !!}{{ $on ? ' checked' : '' }}>
                        <img src="{{ media($it['image'] ?? '', 'assets/client/dish/dish-1.png') }}" alt="" class="qm-ing-icon" width="32" height="32" loading="lazy">
                        <span class="qm-ing-name">{{ (string) $it['name'] }}</span>
                        <span class="qm-ing-price ms-auto">{{ money($it['price']) }}</span>
                    </label>
                </div>
                @endforeach
            </div>
            @php
$qkFirst = false;
@endphp
@endforeach
        </div>
        @else
        <div class="qm-empty">
            @php // The page's own icon, the one the nav row already uses.
@endphp
            <i class="fas fa-bolt" aria-hidden="true"></i>
            <p>{{ t_raw('vendor.quickkeys.no_menu') }}</p>
            <a class="qm-btn qm-btn-outline mt-3" href="{{ route('vendor.menu') }}">{{ t_raw('vendor.menu.tab_dishes') }}</a>
        </div>
        @endif
    </div>

    @php /* One card, one mechanism. Each switch posts the element it keeps; whatever is not
             posted is what gets stored as hidden, so a switch added later is on by default for
             every restaurant that already exists. */
@endphp
    <div class="qm-card mt-4">
        <div class="qm-ops-head">
            <div>
                <h2 class="qm-snap-section-title mb-0"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('vendor.posset.chrome_heading') }}</h2>
            </div>
        </div>
        <div class="qm-card-body">
            @php /* One row per element in PosChrome::ELEMENTS, in the order the registry lists
                     them. Seven rows were written out by hand here; the eighth would have been a
                     copy-paste and so would every one after it. The registry already IS the list. */
@endphp
            @foreach (\App\Services\PosChrome::ELEMENTS as $el)
            <label class="qm-switch-row">
                <span><strong>{{ t_raw('vendor.posset.el_' . $el) }}</strong></span>
                <input class="form-check-input" type="checkbox" role="switch" name="pos_show[]" value="{{ $el }}"{{ \App\Services\PosChrome::shows($posHidden, $el) ? ' checked' : '' }}>
            </label>
            @endforeach
        </div>
    </div>

    <div class="d-flex gap-2 mt-4 justify-content-end">
        <a class="qm-btn qm-btn-outline" href="{{ route('vendor.pos') }}">{{ t_raw('common.cancel') }}</a>
        <button type="submit" class="qm-btn">{{ t_raw('vendor.quickkeys.save_btn') }}</button>
    </div>
</form>
    </section>
    @endif

    @if ($dsOn('kiosk'))
    <section class="qm-settings-panel{!! $dsActive('kiosk') !!}" id="kiosk">
        <form method="post" action="{{ route('vendor.device-settings') }}">
            @csrf
            <input type="hidden" name="section" value="kiosk">
            <div class="qm-card">
                <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.settings.devices_kiosk_tab') }}</h2></div>
                <div class="qm-card-body">
@php $kioskHeader = (int) ($r['kiosk_header_enabled'] ?? 1) === 1;
@endphp
                    <label class="qm-switch-row">
                        <span>
                            <strong>{{ t_raw('vendor.settings.kiosk_header_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.kiosk_header_help') }}</small>
                        </span>
                        <input class="form-check-input" type="checkbox" role="switch" id="di-kiosk-header" name="kiosk_header_enabled" value="1"{{ $kioskHeader ? ' checked' : '' }}>
                    </label>
                    @php $kioskSidebar = (int) ($r['kiosk_sidebar_enabled'] ?? 0) === 1;
@endphp
                    <label class="qm-switch-row">
                        <span>
                            <strong>{{ t_raw('vendor.settings.kiosk_sidebar_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.kiosk_sidebar_help') }}</small>
                        </span>
                        <input class="form-check-input" type="checkbox" role="switch" id="di-kiosk-sidebar" name="kiosk_sidebar_enabled" value="1"{{ $kioskSidebar ? ' checked' : '' }}>
                    </label>
                    <hr class="my-3">
                    @php $kioskIdle = (int) ($r['kiosk_idle_seconds'] ?? 30);
@endphp
                    @php /* Label left, control right — the same shape as the switch rows above it.
                             A stacked label over a narrow box left the field marooned on the left. */
@endphp
                    <div class="qm-switch-row qm-idle-row">
                        <span><strong>{{ t_raw('vendor.settings.kiosk_idle_label') }}</strong></span>
                        <div class="input-group qm-maxw-320">
                            <input type="number" class="form-control" id="di-kiosk-idle" name="kiosk_idle_seconds" min="0" max="3600" step="5" value="{{ $kioskIdle }}" placeholder="{{ t_raw('common.placeholder_minutes') }}">
                            <span class="input-group-text">{{ t_raw('vendor.settings.seconds_idle_unit') }}</span>
                        </div>
                    </div>
                    <p class="qm-hint">{!! t_raw('vendor.settings.kiosk_idle_help') !!}</p>
                </div>
                <div class="qm-card-foot">
                    <button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button>
                </div>
            </div>
        </form>
    </section>
    @endif

    @if ($dsOn('kds'))
    <section class="qm-settings-panel{!! $dsActive('kds') !!}" id="kds">
        <form method="post" action="{{ route('vendor.device-settings') }}">
            @csrf
            <input type="hidden" name="section" value="kds">
            <div class="qm-card">
                <div class="qm-card-head">
                    <div>
                        <h2 class="mb-0">{{ t_raw('vendor.settings.devices_kds_tab') }}</h2>
                        <p class="qm-hint mb-0">{{ t_raw('vendor.settings.kds_help') }}</p>
                    </div>
                </div>
                <div class="qm-card-body">
                    @php $kdsAutoAccept = (int) ($r['kds_auto_accept'] ?? 0) === 1;
@endphp
                    <label class="qm-switch-row">
                        <span>
                            <strong>{{ t_raw('vendor.settings.kds_auto_accept_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.kds_auto_accept_help') }}</small>
                        </span>
                        <input class="form-check-input" type="checkbox" role="switch" id="di-kds-accept" name="kds_auto_accept" value="1"{{ $kdsAutoAccept ? ' checked' : '' }}>
                    </label>
                    @php $kdsAutoComplete = (int) ($r['kds_auto_complete'] ?? 0) === 1;
@endphp
                    <label class="qm-switch-row">
                        <span>
                            <strong>{{ t_raw('vendor.settings.kds_auto_complete_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.kds_auto_complete_help') }}</small>
                        </span>
                        <input class="form-check-input" type="checkbox" role="switch" id="di-kds-complete" name="kds_auto_complete" value="1"{{ $kdsAutoComplete ? ' checked' : '' }}>
                    </label>
                </div>
                <div class="qm-card-foot">
                    <button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button>
                </div>
            </div>
        </form>
    </section>
    @endif

    @if ($dsOn('qr'))
    <section class="qm-settings-panel{!! $dsActive('qr') !!}" id="qr">
        <form method="post" action="{{ route('vendor.device-settings') }}">
            @csrf
            <input type="hidden" name="section" value="qr">
            <div class="qm-card">
                <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.settings.devices_qr_tab') }}</h2></div>
                <div class="qm-card-body">
                    @php $qrFlow = (string) ($r['qr_flow'] ?? 'order_pay');
@endphp
                    @php /* Label + note left, control right. That is the row shape everywhere in
                             settings; a stacked label over a control on the left is the exception. */
@endphp
                    <div class="qm-switch-row">
                        <span>
                            <strong>{{ t_raw('vendor.settings.qr_flow_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.qr_flow_help') }}</small>
                        </span>
                        <select class="form-select qm-maxw-320" id="di-qr-flow" name="qr_flow">
                            <option value="menu_only"{{ $qrFlow === 'menu_only' ? ' selected' : '' }}>{{ t_raw('vendor.settings.qr_flow_menu_only') }}</option>
                            <option value="order"{{ $qrFlow === 'order' ? ' selected' : '' }}>{{ t_raw('vendor.settings.qr_flow_order') }}</option>
                            <option value="order_pay"{{ $qrFlow === 'order_pay' ? ' selected' : '' }}>{{ t_raw('vendor.settings.qr_flow_order_pay') }}</option>
                        </select>
                    </div>
                    <p class="qm-hint"><a href="{{ route('vendor.tables.qr') }}">{{ t_raw('vendor.settings.print_qr_link') }}</a></p>
                </div>
                <div class="qm-card-foot">
                    <button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button>
                </div>
            </div>
        </form>
    </section>
    @endif
</div>

</div>@php /* /.qm-d2 */
@endphp
@endsection