@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → Upsell rules: what this restaurant offers once a given dish is in the
 * basket. One row is one pairing — a target dish, the dish to recommend beside it,
 * and an optional discount to sweeten it (UpsellController::index()).
 *
 * Rules are optional. With none written the engine still recommends: it falls back
 * to the cheapest available dish outside the categories the basket already draws
 * on. That is why this page never reads as "off" when it is empty.
 *
 * @var array      $rows      the current pager window of rule rows, each carrying
 *                            target_name / rec_name / rec_price from the join
 * @var array      $pager     paginate() metadata
 * @var array      $dishes    this restaurant's dishes, for both selects
 * @var int        $active    active rules
 * @var int        $covered   distinct dishes that have at least one active rule
 * @var int        $sellable  dishes a customer can actually order right now
 * @var float|null $coverage  % of sellable dishes covered (null = nothing sellable)
 * @var int        $withOffer active rules that carry a discount
 * @var bool       $engineOn  the platform-wide switch
 */
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page primary action → top-bar subheader slot, exactly as Coupons does, leaving the
//      table card header for the title. ob_start captures the button HTML for the layout slot.
ob_start();
@endphp
<button type="button" class="qm-btn" data-bs-toggle="modal" data-bs-target="#upsellModal" data-upsell-add><i class="fas fa-plus me-1"></i> {{ t_raw('vendor.upsell.add_btn') }}</button>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp

@php /* No reporting-period control on this page: a rule has no history to window. Nothing on
   an order records that a recommendation was what sold it, so every figure below is read from
   the rules and the menu — a measured number or none at all. */
@endphp
<div class="qm-kpi-grid">
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'blue', 'icon' => 'fa-lightbulb', 'label' => t_raw('vendor.upsell.kpi_active'),
        'value' => number_format((int) $active),
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.upsell.kpi_active_meta', [':n' => number_format((int) $pager['total'])]) . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'green', 'icon' => 'fa-hamburger', 'label' => t_raw('vendor.upsell.kpi_covered'),
        'value' => number_format((int) $covered), 'href' => route('vendor.menu'),
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.upsell.kpi_covered_meta', [':n' => number_format((int) $sellable)]) . '</span>'])
    @php /* Coverage only exists when there is something to cover; with no sellable dish the
       figure does not exist and is shown as such rather than as a zero. */
@endphp
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'amber', 'icon' => 'fa-percentage', 'label' => t_raw('vendor.upsell.kpi_coverage'),
        'value' => $coverage !== null ? number_format($coverage, 1) . '%' : '—',
        'meta' => '<span class="qm-kpi-cap">' . ($coverage !== null
            ? t('vendor.upsell.kpi_coverage_meta')
            : t('vendor.upsell.kpi_coverage_meta_none')) . '</span>'])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'rose', 'icon' => 'fa-tags', 'label' => t_raw('vendor.upsell.kpi_offers'),
        'value' => number_format((int) $withOffer),
        'meta' => '<span class="qm-kpi-cap">' . t('vendor.upsell.kpi_offers_meta') . '</span>'])
    @php /* What customers are actually being shown. The vendor cannot change the platform
       switch, so it is reported rather than offered — a page full of rules that nothing reads
       should say so on the page. */
@endphp
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'slate', 'icon' => 'fa-lightbulb', 'label' => t_raw('vendor.upsell.kpi_engine'),
        'value' => $engineOn ? t_raw('vendor.upsell.state_on') : t_raw('vendor.upsell.state_off'),
        'meta' => '<span class="qm-kpi-cap">' . (!$engineOn
            ? t('vendor.upsell.kpi_engine_meta_off')
            : ($active > 0 ? t('vendor.upsell.kpi_engine_meta_rules') : t('vendor.upsell.kpi_engine_meta_auto'))) . '</span>'])
</div>

<div class="qm-card">
    <h2 class="mb-3">{{ t_raw('vendor.upsell.table_heading') }}</h2>
    <div class="table-responsive">
    @php /* The offer column mixes a percentage with a money amount, which are not one scale, so
       that <th> carries no data-sort — the same call Coupons makes on its discount column. */
@endphp
    <table class="qm-table" data-sortable>
        <caption class="visually-hidden">{{ t_raw('vendor.upsell.caption_table') }}</caption>
        <thead><tr><th scope="col" data-sort="text">{{ t_raw('vendor.upsell.col_target') }}</th><th scope="col" data-sort="text">{{ t_raw('vendor.upsell.col_recommendation') }}</th><th scope="col">{{ t_raw('vendor.upsell.col_offer') }}</th><th scope="col" data-sort="number">{{ t_raw('vendor.upsell.col_priority') }}</th><th scope="col" data-sort="text">{{ t_raw('common.active') }}</th><th class="text-end" scope="col">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody>
            @if ($rows)
            @foreach ($rows as $r)
            <tr>
                <td>
                    <div class="qm-tbl-id">
                        <img class="qm-tbl-thumb" src="{{ media($r['target_image'] ?? '', 'assets/client/dish/dish-1.png') }}" alt="" width="44" height="44" loading="lazy">
                        <div class="qm-tbl-id-text"><strong>{!! $r['target_name'] !== null ? e((string) $r['target_name']) : t('vendor.upsell.dish_removed') !!}</strong></div>
                    </div>
                </td>
                <td>
                    <div class="qm-tbl-id">
                        <img class="qm-tbl-thumb" src="{{ media($r['rec_image'] ?? '', 'assets/client/dish/dish-1.png') }}" alt="" width="44" height="44" loading="lazy">
                        <div class="qm-tbl-id-text">
                            <strong>{!! $r['rec_name'] !== null ? e((string) $r['rec_name']) : t('vendor.upsell.dish_removed') !!}</strong>
                            @php /* A rule pointing at a dish that is off the menu is not an error to
                               fix in the database — the engine simply skips it — but the vendor should
                               be able to see why a pairing they wrote never appears. */
@endphp
                            @if ($r['rec_name'] !== null && (int) $r['rec_available'] !== 1)<small>{{ t_raw('vendor.upsell.rec_unavailable') }}</small>@endif
                        </div>
                    </div>
                </td>
                <td>@if ((float) $r['discount_value'] > 0){!! $r['discount_type'] === 'percent'
                        ? e(rtrim(rtrim(number_format((float) $r['discount_value'], 2), '0'), '.')) . '%'
                        : money($r['discount_value']) !!}@else<span class="text-muted">{{ t_raw('vendor.upsell.no_offer') }}</span>@endif</td>
                <td data-sort-value="{{ (int) $r['priority'] }}">{{ (int) $r['priority'] }}</td>
                <td><span class="qm-pill {{ $r['is_active'] ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! $r['is_active'] ? t('common.yes') : t('common.no') !!}</span></td>
                <td class="qm-actions-cell">
                    <button type="button" class="qm-icon-btn" data-bs-toggle="modal" data-bs-target="#upsellModal" data-upsell-edit
                        data-id="{{ (int) $r['id'] }}" data-target="{{ (int) $r['target_item_id'] }}" data-rec="{{ (int) $r['recommendation_id'] }}"
                        data-type="{{ (string) $r['discount_type'] }}" data-value="{{ (string) $r['discount_value'] }}"
                        data-priority="{{ (int) $r['priority'] }}" data-active="{{ (int) $r['is_active'] }}"
                        aria-label="{{ t_raw('vendor.upsell.aria_edit_rule', [':name' => (string) ($r['target_name'] ?? '')]) }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    <form method="post" action="{{ route('vendor.upsell.delete') }}" class="d-inline" data-confirm="{{ t_raw('vendor.upsell.confirm_delete') }}">@csrf<input type="hidden" name="id" value="{{ (int) $r['id'] }}"><button type="submit" class="qm-icon-btn danger" aria-label="{{ t_raw('vendor.upsell.aria_delete_rule', [':name' => (string) ($r['target_name'] ?? '')]) }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button></form>
                </td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', [
                'colspan' => 6,
                'icon'    => 'fa-lightbulb',
                'msg'     => t_raw('vendor.upsell.empty'),
            ])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/vendor/upsell'])
</div>

@php /* ====================================================== RULE MODAL (same shape as the
   Coupons modal — one form, add and edit share it, the id decides which). The populate script
   at the foot of this file is this page's own: app.js's shared bindModal() is registered for a
   fixed list of modal names and adding to that list is an edit to a file this page does not own. */
@endphp
<div class="modal fade" id="upsellModal" tabindex="-1" aria-labelledby="upsell-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('vendor.upsell') }}">
            @csrf
            <input type="hidden" name="id" id="upsell-id">
            <div class="modal-header"><h2 class="modal-title h5" id="upsell-modal-title" data-title-add="{{ t_raw('vendor.upsell.modal_add_title') }}" data-title-edit="{{ t_raw('vendor.upsell.modal_edit_title') }}">{{ t_raw('vendor.upsell.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="qm-form-grid">
                    <div class="mb-3"><label class="form-label" for="upsell-target">{{ t_raw('vendor.upsell.field_target') }}</label>
                        <select id="upsell-target" name="target_item_id" class="form-select" required>
                            <option value="">{{ t_raw('vendor.upsell.choose_dish') }}</option>
                            @foreach ($dishes as $d)
                            <option value="{{ (int) $d['id'] }}">{{ $d['name'] }}{!! (int) $d['is_available'] === 1 ? '' : ' — ' . t_raw('vendor.upsell.opt_unavailable') !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3"><label class="form-label" for="upsell-rec">{{ t_raw('vendor.upsell.field_recommendation') }}</label>
                        <select id="upsell-rec" name="recommendation_id" class="form-select" required>
                            <option value="">{{ t_raw('vendor.upsell.choose_dish') }}</option>
                            @foreach ($dishes as $d)
                            <option value="{{ (int) $d['id'] }}">{{ $d['name'] }} — {{ money($d['price']) }}{!! (int) $d['is_available'] === 1 ? '' : ' — ' . t_raw('vendor.upsell.opt_unavailable') !!}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="qm-form-grid">
                    <div class="mb-3"><label class="form-label" for="upsell-type">{{ t_raw('common.type') }}</label><select id="upsell-type" name="discount_type" class="form-select"><option value="fixed">{{ t_raw('admin.deals.type_fixed') }}</option><option value="percent">{{ t_raw('admin.deals.type_percent') }}</option></select></div>
                    <div class="mb-3"><label class="form-label" for="upsell-value">{{ t_raw('vendor.upsell.field_offer') }}</label><input type="number" step="0.01" min="0" id="upsell-value" name="discount_value" class="form-control" value="0" placeholder="{{ t_raw('common.placeholder_amount') }}"></div>
                    <div class="mb-3"><label class="form-label" for="upsell-priority">{{ t_raw('vendor.upsell.field_priority') }}</label><input type="number" step="1" min="0" id="upsell-priority" name="priority" class="form-control" value="0" placeholder="{{ t_raw('common.placeholder_count') }}"></div>
                </div>
                <label class="qm-check"><input type="checkbox" id="upsell-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.upsell.btn_save_rule') }}</button></div>
        </form>
    </div>
</div>

<script>
/* Populate the shared add/edit modal from the row that opened it, and keep the
   offer input's max in sync with the selected type — a percentage can never
   exceed 100%, a fixed amount can be any positive value (same behaviour as
   Coupons). */
(function () {
    var ids = { 'upsell-id': ['data-id', ''], 'upsell-target': ['data-target', ''], 'upsell-rec': ['data-rec', ''],
                'upsell-type': ['data-type', 'fixed'], 'upsell-value': ['data-value', '0'], 'upsell-priority': ['data-priority', '0'] };
    var typeEl = document.getElementById('upsell-type');
    var valEl = document.getElementById('upsell-value');

    function syncMax() {
        if (!typeEl || !valEl) { return; }
        if (typeEl.value === 'percent') {
            valEl.setAttribute('max', '100');
            if (parseFloat(valEl.value) > 100) { valEl.value = '100'; }
        } else {
            valEl.removeAttribute('max');
        }
    }

    document.querySelectorAll('[data-upsell-add], [data-upsell-edit]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var add = btn.hasAttribute('data-upsell-add');
            var title = document.getElementById('upsell-modal-title');
            if (title) {
                title.textContent = title.getAttribute(add ? 'data-title-add' : 'data-title-edit') || title.textContent;
            }
            Object.keys(ids).forEach(function (elId) {
                var el = document.getElementById(elId);
                if (!el) { return; }
                el.value = add ? ids[elId][1] : (btn.getAttribute(ids[elId][0]) || ids[elId][1]);
            });
            var act = document.getElementById('upsell-active');
            if (act) { act.checked = add ? true : btn.getAttribute('data-active') === '1'; }
            syncMax();
        });
    });

    if (typeEl) { typeEl.addEventListener('change', syncMax); }
    var modal = document.getElementById('upsellModal');
    if (modal) { modal.addEventListener('shown.bs.modal', syncMax); }
    syncMax();
})();
</script>

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