@extends('layouts.dashboard')

@section('content')
@php

/**
 * Vendor → Tables → QR → Design card. One printable design (a FRONT and a BACK) applied to every
 * table; the scan code on each printed card stays that table's own. Built on the SAME components as the
 * TV screen editor (tv.css chrome, the 3x3 position grid, the overlay switches), a background presets
 * grid, plus the app's standard FilePond uploader for a custom background.
 *
 * Layout: a full-width settings card, then a balanced two-card row — the controls card (a Front/Back
 * tab bar + the active side's controls) beside the live-preview card.
 *
 * @var array $config      the saved (or default) QrCard design
 * @var array $creatives   background presets [ ['image'=>path], ... ]
 * @var array $categories  menu categories   @var array $items  available menu items
 */
use App\Models\QrCard;

$config = $config ?? QrCard::defaultConfig();
$sides  = ['front' => $config['front'], 'back' => $config['back']];
// This designer is shared: the SAME controls edit either the table-ordering card or the payment card
// (its QR encodes the vendor's own static pay link). $type switches the copy + the pay-link field.
$type   = (($type ?? 'table') === 'payment') ? 'payment' : 'table';
$isPay  = $type === 'payment';
// Payment is MANY named cards: $payCardId 0 = a new card, >0 = editing that card. The table card is
// always singular. $isNewPay drives where the link field lives (create form vs its own Save-link form).
$payCardId = (int) ($payCardId ?? 0);
$payName   = (string) ($payName ?? '');
$isNewPay  = $isPay && $payCardId === 0;
// Template mode: the admin authors a platform card template with this same designer. Values default to
// the vendor's own flow, so a normal vendor edit is unchanged.
$tplMode    = $tplMode ?? false;
$tplType    = $tplType ?? ($isPay ? 'qr_pay' : 'qr_card');
$tplId      = (int) ($tplId ?? 0);
$backUrl    = $backUrl ?? route('vendor.tables.qr');
$formAction = $formAction ?? ($isPay ? route('vendor.tables.qr.pay.post') : route('vendor.tables.qr.design'));
$hasTableTemplates = $hasTableTemplates ?? false;

$jsData = [
    'previewUrl' => $previewUrl ?? route('vendor.tables.qr.design.preview'),
    'type'       => $type,
    'card'       => [
        'orientation' => $config['orientation'], 'paper' => $config['paper'],
        'cornerTl' => (int) $config['cornerTl'], 'cornerTr' => (int) $config['cornerTr'],
        'cornerBr' => (int) $config['cornerBr'], 'cornerBl' => (int) $config['cornerBl'],
        'theme' => $config['theme'], 'font' => $config['font'],
        'accent' => $config['accent'], 'bgColor' => $config['bgColor'], 'poweredBy' => (bool) $config['poweredBy'],
    ],
    'front'   => $sides['front'],
    'back'    => $sides['back'],
    'themeBg' => QrCard::THEME_BG,
    'papers'  => QrCard::PAPERS,
    'i18n'    => ['cancel' => t_raw('vendor.qr_card.crop_cancel'), 'apply' => t_raw('vendor.qr_card.crop_apply')],
];

/** One 3x3 position grid (the exact control the TV editor uses), current anchor pre-marked. */
$posGrid = static function (string $field, string $cur): string {
    $out = '<div class="tv-posgrid" data-f="' . e($field) . '">';
    foreach (QrCard::POSITIONS as $p) {
        $out .= '<button type="button" data-pos="' . e($p) . '"' . ($p === $cur ? ' class="is-on"' : '')
              . ' aria-label="' . e(str_replace('-', ' ', $p)) . '"></button>';
    }
    return $out . '</div>';
};
/** One labelled switch row (reusing the dashboard switch component). */
$switch = static function (string $field, bool $on, string $label): string {
    return '<label class="qm-switch-row"><span>' . e($label) . '</span>'
        . '<input class="form-check-input" type="checkbox" role="switch" data-f="' . e($field) . '"' . ($on ? ' checked' : '') . '></label>';
};
$bgHex = $config['bgColor'] !== '' ? $config['bgColor'] : (QrCard::THEME_BG[$config['theme']] ?? '#f4f1ec');
// The second stop a gradient ink opens on: the card's own accent when it clears the contrast floor,
// otherwise the default near-black — so switching to a gradient never seeds a colour the server would
// then refuse. The floor itself stays in QrCard, the one place it is enforced.
$inkSeed = QrCard::inkError((string) $config['accent']) === '' ? strtolower((string) $config['accent']) : '#141210';
/** One side's stored qrInk split into its editor state: the mode plus the two swatch values. */
$inkState = static function (array $s) use ($inkSeed, $__env): array {
    $stops = array_values(array_filter(array_map('trim', explode(',', (string) ($s['qrInk'] ?? '')))));
    return [
        'mode' => count($stops) === 2 ? 'gradient' : (count($stops) === 1 ? 'solid' : 'default'),
        'a'    => $stops[0] ?? '#141210',
        'b'    => $stops[1] ?? $inkSeed,
    ];
};
@endphp

@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<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($isPay ? 'vendor.qr_card.pay_form_heading' : 'vendor.qr_card.form_heading') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw($isPay ? 'vendor.qr_card.pay_form_sub' : 'vendor.qr_card.form_sub') }}</p>
    </div>
    <div class="d-flex gap-2">
        @if (!$isPay && !$tplMode && !empty($hasTableTemplates))
        <a class="qm-btn qm-btn-outline" href="{{ route('vendor.tables.qr.design.templates') }}"><i class="fas fa-th-large me-1" aria-hidden="true"></i> {{ t_raw('vendor.templates.pick_heading') }}</a>
        @endif
        <a class="qm-btn qm-btn-outline" href="{{ $backUrl }}"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw($tplMode ? 'common.back' : 'vendor.qr_card.back_to_codes') }}</a>
    </div>
</div>

@if ($isPay && !$isNewPay)
<!-- Payment card details (existing card): the name + the static link, saved together here on their own
     — independently of the card design (the "Save design" button below preserves them). The link is
     what makes the code real, so the preview redraws live as you type (qr-card-editor.js reads
     [data-pay-url]); with no link there is no QR. Name → link → Save, on one row. -->
<form method="post" action="{{ url('/vendor/tables/qr/pay/' . $payCardId . '/link') }}" class="qm-card mb-3" id="qrcard-payform">
    @csrf
    <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.qr_card.pay_details_label') }}</h2></div>
    <div class="qm-card-body">
        <label class="form-label">{{ t_raw('vendor.qr_card.pay_name_label') }}</label>
        <input type="text" class="form-control mb-3" name="name" maxlength="120" required value="{{ $payName }}" placeholder="{{ t_raw('vendor.qr_card.pay_name_ph') }}">
        <label class="form-label d-flex align-items-center gap-2">{{ t_raw('vendor.qr_card.pay_url_label') }}
            <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.qr_card.pay_url_tip') }}" data-qm-tip="{{ t_raw('vendor.qr_card.pay_url_tip') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
        </label>
        <div class="qrcard-linkrow">
            <input type="url" class="form-control" name="pay_url" data-pay-url value="{{ (string) ($config['pay_url'] ?? '') }}" placeholder="{{ t_raw('vendor.qr_card.pay_url_ph') }}" inputmode="url" autocomplete="off" spellcheck="false">
            <button type="submit" class="qm-btn"><i class="fas fa-check me-1" aria-hidden="true"></i> {{ t_raw('common.save') }}</button>
        </div>
    </div>
</form>
@endif

<form method="post" action="{{ $formAction }}" enctype="multipart/form-data" id="qrcard-form">
    @csrf
    @if ($tplMode)
        <input type="hidden" name="type" value="{{ $tplType }}">
        <input type="hidden" name="tpl_id" value="{{ $tplId }}">
    @else
        <input type="hidden" name="type" value="{{ $type }}">
        @if ($isPay)<input type="hidden" name="id" value="{{ (int) $payCardId }}">@endif
    @endif
    <input type="hidden" name="orientation" id="c-orientation">
    <input type="hidden" name="paper" id="c-paper">
    <input type="hidden" name="cornerTl" id="c-cornerTl">
    <input type="hidden" name="cornerTr" id="c-cornerTr">
    <input type="hidden" name="cornerBr" id="c-cornerBr">
    <input type="hidden" name="cornerBl" id="c-cornerBl">
    <input type="hidden" name="theme" id="c-theme">
    <input type="hidden" name="font" id="c-font">
    <input type="hidden" name="accent" id="c-accent">
    <input type="hidden" name="bgColor" id="c-bgColor">
    <input type="hidden" name="poweredBy" id="c-poweredBy">
    <input type="hidden" name="front_json" id="front_json">
    <input type="hidden" name="back_json" id="back_json">

    @if ($tplMode && !$isPay)
@php // a table-card TEMPLATE needs a name (the singular vendor card has none); @endphp
    <div class="qm-card qm-card-pad mb-3">
        <label class="form-label">{{ t_raw('vendor.qr_card.pay_name_label') }}</label>
        <input type="text" class="form-control" name="name" maxlength="120" required value="{{ $payName }}" placeholder="{{ t_raw('vendor.qr_card.pay_name_ph') }}">
    </div>
    @endif

    @if ($isNewPay)
    <!-- New payment card: name + link entered together — the "Create payment QR" button below saves
         both with the design in one step (there is no card yet to save a link against on its own).
         An existing card edits its name + link in the details form above instead. -->
    <div class="qm-card mb-3">
        <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.qr_card.pay_details_label') }}</h2></div>
        <div class="qm-card-body">
            <label class="form-label">{{ t_raw('vendor.qr_card.pay_name_label') }}</label>
            <input type="text" class="form-control mb-3" name="name" maxlength="120" required value="{{ $payName }}" placeholder="{{ t_raw('vendor.qr_card.pay_name_ph') }}">
            @if (!$tplMode)
@php // a template carries no payment link — the vendor adds their own on their copy; @endphp
            <label class="form-label d-flex align-items-center gap-2">{{ t_raw('vendor.qr_card.pay_url_label') }}
                <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.qr_card.pay_url_tip') }}" data-qm-tip="{{ t_raw('vendor.qr_card.pay_url_tip') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
            </label>
            <input type="url" class="form-control" name="pay_url" data-pay-url value="" placeholder="{{ t_raw('vendor.qr_card.pay_url_ph') }}" inputmode="url" autocomplete="off" spellcheck="false">
            @endif
        </div>
    </div>
    @endif

    <!-- Card settings (shared by both sides) -->
    <div class="qm-card qm-card-pad mb-3">
        <div class="qrcard-set-grid">
            @php // Phone/tablet: the same tap-to-open dropdown the Orders filter bar uses (labelled "Settings").
@endphp
            @partial('filter-collapse', ['id' => 'qrcard-set-open', 'label' => t_raw('common.settings')])
            <div>
                <label class="form-label">{{ t_raw('vendor.screens.f_orientation') }}</label>
                <select class="form-select" data-card="orientation">
                    <option value="portrait">{{ t_raw('vendor.qr_card.orient_portrait') }}</option>
                    <option value="landscape">{{ t_raw('vendor.qr_card.orient_landscape') }}</option>
                </select>
            </div>
            <div>
                <label class="form-label">{{ t_raw('vendor.qr_card.f_paper') }}</label>
                <select class="form-select" data-card="paper">
                    @foreach (QrCard::PAPERS as $pk => $pv)
                        <option value="{{ $pk }}">{{ ucfirst($pv['css']) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">{{ t_raw('vendor.qr_card.f_corners') }}</label>
                <div class="qrcard-corners">
                    <input type="number" min="0" max="10" data-card="cornerTl" value="{{ (int) $config['cornerTl'] }}" title="{{ t_raw('vendor.qr_card.corner_tl') }}">
                    <input type="number" min="0" max="10" data-card="cornerTr" value="{{ (int) $config['cornerTr'] }}" title="{{ t_raw('vendor.qr_card.corner_tr') }}">
                    <input type="number" min="0" max="10" data-card="cornerBl" value="{{ (int) $config['cornerBl'] }}" title="{{ t_raw('vendor.qr_card.corner_bl') }}">
                    <input type="number" min="0" max="10" data-card="cornerBr" value="{{ (int) $config['cornerBr'] }}" title="{{ t_raw('vendor.qr_card.corner_br') }}">
                </div>
            </div>
            <div>
                <label class="form-label">{{ t_raw('vendor.screens.f_theme') }}</label>
                <select class="form-select" data-card="theme">
                    <option value="light">{{ t_raw('vendor.screens.theme_light') }}</option>
                    <option value="dark">{{ t_raw('vendor.screens.theme_dark') }}</option>
                </select>
            </div>
            <div>
                <label class="form-label">{{ t_raw('vendor.receipt.font') }}</label>
                <select class="form-select" data-card="font">
                    <option value="sans">{{ t_raw('vendor.receipt.font_sans') }}</option>
                    <option value="serif">{{ t_raw('vendor.receipt.font_serif') }}</option>
                    <option value="mono">{{ t_raw('vendor.receipt.font_mono') }}</option>
                    <option value="condensed">{{ t_raw('vendor.receipt.font_condensed') }}</option>
                </select>
            </div>
            <div>
                <label class="form-label">{{ t_raw('vendor.screens.f_accent') }}</label>
                <input type="color" class="form-control qm-color-swatch-sq" data-card="accent" value="{{ $config['accent'] }}">
            </div>
            <div>
                <label class="form-label">{{ t_raw('vendor.screens.f_background') }}</label>
                <input type="color" class="form-control qm-color-swatch-sq" data-card="bgColor" value="{{ $bgHex }}">
            </div>
            <div class="qrcard-set-switch">
                <label class="qm-switch-row mb-0">
                    <span><strong>{{ t_raw('vendor.screens.t_powered') }}</strong></span>
                    <input class="form-check-input" type="checkbox" role="switch" data-card="poweredBy">
                </label>
            </div>
        </div>
    </div>

    <div class="qrcard-editor">
        <!-- Controls card: Front/Back tabs + the active side's controls -->
        <div class="qm-card qm-card-pad">
            <div class="qrcard-tabs" role="tablist" aria-label="{{ t_raw('vendor.qr_card.form_heading') }}">
                <button type="button" data-side-tab="front" class="is-on" aria-selected="true"><i class="fas fa-id-card" aria-hidden="true"></i> {{ t_raw('vendor.qr_card.side_front') }}</button>
                <button type="button" data-side-tab="back" aria-selected="false"><i class="fas fa-clone" aria-hidden="true"></i> {{ t_raw('vendor.qr_card.side_back') }}</button>
            </div>

            @foreach ($sides as $key => $s)
@php $catOf = [];
                foreach ($items as $it) { $catOf[(int) $it['menu_category_id']][] = $it; }; @endphp
            <div class="qrcard-controls" data-side="{{ $key }}"{{ $key === 'front' ? '' : ' hidden' }}>
                <div class="qrcard-col">
                    <!-- Background — the ONE shared media field (browse the library / upload / crop) that
                         every other image on the product uses, so "Browse" opens the owner's own library
                         and never the OS file dialog. It replaces the old creatives radio strip + raw
                         upload: the library modal already lists those creatives among the media. -->
                    <div class="qrcard-block">
                        <p class="qm-ops-sub">{{ t_raw('vendor.qr_card.bg_label') }}</p>
                        @php /* Scope follows who is authoring — see the same note on the print-menu
                                 background. An admin has no restaurant, so the default /vendor/media
                                 endpoint returned nothing: the library looked empty and Change did
                                 nothing, because the request behind it had no tenant to read. */
@endphp
                        {!! media_field_html($key . '_bg', (string) ($s['background'] ?? ''), [
                            'accept'     => 'image',
                            'allowClear' => true,
                            'crop'       => true,
                            'endpoint'   => ($tplMode ?? false) ? '/admin/media' : '/vendor/media',
                            'id'         => 'qrc-bg-' . $key,
                        ]) !!}
                    </div>

                    <!-- Restaurant logo -->
                    <div class="qrcard-block">
                        <label class="qm-switch-row mb-0">
                            <span><strong>{{ t_raw('vendor.qr_card.logo_show') }}</strong></span>
                            <input class="form-check-input" type="checkbox" role="switch" data-f="logo"{{ !empty($s['logo']) ? ' checked' : '' }}>
                        </label>
                        <div class="qrcard-hideable mt-3" data-group="logo"{{ !empty($s['logo']) ? '' : ' hidden' }}>
                            <label class="form-label">{{ t_raw('vendor.qr_card.logo_position') }}</label>
                            {!! $posGrid('logoPos', (string) ($s['logoPos'] ?? 'top-left')) !!}
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.logo_size') }}</label>
                            <div class="qrcard-row">
                                <input type="range" min="0" max="10" step="1" class="form-range" data-f="logoSize" value="{{ (int) ($s['logoSize'] ?? 4) }}">
                                <output class="tv-size-out">{{ (int) ($s['logoSize'] ?? 4) }}</output>
                            </div>
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.offset') }}</label>
                            <div class="qrcard-row">
                                <input type="number" class="qrcard-off" data-off="logoX" min="-40" max="40" value="{{ (int) ($s['logoX'] ?? 0) }}" aria-label="X">
                                <input type="number" class="qrcard-off" data-off="logoY" min="-40" max="40" value="{{ (int) ($s['logoY'] ?? 0) }}" aria-label="Y">
                            </div>
                        </div>
                    </div>

                    <!-- Title (an alternative to featuring a product) -->
                    <div class="qrcard-block">
                        <label class="form-label">{{ t_raw('vendor.qr_card.title_label') }}</label>
                        <input type="text" class="form-control form-control-sm" data-f="title" maxlength="40" value="{{ (string) ($s['title'] ?? '') }}" placeholder="{{ t_raw('vendor.qr_card.title_ph') }}">
                        <label class="form-label mt-3">{{ t_raw('vendor.screens.overlay_position') }}</label>
                        {!! $posGrid('titlePos', (string) ($s['titlePos'] ?? 'top-center')) !!}
                        <label class="form-label mt-3">{{ t_raw('vendor.screens.overlay_size') }}</label>
                        <div class="qrcard-row">
                            <input type="range" min="0" max="10" step="1" class="form-range" data-f="titleSize" value="{{ (int) ($s['titleSize'] ?? 6) }}">
                            <output class="tv-size-out">{{ (int) ($s['titleSize'] ?? 6) }}</output>
                        </div>
                        <label class="form-label mt-3">{{ t_raw('vendor.qr_card.offset') }}</label>
                        <div class="qrcard-row">
                            <input type="number" class="qrcard-off" data-off="titleX" min="-40" max="40" value="{{ (int) ($s['titleX'] ?? 0) }}" aria-label="X">
                            <input type="number" class="qrcard-off" data-off="titleY" min="-40" max="40" value="{{ (int) ($s['titleY'] ?? 0) }}" aria-label="Y">
                        </div>
                    </div>
                </div>

                <div class="qrcard-col">
                    <!-- Featured product -->
                    <div class="qrcard-block">
                        <p class="qm-ops-sub">{{ t_raw('vendor.qr_card.product_label') }}</p>
                        @php
                        /* 'auto' is a stored VALUE, not an absence — "this card features a dish, and
                           whichever restaurant uses it supplies one". A card adopted from a template
                           carries it, so the select has to be able to represent it: without the option
                           it fell back to "0" ("no featured product") and the first save deleted the
                           feature outright. Same fix as the TV board editor. */
                        $sProduct    = $s['product'] ?? 0;
                        $sHasProduct = $sProduct === 'auto' || (int) $sProduct > 0;
@endphp
                        <select class="form-select form-select-sm" data-f="product">
                            <option value="0">{{ t_raw('vendor.screens.overlay_none') }}</option>
                            <option value="auto"{{ $sProduct === 'auto' ? ' selected' : '' }}>{{ t_raw('vendor.screens.overlay_auto') }}</option>
                            @php /* Individual dishes are offered to a VENDOR only. A template cannot keep one —
                                     DesignTemplate::normalize() maps any pick to 'auto' — and offering a choice
                                     that cannot be kept is exactly what made the board editor look as though it
                                     were throwing the admin's selection away on save. */
@endphp
                            @if (!($tplMode ?? false))
                            @foreach ($categories as $c)
@php if (empty($catOf[(int) $c['id']])) { continue; }; @endphp
                                <optgroup label="{{ $c['name'] }}">
                                    @foreach ($catOf[(int) $c['id']] as $it)
                                        <option value="{{ (int) $it['id'] }}"{{ (int) $sProduct === (int) $it['id'] ? ' selected' : '' }}>{{ $it['name'] }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                            @endif
                        </select>
                        <div class="qrcard-hideable mt-3" data-group="product"{{ $sHasProduct ? '' : ' hidden' }}>
                            <label class="form-label">{{ t_raw('vendor.screens.overlay_position') }}</label>
                            {!! $posGrid('productPos', (string) ($s['productPos'] ?? 'top-center')) !!}
                            <label class="form-label mt-3">{{ t_raw('vendor.screens.overlay_size') }}</label>
                            <div class="qrcard-row">
                                <input type="range" min="0" max="10" step="1" class="form-range" data-f="productSize" value="{{ (int) ($s['productSize'] ?? 5) }}">
                                <output class="tv-size-out">{{ (int) ($s['productSize'] ?? 5) }}</output>
                            </div>
                            <div class="tv-switch-group mt-3">
                                {!! $switch('showName', !empty($s['showName']), t_raw('vendor.screens.overlay_name')) !!}
                                {!! $switch('showDesc', !empty($s['showDesc']), t_raw('vendor.screens.overlay_desc')) !!}
                                {!! $switch('showPrice', !empty($s['showPrice']), t_raw('vendor.screens.overlay_price')) !!}
                            </div>
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.offset') }}</label>
                            <div class="qrcard-row">
                                <input type="number" class="qrcard-off" data-off="productX" min="-40" max="40" value="{{ (int) ($s['productX'] ?? 0) }}" aria-label="X">
                                <input type="number" class="qrcard-off" data-off="productY" min="-40" max="40" value="{{ (int) ($s['productY'] ?? 0) }}" aria-label="Y">
                            </div>
                        </div>
                    </div>

                    <!-- QR code placement -->
                    <div class="qrcard-block">
                        <label class="qm-switch-row mb-0">
                            <span><strong>{{ t_raw($isPay ? 'vendor.qr_card.pay_qr_show' : 'vendor.qr_card.qr_show') }}</strong></span>
                            <input class="form-check-input" type="checkbox" role="switch" data-f="qr"{{ !empty($s['qr']) ? ' checked' : '' }}>
                        </label>
                        <div class="qrcard-hideable mt-3" data-group="qr"{{ !empty($s['qr']) ? '' : ' hidden' }}>
                            <label class="form-label">{{ t_raw('vendor.qr_card.qr_position') }}</label>
                            {!! $posGrid('qrPos', (string) ($s['qrPos'] ?? 'bottom-center')) !!}
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.qr_size') }}</label>
                            @php $qrSizeCur = \App\Models\QrCard::qrSize($s['qrSize'] ?? null);
@endphp
                            <select class="form-select form-select-sm" data-f="qrSize">
                                @foreach (['small' => 'qr_small', 'medium' => 'qr_medium', 'large' => 'qr_large'] as $sz => $k)
                                    <option value="{{ $sz }}"{{ $qrSizeCur === $sz ? ' selected' : '' }}>{{ t_raw('vendor.print_menu.' . $k) }}</option>
                                @endforeach
                            </select>
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.qr_frame') }}</label>
                            <select class="form-select form-select-sm" data-f="qrFrame">
                                @foreach (QrCard::QR_FRAMES as $frameName)
                                    <option value="{{ $frameName }}"{{ ($s['qrFrame'] ?? 'plate') === $frameName ? ' selected' : '' }}>{{ t_raw('vendor.qr_card.frame_' . $frameName) }}</option>
                                @endforeach
                            </select>
                            @php $ink = $inkState($s);
@endphp
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.qr_ink') }}</label>
                            <select class="form-select form-select-sm" data-ink="mode">
                                @foreach (['default' => 'ink_default', 'solid' => 'ink_solid', 'gradient' => 'ink_gradient'] as $mode => $k)
                                    <option value="{{ $mode }}"{{ $ink['mode'] === $mode ? ' selected' : '' }}>{{ t_raw('vendor.qr_card.' . $k) }}</option>
                                @endforeach
                            </select>
                            <div class="qrcard-row mt-2 qrcard-hideable" data-group="ink"{{ $ink['mode'] === 'default' ? ' hidden' : '' }}>
                                <input type="color" class="form-control qm-color-swatch-sq" data-ink="a" value="{{ $ink['a'] }}" aria-label="{{ t_raw('vendor.qr_card.ink_stop_from') }}">
                                <input type="color" class="form-control qm-color-swatch-sq qrcard-hideable" data-ink="b" data-group="ink2" value="{{ $ink['b'] }}" aria-label="{{ t_raw('vendor.qr_card.ink_stop_to') }}"{{ $ink['mode'] === 'gradient' ? '' : ' hidden' }}>
                            </div>
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.qr_caption') }}</label>
                            <input type="text" class="form-control form-control-sm" data-f="qrCaption" maxlength="60" value="{{ (string) ($s['qrCaption'] ?? '') }}" placeholder="{{ t_raw($isPay ? 'vendor.qr_card.qr_caption_pay_ph' : 'vendor.qr_card.qr_caption_ph') }}">
                            <div class="tv-switch-group mt-3">
                                @php // A payment card isn't tied to a table, so the table-number line is hidden for it.
@endphp
                                @if (!$isPay){!! $switch('showTable', !empty($s['showTable']), t_raw('vendor.qr_card.qr_table')) !!}@endif
                                {!! $switch('qrLogo', !empty($s['qrLogo']), t_raw('vendor.qr_card.qr_logo')) !!}
                            </div>
                            <label class="form-label mt-3">{{ t_raw('vendor.qr_card.offset') }}</label>
                            <div class="qrcard-row">
                                <input type="number" class="qrcard-off" data-off="qrX" min="-40" max="40" value="{{ (int) ($s['qrX'] ?? 0) }}" aria-label="X">
                                <input type="number" class="qrcard-off" data-off="qrY" min="-40" max="40" value="{{ (int) ($s['qrY'] ?? 0) }}" aria-label="Y">
                            </div>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="qrcard-block">
                        <label class="form-label">{{ t_raw('vendor.qr_card.footer_label') }}</label>
                        <input type="text" class="form-control form-control-sm" data-f="footer" maxlength="120" value="{{ (string) ($s['footer'] ?? '') }}" placeholder="{{ t_raw('vendor.qr_card.footer_ph') }}">
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Live preview card -->
        <div class="qm-card qm-card-pad qrcard-preview-card">
            <p class="qrcard-preview-head">{{ t_raw('vendor.screens.preview_label') }}</p>
            @foreach ($sides as $key => $s)
            <div class="qrcard-preview" data-side="{{ $key }}"{{ $key === 'front' ? '' : ' hidden' }}>
                <div class="qrcard-frame" data-frame>
                    <iframe data-preview data-side="{{ $key }}" title="{{ $key === 'front' ? t_raw('vendor.qr_card.side_front') : t_raw('vendor.qr_card.side_back') }}"></iframe>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div class="qrcard-actions-right">
        <button type="submit" class="qm-btn"><i class="fas fa-check me-1" aria-hidden="true"></i> {{ t_raw($isNewPay ? 'vendor.qr_card.pay_create_btn' : 'vendor.qr_card.btn_save') }}</button>
    </div>
</form>
</div>@php /* /.qm-d2 */
@endphp

@php // JSON_HEX_TAG guards this inline <script>: $jsData carries the vendor's card title/product text,
// so a value containing </script> would otherwise break out of the block.
@endphp
<script>window.QR_CARD = {!! json_encode($jsData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!};</script>
@endsection