@extends('layouts.dashboard')

@section('content')
@php
/** @var array|null $restaurant @var array $cuisines @var array $zones @var array $hours */
$r = $restaurant ?? [];
$cuisines = $cuisines ?? [];
$zones = $zones ?? [];
$hours = $hours ?? [];
$layoutVal = in_array($r['detail_layout'] ?? 'classic', ['classic', 'style1', 'style2'], true) ? ($r['detail_layout'] ?? 'classic') : 'classic';
$dayKeys = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
// Money policy carries its own privileges — the controller refuses the POST; this hides
// each tab so nobody is shown a form that would be rejected. Granted separately, because
// a role may well be trusted with the loyalty programme but not with tax rates.
$canTax     = $canTax ?? \App\Support\Auth::can('settings.tax');
$canLoyalty = $canLoyalty ?? \App\Support\Auth::can('settings.loyalty');
// Delivery is the platform operator's decision, so the two tabs that exist only to configure it
// are gone when it is off — same reasoning as the two above: never show a form whose POST the
// controller will refuse. Read once here so the tab button and its panel cannot disagree.
$canDeliver = \App\Services\Capability::has(\App\Services\Capability::DELIVERY);
$ordersPaused = (bool) ($ordersPaused ?? false);
// The auto-resume field wants the restaurant's own local wall-clock time.
$pauseUntil = trim((string) ($r['orders_paused_until'] ?? ''));
if ($pauseUntil !== '') {
    try {
        $pauseUntil = (new DateTimeImmutable($pauseUntil, restaurant_tz($r)))->format('Y-m-d\TH:i');
    } catch (Throwable $e) {
        $pauseUntil = '';
    }
}
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@if (($r['status'] ?? '') === 'pending')
<div class="alert alert-warning">{{ t_raw('vendor.settings.pending_approval_alert') }}</div>
@endif

<div class="qm-settings">
    <nav class="qm-settings-nav" aria-label="{{ t_raw('vendor.settings.nav_aria') }}">
        <button type="button" class="is-active" data-panel="general"><i class="fas fa-store" aria-hidden="true"></i>{{ t_raw('vendor.settings.general_title') }}</button>
        @php /* Branches sits straight after the restaurant profile: both answer "which venue am I
                 configuring", so they belong beside each other. Owner-only — staff never manage venues. */
@endphp
        @if ($canDeliver)<button type="button" data-panel="charges"><i class="fas fa-coins" aria-hidden="true"></i>{{ t_raw('vendor.settings.tab_charges') }}</button>@endif
        <button type="button" data-panel="hours"><i class="fas fa-clock" aria-hidden="true"></i>{{ t_raw('vendor.settings.tab_hours_dates') }}</button>
        <button type="button" data-panel="contact"><i class="fas fa-address-card" aria-hidden="true"></i>{{ t_raw('vendor.settings.contact_title') }}</button>
        <button type="button" data-panel="payout"><i class="fas fa-money-check-alt" aria-hidden="true"></i>{{ t_raw('vendor.settings.payout_title') }}</button>
        @if ($canTax)<button type="button" data-panel="tax"><i class="fas fa-percent" aria-hidden="true"></i>{{ t_raw('vendor.settings.tax_title') }}</button>@endif
        <button type="button" data-panel="reservations"><i class="fas fa-calendar-check" aria-hidden="true"></i>{{ t_raw('vendor.settings.reservations_tab') }}</button>
        @if ($canLoyalty)<button type="button" data-panel="loyalty"><i class="fas fa-gift" aria-hidden="true"></i>{{ t_raw('vendor.settings.loyalty_title') }}</button>@endif
    </nav>

    <div class="qm-settings-body">
        <!-- General -->
        <section class="qm-settings-panel is-active" id="general">
            <form method="post" action="{{ route('vendor.settings') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="section" value="general">

                <div class="qm-card">
                    <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.settings.sec_profile') }}</h2></div>
                    <div class="qm-card-body">
                    @php /* Identity reads across, not down: name · cuisine · tagline on one line,
                             then menu name · website, then the description full width because it is
                             the only multi-line field. Six stacked single-line inputs made a short
                             form scroll for no reason. */
@endphp
                    <div class="qm-form-grid qm-form-grid-3">
                        <div class="mb-3"><label class="form-label" for="g-name">{{ t_raw('vendor.settings.restaurant_name_label') }}</label><input type="text" id="g-name" name="name" class="form-control" value="{{ $r['name'] ?? '' }}" required placeholder="{{ t_raw('auth.restaurant_name_placeholder') }}"></div>
                        <div class="mb-3"><label class="form-label" for="g-cuisine">{{ t_raw('vendor.settings.cuisine_label') }}</label><select id="g-cuisine" name="cuisine_id" class="form-select" data-choices data-choices-flags data-placeholder="{{ t_raw('vendor.settings.cuisine_placeholder') }}"><option value="">{{ t_raw('common.select') }}</option>@foreach ($cuisines as $c)
@php $cf = cuisine_flag($c['slug'] ?? ''); @endphp<option value="{{ (int) $c['id'] }}"{!! $cf ? ' data-custom-properties=\'' . e(json_encode(['flag' => $cf])) . '\'' : '' !!} {{ (int) ($r['cuisine_id'] ?? 0) === (int) $c['id'] ? 'selected' : '' }}>{{ $c['name'] }}</option>@endforeach</select></div>
                        <div class="mb-3"><label class="form-label" for="g-tagline">{{ t_raw('vendor.settings.tagline_label') }}</label><input type="text" id="g-tagline" name="tagline" class="form-control" value="{{ $r['tagline'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.tagline_placeholder') }}"></div>
                    </div>
                    @php /* Menu name is what this restaurant calls its menu — "Carte", "Kitchen",
                             "Small plates". Identity, shown on the storefront and the printed menu,
                             so it sits here rather than among the dishes. */
@endphp
                    <div class="qm-form-grid qm-form-grid-3">
                        <div class="mb-3"><label class="form-label" for="g-menu-name">{{ t_raw('vendor.settings.menu_name_label') }}</label><input type="text" id="g-menu-name" name="menu_name" class="form-control" maxlength="120" value="{{ $r['menu_name'] ?? '' }}" placeholder="{{ t_raw('restaurant.menu_eyebrow') }}"></div>
                        <div class="mb-3"><label class="form-label" for="g-website">{{ t_raw('vendor.settings.website_label') }}</label><input type="url" id="g-website" name="website" class="form-control" maxlength="190" placeholder="https://yourrestaurant.com" value="{{ $r['website'] ?? '' }}"></div>
                        @php $brandHex = restaurant_brand_color($r);
@endphp
                        <div class="mb-3 qm-brand-color">
                            <label class="form-label" for="g-brand-color">{{ t_raw('vendor.settings.brand_color_label') }}</label>
                            <div class="d-flex align-items-center gap-2">
                                <input type="color" id="g-brand-color" name="brand_color" value="{{ $brandHex }}" class="form-control qm-color-swatch">
                                {!! brand_monogram_html((string) ($r['name'] ?? ''), 'qm-brandmark--md', 'id="g-brand-preview"', $brandHex) !!}
                            </div>
                        </div>
                    </div>
                    <div class="mb-0"><label class="form-label" for="g-desc">{{ t_raw('vendor.settings.description_label') }}</label><textarea id="g-desc" name="description" class="form-control" rows="3" placeholder="{{ t_raw('vendor.settings.description_placeholder') }}">{{ $r['description'] ?? '' }}</textarea></div>
                    </div>
                </div>

                <div class="qm-card">
                    <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.settings.sec_branding') }}</h2></div>
                    <div class="qm-card-body">
                    <div class="qm-form-grid">
                        <div class="mb-3">
                            <label class="form-label">{{ t_raw('vendor.settings.logo_label') }}</label>
                            {!! media_field_html('logo', $r['logo'] ?? null, ['accept' => 'image', 'circle' => true, 'allowClear' => true, 'label' => t_raw('vendor.settings.logo_label')]) !!}
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ t_raw('vendor.settings.cover_image_label') }}</label>
                            {!! media_field_html('cover_image', $r['cover_image'] ?? null, ['accept' => 'image', 'allowClear' => true, 'label' => t_raw('vendor.settings.cover_image_label')]) !!}
                        </div>
                    </div>
                    @php /* Brand colour moved up beside Website in the Profile card. The live-preview
                             script below stays here and finds both elements by id wherever they sit. */
@endphp
                    <script>
                    (function () {
                        var picker = document.getElementById('g-brand-color'),
                            preview = document.getElementById('g-brand-preview');
                        if (picker && preview) {
                            picker.addEventListener('input', function () { preview.style.background = picker.value; });
                        }
                    })();
                    </script>

                    @php
                    // Storefront "about" media. Image, video and YouTube are stored INDEPENDENTLY, so setting
                    // one never disturbs the others; the type dropdown only chooses which one is live on the
                    // restaurant page. Each file box posters its own slot and has its own X. The master switch
                    // hides the live block on the front end without deleting anything, and never this editor.
                    $aboutImage   = trim((string) ($r['about_image'] ?? ''));
                    $aboutVideo   = trim((string) ($r['about_video'] ?? ''));
                    $aboutYoutube = trim((string) ($r['about_youtube'] ?? ''));
                    $aboutType    = in_array($r['about_media_type'] ?? 'image', ['image', 'video', 'youtube'], true) ? ($r['about_media_type'] ?? 'image') : 'image';
                    $aboutOn      = (int) ($r['about_media_hidden'] ?? 0) === 0;
                    $showFlag     = (int) ($r['show_cuisine_flag'] ?? 1) === 1;
@endphp
                    <label class="qm-switch-row">
                        <span><strong>{{ t_raw('vendor.settings.about_media_toggle') }}</strong></span>
                        <input class="form-check-input" type="checkbox" role="switch" name="about_media_on" value="1"{{ $aboutOn ? ' checked' : '' }}>
                    </label>
                    <div class="mb-3">
                        <label class="form-label" for="g-about-type">{{ t_raw('vendor.settings.about_media_type_label') }}</label>
                        <select class="form-select" id="g-about-type" name="about_media_type">
                            <option value="image"{{ $aboutType === 'image' ? ' selected' : '' }}>{{ t_raw('vendor.settings.about_type_image') }}</option>
                            <option value="video"{{ $aboutType === 'video' ? ' selected' : '' }}>{{ t_raw('vendor.settings.about_type_video') }}</option>
                            <option value="youtube"{{ $aboutType === 'youtube' ? ' selected' : '' }}>{{ t_raw('vendor.settings.about_type_youtube') }}</option>
                        </select>
                    </div>
                    <div class="mb-3{{ $aboutType === 'image' ? '' : ' d-none' }}" data-about-field="image">
                        <label class="form-label">{{ t_raw('vendor.settings.about_media_label') }}</label>
                        {!! media_field_html('about_media_image', $aboutImage !== '' ? $aboutImage : null, ['accept' => 'image', 'allowClear' => true, 'label' => t_raw('vendor.settings.about_media_label')]) !!}
                    </div>
                    <div class="mb-3{{ $aboutType === 'video' ? '' : ' d-none' }}" data-about-field="video">
                        <label class="form-label">{{ t_raw('vendor.settings.about_media_label') }}</label>
                        {!! media_field_html('about_media_video', $aboutVideo !== '' ? $aboutVideo : null, ['accept' => 'video', 'allowClear' => true, 'label' => t_raw('vendor.settings.about_media_label')]) !!}
                    </div>
                    <div class="mb-3{{ $aboutType === 'youtube' ? '' : ' d-none' }}" data-about-field="youtube">
                        <label class="form-label" for="g-about-media-url">{{ t_raw('vendor.settings.about_media_url_label') }}</label>
                        <input type="url" id="g-about-media-url" name="about_media_url" class="form-control" value="{{ $aboutYoutube }}" placeholder="https://www.youtube.com/watch?v=">
                    </div>
                    <script>
                    (function () {
                        var sel = document.getElementById('g-about-type');
                        if (!sel) { return; }
                        var fields = ['image', 'video', 'youtube'].map(function (k) {
                            return { k: k, el: document.querySelector('[data-about-field="' + k + '"]') };
                        });
                        sel.addEventListener('change', function () {
                            fields.forEach(function (f) { if (f.el) { f.el.classList.toggle('d-none', f.k !== sel.value); } });
                        });
                    })();
                    </script>

                    <label class="qm-switch-row mb-0 mt-2">
                        <span><strong>{{ t_raw('vendor.settings.show_cuisine_flag_label') }}</strong></span>
                        <input class="form-check-input" type="checkbox" role="switch" name="show_cuisine_flag" value="1"{{ $showFlag ? ' checked' : '' }}>
                    </label>
                    </div>
                </div>

                <div class="qm-card">
                    <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.settings.sec_storefront') }}</h2></div>
                    <div class="qm-card-body">
                    <div class="mb-0">
                        <label class="form-label" for="g-layout">{{ t_raw('vendor.settings.layout_label') }}</label>
                        <select id="g-layout" name="detail_layout" class="form-select">
                            <option value="classic" {{ $layoutVal === 'classic' ? 'selected' : '' }}>{{ t_raw('vendor.settings.layout_classic') }}</option>
                            <option value="style1" {{ $layoutVal === 'style1' ? 'selected' : '' }}>{{ t_raw('vendor.settings.layout_style1') }}</option>
                            <option value="style2" {{ $layoutVal === 'style2' ? 'selected' : '' }}>{{ t_raw('vendor.settings.layout_style2') }}</option>
                        </select>
                        <div class="qm-hint">{{ t_raw('vendor.settings.layout_help') }}</div>
                    </div>
                    </div>
                </div>

                <div class="qm-card">
                    <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.settings.tags_label') }}</h2></div>
                    <div class="qm-card-body">
                    @php
// Group the tag picker by dimension (store type / food type / protein / dietary / course).
$tagsByGroup = [];
foreach (($tags ?? []) as $t) { $tagsByGroup[$t['group'] ?? 'dish_type'][] = $t; }
                    foreach (\App\Models\Tag::groups() as $gKey => $gLabel):
                        if (empty($tagsByGroup[$gKey])) { continue; }
                        $gTagKey = $gKey === 'dish_type' ? 'food_type' : $gKey;
@endphp
                    <div class="qm-tag-group">
                        <span class="text-muted d-block mb-1 qm-overline">{{ t_raw('vendor.settings.taggroup_' . $gTagKey) }}</span>
                        <div class="qm-tag-picker">
                            @foreach ($tagsByGroup[$gKey] as $t)
                            <label class="qm-tag-check">
                                <input type="checkbox" name="tags[]" value="{{ (int) $t['id'] }}" {{ in_array((int) $t['id'], ($tagIds ?? []), true) ? 'checked' : '' }}>
                                <span>{!! tag_icon_html($t['slug'] ?? '', $t['icon'] ?? null, 'qm-cat-ico-img') !!} {{ $t['name'] }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                    </div>
                </div>

                <div class="d-flex justify-content-end"><button type="submit" class="qm-btn">{{ t_raw('vendor.settings.save_general_btn') }}</button></div>
            </form>
        </section>


        @php /* Branches moved out to its own page (Settings → Branches, between Device settings
                 and Billing). Every panel on this screen configures the venue you are operating;
                 the branch list is how you leave it for another, which is not the same job. The
                 five POST handlers still live on BranchesController and post to /vendor/branches/*. */
@endphp

        <!-- Charges & delivery -->
        @if ($canDeliver)
        <section class="qm-settings-panel" id="charges">
            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}">
                    @csrf
                    <input type="hidden" name="section" value="charges">
                    <div class="qm-card-head">
                        <div><h2 class="mb-0">{{ t_raw('vendor.settings.tab_charges') }}</h2></div>
                    </div>
                    <div class="qm-card-body">
                    @php /* Whether this restaurant delivers. Above the fee and the radius because it
                             decides whether either of them means anything — a fee on a restaurant that
                             does not deliver is a number nobody will ever be charged.

                             Hidden entirely when the platform does not deliver: a switch that cannot
                             change the outcome is worse than no switch, and the operator's decision is
                             not this restaurant's to reopen. Hidden, not disabled, so the card does not
                             carry a dead control the owner has to reason about. */
@endphp
                    @if (\App\Services\Capability::has(\App\Services\Capability::DELIVERY))
                    <input type="hidden" name="accepts_delivery_present" value="1">
                    <label class="qm-switch-row mb-3">
                        <span>
                            <strong>{{ t_raw('vendor.settings.accepts_delivery_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.accepts_delivery_sub') }}</small>
                        </span>
                        <input type="checkbox" name="accepts_delivery" value="1" {{ (int) ($r['accepts_delivery'] ?? 1) === 1 ? 'checked' : '' }}>
                    </label>
                    @endif
                    <div class="qm-form-grid">
                        <div class="mb-3"><label class="form-label" for="c-min">{{ t_raw('vendor.settings.min_order_label') }}</label><input type="number" step="0.01" min="0" id="c-min" name="min_order" class="form-control" value="{{ $r['min_order'] ?? '0' }}" placeholder="{{ t_raw('common.placeholder_amount') }}"></div>
                        <div class="mb-3"><label class="form-label" for="c-fee">{{ t_raw('vendor.settings.delivery_fee_label') }}</label><input type="number" step="0.01" min="0" id="c-fee" name="delivery_fee" class="form-control" value="{{ $r['delivery_fee'] ?? '0' }}" placeholder="{{ t_raw('common.placeholder_amount') }}"></div>
                        @php /* Spend this much and delivery is free. Sits beside the fee it waives,
                                 not beside `min_order` a few fields down: a minimum BLOCKS an order,
                                 this one discounts it, and putting them together is what makes
                                 operators confuse the two. Zero means no offer. */
@endphp
                        <div class="mb-3">
                            <label class="form-label" for="c-freedel">{{ t_raw('vendor.settings.free_delivery_label') }} <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.settings.free_delivery_hint') }}" data-qm-tip="{{ t_raw('vendor.settings.free_delivery_hint') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button></label>
                            <input type="number" step="0.01" min="0" id="c-freedel" name="free_delivery_threshold" class="form-control" value="{{ $r['free_delivery_threshold'] ?? '0' }}" placeholder="{{ t_raw('common.placeholder_amount') }}">
                        </div>
                        <div class="mb-3"><label class="form-label" for="c-prep">{{ t_raw('vendor.settings.avg_prep_time_label') }}</label><input type="number" min="0" id="c-prep" name="avg_prep_time" class="form-control" value="{{ $r['avg_prep_time'] ?? '30' }}" placeholder="{{ t_raw('common.placeholder_minutes') }}"></div>
                        <div class="mb-3">
                            <label class="form-label" for="c-radius">{{ t_raw('vendor.settings.delivery_radius_label') }}</label>
                            <div class="input-group">
                                <input type="number" step="{{ \App\Services\Distance::inputStep() }}" min="0" max="{{ \App\Services\Distance::inputValue((float) setting('delivery_radius_max_km', '50')) }}" id="c-radius" name="delivery_radius" class="form-control" value="{{ \App\Services\Distance::inputValue((float) ($r['delivery_radius'] ?? 5)) }}" placeholder="{{ t_raw('common.placeholder_count') }}">
                                <span class="input-group-text">{{ \App\Services\Distance::unitLabel() }}</span>
                            </div>
                            <div class="qm-hint">{{ t_raw('vendor.settings.delivery_radius_help') }}</div>
                        </div>
                    </div>
                    </div>
                    <div class="qm-card-foot">
                        <button type="submit" class="qm-btn">{{ t_raw('vendor.settings.save_charges_btn') }}</button>
                    </div>
                </form>
            </div>

            @php /* Delivery zones live in the Charges tab, not one of their own. The fee and
                     radius above and the tiers that apply them are a single decision, and
                     splitting them meant switching tabs to see what the charges applied to.
                     Keeps id="zones" so an existing #zones link still scrolls here. */
@endphp
            <div id="zones">
            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}" id="qm-zone-form">
                    @csrf
                    <input type="hidden" name="section" value="zones">
                    <div class="qm-card-head">
                        <div class="d-flex align-items-center gap-2"><h2 class="mb-0">{{ t_raw('vendor.settings.zones_title') }}</h2><button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.settings.zone_map_hint') }}" data-qm-tip="{{ t_raw('vendor.settings.zone_map_hint') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button></div>
                        @php /* Add tier sits in the card head, opposite the title, because that is where
                                 an "add a row" action lives on every other card in the dashboard. It was in
                                 the foot beside Save, which read as a second submit. .qm-card-head is
                                 space-between, so no alignment class is needed. */
@endphp
                        <button type="button" class="qm-btn qm-btn-outline qm-btn-sm" id="qm-zone-add"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('vendor.settings.add_tier_btn') }}</button>
                    </div>
                    <div class="qm-card-body">
                    <p class="qm-hint mb-0">{{ t_raw('vendor.settings.zones_sub') }}</p>
                    <input type="hidden" name="zone_lat" id="zone-lat" value="{{ $r['lat'] ?? '' }}">
                    <input type="hidden" name="zone_lng" id="zone-lng" value="{{ $r['lng'] ?? '' }}">

                    @php /* data-unit rides along with lat/lng because the script rebuilds this row's
                             markup when a tier is added, and the radius label's key carries :unit —
                             without the value the cloned row printed the placeholder verbatim. */
@endphp
                    <div id="qm-zone-map" class="qm-map"
                        data-lat="{{ $r['lat'] ?? '' }}" data-lng="{{ $r['lng'] ?? '' }}"
                        data-unit="{{ \App\Services\Distance::unitLabel() }}"
                        role="application" aria-label="{{ t_raw('vendor.settings.zone_map_aria') }}"></div>
                    <div class="qm-zone-legend" id="qm-zone-legend" aria-hidden="true"></div>

                    <hr class="my-3">

                    <div id="qm-zones">
                        @php
$zoneRows = !empty($zones) ? $zones : [['zone_name' => t_raw('vendor.settings.default_zone_name'), 'radius_km' => '3', 'delivery_fee' => '0', 'min_order' => '']];
@endphp
@foreach ($zoneRows as $i => $z)
@php
$i = (int) $i;
@endphp
                        <div class="qm-zone-row" data-zone-row data-index="{{ $i }}">
                            <div class="qm-form-grid qm-zone-grid">
                                <div class="mb-3"><label class="form-label" for="zone-name-{{ $i }}">{{ t_raw('vendor.settings.zone_name_label') }}</label><input type="text" id="zone-name-{{ $i }}" name="zones[{{ $i }}][zone_name]" class="form-control" data-zone-field="name" value="{{ $z['zone_name'] ?? '' }}" required placeholder="{{ t_raw('vendor.tables.zone_name_placeholder') }}"></div>
                                <div class="mb-3"><label class="form-label" for="zone-radius-{{ $i }}">{{ t_raw('vendor.settings.zone_radius_label', [':unit' => \App\Services\Distance::unitLabel()]) }}</label><input type="number" step="{{ \App\Services\Distance::inputStep() }}" min="{{ \App\Services\Distance::inputValue((float) setting('delivery_radius_min_km', '0.5')) }}" max="{{ \App\Services\Distance::inputValue((float) setting('delivery_radius_max_km', '50')) }}" id="zone-radius-{{ $i }}" name="zones[{{ $i }}][radius_km]" class="form-control" data-zone-field="radius" value="{{ $z['radius_km'] === null || $z['radius_km'] === '' ? '' : \App\Services\Distance::inputValue((float) $z['radius_km']) }}" required placeholder="{{ t_raw('common.placeholder_count') }}"></div>
                                <div class="mb-3"><label class="form-label" for="zone-fee-{{ $i }}">{{ t_raw('vendor.settings.delivery_fee_label') }}</label><input type="number" step="0.01" min="0" id="zone-fee-{{ $i }}" name="zones[{{ $i }}][delivery_fee]" class="form-control" data-zone-field="fee" value="{{ $z['delivery_fee'] ?? '' }}" placeholder="{{ t_raw('common.placeholder_amount') }}"></div>
                                <div class="mb-3"><label class="form-label" for="zone-min-{{ $i }}">{{ t_raw('vendor.settings.zone_min_order_label') }}</label><input type="number" step="0.01" min="0" id="zone-min-{{ $i }}" name="zones[{{ $i }}][min_order]" class="form-control" data-zone-field="min" value="{{ $z['min_order'] ?? '' }}" placeholder="{{ t_raw('common.placeholder_amount') }}"></div>
                                @php /* Remove is the LAST cell of the row, on an auto-width track, so it sits
                                         at the end of the four fields instead of on a line of its own. The
                                         grid bottom-aligns, which lines the button up with the inputs; the
                                         empty label is the spacer that makes that work without a magic
                                         margin. The same markup is built again in zone-map-editor.js for
                                         rows added after load — change one, change both. */
@endphp
                                <div class="mb-3 qm-zone-remove">
                                    <span class="form-label" aria-hidden="true">&nbsp;</span>
                                    <button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-zone-remove>{{ t_raw('common.remove') }}</button>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    </div>
                    <div class="qm-card-foot">
                        <button type="submit" class="qm-btn">{{ t_raw('vendor.settings.save_zones_btn') }}</button>
                    </div>
                </form>
            </div>
            </div>
        </section>
        @endif

        <!-- Opening hours -->
        <section class="qm-settings-panel" id="hours">
            @php /* Pause new orders — the temporary stop switch, above the weekly schedule
                     it overrides. Opening hours are a fixed rota; this is "the kitchen is
                     40 minutes behind, stop the queue" and it resumes on its own. */
@endphp
            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}" id="qm-pause-form">
                    @csrf
                    <input type="hidden" name="section" value="pause">
                    <div class="qm-card-head">
                        <div><h2 class="mb-0">{{ t_raw('vendor.settings.tab_hours') }}</h2></div>
                    </div>
                    <div class="qm-card-body">
                    <label class="qm-switch-row">
                        <i class="fas fa-pause-circle qm-head-chip qm-head-chip--{{ $ordersPaused ? 'rose' : 'green' }}" aria-hidden="true"></i>
                        <span class="flex-grow-1">
                            <strong>{{ t_raw('vendor.settings.pause_orders_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.pause_orders_help') }}</small>
                        </span>
                        <input class="align-self-center" type="checkbox" role="switch" id="pause-orders" name="orders_paused" value="1"{{ $ordersPaused ? ' checked' : '' }}>
                    </label>

                    <div class="mb-3{{ $ordersPaused ? '' : ' qm-hidden' }}" id="qm-pause-until-field">
                        <label class="form-label" for="pause-until">{{ t_raw('vendor.settings.pause_until_label') }}</label>
                        <input type="datetime-local" class="form-control qm-maxw-320" id="pause-until" name="orders_paused_until" value="{{ $pauseUntil }}" data-flatpickr data-fp-mode="datetime">
                        <div class="qm-hint">{{ t_raw('vendor.settings.pause_until_help') }}</div>
                    </div>

                    @if ($ordersPaused)
                    <div class="alert alert-warning py-2 px-3" role="status"><i class="fas fa-exclamation-triangle me-1" aria-hidden="true"></i>{{ restaurant_pause_message($r) }}</div>
                    @endif

                    </div>
                    @php /* No save button. The switch IS the control — a "Pause orders" button under a
                             "Pause orders" toggle read as two ways to do one thing, and the button was
                             only there because the form needed a submit. The script below submits on
                             change instead, so the switch behaves like every other switch. */
@endphp
                </form>
            </div>

            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}">
                    @csrf
                    <input type="hidden" name="section" value="hours">
                    @foreach ($dayKeys as $d => $dayKey)
@php $dayName = t_raw('common.day_' . $dayKey); $h = $hours[$d] ?? ['open' => '09:00', 'close' => '22:00', 'closed' => false]; @endphp
                    <div class="qm-hours-row">
                        <span class="qm-hours-day">{{ $dayName }}</span>
                        <div><label class="form-label visually-hidden" for="h-open-{{ $d }}">{{ t_raw('vendor.settings.day_open_sr_template', [':day' => $dayName]) }}</label><input type="time" id="h-open-{{ $d }}" name="hours[{{ $d }}][open]" class="form-control" value="{{ $h['open'] }}" data-flatpickr data-fp-mode="time"{{ $h['closed'] ? ' readonly' : '' }}></div>
                        <div><label class="form-label visually-hidden" for="h-close-{{ $d }}">{{ t_raw('vendor.settings.day_close_sr_template', [':day' => $dayName]) }}</label><input type="time" id="h-close-{{ $d }}" name="hours[{{ $d }}][close]" class="form-control" value="{{ $h['close'] }}" data-flatpickr data-fp-mode="time"{{ $h['closed'] ? ' readonly' : '' }}></div>
                        <div class="form-check"><input class="form-check-input" type="checkbox" id="h-closed-{{ $d }}" name="hours[{{ $d }}][closed]" value="1" data-day="{{ $d }}"{{ $h['closed'] ? ' checked' : '' }}><label class="form-check-label" for="h-closed-{{ $d }}">{{ t_raw('common.closed') }}</label></div>
                    </div>
                    @endforeach
                    <div class="qm-card-foot">
                        <button type="submit" class="qm-btn">{{ t_raw('vendor.settings.save_hours_btn') }}</button>
                    </div>
                </form>
            </div>

            @php /* Closed dates sit in the Opening Hours tab: both answer "when is this venue
                     open", and splitting them meant setting a holiday closure on a different
                     screen from the weekly hours it overrides. Keeps id="closed-dates" so an
                     existing #closed-dates link still scrolls here. */
@endphp
            <div id="closed-dates">
            <div class="qm-card">
                <div class="qm-card-head">
                    <div><h2 class="mb-0">{{ t_raw('vendor.settings.closed_dates_title') }}</h2></div>
                </div>
                <div class="qm-card-body">
                    @partial('blackout-manager', ['blackouts' => $blackouts ?? [], 'returnTo' => 'settings'])
                </div>
            </div>
            </div>
        </section>


        <!-- Contact -->
        <section class="qm-settings-panel" id="contact">
            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}">
                    @csrf
                    <input type="hidden" name="section" value="contact">
                    <div class="qm-card-head">
                        <div><h2 class="mb-0">{{ t_raw('vendor.settings.contact_title') }}</h2></div>
                    </div>
                    <div class="qm-card-body">
                    <div class="qm-form-grid">
                        <div class="mb-3"><label class="form-label" for="ct-city">{{ t_raw('vendor.settings.city_label') }}</label><input type="text" id="ct-city" name="city" class="form-control" value="{{ $r['city'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.city_placeholder') }}" required></div>
                        <div class="mb-3"><label class="form-label" for="ct-address">{{ t_raw('vendor.settings.address_label') }}</label><input type="text" id="ct-address" name="address" class="form-control" value="{{ $r['address'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.address_placeholder') }}"></div>
                        <div class="mb-3"><label class="form-label" for="ct-state">{{ t_raw('vendor.settings.state_label') }}</label><input type="text" id="ct-state" name="state" class="form-control" value="{{ $r['state'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.state_placeholder') }}"></div>
                        <div class="mb-3"><label class="form-label" for="ct-postcode">{{ t_raw('vendor.settings.postcode_label') }}</label><input type="text" id="ct-postcode" name="postcode" class="form-control" value="{{ $r['postcode'] ?? '' }}" placeholder="{{ t_raw('common.placeholder_postcode') }}"></div>
                        <div class="mb-3"><label class="form-label" for="ct-phone">{{ t_raw('vendor.settings.phone_label') }}</label><input type="tel" id="ct-phone" name="phone" class="form-control" maxlength="30" pattern="[0-9 ()+\-]{6,}" inputmode="tel" value="{{ $r['phone'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.phone_placeholder') }}"></div>
                        <div class="mb-3"><label class="form-label" for="ct-email">{{ t_raw('common.email') }}</label><input type="email" id="ct-email" name="email" class="form-control" value="{{ $r['email'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.email_placeholder') }}"></div>
                        <div class="mb-3"><label class="form-label" for="ct-contact-name">{{ t_raw('vendor.settings.contact_name_label') }}</label><input type="text" id="ct-contact-name" name="contact_name" class="form-control" maxlength="120" value="{{ $r['contact_name'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.contact_name_placeholder') }}"><div class="qm-hint">{{ t_raw('vendor.settings.contact_name_help') }}</div></div>
                        @php /* The weekly performance report. WeeklyReport::due() gates on this column and
                                 nothing in the product ever wrote it — the cron says the report goes "to
                                 owners who subscribed" and there was nothing to subscribe with, so all 66
                                 demo rows sat at 0 and the report could never be delivered to anyone. The
                                 marker beside it is the same rule every other switch here uses: an
                                 unticked box posts nothing, so without it a save would always read "off". */
@endphp
                    </div>
                    @php /* OUTSIDE THE FIELD GRID. .qm-switch-row is a full-width band — label, one-line
                             explanation, switch on the right. Dropped into a .qm-form-grid cell it became a
                             bordered box sitting beside a bare text input, starting at the input's height
                             rather than the label's, and taller than the field next to it. Every other
                             switch on this page sits on its own row; this one now does too. */
@endphp
                    <input type="hidden" name="weekly_report_email_present" value="1">
                    <label class="qm-switch-row mb-0">
                        <span>
                            <strong>{{ t_raw('vendor.settings.weekly_report_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.weekly_report_help') }}</small>
                        </span>
                        <input type="checkbox" name="weekly_report_email" value="1"{{ (int) ($r['weekly_report_email'] ?? 0) === 1 ? ' checked' : '' }}>
                    </label>
                    </div>
                    <div class="qm-card-foot">
                        <button type="submit" class="qm-btn">{{ t_raw('vendor.settings.save_contact_btn') }}</button>
                    </div>
                </form>
            </div>
        </section>

        <!-- Payout / cash -->
        @php
        $bizModel     = \App\Services\BusinessModel::current();
        $isMarketpl   = $bizModel === 'marketplace';
        $isFranchise  = $bizModel === 'franchise';
        $payMethod    = (string) ($r['payout_method'] ?? 'none');
        // Split payments overlays every model: the platform collects and disburses the share, so
        // the restaurant needs a payee (constrained to the active gateway) and no longer needs its
        // own inbound gateway keys.
        /* Split only changes WHEN a marketplace share is sent, never which rail it leaves on, so
           nothing on this form is narrowed by it any more. It is read purely to word the payee
           hint: under split the money arrives as each order is captured rather than in a run. */
        $isSplit      = \App\Services\BusinessModel::splitPayments();
        // A Stripe payee is a connected account the platform opens, so a stored acct_ id is never
        // shown in the box beside it: that box takes a PayPal email, and prefilling it with an
        // account reference only invites the vendor to post something PayPal cannot use. The
        // Connect state below owns the acct_ id, and the id itself survives untouched on save.
        $payAccount   = str_starts_with((string) ($r['payout_account'] ?? ''), 'acct_') ? '' : (string) ($r['payout_account'] ?? '');
        $sc           = $stripeConnect ?? null;   // live Stripe read, or null when there is none
        $scAcct       = (string) ($sc['account'] ?? '');
        $scRead       = !empty($sc['ok']);
        $scReady      = !empty($sc['transfers_active']);
@endphp
        <section class="qm-settings-panel" id="payout">
            @if ($isMarketpl || $isSplit)
            @php /* The Connect handshake is a POST of its own and HTML forbids nesting it inside
                     the settings form, so it stands here empty and its button reaches it from
                     inside the payee card by `form=`. */
@endphp
            <form method="post" action="{{ route('vendor.settings.stripe-connect') }}" id="po-stripe-connect">@csrf</form>
            <form method="post" action="{{ route('vendor.settings.stripe-unlink') }}" id="po-stripe-unlink">@csrf</form>
            @endif
            <form method="post" action="{{ route('vendor.settings') }}">
                @csrf
                <input type="hidden" name="section" value="payout">

                <div class="qm-card">
                    <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('vendor.settings.payout_cash_title') }}</h2></div>
                    <div class="qm-card-body">
                    <label class="qm-switch-row mb-0">
                        <span>
                            <strong>{{ t_raw('vendor.settings.accepts_cash_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.accepts_cash_sub') }}</small>
                        </span>
                        <input type="checkbox" name="accepts_cash" value="1" {{ (int) ($r['accepts_cash'] ?? 1) === 1 ? 'checked' : '' }}>
                    </label>
                    </div>
                </div>

                @if ($isMarketpl || $isSplit)
                <div class="qm-card">
                    <div class="qm-card-head">
                        <div class="d-flex align-items-center gap-2">
                            <h2 class="mb-0">{{ t_raw('vendor.settings.payee_title') }}</h2>
                            <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.settings.payee_sub') }}@if ($isSplit) {{ t_raw('vendor.settings.split_payee_note') }}@endif" data-qm-tip="{{ t_raw('vendor.settings.payee_sub') }}@if ($isSplit) {{ t_raw('vendor.settings.split_payee_note') }}@endif"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    <div class="qm-card-body">
                    <div class="qm-form-grid">
                        <div class="mb-3">
                            <label class="form-label" for="po-method">{{ t_raw('vendor.settings.payee_method') }}</label>
                            <select class="form-select" id="po-method" name="payout_method">
                                <option value="none"{{ $payMethod === 'none' ? ' selected' : '' }}>{{ t_raw('vendor.settings.payee_method_none') }}</option>
                                @php // Split payments locks the payee to the one active gateway.
@endphp
                                <option value="paypal"{{ $payMethod === 'paypal' ? ' selected' : '' }}>PayPal</option>
                                <option value="stripe"{{ $payMethod === 'stripe' ? ' selected' : '' }}>Stripe</option>
                            </select>
                        </div>
                        @php /* PayPal only. Stripe swaps this box for the Connect state below —
                                 Stripe refuses a transfer to anything but an account the platform
                                 opened, so there is nothing here a vendor could usefully type. */
@endphp
                        <div class="mb-3{{ $payMethod === 'paypal' ? '' : ' d-none' }}" data-payee-field="account">
                            <label class="form-label" for="po-account">{{ t_raw('vendor.settings.payee_account') }}</label>
                            <input type="text" id="po-account" name="payout_account" class="form-control" maxlength="190" value="{{ $payAccount }}" placeholder="{{ t_raw('vendor.settings.payee_account_placeholder') }}">
                        </div>
                    </div>

                    @php /* A CONNECTION, NOT A FIELD.
                             PayPal's destination is something the owner types, so it is a form field in
                             the grid above. Stripe's is not typed at all — the platform opens the account
                             and Stripe decides whether it may receive money. Rendering that state inside a
                             grid cell forced a status with two buttons into the shape of a text input:
                             it never matched the height of the select beside it, and "Unlink this account"
                             ended up floating at the far edge of the card, detached from the account it
                             removes.

                             It is a band instead — the same one Accept cash above and the device rows use.
                             What it IS sits on the left, what you can DO about it sits on the right, and
                             the destructive action is beside the thing it destroys. */
@endphp
                    <div class="qm-switch-row{{ $payMethod === 'stripe' ? '' : ' d-none' }}" data-payee-field="stripe">
                        <span>
                            @php /* Name, then state, on one line — the pill qualifies the account, so it
                                     belongs beside its name rather than adrift at the other end of the row.
                                     The reference sits under it, and the only thing left for the trailing
                                     edge is what you can DO. */
@endphp
                            <strong>{{ t_raw('vendor.settings.payee_stripe_label') }}@if ($scAcct !== '') <span class="qm-pill {{ $scReady ? 'qm-pill-green' : 'qm-pill-amber' }}">{!! $scReady ? t('vendor.settings.payee_stripe_ready') : t('vendor.settings.payee_stripe_pending') !!}</span>@endif</strong>
                            @if ($scAcct === '')
                            <small>{{ t_raw('vendor.settings.payee_stripe_intro') }}</small>
                            @else
                            <small>{{ t_raw('vendor.settings.payee_stripe_ref', [':acct' => $scAcct]) }}</small>
                            @if (!$scRead)
                            <small>{{ t_raw('vendor.settings.payee_stripe_unreadable', [':error' => (string) ($sc['error'] ?? '')]) }}</small>
                            @elseif (!$scReady)
                            <small>{{ t_raw('vendor.settings.payee_stripe_pending_hint') }}</small>
                            @if (!empty($sc['requirements_due']))
                            @php /* Stripe's own field names, shown as they come: they are what the hosted
                                     form will ask for, so a paraphrase would make the two screens disagree. */
@endphp
                            <small>{{ t_raw('vendor.settings.payee_stripe_requirements', [':items' => implode(', ', array_slice((array) $sc['requirements_due'], 0, 8))]) }}</small>
                            @endif
                            @elseif (empty($sc['payouts_enabled']))
                            @php /* Transfers work, so the platform CAN send the share — Stripe is simply
                                     not paying it on to the bank yet. A different problem, said separately. */
@endphp
                            <small>{{ t_raw('vendor.settings.payee_stripe_payouts_held') }}</small>
                            @endif
                            @endif
                        </span>
                        <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end order-2">
                            @if ($scAcct === '')
                            <button type="submit" form="po-stripe-connect" class="qm-btn"><i class="fab fa-cc-stripe" aria-hidden="true"></i> {{ t_raw('vendor.settings.payee_stripe_connect_btn') }}</button>
                            @else
                            @if (!$scReady || empty($sc['payouts_enabled']))
                            <button type="submit" form="po-stripe-connect" class="qm-btn qm-btn-sm qm-btn-outline">{{ t_raw('vendor.settings.payee_stripe_continue_btn') }}</button>
                            @endif
                            <button type="submit" form="po-stripe-unlink" class="qm-btn qm-btn-sm qm-btn-outline qm-btn-danger"
                                    data-confirm="{{ t_raw('vendor.settings.payee_stripe_unlink_confirm') }}">{{ t_raw('vendor.settings.payee_stripe_unlink_btn') }}</button>
                            @endif
                        </div>
                    </div>
                    @php /* Same swap the About-media type dropdown does above: the two payees need
                             different things, so the panel follows the selection without a save. */
@endphp
                    <script>
                    (function () {
                        var sel = document.getElementById('po-method');
                        if (!sel) { return; }
                        var boxes = ['account', 'stripe'].map(function (k) {
                            return { k: k, el: document.querySelector('[data-payee-field="' + k + '"]') };
                        });
                        sel.addEventListener('change', function () {
                            boxes.forEach(function (b) {
                                // account = PayPal only, stripe = Stripe only; 'none' shows neither.
                                var want = b.k === 'stripe' ? (sel.value === 'stripe') : (sel.value === 'paypal');
                                if (b.el) { b.el.classList.toggle('d-none', !want); }
                            });
                        });
                    })();
                    </script>
                    <div class="mb-0">
                        <label class="form-label" for="po-name">{{ t_raw('vendor.settings.payee_name') }}</label>
                        <input type="text" id="po-name" name="payout_name" class="form-control" maxlength="120" value="{{ (string) ($r['payout_name'] ?? '') }}" placeholder="{{ t_raw('vendor.settings.payee_name_placeholder') }}">
                    </div>
                    </div>
                </div>
                @endif

                @php /* These fields ARE this restaurant's card terminal in this model, so an empty
                         card is not a blank form — it is a closed till, and it said nothing about
                         itself. The pill states the standing the same way the payee block above
                         does, from Payment::anyGatewayEnabled(): the very call the storefront makes
                         when it decides which tenders to offer, so "Taking card" here and a card
                         option at checkout are the same answer rather than two that can drift. */
@endphp
                @if ($isFranchise && !$isSplit)
@php $gwReady = \App\Services\Payment::anyGatewayEnabled((int) ($r['id'] ?? 0)); @endphp
                <div class="qm-card">
                    <div class="qm-card-head">
                        <div class="d-flex align-items-center gap-2">
                            <h2 class="mb-0">{{ t_raw('vendor.settings.own_gateway_title') }}</h2>
                            <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.settings.own_gateway_sub') }}" data-qm-tip="{{ t_raw('vendor.settings.own_gateway_sub') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
                            @if ($gwReady)<span class="qm-pill qm-pill-green">{{ t_raw('admin.restaurantdetail.gateway_on_file') }}</span>@else<span class="qm-pill qm-pill-amber">{{ t_raw('admin.restaurantdetail.gateway_missing') }}</span>@endif
                        </div>
                    </div>
                    <div class="qm-card-body">
                    @if (!$gwReady)<p class="qm-hint mt-0 mb-3">{{ t_raw('vendor.settings.own_gateway_missing_hint') }}</p>@endif
                    <div class="qm-form-grid">
                        <div class="mb-3"><label class="form-label" for="og-ssk">{{ t_raw('vendor.settings.stripe_secret') }}</label><input type="text" id="og-ssk" name="stripe_secret_key" class="form-control" maxlength="190" value="{{ (string) ($r['stripe_secret_key'] ?? '') }}" placeholder="sk_live_…"></div>
                        <div class="mb-3"><label class="form-label" for="og-spk">{{ t_raw('vendor.settings.stripe_public') }}</label><input type="text" id="og-spk" name="stripe_public_key" class="form-control" maxlength="190" value="{{ (string) ($r['stripe_public_key'] ?? '') }}" placeholder="pk_live_…"></div>
                        <div class="mb-3"><label class="form-label" for="og-pci">{{ t_raw('vendor.settings.paypal_client') }}</label><input type="text" id="og-pci" name="paypal_client_id" class="form-control" maxlength="190" value="{{ (string) ($r['paypal_client_id'] ?? '') }}"></div>
                        <div class="mb-3"><label class="form-label" for="og-pcs">{{ t_raw('vendor.settings.paypal_secret') }}</label><input type="text" id="og-pcs" name="paypal_client_secret" class="form-control" maxlength="190" value="{{ (string) ($r['paypal_client_secret'] ?? '') }}"></div>
                        @php // The gateway signs its callback with the secret of the account that captured
                              // the charge, so these belong with the keys above. Without them a customer who
                              // closes the tab mid-payment leaves the order unpaid.
@endphp
                        <div class="mb-3"><label class="form-label" for="og-sws">{{ t_raw('vendor.settings.stripe_webhook_secret') }}</label><input type="text" id="og-sws" name="stripe_webhook_secret" class="form-control" maxlength="190" value="{{ (string) ($r['stripe_webhook_secret'] ?? '') }}" placeholder="whsec_…"></div>
                        <div class="mb-3"><label class="form-label" for="og-pwi">{{ t_raw('vendor.settings.paypal_webhook_id') }}</label><input type="text" id="og-pwi" name="paypal_webhook_id" class="form-control" maxlength="190" value="{{ (string) ($r['paypal_webhook_id'] ?? '') }}"></div>
                    </div>
                    </div>
                </div>
                @endif

                @php /* NAMES WHAT THIS FORM ACTUALLY SAVES. A payee only exists where the platform
                         pays the restaurant - marketplace, or any model with split payments on. Under
                         franchise with split off the tab holds cash and the restaurant's OWN gateway
                         keys and no payee at all, and the button still read "Save payee": the one
                         thing on screen it could not save. Same predicate the payee block above is
                         gated on, so the label can never disagree with the fields. */
@endphp
                @php $hasPayee = \App\Services\BusinessModel::isMarketplace() || $isSplit;
@endphp
                <div class="d-flex justify-content-end"><button type="submit" class="qm-btn">{!! $hasPayee ? t('vendor.settings.payout_save_btn') : t('vendor.settings.payment_save_btn') !!}</button></div>
            </form>
        </section>

        <!-- Tax -->
        @if ($canTax)
        <section class="qm-settings-panel" id="tax">
            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}">
                    @csrf
                    <input type="hidden" name="section" value="tax">
                    <div class="qm-card-head">
                        <div class="d-flex align-items-center gap-2"><h2 class="mb-0">{{ t_raw('vendor.settings.tax_title') }}</h2><button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.settings.tax_mutual_exclusive_note') }}" data-qm-tip="{{ t_raw('vendor.settings.tax_mutual_exclusive_note') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button></div>
                    </div>
                    <div class="qm-card-body">
                    @php $taxMode = in_array($r['tax_mode'] ?? 'none', ['none', 'exclusive', 'inclusive'], true) ? ($r['tax_mode'] ?? 'none') : 'none';
@endphp
                    <label class="qm-switch-row">
                        <span>
                            <strong>{{ t_raw('vendor.settings.tax_ontop_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.tax_ontop_help') }}</small>
                        </span>
                        <input class="form-check-input" type="checkbox" role="switch" id="tax-on-top" name="tax_on_top" value="1" data-tax-toggle="exclusive"{{ $taxMode === 'exclusive' ? ' checked' : '' }}>
                    </label>
                    <label class="qm-switch-row">
                        <span>
                            <strong>{{ t_raw('vendor.settings.tax_included_label') }}</strong>
                            <small>{{ t_raw('vendor.settings.tax_included_help') }}</small>
                        </span>
                        <input class="form-check-input" type="checkbox" role="switch" id="tax-included" name="prices_include_tax" value="1" data-tax-toggle="inclusive"{{ $taxMode === 'inclusive' ? ' checked' : '' }}>
                    </label>
                    <div class="qm-form-grid">
                        <div class="mb-3"><label class="form-label" for="tax-label">{{ t_raw('vendor.settings.tax_name_label') }}</label><input type="text" id="tax-label" name="tax_label" class="form-control" maxlength="40" placeholder="{{ t_raw('vendor.settings.tax_name_placeholder') }}" value="{{ $r['tax_label'] ?? t_raw('vendor.settings.tax_title') }}"><div class="qm-hint">{{ t_raw('vendor.settings.tax_name_help') }}</div></div>
                        <div class="mb-3"><label class="form-label" for="tax-rate">{{ t_raw('vendor.settings.tax_rate_label') }}</label><div class="input-group"><input type="number" step="0.001" min="0" max="100" id="tax-rate" name="tax_rate" class="form-control" value="{{ (string) (float) ($r['tax_rate'] ?? 0) }}" placeholder="{{ t_raw('common.placeholder_percent') }}"><span class="input-group-text">%</span></div><div class="qm-hint">{{ t_raw('vendor.settings.tax_rate_help') }}</div></div>
                    </div>
                    @php $taxComps = \App\Services\Tax::componentsFor((int) ($r['id'] ?? 0));
@endphp
                    <div class="mb-3">
                        <label class="form-label">{{ t_raw('vendor.settings.tax_components_label') }}</label>
                        @php for ($ci = 0; $ci < 4; $ci++): $cc = $taxComps[$ci] ?? ['name' => '', 'rate' => 0.0];
@endphp
                        <div class="d-flex gap-2 mb-2">
                            <input type="text" name="comp_name[]" class="form-control" maxlength="40" placeholder="{{ t_raw('vendor.settings.tax_component_name_ph') }}" value="{{ $cc['name'] }}">
                            <div class="input-group qm-field-w-sm"><input type="number" step="0.001" min="0" max="100" name="comp_rate[]" class="form-control" value="{!! $cc['name'] !== '' ? e((string) (float) $cc['rate']) : '' !!}" placeholder="{{ t_raw('common.placeholder_percent') }}"><span class="input-group-text">%</span></div>
                        </div>
                        @endfor
                    </div>
                    <div class="mb-3"><label class="form-label" for="tax-number">{{ t_raw('vendor.settings.tax_number_label') }}</label><input type="text" id="tax-number" name="tax_number" class="form-control" maxlength="60" value="{{ $r['tax_number'] ?? '' }}" placeholder="{{ t_raw('vendor.settings.tax_number_placeholder') }}"><div class="qm-hint">{{ t_raw('vendor.settings.tax_number_help') }}</div></div>
                    </div>
                    <div class="qm-card-foot">
                        <button type="submit" class="qm-btn">{{ t_raw('vendor.settings.save_tax_btn') }}</button>
                    </div>
                </form>
            </div>
        </section>
        @endif

        <!-- Dine-in -->
        <section class="qm-settings-panel" id="reservations">
            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}">
                    @csrf
                    <input type="hidden" name="section" value="reservations">
                    @php $acceptsResv = (int) ($r['accepts_reservations'] ?? 1) === 1;
@endphp
                    <div class="qm-card-head">
                        <div class="d-flex align-items-center gap-2"><h2 class="mb-0">{{ t_raw('vendor.settings.reservations_tab') }}</h2><button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.settings.accept_reservations_help') }}" data-qm-tip="{{ t_raw('vendor.settings.accept_reservations_help') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button></div>
                        <label class="qm-check mb-0"><input type="checkbox" name="accepts_reservations" value="1"{{ $acceptsResv ? ' checked' : '' }} data-toggle-hide="resv-connect" aria-label="{{ t_raw('vendor.settings.accept_reservations_label') }}"></label>
                    </div>
                    <div class="qm-card-body">

                    <div id="resv-connect" class="qm-resv-rules{{ $acceptsResv ? '' : ' d-none' }}">
                        @php /* Inside the reservations block: there is no waiting guest to text on a
                                 restaurant that does not take bookings. Off by default because it
                                 spends the platform's SMS balance, and it stays inert until an admin
                                 has configured the gateway at all. */
@endphp
                        <label class="qm-switch-row">
                            <span>
                                <strong>{{ t_raw('vendor.settings.table_ready_sms_label') }}</strong>
                                <small>{{ t_raw('vendor.settings.table_ready_sms_hint') }}</small>
                            </span>
                            <input type="checkbox" name="table_ready_sms" value="1"{{ (int) ($r['table_ready_sms'] ?? 0) === 1 ? ' checked' : '' }}>
                        </label>

                        <h3 class="qm-form-section">{{ t_raw('vendor.settings.booking_rules_title') }}</h3>
                        <div class="row g-3">
                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label" for="di-lead">{{ t_raw('vendor.settings.lead_time_label') }}</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="di-lead" name="reservation_lead_time_minutes" min="0" max="43200" step="5" value="{{ (int) ($r['reservation_lead_time_minutes'] ?? 0) }}" placeholder="{{ t_raw('common.placeholder_minutes') }}">
                                    <span class="input-group-text">{{ t_raw('vendor.settings.min_ahead_unit') }}</span>
                                </div>
                                <span class="qm-hint">{{ t_raw('vendor.settings.lead_time_hint2') }}</span>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label" for="di-maxparty">{{ t_raw('vendor.settings.max_party_label') }}</label>
                                <input type="number" class="form-control" id="di-maxparty" name="max_party_size" min="1" max="500" value="{{ (int) ($r['max_party_size'] ?? 50) }}" placeholder="{{ t_raw('common.placeholder_count') }}">
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label" for="di-dur">{{ t_raw('vendor.settings.default_duration_label') }}</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="di-dur" name="default_reservation_duration_minutes" min="15" max="1440" step="15" value="{{ (int) ($r['default_reservation_duration_minutes'] ?? 90) }}" placeholder="{{ t_raw('common.placeholder_minutes') }}">
                                    <span class="input-group-text">{{ t_raw('common.min') }}</span>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label" for="di-cancel">{{ t_raw('vendor.settings.cancel_window_label') }}</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="di-cancel" name="cancellation_window_hours" min="0" max="168" value="{{ (int) ($r['cancellation_window_hours'] ?? 4) }}" placeholder="{{ t_raw('common.placeholder_count') }}">
                                    <span class="input-group-text">{{ t_raw('common.hours') }}</span>
                                </div>
                                <span class="qm-hint">{{ t_raw('vendor.settings.cancel_window_hint') }}</span>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <label class="form-label" for="di-tz">{{ t_raw('vendor.settings.timezone_label') }}</label>
                                @php $tzCur = (string) ($r['timezone'] ?? 'UTC');
@endphp
                                <select class="form-select" id="di-tz" name="timezone" data-choices>
                                    @foreach (\DateTimeZone::listIdentifiers() as $tz)
                                    <option value="{{ $tz }}"{{ $tz === $tzCur ? ' selected' : '' }}>{{ $tz }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @php /* Its own row, like the switch above it. Wedged into a third grid column it
                                 was bottom-aligned against two input groups, and its explanation was
                                 stranded under the grid — nowhere near the control it described. The band
                                 carries the sentence itself, which is what every other switch here does. */
                              $reqApproval = (int) ($r['reservation_requires_approval'] ?? 0) === 1;
@endphp
                        <label class="qm-switch-row">
                            <span>
                                <strong>{{ t_raw('vendor.settings.require_approval_label') }}</strong>
                                <small>{!! t_raw('vendor.settings.require_approval_help', [':status' => status_label('reservation', 'pending')]) !!}</small>
                            </span>
                            <input type="checkbox" id="di-approval" name="reservation_requires_approval" value="1"{{ $reqApproval ? ' checked' : '' }}>
                        </label>
                    </div>

                    <hr class="my-3">
                    @php $lockSecs = (int) ($r['staff_lock_seconds'] ?? 0);
@endphp
                    <label class="form-label" for="di-lock">{{ t_raw('vendor.settings.staff_lock_label') }}</label>
                    <div class="input-group qm-maxw-320">
                        <input type="number" class="form-control" id="di-lock" name="staff_lock_seconds" min="0" max="3600" step="5" value="{{ $lockSecs }}" placeholder="{{ t_raw('common.placeholder_minutes') }}">
                        <span class="input-group-text">{{ t_raw('vendor.settings.seconds_idle_unit') }}</span>
                    </div>
                    <p class="qm-hint">{!! t_raw('vendor.settings.staff_lock_help') !!}</p>
                    </div>
                    <div class="qm-card-foot">
                        <button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button>
                    </div>
                </form>
            </div>
        </section>


        <!-- Loyalty -->
        @if ($canLoyalty)
        <section class="qm-settings-panel" id="loyalty">
            @php
            $currency      = setting('currency_symbol', '$');
            $loyEnabled    = (int) ($r['loyalty_enabled'] ?? 0) === 1;
            $loyRate       = (float) ($r['loyalty_earn_rate'] ?? 1);
            $loyLabel      = (string) ($r['loyalty_points_label'] ?? 'points') ?: 'points';
            $loyBonus      = (int) ($r['loyalty_signup_bonus'] ?? 0);
            $loyOnWeb      = (int) ($r['loyalty_on_website'] ?? 1) === 1;
            $loyOnPos      = (int) ($r['loyalty_on_pos'] ?? 1) === 1;
            $loyOnKiosk    = (int) ($r['loyalty_on_kiosk'] ?? 1) === 1;
            $loyBlended    = (float) (($blended['blended'] ?? 0));
            $loyPer        = $blended['per_reward'] ?? [];
            $loyCheapest   = $cheapestReward ?? null;
            $loyCheapCost  = $loyCheapest ? (int) $loyCheapest['points_cost'] : 0;
            $loyCheapPct   = ($loyCheapest && isset($loyPer[(int) $loyCheapest['id']])) ? (float) $loyPer[(int) $loyCheapest['id']] : 0.0;
            $loyCheapSpend = ($loyRate > 0 && $loyCheapCost > 0) ? ($loyCheapCost / $loyRate) : 0.0;
@endphp
            <div class="qm-card">
                <form method="post" action="{{ route('vendor.settings') }}">
                    @csrf
                    <input type="hidden" name="section" value="loyalty">
                    <div class="qm-card-head">
                        <div><h2 class="mb-0">{{ t_raw('vendor.settings.loyalty_title') }}</h2></div>
                        <label class="qm-check mb-0"><input type="checkbox" name="loyalty_enabled" value="1"{{ $loyEnabled ? ' checked' : '' }} data-toggle-hide="loy-connect" data-toggle-foot="loy-foot" aria-label="{{ t_raw('vendor.settings.loyalty_enable_label') }}"></label>
                    </div>
                    <div id="loy-connect" class="qm-card-body{{ $loyEnabled ? '' : ' d-none' }}">
                    @php /* WHERE THE PROGRAMME RUNS. One switch per channel, all on by default: a venue may
                             want points on its website but not at the till, or the reverse. Off means no
                             earning and no redeeming on that channel; balances are untouched. */
@endphp
                    <div class="mb-3">
                        <span class="form-label d-block">{{ t_raw('vendor.settings.loyalty_channels_label') }}</span>
                        <div class="qm-loy-chans">
                            <label class="qm-check mb-0"><input type="checkbox" name="loyalty_on_website" value="1"{{ $loyOnWeb ? ' checked' : '' }}> {{ t_raw('vendor.settings.loyalty_on_website') }}</label>
                            <label class="qm-check mb-0"><input type="checkbox" name="loyalty_on_pos" value="1"{{ $loyOnPos ? ' checked' : '' }}> {{ t_raw('vendor.settings.loyalty_on_pos') }}</label>
                            <label class="qm-check mb-0"><input type="checkbox" name="loyalty_on_kiosk" value="1"{{ $loyOnKiosk ? ' checked' : '' }}> {{ t_raw('vendor.settings.loyalty_on_kiosk') }}</label>
                        </div>
                        <p class="qm-hint mt-2 mb-0">{{ t_raw('vendor.settings.loyalty_channels_hint') }}</p>
                    </div>
                    <div class="qm-form-grid">
                        <div class="mb-3">
                            <label class="form-label" for="loy-earn-rate">{{ t_raw('vendor.settings.loyalty_earn_rate_label', [':currency' => $currency]) }}</label>
                            <input type="number" step="0.1" min="0" id="loy-earn-rate" name="loyalty_earn_rate" class="form-control" value="{{ (string) $loyRate }}" placeholder="{{ t_raw('common.placeholder_percent') }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="loy-label">{{ t_raw('vendor.settings.loyalty_points_label_field') }}</label>
                            <input type="text" id="loy-label" name="loyalty_points_label" class="form-control" value="{{ $loyLabel }}" placeholder="{{ t_raw('vendor.loyalty.placeholder_reward_title') }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="loy-bonus">{{ t_raw('vendor.settings.loyalty_bonus_label') }}</label>
                            <input type="number" min="0" id="loy-bonus" name="loyalty_signup_bonus" class="form-control" value="{{ (string) $loyBonus }}" placeholder="{{ t_raw('common.placeholder_count') }}">
                            <p class="qm-hint mt-2 mb-0">{{ t_raw('vendor.settings.loyalty_bonus_hint') }}</p>
                        </div>
                    </div>

                    <div class="qm-loyalty-meter" data-earn-rate="{{ (string) $loyRate }}" data-currency="{{ $currency }}" data-level="{{ $loyBlended <= 3 ? 'ok' : ($loyBlended <= 8 ? 'watch' : 'high') }}">
                        <div class="qm-loyalty-meter-head">
                            <span>{{ t_raw('vendor.settings.loyalty_blended_label') }}</span>
                            <span class="qm-loyalty-meter-pct" id="ql-blended-pct">{{ number_format($loyBlended, 1) }}%</span>
                        </div>
                        <div class="qm-loyalty-meter-track">
                            <span class="qm-loyalty-meter-fill qm-fill" id="ql-blended-fill" style="--qm-fill: {{ (string) min(100, $loyBlended / 10 * 100) }}%"></span>
                        </div>
                        <p class="qm-loyalty-meter-note">
                            @if ($loyCheapest)
@php
$rewardTitleMarker = '@@qm_reward_title@@';
$meterNote = t_raw('vendor.settings.loyalty_meter_note', [
                                    ':amount' => '<span id="ql-spend">' . money($loyCheapSpend) . '</span>',
                                    ':title' => $rewardTitleMarker,
                                    ':cost' => (int) $loyCheapCost,
                                    ':pct' => '<span id="ql-cheapest-pct">' . number_format($loyCheapPct, 1) . '%</span>',
                                ]);
echo str_replace($rewardTitleMarker, e($loyCheapest['title']), $meterNote);
@endphp
@else
                            {{ t_raw('vendor.settings.loyalty_meter_empty') }}
                            <span id="ql-spend" hidden></span><span id="ql-cheapest-pct" hidden></span>
                            @endif
                        </p>
                        @foreach ($activeRewards ?? [] as $rw)
@php $rwVal  = \App\Services\Loyalty::rewardValue($rw);
                            $rwCost = (int) $rw['points_cost'];
                            $rwPct  = (float) ($loyPer[(int) $rw['id']] ?? 0); @endphp
                        <div class="qm-loyalty-strip" data-reward-row data-value="{{ (string) $rwVal }}" data-points="{{ (int) $rwCost }}">
                            <span class="qm-loyalty-strip-name">{{ $rw['title'] }} <small>{{ (int) $rwCost }} pts</small></span>
                            <span class="qm-loyalty-strip-bar"><span class="qm-fill" data-reward-bar style="--qm-fill: {{ (string) min(100, $rwPct / 10 * 100) }}%"></span></span>
                            <span class="qm-loyalty-strip-pct" data-reward-pct>{{ number_format($rwPct, 1) }}%</span>
                        </div>
                        @endforeach
                    </div>

                    </div>
                    <div class="qm-card-foot{{ $loyEnabled ? '' : ' d-none' }}" id="loy-foot">
                        <button type="submit" class="qm-btn">{{ t_raw('vendor.settings.save_loyalty_btn') }}</button>
                        <a href="{{ route('vendor.loyalty') }}" class="qm-btn qm-btn-outline qm-btn-sm">{{ t_raw('vendor.settings.manage_rewards_link') }}</a>
                    </div>
                </form>
            </div>
        </section>
        @endif
    </div>
</div>

<script>
/* Pause panel: the auto-resume time only means anything while the pause is on, so the
   field follows the switch instead of sitting there greyed out. Progressive enhancement
   — with JS off the field is simply always visible and still saves correctly. */
(function () {
    var sw = document.getElementById('pause-orders');
    var field = document.getElementById('qm-pause-until-field');
    if (!sw || !field) { return; }
    sw.addEventListener('change', function () {
        field.classList.toggle('qm-hidden', !sw.checked);
        // The switch saves itself. Turning it ON reveals the auto-resume time, so that case waits
        // for the time to be set (or left blank) and submits on the field's own change instead —
        // submitting immediately would reload the panel out from under the input just revealed.
        if (!sw.checked) { sw.form.submit(); }
    });
    var until = document.getElementById('pause-until');
    if (until) {
        until.addEventListener('change', function () { sw.form.submit(); });
    }
    // Pausing with no auto-resume time is the common case, so it must not require touching the
    // date field at all: leaving the switch on and moving away commits it.
    sw.addEventListener('blur', function () {
        if (sw.checked && until && until.value === '') { sw.form.submit(); }
    });
})();

/* Toggle-to-reveal: a checkbox marked [data-toggle-hide="id"] shows the block with
   that id only while it is checked. The block starts with .d-none server-side when
   off, so there is no flash on load; hidden fields still submit, so a saved value
   survives while the section is collapsed. An optional [data-toggle-foot] block
   follows the same rule but stays available whenever the toggle differs from its
   saved state, so switching a feature off can still be saved. */
(function () {
    Array.prototype.forEach.call(document.querySelectorAll('[data-toggle-hide]'), function (cb) {
        var body = document.getElementById(cb.getAttribute('data-toggle-hide'));
        var footId = cb.getAttribute('data-toggle-foot');
        var foot = footId ? document.getElementById(footId) : null;
        if (!body && !foot) { return; }
        var initial = cb.checked;
        cb.addEventListener('change', function () {
            if (body) { body.classList.toggle('d-none', !cb.checked); }
            if (foot) { foot.classList.toggle('d-none', !cb.checked && cb.checked === initial); }
        });
    });
})();
</script>

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