@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → Devices (Terminals): self-order kiosks + POS tills in one registry.
 * @var array $devices rows: id, type, name, table_id, table_label, table_active, token,
 *            order_mode, accepts_payment, has_card_reader, card_reader_ref, has_printer,
 *            printer_transport, has_drawer, is_active
 * @var array $tables  rows: id, label (active tables for the binding dropdown)
 * @var array $stats   per-device order stats keyed by device id
 */
use App\Models\Device;

$devices  = $devices ?? [];
$tables   = $tables ?? [];
$stations = $stations ?? [];
$stats    = $stats ?? [];
$totals  = $totals ?? ['orders' => 0, 'revenue' => 0.0, 'active_30d' => 0];
$liveDevices = (int) ($liveDevices ?? 0);
$showMoney   = $showMoney ?? true;
$slug        = $restaurant['slug'] ?? '';

$transportLabels = [
    'none'    => t_raw('vendor.devices.transport_none'),
    'usb'     => t_raw('vendor.devices.transport_usb'),
    'serial'  => t_raw('vendor.devices.transport_serial'),
    'hid'     => t_raw('vendor.devices.transport_hid'),
    'browser' => t_raw('vendor.devices.transport_browser'),
];
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page primary action → top-bar subheader slot.
ob_start();
@endphp
<button type="button" class="qm-btn" data-bs-toggle="modal" data-bs-target="#deviceModal" data-device-add><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('vendor.devices.btn_add') }}</button>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp

<div class="qm-kpi-grid">
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'blue', 'icon' => 'fa-desktop', 'label' => t_raw('vendor.devices.kpi_devices'),
        'value' => number_format($liveDevices),
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.devices.kpi_meta_devices', [':n' => number_format((int) $totals['active_30d'])]) . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'amber', 'icon' => 'fa-power-off', 'label' => t_raw('vendor.devices.kpi_idle'),
        'value' => number_format(max(0, $liveDevices - (int) $totals['active_30d'])),
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.devices.kpi_meta_idle') . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'teal', 'icon' => 'fa-receipt', 'label' => t_raw('vendor.devices.kpi_orders'),
        'value' => number_format((int) $totals['orders']),
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.devices.kpi_meta_orders') . '</span>'])
    @if ($showMoney)
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'green', 'icon' => 'fa-coins', 'label' => t_raw('vendor.devices.kpi_takings'),
        'value' => money($totals['revenue']),
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.devices.kpi_meta_takings') . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'violet', 'icon' => 'fa-chart-line', 'label' => t_raw('vendor.devices.kpi_avg_order'),
        'value' => $totals['orders'] > 0 ? money($totals['revenue'] / $totals['orders']) : "—",
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.devices.kpi_meta_avg_order') . '</span>'])
    @endif
</div>

<div class="qm-card">
    <div class="qm-ops-head">
        <div class="d-flex align-items-center gap-2">
            <h2 class="mb-0">{{ t_raw('vendor.devices.list_heading') }}</h2>
            <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.devices.subtitle') }}" data-qm-tip="{{ t_raw('vendor.devices.subtitle') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
        </div>
    </div>

    @php $type = (string) (($filters ?? [])['type'] ?? ''); $bind = (string) (($filters ?? [])['bind'] ?? ''); $status = (string) (($filters ?? [])['status'] ?? ''); $q = (string) (($filters ?? [])['q'] ?? '');
@endphp
    <form method="get" action="{{ route('vendor.devices') }}" class="qm-order-filters">
        @partial('filter-collapse')
        <div class="qm-of-field">
            <label class="qm-of-label" for="df-type">{{ t_raw('vendor.devices.filter_type') }}</label>
            <select id="df-type" name="type" class="form-select">
                @php // Only the types the enabled services own. Offering a filter that can never
                      // match anything is the same dead control as a switch that does nothing.
@endphp
                @php $deviceTypes = \App\Services\Capability::deviceTypes();
@endphp
                <option value="">{{ t_raw('vendor.devices.filter_all_types') }}</option>
                @if (in_array('kiosk', $deviceTypes, true))
                <option value="kiosk"{{ $type === 'kiosk' ? ' selected' : '' }}>{{ t_raw('vendor.devices.type_kiosk') }}</option>
                @endif
                @if (in_array('pos', $deviceTypes, true))
                <option value="pos"{{ $type === 'pos' ? ' selected' : '' }}>{{ t_raw('vendor.devices.type_pos') }}</option>
                @endif
                @if (in_array('kds', $deviceTypes, true))
                <option value="kds"{{ $type === 'kds' ? ' selected' : '' }}>{{ t_raw('vendor.devices.type_kds') }}</option>
                @endif
            </select>
        </div>
        <div class="qm-of-field">
            <label class="qm-of-label" for="df-bind">{{ t_raw('vendor.devices.filter_binding') }}</label>
            <select id="df-bind" name="bind" class="form-select">
                <option value="">{{ t_raw('vendor.devices.filter_all_bindings') }}</option>
                <option value="counter"{{ $bind === 'counter' ? ' selected' : '' }}>{{ t_raw('vendor.devices.option_counter') }}</option>
                @foreach ($tables as $t)
                <option value="{{ (int) $t['id'] }}"{{ $bind === (string) (int) $t['id'] ? ' selected' : '' }}>{{ t_raw('vendor.devices.option_table', [':label' => $t['label']]) }}</option>
                @endforeach
            </select>
        </div>
        <div class="qm-of-field">
            <label class="qm-of-label" for="df-status">{{ t_raw('common.status') }}</label>
            <select id="df-status" name="status" class="form-select">
                <option value="">{{ t_raw('common.all') }}</option>
                <option value="active"{{ $status === 'active' ? ' selected' : '' }}>{{ t_raw('common.active') }}</option>
                <option value="inactive"{{ $status === 'inactive' ? ' selected' : '' }}>{{ t_raw('common.inactive') }}</option>
            </select>
        </div>
        <div class="qm-of-field qm-of-grow">
            <label class="qm-of-label" for="df-q">{{ t_raw('common.search') }}</label>
            <input type="search" id="df-q" name="q" class="form-control" placeholder="{{ t_raw('vendor.devices.search_placeholder') }}" value="{{ $q }}">
        </div>
        <div class="qm-of-actions">
            <a href="{{ route('vendor.devices') }}" class="qm-filter-reset{{ ($type !== '' || $bind !== '' || $status !== '' || $q !== '') ? ' is-active' : '' }}">{{ t_raw('common.reset') }}</a>
        </div>
    </form>
    <div class="table-responsive">
    <table class="qm-table" data-sortable>
        <thead><tr>
            <th scope="col" data-sort="text">{{ t_raw('vendor.devices.col_device') }}</th>
            <th scope="col">{{ t_raw('vendor.devices.col_binding') }}</th>
            <th scope="col">{{ t_raw('vendor.devices.col_capabilities') }}</th>
            <th scope="col" data-sort="number">{{ t_raw('vendor.devices.col_performance') }}</th>
            <th scope="col">{{ t_raw('vendor.devices.col_access') }}</th>
            <th scope="col">{{ t_raw('common.status') }}</th>
            <th class="text-end" scope="col">{{ t_raw('common.actions') }}</th>
        </tr></thead>
        <tbody>
            @if ($devices)
            @foreach ($devices as $d)
@php $isPos = ($d['type'] ?? 'kiosk') === Device::TYPE_POS;
                $isKds = Device::isDisplay($d);
                $mode  = Device::mode($d);
                $launchUrl = url('/restaurant/' . $slug . '/kiosk?k=' . $d['token']);
                $posUrl    = url('/vendor/pos?device=' . $d['token']);
                $kdsUrl    = url(Device::kdsUrl($d)); @endphp
            <tr>
                <td>
                    <div class="qm-tbl-id">
                        <span class="qm-tbl-ico"><i class="fas {{ $isPos ? 'fa-cash-register' : ($isKds ? 'fa-fire' : 'fa-tablet-alt') }}" aria-hidden="true"></i></span>
                        <div class="qm-tbl-id-text">
                            <strong>{{ $d['name'] }}</strong>
                            <div class="mt-1 d-flex flex-wrap gap-1">
                                <span class="qm-pill {{ Device::typePill((string) $d['type']) }}">{{ Device::types()[$d['type']] ?? $d['type'] }}</span>
                                @php /* A display places no orders, so the routing mode says nothing about it. */
@endphp
                                @if (!$isKds)<span class="qm-pill {{ Device::modePill($mode) }}">{{ Device::orderModes()[$mode] ?? $mode }}</span>@endif
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    @if ($isKds)
                    @php /* A display bound to no station shows the whole kitchen — stated, because
                             on a divided kitchen that is a decision rather than a gap. */
@endphp
                    @if (!empty($d['station_name']))
                    <span class="qm-pill qm-pill-amber"><i class="fas fa-fire" aria-hidden="true"></i> {{ (string) $d['station_name'] }}</span>
                    @else
                    <span class="qm-pill qm-pill-grey">{{ t_raw('vendor.devices.pill_whole_kitchen') }}</span>
                    @endif
                    @elseif ($isPos)
                    <span class="qm-cell-body">—</span>
                    @elseif ($d['table_id'])
                    <span class="qm-pill qm-pill-blue">{{ t_raw('vendor.devices.pill_dinein_table', [':label' => $d['table_label'] ?? '']) }}</span>
                    @if ($d['table_active'] === null || (int) $d['table_active'] !== 1)
                    <div class="mt-1"><span class="qm-pill qm-pill-red"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> {{ t_raw('vendor.devices.warn_table_inactive') }}</span></div>
                    @endif
                    @else
                    <span class="qm-pill qm-pill-amber">{{ t_raw('vendor.devices.pill_counter_orders') }}</span>
                    @endif
                </td>
                <td>
                    @php
                    $caps = [];
                    if (Device::acceptsPayment($d)) { $caps[] = ['green', 'fa-credit-card', t_raw('vendor.devices.cap_payments')]; }
                    if (Device::hasReader($d))     { $caps[] = ['blue', 'fa-wifi', t_raw('vendor.devices.cap_reader')]; }
                    if (Device::hasPrinter($d))    { $caps[] = ['grey', 'fa-print', $transportLabels[Device::printerTransport($d)] ?? t_raw('vendor.devices.cap_printer')]; }
                    if (Device::hasDrawer($d))     { $caps[] = ['grey', 'fa-cash-register', t_raw('vendor.devices.cap_drawer')]; }
                    if (Device::hasScanner($d))    { $caps[] = ['grey', 'fa-barcode', t_raw('vendor.devices.cap_scanner')]; }
@endphp
                    @if ($caps)
                    <span class="d-inline-flex flex-wrap gap-1">
                        @foreach ($caps as $c)
                        <span class="qm-pill qm-pill-{{ $c[0] }}"><i class="fas {{ $c[1] }}" aria-hidden="true"></i> {{ $c[2] }}</span>
                        @endforeach
                    </span>
                    @else
                    <span class="qm-cell-body">{{ t_raw('vendor.devices.cap_none') }}</span>
                    @endif
                </td>
                @php $s = $stats[(int) $d['id']] ?? null;
@endphp
                <td data-sort-value="{{ $s ? (int) $s['orders'] : -1 }}">
                    @if ($s === null)
                        <span class="qm-pill qm-pill-grey">{{ t_raw('vendor.devices.perf_no_orders') }}</span>
                    @else
                        <strong>{{ t_raw('vendor.devices.perf_orders', [':n' => number_format((int) $s['orders'])]) }}</strong>
                        @if ($showMoney)
                        <div class="qm-cell-body">{{ money($s['revenue']) }} &middot; {{ t_raw('vendor.devices.perf_avg', [':amount' => money($s['avg'])]) }}</div>
                        @endif
                        @if ((int) $s['orders_30d'] > 0)
                        <div class="qm-cell-body">{{ t_raw('vendor.devices.perf_last_30d', [':n' => number_format((int) $s['orders_30d'])]) }}</div>
                        @else
                        <div class="mt-1"><span class="qm-pill qm-pill-amber"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> {!! t_raw('vendor.devices.perf_quiet_30d', [':date' => fmt_day($s['last_order'], true)]) !!}</span></div>
                        @endif
                    @endif
                </td>
                <td class="qm-cell-body">
                    @if ($isKds)
                    @php /* No token: a kitchen display is staff-facing, so it opens behind the
                             dashboard sign-in like the board itself rather than on a public link. */
@endphp
                    <a href="{{ $kdsUrl }}" class="qm-link-truncate"><i class="fas fa-external-link-alt me-1" aria-hidden="true"></i>{{ t_raw('vendor.devices.open_kds') }}</a>
                    @elseif ($isPos)
                    <a href="{{ $posUrl }}" class="qm-link-truncate"><i class="fas fa-external-link-alt me-1" aria-hidden="true"></i>{{ t_raw('vendor.devices.open_pos') }}</a>
                    @else
                    <span class="d-inline-flex align-items-center gap-2">
                        <a href="{{ $launchUrl }}" target="_blank" rel="noopener" class="text-truncate qm-link-truncate">{{ $launchUrl }}</a>
                        <button type="button" class="qm-icon-btn" data-copy-link="{{ $launchUrl }}" aria-label="{{ t_raw('vendor.devices.aria_copy_link', [':name' => $d['name']]) }}"><i class="fas fa-copy" aria-hidden="true"></i></button>
                    </span>
                    @endif
                </td>
                <td>
                    <form method="post" action="{{ route('vendor.devices.save') }}" class="d-inline">
                        @csrf
                        <input type="hidden" name="id" value="{{ (int) $d['id'] }}">
                        <div class="form-check form-switch d-inline-block m-0 align-middle">
                            <input class="form-check-input" type="checkbox" role="switch" name="is_active" value="1" data-device-toggle{{ $d['is_active'] ? ' checked' : '' }} aria-label="{!! $d['is_active'] ? t('vendor.devices.aria_is_on', [':name' => $d['name']]) : t('vendor.devices.aria_is_off', [':name' => $d['name']]) !!}">
                        </div>
                    </form>
                </td>
                <td class="qm-actions-cell">
                    @partial('row-actions', ['inline' => 0, 'actions' => array_values(array_filter([
                        $isKds ? [
                            'label' => t_raw('common.view'),
                            'icon'  => 'fa-eye',
                            'href'  => Device::kdsUrl($d),
                            'attrs' => ['target' => '_blank', 'rel' => 'noopener'],
                        ] : ($isPos ? null : [
                            'label' => t_raw('common.view'),
                            'icon'  => 'fa-eye',
                            'href'  => '/restaurant/' . $slug . '/kiosk?k=' . $d['token'],
                            'attrs' => ['target' => '_blank', 'rel' => 'noopener'],
                        ]),
                        [
                            'label' => t_raw('common.edit'),
                            'icon'  => 'fa-pen',
                            'attrs' => [
                                'data-bs-toggle'  => 'modal',
                                'data-bs-target'  => '#deviceModal',
                                'data-device-edit' => '1',
                                'data-id'         => (string) (int) $d['id'],
                                'data-type'       => (string) $d['type'],
                                'data-name'       => (string) $d['name'],
                                'data-table'      => (string) (int) ($d['table_id'] ?? 0),
                                'data-station'    => (string) (int) ($d['station_id'] ?? 0),
                                'data-mode'       => $mode,
                                'data-accepts'    => (string) (int) ($d['accepts_payment'] ?? 0),
                                'data-reader'     => (string) (int) ($d['has_card_reader'] ?? 0),
                                'data-reader-ref' => (string) ($d['card_reader_ref'] ?? ''),
                                'data-printer'    => (string) (int) ($d['has_printer'] ?? 0),
                                'data-transport'  => (string) ($d['printer_transport'] ?? 'none'),
                                'data-drawer'     => (string) (int) ($d['has_drawer'] ?? 0),
                                'data-autoprint'  => (string) (int) ($d['auto_print'] ?? 0),
                                'data-scanner'    => (string) (int) ($d['has_scanner'] ?? 0),
                                'data-osk'        => (string) ($d['osk_mode'] ?? 'auto'),
                            ],
                        ],
                        [
                            'label'  => t_raw('vendor.devices.aria_remove', [':name' => $d['name']]),
                            'icon'   => 'fa-trash-alt',
                            'danger' => true,
                            'form'   => [
                                'action'  => '/vendor/devices/delete',
                                'fields'  => ['id' => (int) $d['id']],
                                'confirm' => t_raw('vendor.devices.confirm_remove'),
                            ],
                        ],
                    ]))])
                </td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', [
                'colspan' => 7,
                'icon'    => 'fa-desktop',
                'msg'     => t_raw('vendor.devices.empty_none'),
            ])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/vendor/devices'])
</div>

@php // Add / edit a device: one modal, filled from the row for edits.
@endphp
<div class="modal fade" id="deviceModal" tabindex="-1" aria-labelledby="deviceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="post" action="{{ route('vendor.devices.save') }}">
            @csrf
            <input type="hidden" name="id" id="dev-id" value="">
            <div class="modal-header">
                <h2 class="modal-title h5" id="deviceModalLabel" data-add-title="{{ t_raw('vendor.devices.btn_add') }}" data-edit-title="{{ t_raw('vendor.devices.edit_title') }}">{{ t_raw('vendor.devices.btn_add') }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button>
            </div>
            <div class="modal-body">
                <div class="qm-form-grid">
                    <div class="mb-3">
                        <label class="form-label" for="dev-type">{{ t_raw('vendor.devices.field_type') }}</label>
                        @php // A POS-only install must not be able to register a kiosk, and vice
                              // versa — otherwise the operator creates hardware for a service they
                              // switched off. Server side rejects it too (DevicesController::save).
@endphp
                        <select class="form-select" id="dev-type" name="type" data-device-type>
                            @if (in_array('kiosk', $deviceTypes, true))
                            <option value="kiosk">{{ t_raw('vendor.devices.type_kiosk') }}</option>
                            @endif
                            @if (in_array('pos', $deviceTypes, true))
                            <option value="pos">{{ t_raw('vendor.devices.type_pos') }}</option>
                            @endif
                            @if (in_array('kds', $deviceTypes, true))
                            <option value="kds">{{ t_raw('vendor.devices.type_kds') }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="dev-name">{{ t_raw('common.name') }}</label>
                        <input type="text" class="form-control" id="dev-name" name="name" maxlength="60" placeholder="{{ t_raw('vendor.devices.placeholder_name') }}" required>
                    </div>
                </div>
                <div class="mb-3" data-device-tablewrap>
                    <label class="form-label" for="dev-table">{{ t_raw('vendor.devices.field_bind_table') }}</label>
                    <select class="form-select" id="dev-table" name="table_id">
                        <option value="0">{{ t_raw('vendor.devices.option_counter') }}</option>
                        @foreach ($tables as $t)
                        <option value="{{ (int) $t['id'] }}">{{ t_raw('vendor.devices.option_table', [':label' => $t['label']]) }}</option>
                        @endforeach
                    </select>
                </div>
                @php /* A kitchen display's binding is a station, not a table. Left blank it shows
                         the whole kitchen — which is what a pass screen wants, and the only sane
                         fallback when the station it watched has been closed. */
@endphp
                <div class="mb-3" data-device-stationwrap>
                    <label class="form-label" for="dev-station">{{ t_raw('vendor.devices.field_bind_station') }}</label>
                    <select class="form-select" id="dev-station" name="station_id">
                        <option value="0">{{ t_raw('vendor.devices.option_whole_kitchen') }}</option>
                        @foreach ($stations as $stId => $stName)
                        <option value="{{ (int) $stId }}">{{ (string) $stName }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3" data-device-modewrap>
                    <label class="form-label" for="dev-mode">{{ t_raw('vendor.devices.field_order_mode') }}</label>
                    <select class="form-select" id="dev-mode" name="order_mode">
                        @foreach (Device::orderModes() as $mk => $ml)
                        <option value="{{ $mk }}">{{ $ml }}</option>
                        @endforeach
                    </select>
                </div>
                @php /* Kiosks only: the on-screen keyboard the review step raises for the name and phone. */
@endphp
                <div class="mb-3" data-device-oskwrap>
                    <label class="form-label" for="dev-osk">{{ t_raw('vendor.devices.field_osk') }}</label>
                    <select class="form-select" id="dev-osk" name="osk_mode">
                        @foreach (Device::oskModes() as $ok => $ol)
                        <option value="{{ $ok }}">{{ $ol }}</option>
                        @endforeach
                    </select>
                    <p class="qm-hint mt-2 mb-0">{{ t_raw('vendor.devices.hint_osk') }}</p>
                </div>

                <div class="qm-switch-row" data-device-acceptsrow>
                    <div class="form-check form-switch m-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="dev-accepts" name="accepts_payment" value="1" data-device-accepts>
                        <label class="form-check-label" for="dev-accepts">{{ t_raw('vendor.devices.field_accepts_payment') }}</label>
                    </div>
                </div>
                <div data-device-payblock>
                    <div class="qm-switch-row">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="dev-reader" name="has_card_reader" value="1" data-device-reader>
                            <label class="form-check-label" for="dev-reader">{{ t_raw('vendor.devices.field_has_reader') }}</label>
                        </div>
                    </div>
                    <div class="mb-3" data-device-readerref>
                        <label class="form-label" for="dev-readerref">{{ t_raw('vendor.devices.field_reader_ref') }}</label>
                        <input type="text" class="form-control" id="dev-readerref" name="card_reader_ref" maxlength="190" placeholder="{{ t_raw('vendor.devices.placeholder_reader_ref') }}">
                        <p class="qm-hint mt-2 mb-0">{{ t_raw('vendor.devices.hint_reader_ref') }}</p>
                    </div>
                </div>
                <div class="qm-switch-row" data-device-printerrow>
                    <div class="form-check form-switch m-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="dev-printer" name="has_printer" value="1" data-device-printer>
                        <label class="form-check-label" for="dev-printer">{{ t_raw('vendor.devices.field_has_printer') }}</label>
                    </div>
                </div>
                <div data-device-printblock>
                    <div class="mb-3">
                        <label class="form-label" for="dev-transport">{{ t_raw('vendor.devices.field_transport') }}</label>
                        <select class="form-select" id="dev-transport" name="printer_transport">
                            <option value="usb">{{ t_raw('vendor.devices.transport_usb') }}</option>
                            <option value="serial">{{ t_raw('vendor.devices.transport_serial') }}</option>
                            <option value="hid">{{ t_raw('vendor.devices.transport_hid') }}</option>
                            <option value="browser">{{ t_raw('vendor.devices.transport_browser') }}</option>
                        </select>
                    </div>
                    <div class="qm-switch-row">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="dev-drawer" name="has_drawer" value="1">
                            <label class="form-check-label" for="dev-drawer">{{ t_raw('vendor.devices.field_has_drawer') }}</label>
                        </div>
                    </div>
                    <div class="qm-switch-row">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="dev-autoprint" name="auto_print" value="1">
                            <label class="form-check-label" for="dev-autoprint">{{ t_raw('vendor.devices.field_auto_print') }}</label>
                        </div>
                    </div>
                </div>
                @php // A scanner is a keyboard: no transport, no pairing, so it sits outside the
                      // printer block on its own. Tills only — a kiosk has no ticket to ring into.
@endphp
                <div data-device-scanblock>
                    <div class="qm-switch-row">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="dev-scanner" name="has_scanner" value="1">
                            <label class="form-check-label" for="dev-scanner">{{ t_raw('vendor.devices.field_has_scanner') }}</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="qm-btn qm-btn-outline" data-bs-dismiss="modal">{{ t_raw('common.cancel') }}</button>
                <button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button>
            </div>
        </form>
    </div>
</div>

<script>
var QM_DEV_MSG_COPIED = {!! json_encode(t_raw('vendor.devices.toast_copied')) !!};
var QM_DEV_MSG_COPY_FAILED = {!! json_encode(t_raw('vendor.devices.toast_copy_failed')) !!};
(function () {
    // Copy a launch link (kiosk tablets are often on plain http:// where clipboard is undefined).
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-copy-link]');
        if (!btn) { return; }
        var text = btn.getAttribute('data-copy-link') || '';
        if (!text) { return; }
        function toast(type, msg) { if (typeof window.qmToast === 'function') { window.qmToast(type, msg); } }
        function legacy() {
            var ok = false;
            try {
                var ta = document.createElement('textarea');
                ta.value = text; ta.setAttribute('readonly', '');
                ta.style.position = 'absolute'; ta.style.left = '-9999px';
                document.body.appendChild(ta); ta.select();
                ok = document.execCommand('copy');
                document.body.removeChild(ta);
            } catch (err) { ok = false; }
            toast(ok ? 'success' : 'error', ok ? QM_DEV_MSG_COPIED : QM_DEV_MSG_COPY_FAILED);
        }
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function () { toast('success', QM_DEV_MSG_COPIED); }, legacy);
        } else { legacy(); }
    });

    // Status switch saves itself.
    document.addEventListener('change', function (e) {
        var sw = e.target.closest('[data-device-toggle]');
        if (sw) { sw.closest('form').submit(); }
    });

    var modal = document.getElementById('deviceModal');
    if (!modal) { return; }
    var titleEl = document.getElementById('deviceModalLabel');
    var typeSel = modal.querySelector('[data-device-type]');
    var acceptsCb = modal.querySelector('[data-device-accepts]');
    var readerCb = modal.querySelector('[data-device-reader]');
    var printerCb = modal.querySelector('[data-device-printer]');

    // Show/hide dependent fields to match the same rules the server enforces.
    function sync() {
        var isPos = typeSel.value === 'pos';
        // A kitchen display shows tickets. It rings nothing, takes nothing and prints
        // nothing, so every ordering and hardware control leaves the form — the server
        // clears them too, so hiding here is presentation, not the guard.
        var isKds = typeSel.value === 'kds';
        function show(sel, on) { var el = modal.querySelector(sel); if (el) { el.style.display = on ? '' : 'none'; } }
        show('[data-device-tablewrap]', !isPos && !isKds);
        show('[data-device-stationwrap]', isKds);
        show('[data-device-modewrap]', !isKds);
        show('[data-device-oskwrap]', !isPos && !isKds);
        show('[data-device-acceptsrow]', !isKds);
        show('[data-device-printerrow]', !isKds);
        show('[data-device-payblock]', !isKds && acceptsCb.checked);
        show('[data-device-readerref]', !isKds && acceptsCb.checked && readerCb.checked);
        show('[data-device-printblock]', !isKds && printerCb.checked);
        show('[data-device-scanblock]', isPos);
    }
    typeSel.addEventListener('change', sync);
    acceptsCb.addEventListener('change', sync);
    readerCb.addEventListener('change', sync);
    printerCb.addEventListener('change', sync);

    function setCheck(sel, on) { var el = modal.querySelector(sel); if (el) { el.checked = !!on; } }
    function setVal(sel, v) { var el = modal.querySelector(sel); if (el) { el.value = v; } }

    // "Add" resets to a blank kiosk; "Edit" fills from the row's data-* attributes.
    document.addEventListener('click', function (e) {
        var add = e.target.closest('[data-device-add]');
        if (add) {
            titleEl.textContent = titleEl.getAttribute('data-add-title');
            setVal('#dev-id', ''); setVal('#dev-type', 'kiosk'); setVal('#dev-name', '');
            setVal('#dev-table', '0'); setVal('#dev-station', '0'); setVal('#dev-mode', 'send_only');
            setCheck('#dev-accepts', false); setCheck('#dev-reader', false); setVal('#dev-readerref', '');
            setCheck('#dev-printer', false); setVal('#dev-transport', 'usb'); setCheck('#dev-drawer', false); setCheck('#dev-autoprint', false);
            setCheck('#dev-scanner', false); setVal('#dev-osk', 'auto');
            sync();
            return;
        }
        var btn = e.target.closest('[data-device-edit]');
        if (!btn) { return; }
        titleEl.textContent = titleEl.getAttribute('data-edit-title');
        setVal('#dev-id', btn.getAttribute('data-id') || '');
        setVal('#dev-type', btn.getAttribute('data-type') || 'kiosk');
        setVal('#dev-name', btn.getAttribute('data-name') || '');
        var table = btn.getAttribute('data-table') || '0';
        var sel = document.getElementById('dev-table');
        sel.value = table;
        if (sel.value !== table) { sel.value = '0'; } // binding to a now-inactive table
        var station = btn.getAttribute('data-station') || '0';
        var stSel = document.getElementById('dev-station');
        if (stSel) {
            stSel.value = station;
            if (stSel.value !== station) { stSel.value = '0'; } // its station has since been closed
        }
        setVal('#dev-mode', btn.getAttribute('data-mode') || 'send_only');
        setCheck('#dev-accepts', btn.getAttribute('data-accepts') === '1');
        setCheck('#dev-reader', btn.getAttribute('data-reader') === '1');
        setVal('#dev-readerref', btn.getAttribute('data-reader-ref') || '');
        setCheck('#dev-printer', btn.getAttribute('data-printer') === '1');
        var tr = btn.getAttribute('data-transport') || 'usb';
        setVal('#dev-transport', tr === 'none' ? 'usb' : tr);
        setCheck('#dev-drawer', btn.getAttribute('data-drawer') === '1');
        setCheck('#dev-autoprint', btn.getAttribute('data-autoprint') === '1');
        setCheck('#dev-scanner', btn.getAttribute('data-scanner') === '1');
        setVal('#dev-osk', btn.getAttribute('data-osk') || 'auto');
        sync();
    });
})();
</script>

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