@extends('layouts.dashboard')

@section('content')
@php

/**
 * Vendor loyalty surfaces: KPIs, the owner give-back impact meter, the per-reward
 * effective-% table, the catalog manager (add/edit/delete) and recent redemptions.
 *
 * @var array      $allRewards    every reward (active + inactive)
 * @var array      $rewards       the current pager window of $allRewards (catalog table)
 * @var array      $pager         paginate() metadata for the catalog table
 * @var array      $activeRewards active rewards only (for the meter/table)
 * @var array      $menuItems     id,name,price for the free-item picker
 * @var array      $kpis          issued, redeemed, outstanding, members
 * @var array      $effective     ['per_reward'=>[id=>pct], 'blended'=>float]
 * @var array|null $cheapest      cheapest active reward row (or null)
 * @var array      $recent        recent redemption rows
 * @var array      $rangeLinks    ['options' => [days => label], 'selected' => string]
 * @var int        $rangeDays     the selected chart window, in days
 * @var float|null $pointValue    what one point is worth in currency (null = nothing redeemable)
 * @var float|null $liability     outstanding points priced in currency (null when undefined)
 * @var float|null $redemptionRate programme-to-date % of issued points redeemed
 * @var array      $flowChart @var array $flowMeta          points issued vs redeemed per day
 * @var array      $standingChart @var array $standingMeta  redeemed vs still outstanding
 * @var array      $bandsChart @var array $bandsMeta        member balance distribution
 * @var array      $typeChart @var array $typeMeta          points movement by ledger type
 * @var array|null $restaurant
 */
use App\Services\Loyalty;

$r          = $restaurant ?? [];
$enabled    = (int) ($r['loyalty_enabled'] ?? 0) === 1;
$earnRate   = (float) ($r['loyalty_earn_rate'] ?? 0);
$ptsLabel   = (string) ($r['loyalty_points_label'] ?? 'points') ?: 'points';
$currency   = setting('currency_symbol', '$');
$blended    = (float) ($effective['blended'] ?? 0);
$perReward  = $effective['per_reward'] ?? [];

// Build name/image maps for menu items so the catalog can show the linked dish.
$miName  = [];
$miImage = [];
foreach (($menuItems ?? []) as $mi) {
    $miName[(int) $mi['id']]  = $mi['name'];
    $miImage[(int) $mi['id']] = $mi['image'] ?? '';
}

// Cheapest reward figures for the meter copy.
$cheapestCost = $cheapest ? (int) $cheapest['points_cost'] : 0;
$cheapestPct  = ($cheapest && isset($perReward[(int) $cheapest['id']])) ? (float) $perReward[(int) $cheapest['id']] : 0.0;
$cheapestSpend = ($earnRate > 0 && $cheapestCost > 0) ? ($cheapestCost / $earnRate) : 0.0;

$typeLabel = static fn (string $t): string => status_label('reward_type', $t);
$showMoney  = $showMoney ?? true;
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<div class="qm-ops-head">
    <div></div>
    <div class="d-flex align-items-center flex-wrap gap-2">
        <div class="qm-period" role="group" aria-label="{{ t_raw('common.reporting_period') }}">
            @foreach ($rangeLinks['options'] as $val => $text)
@php $on = ((string) $val === $rangeLinks['selected']); @endphp
            <a class="qm-period-btn{{ $on ? ' is-active' : '' }}" href="?range={{ (string) $val }}" aria-current="{{ $on ? 'true' : 'false' }}">{{ $text }}</a>
            @endforeach
        </div>
        @php /* The give-back policy is a money setting, so Settings strips the Loyalty
           section from a manager's own page — this link would land on nothing. */
@endphp
        @if ($showMoney)
        <a href="{{ route('vendor.settings') . '#loyalty' }}" class="qm-btn qm-btn-outline qm-btn-sm"><i class="fas fa-sliders-h" aria-hidden="true"></i> {{ t_raw('vendor.loyalty.settings_link') }}</a>
        @endif
    </div>
</div>

@if (!$enabled)
<div class="alert alert-warning">
    {!! t_raw('vendor.loyalty.alert_off', [
        ':link' => '<a href="' . e(route('vendor.settings') . '#loyalty') . '">' . t('vendor.loyalty.settings_arrow_loyalty') . '</a>',
    ]) !!}
</div>
@endif

@php $kpiSparks = $kpiSparks ?? [];
@endphp
<div class="qm-kpi-grid">
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'rose', 'icon' => 'fa-gift', 'label' => t_raw('vendor.loyalty.kpi_points_issued'), 'value' => number_format((int) $kpis['issued']), 'href' => route('vendor.orders'), 'spark' => $kpiSparks['issued'] ?? [],
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.loyalty.kpi_points_issued_meta') . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'amber', 'icon' => 'fa-paper-plane', 'label' => t_raw('vendor.loyalty.kpi_points_redeemed'), 'value' => number_format((int) $kpis['redeemed']), 'href' => route('vendor.orders'), 'spark' => $kpiSparks['redeemed'] ?? [],
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.loyalty.kpi_points_redeemed_meta') . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'green', 'icon' => 'fa-coins', 'label' => t_raw('vendor.loyalty.kpi_outstanding_balance'), 'value' => number_format((int) $kpis['outstanding']), 'spark' => $kpiSparks['outstanding'] ?? [],
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.loyalty.kpi_outstanding_meta') . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'teal', 'icon' => 'fa-users', 'label' => t_raw('admin.loyalty.col_members'), 'value' => number_format((int) $kpis['members']), 'spark' => $kpiSparks['members'] ?? [],
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.loyalty.kpi_members_meta') . '</span>'])
    @php /* What the programme actually owes. A point balance is not a number an owner can
       reconcile against anything; priced through the reward catalogue it becomes the real
       cost of every reward still waiting to be claimed. With no active rewards nothing can
       be redeemed, so the figure is genuinely undefined rather than zero. Owner-only: it
       is a money figure, so it follows the same boundary as the rest of the takings. */
@endphp
    @if ($showMoney)
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'orange', 'icon' => 'fa-file-invoice-dollar', 'label' => t_raw('vendor.loyalty.kpi_liability'),
        'value' => $liability !== null ? money($liability) : "—", 'spark' => $liability !== null ? ($kpiSparks['liability'] ?? []) : [],
        'meta' => '<span class="qm-kpi-cap">' . ($pointValue !== null
            ? t('vendor.loyalty.kpi_liability_meta', [':rate' => money($pointValue)])
            : t('vendor.loyalty.kpi_liability_meta_none')) . '</span>'])
    @endif
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'blue', 'icon' => 'fa-percentage', 'label' => t_raw('vendor.loyalty.kpi_redemption_rate'),
        'value' => $redemptionRate !== null ? number_format($redemptionRate, 1) . '%' : "—",
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.loyalty.kpi_redemption_rate_meta') . '</span>'])
</div>

@php /* FIND A MEMBER. Points are keyed to the customer's phone number, so the phone is how an
         operator reaches a balance: the number goes in on the left and the members it matches list
         right under it as it is typed (name, phone, email, points); the one clicked opens on the
         right — who they are, their standing, and the owner's adjust fields, which update the balance
         in place. It sits under the KPIs because it is the one thing a vendor comes here to DO;
         everything below it is reading. loyalty-members.js drives it; without JS the adjust form
         still posts and comes back with a flash. */
@endphp
<div class="qm-card" id="loyalty-member"
     data-i18n-hint="{{ t_raw('vendor.loyalty.find_hint') }}" data-i18n-none="{{ t_raw('vendor.loyalty.find_none') }}">
    <div class="row g-3">
        <div class="col-lg-5">
            @php /* The heading lives in the left column so the row starts at the top of the card and the
                     workspace on the right runs level with it - no band of white above the panel. */
@endphp
            <div class="qm-ops-head">
                <div>
                    <h2 class="mb-0">{{ t_raw('vendor.loyalty.find_heading') }}</h2>
                    <p class="qm-ops-sub">{{ t_raw('vendor.loyalty.find_sub') }}</p>
                </div>
            </div>
            <label class="form-label visually-hidden" for="loyalty-phone">{{ t_raw('common.phone') }}</label>
            <input type="tel" inputmode="tel" class="form-control" id="loyalty-phone" value=""
                   placeholder="{{ t_raw('vendor.loyalty.find_placeholder') }}" maxlength="40" autocomplete="off" data-loy-input
                   role="combobox" aria-autocomplete="list" aria-controls="loyalty-matches" aria-expanded="false">
            <p class="qm-loy-hint" data-loy-hint>{{ t_raw('vendor.loyalty.find_hint') }}</p>
            <div class="qm-loy-results-head" data-loy-results-head hidden><span>{{ t_raw('vendor.loyalty.find_matches') }}</span><span class="qm-pill qm-pill-grey" data-loy-count></span></div>
            <div class="qm-loy-results" id="loyalty-matches" role="listbox" aria-label="{{ t_raw('vendor.loyalty.find_matches') }}" data-loy-results></div>
        </div>
        <div class="col-lg-7">
            @php /* Nothing picked yet: say what the panel is for. */
@endphp
            <div class="qm-loy-empty" data-loy-empty>
                <i class="fas fa-user-friends" aria-hidden="true"></i>
                <p>{{ t_raw('vendor.loyalty.find_pick') }}</p>
            </div>
            @php /* The member picked from the matches: who they are, by phone; their standing; and, for
                     the owner, the adjust fields. Issuing points spends the give-back budget, so a
                     manager sees the member but not the form. */
@endphp
            <div class="qm-loy-sel" data-loy-selected hidden>
                <div class="qm-loy-sel-head">
                    <div class="qm-loy-sel-who">
                        <strong class="qm-loy-sel-name" data-sel-name></strong>
                        <span class="qm-loy-sel-phone" data-sel-phone></span>
                        <span class="qm-loy-sel-email" data-sel-email></span>
                    </div>
                    <span class="qm-pill qm-pill-blue" data-sel-balance></span>
                </div>
                <dl class="qm-loy-sel-facts">
                    <div><dt>{{ t_raw('vendor.loyalty.col_lifetime') }}</dt><dd data-sel-lifetime></dd></div>
                    <div><dt>{{ t_raw('common.joined') }}</dt><dd data-sel-joined></dd></div>
                </dl>
                @if ($showMoney)
                <form method="post" action="{{ route('vendor.loyalty.adjust') }}" class="qm-loy-adjust" data-loy-adjust>
                    @csrf
                    <input type="hidden" name="customer_user_id" value="" data-sel-id>
                    <input type="number" class="form-control qm-loy-pts" name="points" step="1" placeholder="{{ t_raw('vendor.loyalty.placeholder_points_amount') }}" aria-label="{{ t_raw('vendor.loyalty.label_points_pm') }}" required data-sel-points>
                    <input type="text" class="form-control qm-loy-note" name="note" maxlength="120" placeholder="{{ t_raw('vendor.loyalty.label_reason_optional') }}" aria-label="{{ t_raw('vendor.loyalty.label_reason_optional') }}">
                    <button type="submit" class="qm-btn" data-confirm="{{ t_raw('vendor.loyalty.confirm_apply_adjustment') }}">{{ t_raw('vendor.loyalty.btn_apply_adjustment') }}</button>
                </form>
                <p class="qm-loy-msg" data-loy-msg role="status" aria-live="polite" hidden></p>
                @endif
            </div>
        </div>
    </div>
</div>

@php /* Trends: how points flow in and out day by day, and where every point ever issued
   now stands. Each card's caption and its accessible summary are the same sentence. */
@endphp
<div class="qm-charts-grid">
    <div class="qm-chart-card qm-chart-col-8">
        @partial('chart-card', ['heading' => t_raw('vendor.loyalty.chart_points_flow'), 'sub' => $flowMeta['label'],
            'cfg' => $flowChart, 'meta' => $flowMeta, 'accent' => 'rose', 'icon' => 'fa-chart-line'])
    </div>
    <div class="qm-chart-card qm-chart-col-4">
        @partial('chart-card', ['heading' => t_raw('vendor.loyalty.chart_points_standing'), 'sub' => $standingMeta['label'],
            'cfg' => $standingChart, 'meta' => $standingMeta, 'accent' => 'green', 'icon' => 'fa-coins'])
    </div>
</div>

<div class="qm-charts-grid">
    <div class="qm-chart-card qm-chart-col-6">
        @partial('chart-card', ['heading' => t_raw('vendor.loyalty.chart_balance_bands'), 'sub' => $bandsMeta['label'],
            'cfg' => $bandsChart, 'meta' => $bandsMeta, 'accent' => 'teal', 'icon' => 'fa-chart-bar'])
    </div>
    <div class="qm-chart-card qm-chart-col-6">
        @partial('chart-card', ['heading' => t_raw('vendor.loyalty.chart_points_by_type'), 'sub' => $typeMeta['label'],
            'cfg' => $typeChart, 'meta' => $typeMeta, 'accent' => 'amber', 'icon' => 'fa-chart-bar'])
    </div>
</div>

<!-- Impact meter -->
<div class="qm-card">
    <div class="qm-ops-head">
        <div>
            <h2 class="mb-0">{{ t_raw('vendor.loyalty.giveback_rate_heading') }}</h2>
            <p class="qm-ops-sub">{{ t_raw('vendor.loyalty.giveback_rate_sub') }}</p>
        </div>
    </div>
    <div class="qm-loyalty-meter" data-earn-rate="{{ (string) $earnRate }}" data-currency="{{ $currency }}" data-level="{{ $blended <= 3 ? 'ok' : ($blended <= 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($blended, 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, $blended / 10 * 100) }}%"></span>
        </div>
        <p class="qm-loyalty-meter-note">
            @if ($cheapest)
@php
$rewardTitleMarker = '@@qm_reward_title@@';
$meterNote = t_raw('vendor.settings.loyalty_meter_note', [
                    ':amount' => '<span id="ql-spend">' . money($cheapestSpend) . '</span>',
                    ':title' => $rewardTitleMarker,
                    ':cost' => (int) $cheapestCost,
                    ':pct' => '<span id="ql-cheapest-pct">' . number_format($cheapestPct, 1) . '%</span>',
                ]);
echo str_replace($rewardTitleMarker, e($cheapest['title']), $meterNote);
@endphp
@else
            {{ t_raw('vendor.loyalty.meter_empty') }}
            <span id="ql-spend" hidden></span><span id="ql-cheapest-pct" hidden></span>
            @endif
        </p>
    </div>
</div>

<!-- Per-reward effective % -->
@if (count($activeRewards) > 0)
<div class="qm-card">
    <h2>{{ t_raw('vendor.loyalty.effective_table_heading') }}</h2>
    <div class="table-responsive">
    @php /* No rows-per-page control here: this table is the active slice of the very
       catalogue the manager below pages over, so a second pager on the same data would
       fight the first. The give-back column is drawn as a percentage plus a bar, so it
       carries its numeric value in data-sort-value. */
@endphp
    <table class="qm-table" data-sortable>
        <thead><tr><th data-sort="text">{{ t_raw('vendor.loyalty.col_reward') }}</th><th data-sort="text">{{ t_raw('common.type') }}</th><th data-sort="number">{{ t_raw('common.value') }}</th><th data-sort="number">{{ t_raw('vendor.loyalty.col_points') }}</th><th data-sort="number">{{ t_raw('vendor.loyalty.col_spend_to_earn') }}</th><th data-sort="number" class="text-end">{{ t_raw('vendor.loyalty.col_giveback') }}</th></tr></thead>
        <tbody>
            @foreach ($activeRewards as $rw)
@php $val  = Loyalty::rewardValue($rw);
                $cost = (int) $rw['points_cost'];
                $spend = ($earnRate > 0 && $cost > 0) ? ($cost / $earnRate) : 0.0;
                $pct  = (float) ($perReward[(int) $rw['id']] ?? 0); @endphp
            <tr data-reward-row data-value="{{ (string) $val }}" data-points="{{ (int) $cost }}">
                <td><strong>{{ $rw['title'] }}</strong></td>
                <td>{!! $typeLabel($rw['type']) !!}</td>
                <td>{{ money($val) }}</td>
                <td>{{ (int) $cost }}</td>
                <td>{{ money($spend) }}</td>
                <td class="text-end" data-sort-value="{{ (string) $pct }}">
                    <span data-reward-pct>{{ number_format($pct, 1) }}%</span>
                    <span class="qm-loyalty-rowbar"><span class="qm-fill" data-reward-bar style="--qm-fill: {{ (string) min(100, $pct / 10 * 100) }}%"></span></span>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
</div>
@endif

<!-- Catalog manager -->
<div class="qm-card">
    <div class="qm-ops-head">
        <h2 class="mb-0">{{ t_raw('vendor.loyalty.catalog_heading') }}</h2>
        @php /* Reward CRUD prices the give-back, so LoyaltyController keeps saveReward,
           deleteReward and adjust to the owner. A manager reads the catalogue instead of
           editing it — the same boundary the liability KPI above already draws. */
@endphp
        @if ($showMoney)
        <button type="button" class="qm-btn qm-btn-sm" data-bs-toggle="modal" data-bs-target="#rewardModal" data-reward-add>{{ t_raw('vendor.loyalty.btn_add_reward') }}</button>
        @endif
    </div>
    @if (count($rewards) > 0)
    <div class="table-responsive">
    <table class="qm-table" data-sortable>
        <thead><tr><th data-sort="text">{{ t_raw('common.title') }}</th><th data-sort="text">{{ t_raw('common.type') }}</th><th data-sort="number">{{ t_raw('common.value') }}</th><th data-sort="number">{{ t_raw('vendor.loyalty.col_points') }}</th><th data-sort="text" class="text-end">{{ t_raw('common.active') }}</th>@if ($showMoney)<th class="text-end">{{ t_raw('common.actions') }}</th>@endif</tr></thead>
        <tbody>
            @foreach ($rewards as $rw)
@php $isFree   = ($rw['type'] ?? '') === 'free_item';
                $val      = Loyalty::rewardValue($rw);
                $rwMiId   = (int) ($rw['menu_item_id'] ?? 0);
                $rwImg    = $isFree ? ($miImage[$rwMiId] ?? '') : '';
                $rwMiName = $isFree ? ($miName[$rwMiId] ?? '') : ''; @endphp
            <tr>
                <td>
                    <div class="qm-tbl-id">
                        <img class="qm-tbl-thumb" src="{{ media($rwImg, 'assets/client/dish/dish-1.png') }}" alt="" width="44" height="44" loading="lazy">
                        <div class="qm-tbl-id-text">
                            <strong>{{ $rw['title'] }}</strong>
                            @if ($rwMiName !== '')<small>{{ $rwMiName }}</small>@endif
                        </div>
                    </div>
                </td>
                <td>{!! $typeLabel($rw['type']) !!}</td>
                <td>{{ money($val) }}</td>
                <td>{{ (int) $rw['points_cost'] }}</td>
                <td class="text-end"><span class="qm-pill {{ (int) $rw['is_active'] === 1 ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! (int) $rw['is_active'] === 1 ? t('common.yes') : t('common.no') !!}</span></td>
                @if ($showMoney)
                <td class="qm-actions-cell">
                    <button type="button" class="qm-icon-btn" data-bs-toggle="modal" data-bs-target="#rewardModal" data-reward-edit
                        data-id="{{ (int) $rw['id'] }}" data-title="{{ $rw['title'] }}" data-type="{{ (string) $rw['type'] }}"
                        data-menu-item="{{ (int) ($rw['menu_item_id'] ?? 0) }}" data-cash="{{ (string) $rw['cash_value'] }}"
                        data-points="{{ (int) $rw['points_cost'] }}" data-active="{{ (int) $rw['is_active'] }}" data-sort="{{ (int) $rw['sort_order'] }}"
                        aria-label="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    <form method="post" action="{{ route('vendor.loyalty.reward.delete') }}" class="d-inline" data-confirm="{{ t_raw('vendor.loyalty.confirm_delete_reward') }}">@csrf<input type="hidden" name="id" value="{{ (int) $rw['id'] }}"><button type="submit" class="qm-icon-btn danger" aria-label="{{ t_raw('common.delete') }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button></form>
                </td>
                @endif
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/vendor/loyalty'])
    @else
    <div class="qm-empty">
        <i class="fas fa-gift d-block" aria-hidden="true"></i>
        <h3>{{ t_raw('vendor.loyalty.empty_no_rewards_title') }}</h3>
        <p>{{ t_raw('vendor.loyalty.empty_no_rewards_text') }}</p>
    </div>
    @endif
</div>

<!-- Recent redemptions -->
<div class="qm-card">
    <h2>{{ t_raw('vendor.loyalty.recent_redemptions_heading') }}</h2>
    <div class="table-responsive">
    @php /* A deliberately bounded "latest ten" strip rather than a paged list — the page
       already carries one pager, on the reward catalogue, and both would read the same
       ?page= parameter. When renders via fmt_datetime, so that cell carries its raw
       timestamp in data-sort-value. */
@endphp
    <table class="qm-table" data-sortable>
        <thead><tr><th data-sort="text">{{ t_raw('common.customer') }}</th><th data-sort="text">{{ t_raw('vendor.loyalty.col_reward') }}</th><th data-sort="number">{{ t_raw('vendor.loyalty.col_points') }}</th><th data-sort="date" class="text-end">{{ t_raw('common.when') }}</th></tr></thead>
        <tbody>
            @if ($recent)
            @foreach ($recent as $t)
            <tr>
                <td>
                    <div class="qm-tbl-id">
                        {!! brandmark_html($t['customer_avatar'] ?? null, (string) ($t['customer_name'] ?? t_raw('common.customer')), 'md', 'qm-brandmark--round') !!}
                        <div class="qm-tbl-id-text"><strong>{{ $t['customer_name'] ?? t_raw('common.customer') }}</strong>@if (!empty($t['customer_phone']))<small class="text-muted d-block">{{ (string) $t['customer_phone'] }}</small>@endif</div>
                    </div>
                </td>
                <td>{!! or_dash($t['note'] ?? null) !!}</td>
                <td>{{ number_format(abs((int) $t['points'])) }}</td>
                <td class="qm-cell-body text-end" data-sort-value="{{ str_replace(' ', 'T', (string) $t['created_at']) }}">{!! fmt_datetime($t['created_at']) !!}</td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 4, 'icon' => 'fa-gift', 'msg' => t_raw('vendor.loyalty.empty_no_redemptions')])
            @endif
        </tbody>
    </table>
    </div>
</div>

@if ($showMoney)
<!-- Reward modal (reachable only from the owner-only add/edit buttons above) -->
<div class="modal fade" id="rewardModal" tabindex="-1" aria-labelledby="reward-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('vendor.loyalty.reward') }}">
            @csrf
            <input type="hidden" name="id" id="reward-id" value="">
            <div class="modal-header"><h2 class="modal-title h5" id="reward-modal-title" data-title-add="{{ t_raw('vendor.loyalty.modal_add_title') }}" data-title-edit="{{ t_raw('vendor.loyalty.modal_edit_title') }}">{{ t_raw('vendor.loyalty.modal_add_title') }}</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button></div>
            <div class="modal-body">
                <div class="mb-3"><label class="form-label" for="reward-title">{{ t_raw('common.title') }}</label><input type="text" class="form-control" id="reward-title" name="title" placeholder="{{ t_raw('vendor.loyalty.placeholder_reward_title') }}" required></div>
                <div class="mb-3">
                    <label class="form-label" for="reward-type">{{ t_raw('common.type') }}</label>
                    <select class="form-select" id="reward-type" name="type">
                        <option value="free_item">{{ t_raw('status.reward_type.free_item') }}</option>
                        <option value="cash">{{ t_raw('status.reward_type.cash') }}</option>
                    </select>
                </div>
                <div class="mb-3" id="reward-free-field">
                    <label class="form-label" for="reward-menu-item">{{ t_raw('status.reward_type.free_item') }}</label>
                    <select class="form-select" id="reward-menu-item" name="menu_item_id">
                        <option value="">{{ t_raw('vendor.loyalty.select_menu_item_placeholder') }}</option>
                        @foreach (($menuItems ?? []) as $mi)
                        @php // A dish already bound to a reward stays selectable even when it is off
                              // sale — otherwise the reward could never be edited again — but it says
                              // so, rather than looking like an ordinary choice for a NEW reward.
@endphp
                        <option value="{{ (int) $mi['id'] }}">{{ $mi['name'] }} ({{ money($mi['price']) }}){!! isset($mi['is_available']) && (int) $mi['is_available'] !== 1 ? ' — ' . t_raw('common.unavailable') : '' !!}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3" id="reward-cash-field" hidden>
                    <label class="form-label" for="reward-cash">{{ t_raw('vendor.loyalty.label_cash_value') }}</label>
                    <input type="number" step="0.01" min="0" class="form-control" id="reward-cash" name="cash_value" value="" placeholder="{{ t_raw('common.placeholder_amount') }}">
                </div>
                <div class="row g-3">
                    <div class="col-6 mb-3"><label class="form-label" for="reward-points">{{ t_raw('vendor.loyalty.label_points_cost') }}</label><input type="number" min="1" class="form-control" id="reward-points" name="points_cost" required placeholder="{{ t_raw('common.placeholder_count') }}"></div>
                    <div class="col-6 mb-3"><label class="form-label" for="reward-sort">{{ t_raw('vendor.loyalty.label_sort_order') }}</label><input type="number" class="form-control" id="reward-sort" name="sort_order" value="0" placeholder="{{ t_raw('common.placeholder_order') }}"></div>
                </div>
                <label class="qm-check"><input type="checkbox" id="reward-active" name="is_active" value="1" checked> {{ t_raw('common.active') }}</label>
            </div>
            <div class="modal-footer"><button type="button" class="qm-btn qm-btn-outline" data-bs-dismiss="modal">{{ t_raw('common.cancel') }}</button><button type="submit" class="qm-btn">{{ t_raw('vendor.loyalty.btn_save_reward') }}</button></div>
        </form>
    </div>
</div>
@endif

<script>
/* Toggle free-item/cash fields by type, and populate the modal for edit from
   each edit button's data-* attributes (mirrors the menu modal pattern). */
(function () {
    var typeSel = document.getElementById('reward-type');
    var freeF   = document.getElementById('reward-free-field');
    var cashF   = document.getElementById('reward-cash-field');
    if (!typeSel || !freeF || !cashF) { return; }

    function syncFields() {
        var free = typeSel.value === 'free_item';
        freeF.hidden = !free;
        cashF.hidden = free;
    }
    typeSel.addEventListener('change', syncFields);

    var title  = document.getElementById('reward-modal-title');
    var idEl   = document.getElementById('reward-id');
    var titEl  = document.getElementById('reward-title');
    var miEl   = document.getElementById('reward-menu-item');
    var cashEl = document.getElementById('reward-cash');
    var ptsEl  = document.getElementById('reward-points');
    var sortEl = document.getElementById('reward-sort');
    var actEl  = document.getElementById('reward-active');

    document.querySelectorAll('[data-reward-add], [data-reward-edit]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var add = btn.hasAttribute('data-reward-add');
            if (title) { title.textContent = add ? (title.getAttribute('data-title-add') || 'Add reward') : (title.getAttribute('data-title-edit') || 'Edit reward'); }
            idEl.value   = add ? '' : (btn.getAttribute('data-id') || '');
            titEl.value  = add ? '' : (btn.getAttribute('data-title') || '');
            typeSel.value = add ? 'free_item' : (btn.getAttribute('data-type') || 'free_item');
            miEl.value   = add ? '' : (btn.getAttribute('data-menu-item') || '');
            cashEl.value = add ? '' : (btn.getAttribute('data-cash') || '');
            ptsEl.value  = add ? '' : (btn.getAttribute('data-points') || '');
            sortEl.value = add ? '0' : (btn.getAttribute('data-sort') || '0');
            actEl.checked = add ? true : btn.getAttribute('data-active') === '1';
            syncFields();
        });
    });

    syncFields();
})();
</script>

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