@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → Menu → Import with AI.
 *
 * One page, three states, because "read it again" and "fix a price" are the same journey:
 *
 *   source  pick where the menu is coming from, and read it
 *   review  what was read, EACH ROW MATCHED against the menu this restaurant already has,
 *           so the owner decides per dish whether it is added, updated or left alone
 *   done    what actually changed
 *
 * Nothing is written until the review step is saved. A model reading a photographed menu
 * will get prices and names wrong, and a restaurant that already has "Margherita" must not
 * silently end up with two — so matching is shown, not hidden, and the default for an
 * already-present dish is to leave it alone.
 *
 * @var string $step       source|review|done
 * @var array  $categories existing menu categories (id, name)
 * @var array  $rows       the parsed draft: name, category, price, description,
 *                         status (new|existing), match_id, match_name, match_price
 * @var array  $result     after a save: added, updated, skipped, sections
 * @var array  $allowance  plan ceiling (limit, used, remaining, unlimited, reached, plan_name)
 */
$step       = $step ?? 'source';
$categories = $categories ?? [];
$rows       = $rows ?? [];
$result     = $result ?? [];
// The Google source only exists when the platform has configured it; everything below it is
// only meaningful once this restaurant has actually linked an account.
// Not whitelisted here any more. This list had drifted behind the registry — it did not know
// about csv or location, so arriving at ?src=csv silently opened the paste box instead. The
// entries built below ARE the valid set, and $activeSrc is validated against them once, there.
$activeSrc       = (string) ($activeSrc ?? 'text');
$drafts          = $drafts ?? [];
$draftId         = (int) ($draftId ?? 0);
$draftName       = (string) ($draftName ?? '');
$googleOn        = !empty($googleOn);
$googleConnected = !empty($googleConnected);
$googleLocation  = (string) ($googleLocation ?? '');
$googleSynced    = (string) ($googleSynced ?? '');
$locations       = $locations ?? [];
$allowance  = $allowance ?? ['limit' => 0, 'used' => 0, 'unlimited' => true, 'remaining' => 0, 'reached' => false, 'plan_name' => ''];

$newCount = $existingCount = 0;
foreach ($rows as $r) {
    if (($r['status'] ?? 'new') === 'existing') { $existingCount++; } else { $newCount++; }
}
$sections = array_unique(array_filter(array_map(static fn ($r) => (string) ($r['category'] ?? ''), $rows)));
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">

@if ($step === 'done')
@php /* ---- State 3: what actually changed -------------------------------------------
   The counts are the whole point of this screen: an import that silently did nothing, or
   quietly overwrote 40 prices, is the thing an owner needs to be told about immediately. */
@endphp
<div class="qm-card">
    <div class="qm-empty">
        <i class="fas fa-check-circle d-block" aria-hidden="true"></i>
        <h3>{{ t_raw('vendor.menu.import_done_title') }}</h3>
        <p>{{ t_raw('vendor.menu.import_done_body', [
            ':added'   => number_format((int) ($result['added'] ?? 0)),
            ':updated' => number_format((int) ($result['updated'] ?? 0)),
            ':skipped' => number_format((int) ($result['skipped'] ?? 0)),
        ]) }}</p>
        @php /* Rows the plan ceiling cut are named as such — "left alone" must never be the
                 only word an owner gets for dishes the PLAN dropped. */
@endphp
        @if ((int) ($result['over_limit'] ?? 0) > 0)
        <p>{{ t_raw('vendor.menu.import_done_limit', [
            ':n'     => number_format((int) $result['over_limit']),
            ':plan'  => (string) ($allowance['plan_name'] ?? ''),
            ':limit' => number_format((int) ($allowance['limit'] ?? 0)),
        ]) }} <a href="{{ route('vendor.plans') }}">{{ t_raw('vendor.plans.upgrade_pill') }}</a></p>
        @endif
        <div class="d-flex justify-content-center gap-2 flex-wrap">
            @php /* Newest first, not page 1 of the whole menu. After a 200-dish import the dishes
                     that just arrived were unfindable — they sorted into menu order among everything
                     else, and the owner had no way to check the import's work. */
@endphp
            <a class="qm-btn" href="{{ route('vendor.menu', ['sort' => 'new']) }}">{{ t_raw('vendor.menu.import_done_view') }}</a>
            <a class="qm-btn qm-btn-outline" href="{{ route('vendor.menu.import') }}">{{ t_raw('vendor.menu.import_done_again') }}</a>
        </div>
    </div>
</div>

@elseif ($step === 'map')
@php /* ---- State 2a: name the columns ---------------------------------------------------
   Only reached when the header row did not name the two fields a dish cannot exist without.
   The alternative was guessing, which filed a supplier's food cost as the menu price and
   imported a Spanish header row as a dish — both silently. Our best guess is pre-selected, and
   three real rows sit underneath so the choice can be checked rather than trusted. */
@endphp
@php
$mapping  = $mapping ?? [];
$headers  = $mapping['headers'] ?? [];
$guess    = $mapping['map'] ?? [];
$preview  = $mapping['preview'] ?? [];
$fields   = [
    'name'        => ['label' => t_raw('vendor.menu.col_item'),                   'required' => true],
    'price'       => ['label' => t_raw('common.price'),                           'required' => true],
    'category'    => ['label' => t_raw('vendor.menu.category_label'),             'required' => false],
    'description' => ['label' => t_raw('vendor.menu.import_col_description'),     'required' => false],
    // Offered here too: a file whose header the reader could not place still has an ingredient
    // column, and without this it could only be mapped into the description — which is exactly
    // the folding that lost the link to the library in the first place.
    'ingredients' => ['label' => t_raw('vendor.menu.import_col_ingredients'),     'required' => false],
];
@endphp
<div class="qm-card">
    <div class="qm-card-head">
        <div>
            <h2 class="mb-0">{{ t_raw('vendor.menu.import_map_title') }}</h2>
            <p class="qm-hint mb-0">{{ t_raw('vendor.menu.import_map_sub', [':n' => number_format((int) ($mapping['rows'] ?? 0))]) }}</p>
        </div>
        <a class="qm-btn qm-btn-outline qm-btn-sm" href="{{ route('vendor.menu.import', ['src' => 'csv']) }}">{{ t_raw('vendor.menu.import_start_over') }}</a>
    </div>
    <form method="post" action="{{ route('vendor.menu.import.map') }}">
        @csrf
        <div class="qm-card-body">
            <div class="qm-form-grid qm-form-grid-2">
                @foreach ($fields as $key => $f)
                <div>
                    <label class="form-label" for="map-{{ $key }}">{{ $f['label'] }}</label>
                    <select class="form-select" id="map-{{ $key }}" name="map[{{ $key }}]"{{ $f['required'] ? ' required' : '' }}>
                        @if (!$f['required'])<option value="-1">{{ t_raw('common.none') }}</option>@endif
                        @foreach ($headers as $i => $h)
                        <option value="{{ (int) $i }}"{{ (int) ($guess[$key] ?? -1) === (int) $i ? ' selected' : '' }}>
                            {{ $h !== '' ? $h : t_raw('vendor.menu.import_map_column', [':n' => $i + 1]) }}
                        </option>
                        @endforeach
                    </select>
                </div>
                @endforeach
            </div>
        </div>

        @php /* The file as it actually is. A mapping chosen without seeing the values is the same
                 guess we are here to stop making. */
@endphp
        <div class="table-responsive">
            <table class="qm-table">
                <thead>
                    <tr>@foreach ($headers as $i => $h)
                        <th scope="col">{{ $h !== '' ? $h : t_raw('vendor.menu.import_map_column', [':n' => $i + 1]) }}</th>
                    @endforeach</tr>
                </thead>
                <tbody>
                    @foreach ($preview as $prow)
                    <tr>@foreach ($headers as $i => $h)<td>{{ (string) ($prow[$i] ?? '') }}</td>@endforeach</tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="qm-card-foot">
            <button type="submit" class="qm-btn">{{ t_raw('vendor.menu.import_read_btn') }}</button>
        </div>
    </form>
</div>

@else

@php /* ---- State 1: the source ------------------------------------------------------
   Once a draft exists this card collapses to a single line. Leaving a ten-row textarea
   open above the review table would bury the thing the owner is actually here to check. */
@endphp
@if ($step === 'review')
@php /* Reviewing a saved draft: its name is editable in place, because a draft the owner
         comes back to next week has to say what it is. */
@endphp
<div class="qm-card">
    <div class="qm-card-head">
        <div>
            <h2 class="mb-0">{{ $draftName }}</h2>
            <p class="qm-hint mb-0">{{ t_raw('vendor.menu.import_read_from', [':n' => number_format(count($rows))]) }}</p>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <form method="post" action="{{ route('vendor.menu.import.rename') }}" class="d-flex align-items-center gap-2">
                @csrf
                <input type="hidden" name="draft" value="{{ $draftId }}">
                <input type="text" name="name" class="form-control qm-input-narrow" value="{{ $draftName }}" aria-label="{{ t_raw('vendor.menu.draft_name_label') }}">
                @php /* Full-size, not qm-btn-sm: these three sit on one row beside the rename
                         field, and at the small size they rendered 12px shorter than it and sat
                         6px lower, reading as stranded rather than aligned. */
@endphp
                <button type="submit" class="qm-btn qm-btn-outline">{{ t_raw('vendor.menu.draft_rename_btn') }}</button>
            </form>
            <form method="post" action="{{ route('vendor.menu.import.delete') }}" data-confirm="{{ t_raw('vendor.menu.draft_confirm_delete') }}">
                @csrf
                <input type="hidden" name="draft" value="{{ $draftId }}">
                <button type="submit" class="qm-btn qm-btn-outline"><i class="fas fa-trash-alt me-1" aria-hidden="true"></i> {{ t_raw('vendor.menu.draft_discard_btn') }}</button>
            </form>
            <a class="qm-btn qm-btn-outline" href="{{ route('vendor.menu.import') }}"><i class="fas fa-undo me-1" aria-hidden="true"></i> {{ t_raw('vendor.menu.import_start_over') }}</a>
        </div>
    </div>
</div>
@else


<div class="qm-card">
    <div class="qm-card-head">
        <div>
            <h2 class="mb-0">{{ t_raw('vendor.menu.tab_import') }}</h2>
        </div>
    </div>
    @php /* Vertical tabs, the same .qm-settings grid the settings pages use: pick an input on the
             left, its fields appear beside it. What this replaces was four peer toggles that also
             duplicated the method choice already made on the Dishes page — so the method is gone
             from here, and only the AI inputs remain, because AI is the one method with a choice
             of input at all. */
@endphp
    <div class="qm-card-body">
        @php

        /* The nav is BUILT FROM THE REGISTRY, not hand-listed. It used to be a fixed array of the
           four AI inputs, which is why this page opened on a paste box on installs where AI was
           switched off, why Google existed as a panel but never as a choice, and why the one
           method that always works had no entry at all. A method that cannot run is never drawn.
           Each entry names the input it opens; a method with no inputs is its own entry. */
        $icons = [
            'text'  => 'fa-align-left',
            'file'  => 'fa-file-alt',
            'csv'   => 'fa-file-csv',
            'image' => 'fa-image',
            'url'   => 'fa-link',
        ];
        $entries = [];
        foreach (\App\Services\MenuImportMethod::listed() as $entry) {
            $method = $entry['method'];
            $live   = $entry['available'];
            $inputs = \App\Services\MenuImportMethod::inputs($method);
            if (!$inputs) {
                $entries[$method] = [
                    'label' => \App\Services\MenuImportMethod::label($method),
                    'icon'  => '',
                    'live'  => $live,
                ];
                continue;
            }
            foreach ($inputs as $in) {
                $entries[$in] = [
                    // One input means the entry IS the method, so it carries the method's name.
                    'label' => count($inputs) === 1
                        ? \App\Services\MenuImportMethod::label($method)
                        : t_raw('vendor.menu.import_src_' . $in),
                    'icon'  => $icons[$in] ?? 'fa-file',
                    'live'  => $live,
                ];
            }
        }
        // Land on something that WORKS: an unavailable source in the URL must not open a panel
        // the vendor cannot use, and a greyed entry must never be what the page opens on.
        if (!isset($entries[$activeSrc]) || !$entries[$activeSrc]['live']) {
            $activeSrc = '';
            foreach ($entries as $k => $e) {
                if ($e['live']) { $activeSrc = (string) $k; break; }
            }
        }
@endphp
        <div class="qm-settings">
            <nav class="qm-settings-nav" aria-label="{{ t_raw('vendor.menu.import_source_title') }}">
                @foreach ($entries as $k => $entry)
                @php /* A method the platform switched off stays in the list, greyed and disabled,
                         so the capability is visible rather than merely absent — and `disabled`
                         means it cannot become a dead end. */
@endphp
                <button type="button"{!! $entry['live'] ? ($activeSrc === $k ? ' class="is-active"' : '') : ' class="opacity-50" disabled' !!} data-import-src="{{ $k }}"{!! $entry['live'] ? '' : ' title="' . e(\App\Services\MenuImportMethod::unavailableReason(\App\Services\MenuImportMethod::ofInput((string) $k))) . '"' !!}>{!! $entry['icon'] !== '' ? '<i class="fas ' . e($entry['icon']) . '" aria-hidden="true"></i>' : google_mark(16, 'me-2') !!}{{ $entry['label'] }}</button>
                @endforeach
            </nav>
            <div>
        <form method="post" action="{{ route('vendor.menu.import.read') }}" enctype="multipart/form-data" data-import-form>
            @csrf
            <input type="hidden" name="source" value="{{ $activeSrc }}" data-import-src-value>

            @php /* The name sits at the TOP, once, the way a post title does — not repeated at
                     the foot of every tab. It names the thing being made, so it is asked before
                     the thing, and it does not move or disappear when the source changes.
                     Optional: an unnamed import is called after its source and the date. */
@endphp
            <div class="mb-3{{ $activeSrc === 'google' ? ' d-none' : '' }}" data-import-panel-foot="location text file csv image url">
                <label class="form-label" for="mi-name">{{ t_raw('vendor.menu.draft_name_label') }}</label>
                <input type="text" id="mi-name" name="draft_name" class="form-control" maxlength="120" placeholder="{{ t_raw('vendor.menu.draft_name_placeholder') }}">
            </div>

            @php /* Copying a branch's menu. Shown only to an owner who has somewhere to copy
                     from, and scoped by owner in the query that built this list. */
@endphp
            @if ($locations)
            <div data-import-panel="location"{!! $activeSrc === 'location' ? '' : ' class="d-none"' !!}>
                <label class="form-label" for="mi-location">{{ t_raw('vendor.menu.method_location_sub') }}</label>
                <select class="form-select" id="mi-location" name="menu_location" data-location-pick>
                    @foreach ($locations as $loc)
                    <option value="{{ (int) $loc['id'] }}">{{ (string) $loc['name'] }} — {{ t_raw('vendor.menu.location_dishes', [':n' => number_format((int) $loc['dishes'])]) }}</option>
                    @endforeach
                </select>

                @php /* The second choice: the whole menu, or one section of it. A location has one
                         menu here, so what there is to choose between is how it is divided —
                         bringing only the food to a site that sells no drinks. Repopulated from
                         the map below when the location changes, so it always matches. */
@endphp
                <label class="form-label mt-3" for="mi-location-section">{{ t_raw('vendor.menu.location_section_label') }}</label>
                <select class="form-select" id="mi-location-section" name="menu_section"
                        data-location-sections="{{ json_encode(array_column($locations, 'sections', 'id'), JSON_UNESCAPED_UNICODE) }}"
                        data-all-label="{{ t_raw('vendor.menu.location_section_all') }}"
                        data-dishes-label="{{ t_raw('vendor.menu.location_dishes', [':n' => '%']) }}">
                    <option value="0">{{ t_raw('vendor.menu.location_section_all') }}</option>
                </select>
            </div>
            @endif

            <div data-import-panel="text"{!! $activeSrc === 'text' ? '' : ' class="d-none"' !!}>
                <label class="form-label" for="mi-text">{{ t_raw('vendor.menu.import_text_label') }}</label>
                <textarea id="mi-text" name="menu_text" class="form-control" rows="10" placeholder="{{ t_raw('vendor.menu.import_text_placeholder') }}"></textarea>
            </div>

            @php /* A document and a photograph are not the same job, so they are not one tab.
                     A PDF or Word file is text to be READ; a photo of a menu board needs a model
                     that can SEE. They also accept different types and fail for different
                     reasons, which one vague "Upload a file" hid. */
@endphp
            <div data-import-panel="file"{!! $activeSrc === 'file' ? '' : ' class="d-none"' !!}>
                <label class="form-label" for="mi-file">{{ t_raw('vendor.menu.import_doc_label') }}</label>
                <input type="file" id="mi-file" name="menu_file" data-filepond data-pond-max-size="8"
                       data-pond-accept="application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain,text/csv">
            </div>

            <div data-import-panel="image"{!! $activeSrc === 'image' ? '' : ' class="d-none"' !!}>
                <label class="form-label" for="mi-image">{{ t_raw('vendor.menu.import_image_label') }}</label>
                @php /* The product's one uploader: FilePond over Core\Upload, exactly as the media
                         and avatar fields use it. A bare file input would validate nothing and look
                         like nothing else in the dashboard. */
@endphp
                <input type="file" id="mi-image" name="menu_file" data-filepond data-pond-max-size="8"
                       data-pond-accept="image/*">
            </div>

            @php /* The spreadsheet, reachable here as well as from the Dishes card. It had no URL
                     of its own at all, so the one method that works on every install could only be
                     started from a different page. */
@endphp
            <div data-import-panel="csv"{!! $activeSrc === 'csv' ? '' : ' class="d-none"' !!}>
                <label class="form-label" for="mi-csv">{{ t_raw('vendor.menu.method_csv_sub') }}</label>
                <input type="file" id="mi-csv" name="menu_file" data-filepond data-pond-max-size="8"
                       data-pond-accept="text/csv,text/plain">
            </div>

            <div data-import-panel="url"{!! $activeSrc === 'url' ? '' : ' class="d-none"' !!}>
                <label class="form-label" for="mi-url">{{ t_raw('vendor.menu.import_url_label') }}</label>
                <input type="url" id="mi-url" name="menu_url" class="form-control" placeholder="https://" autocomplete="off" spellcheck="false">
            </div>

            <div class="qm-card-foot{{ $activeSrc === 'google' ? ' d-none' : '' }}" data-import-panel-foot="location text file csv image url">
                @php /* Reading takes seconds, not milliseconds. The button states that itself
                         rather than leaving the owner wondering whether the click registered. */
@endphp
                <button type="submit" class="qm-btn" data-import-read data-busy="{{ t_raw('vendor.menu.import_reading') }}">{{ t_raw('vendor.menu.import_read_btn') }}</button>
            </div>
        </form>

        @php /* Google is a link, not a paste: connect once, choose the location once, then read
                 whenever. It therefore has its own controls rather than the shared Read button —
                 and its own forms, since disconnecting must not submit the text area. */
@endphp
        @if ($googleOn)
        <div data-import-panel="google"{!! $activeSrc === 'google' ? '' : ' class="d-none"' !!}>
            @if (!$googleConnected)
            <div class="qm-empty">
                {!! google_mark(44) !!}
                <h3>{{ t_raw('vendor.menu.google_connect_title') }}</h3>
                <p>{{ t_raw('vendor.menu.google_connect_body') }}</p>
                <a class="qm-btn" href="{{ route('vendor.google.connect') }}">{!! google_mark(18, 'me-2') !!} {{ t_raw('vendor.menu.google_connect_btn') }}</a>
            </div>
            @else
            @php /* Plain, not tinted. `is-highlight` paints a row with 7% of the brand colour —
                     it marks the option you have CHOSEN among several, which is not what a
                     connected account is. Stating a fact in the selection colour made this the
                     loudest thing on the page. Constrained to part of the row as well: a single
                     line of status stretched across the full panel put its own status pill a
                     thousand pixels from the name it describes. */
@endphp
            <div class="qm-switch-row is-static mb-0">
                <span>
                    <strong>{!! $googleLocation !== '' ? e($googleLocation) : t('vendor.menu.google_no_location') !!}</strong>
                    <small>{!! $googleSynced !== '' ? t('vendor.menu.google_last_synced', [':when' => fmt_datetime($googleSynced)]) : t('vendor.menu.google_never_synced') !!}</small>
                </span>
                @php /* flex-grow-0, because `.qm-switch-row > span` is `flex: 1 1 auto` (app.css:2768)
                         — written for the label span that should fill the row, and the status tag is
                         a span too, so it grew to 463px for the word "Connected". A tag sizes to its
                         text or it is not a tag. */
@endphp
                <span class="qm-pill qm-pill-green flex-grow-0">{{ t_raw('admin.settings.state_ai_connected') }}</span>
            </div>
            <div class="d-flex justify-content-end gap-2 flex-wrap mt-3">
                <form method="post" action="{{ route('vendor.google.disconnect') }}">@csrf<button type="submit" class="qm-btn qm-btn-outline">{{ t_raw('vendor.menu.google_disconnect_btn') }}</button></form>
                <a class="qm-btn qm-btn-outline" href="{{ route('vendor.google.locations') }}">{{ t_raw('vendor.menu.google_change_location') }}</a>
                @if ($googleLocation !== '')
                <form method="post" action="{{ route('vendor.google.sync') }}">@csrf<button type="submit" class="qm-btn"><i class="fas fa-sync me-1" aria-hidden="true"></i> {{ t_raw('vendor.menu.google_read_btn') }}</button></form>
                @endif
            </div>
            @endif
        </div>
        @endif
            </div>@php /* /panel column */
@endphp
        </div>@php /* /.qm-settings */
@endphp
    </div>
</div>
@endif

@if ($step === 'source')
@php /* The saved menus, on the page whose badge counts them. They used to be displayed on
         Dishes while the Import tab carried the number — so the count and the thing it counted
         were one click apart. Export sits with them: the file this produces is the file the
         spreadsheet import reads back. */
@endphp
@partial('menu-transfer', ['drafts' => $drafts, 'exportQs' => (string) ($exportQs ?? ''), 'methodsOnly' => false, 'listOnly' => true])
@endif

@if ($step === 'review' && $rows)
@php /* ---- State 2: what was found, against what is already there --------------------- */
@endphp
<div class="qm-card">
    <div class="qm-card-head">
        <div>
            <h2 class="mb-0">{{ t_raw('vendor.menu.import_found_title') }}</h2>
            <p class="qm-hint mb-0">{{ t_raw('vendor.menu.import_found_sub') }}</p>
        </div>
    </div>
    <div class="qm-card-body">
        @php /* THE CEILING CHOICE, made before any row is read: this draft holds more new
                 dishes than the plan has room for, so the owner picks a path now — carry on
                 (the import fills the remaining allowance and leaves the rest) or upgrade.
                 Continue uses the product's own dismiss control; the save button below stays
                 the only thing that writes. */
@endphp
        @php $importOverAdds = (int) ($importOverAdds ?? 0);
@endphp
        @if ($importOverAdds > 0)
        <div class="alert alert-warning d-flex align-items-center gap-3 flex-wrap" data-qm-dismiss="menu-import-over-{{ (int) $draftId }}">
            <i class="fas fa-layer-group" aria-hidden="true"></i>
            <span class="flex-grow-1">{{ t_raw('vendor.menu.import_over_banner', [
                ':adds'      => number_format($importOverAdds),
                ':plan'      => (string) $allowance['plan_name'],
                ':remaining' => number_format((int) $allowance['remaining']),
            ]) }}</span>
            <a class="qm-btn qm-btn-sm" href="{{ route('vendor.plans') }}">{{ t_raw('vendor.plans.upgrade_pill') }}</a>
            <button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-qm-dismiss-btn>
                {!! (int) $allowance['remaining'] > 0
                    ? t('vendor.menu.import_over_continue', [':n' => number_format((int) $allowance['remaining'])])
                    : t('vendor.menu.import_over_continue_none') !!}
            </button>
        </div>
        @endif
        @php /* The fact strip the item-analytics page uses. Four numbers answer the question
                 the owner asks before reading a single row: how much of this is actually new. */
@endphp
        <div class="qm-stat-row">
            <div class="qm-stat-fact">
                <div class="qm-kpi-label">{{ t_raw('vendor.menu.import_stat_found') }}</div>
                <strong>{{ number_format(count($rows)) }}</strong>
            </div>
            <div class="qm-stat-fact">
                <div class="qm-kpi-label">{{ t_raw('vendor.menu.import_stat_new') }}</div>
                <strong>{{ number_format($newCount) }}</strong>
            </div>
            <div class="qm-stat-fact">
                <div class="qm-kpi-label">{{ t_raw('vendor.menu.import_stat_existing') }}</div>
                <strong>{{ number_format($existingCount) }}</strong>
            </div>
            <div class="qm-stat-fact">
                <div class="qm-kpi-label">{{ t_raw('vendor.menu.import_stat_sections') }}</div>
                <strong>{{ number_format(count($sections)) }}</strong>
            </div>
        </div>
    </div>
</div>

<div class="qm-card">
    <div class="qm-ops-head">
        <div>
            <h2 class="mb-0">{{ t_raw('vendor.menu.import_review_title') }}</h2>
            @php /* When a menu is bigger than one screen, say so here rather than letting the
                     owner discover it by saving and finding more waiting. */
@endphp
            <p class="qm-ops-sub">@if ((int) ($rowsTotal ?? 0) > count($rows)){{ t_raw('vendor.menu.import_review_page', [
                ':n'     => number_format(count($rows)),
                ':total' => number_format((int) $rowsTotal),
            ]) }}@else{{ t_raw('vendor.menu.import_review_sub') }}@endif</p>
        </div>
        @php /* The template, not the rendered sentence, so the live count can re-substitute it
                 without the JS having to know the phrasing of any language. */
@endphp
        <span class="qm-pill qm-pill-blue" data-import-count data-tpl="{{ t_raw('vendor.menu.import_will_change') }}"></span>
    </div>
    <form method="post" action="{{ route('vendor.menu.import.apply') }}">
        @csrf
        @php /* Which draft this save belongs to, so it can be marked applied with what it
                 changed rather than silently vanishing. */
@endphp
        <input type="hidden" name="draft" value="{{ $draftId }}">
        <div class="table-responsive">
            <table class="qm-table">
                <thead>
                    <tr>
                        <th>{{ t_raw('vendor.menu.col_item') }}</th>
                        <th>{{ t_raw('vendor.menu.category_label') }}</th>
                        <th>{{ t_raw('common.price') }}</th>
                        <th>{{ t_raw('vendor.menu.import_col_description') }}</th>
                        <th>{{ t_raw('vendor.menu.import_col_ingredients') }}</th>
                        <th>{{ t_raw('vendor.menu.import_col_status') }}</th>
                        <th>{{ t_raw('vendor.menu.import_col_action') }}</th>
                        <th class="text-end">{{ t_raw('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rows as $i => $row)
@php $exists = ($row['status'] ?? 'new') === 'existing'; @endphp
                    <tr>
                        <td><input type="text" name="row[{{ (int) $i }}][name]" class="form-control" value="{{ (string) ($row['name'] ?? '') }}"></td>
                        <td>
                            @php /* The model proposes a section; the owner files it. A section this
                                     restaurant does not have yet is offered as "new" and created on
                                     save, so the menu does not have to be reorganised by hand first. */
@endphp
                            @php $choice = \App\Services\MenuImport::categoryChoice((string) ($row['category'] ?? ''), $categories);
@endphp
                            <select name="row[{{ (int) $i }}][category]" class="form-select">
                                @foreach ($categories as $c)
                                <option value="{{ (int) $c['id'] }}"{{ $choice['id'] === (int) $c['id'] ? ' selected' : '' }}>{{ (string) $c['name'] }}</option>
                                @endforeach
                                @if ($choice['is_new'])
                                <option value="new:{{ (string) $row['category'] }}" selected>{{ (string) $row['category'] }} — {{ t_raw('vendor.menu.import_new_category') }}</option>
                                @endif
                            </select>
                        </td>
                        <td>
                            @php /* An empty price means the source did not state one — NOT that the dish is
                                     free. It is left empty and flagged here, and a row still empty on save is
                                     skipped rather than published at zero. */
@endphp
                            @php $noPrice = trim((string) ($row['price'] ?? '')) === '';
@endphp
                            <input type="text" inputmode="decimal" name="row[{{ (int) $i }}][price]" class="form-control qm-input-narrow" value="{{ (string) ($row['price'] ?? '') }}">
                            @if ($noPrice)
                            <span class="qm-pill qm-pill-amber">{{ t_raw('vendor.menu.import_price_missing') }}</span>
                            @endif
                            @php /* What it costs today, when that is not what was read. Without this the
                                     owner cannot tell an intended price rise from a misread digit. */
@endphp
                            @if ($exists && ($row['match_price'] ?? '') !== '' && (string) $row['match_price'] !== (string) ($row['price'] ?? ''))
                            <span class="qm-hint">{{ t_raw('vendor.menu.import_price_now', [':price' => money((float) $row['match_price'])]) }}</span>
                            @endif
                        </td>
                        <td><input type="text" name="row[{{ (int) $i }}][description]" class="form-control" value="{{ (string) ($row['description'] ?? '') }}"></td>
                        @php /* The ingredient line, and what the library could not place. A term
                                 with no entry is DROPPED on apply — the admin owns that vocabulary
                                 and the importer will not invent one — so it is named here rather
                                 than lost between the file and the menu. Editing the box to a term
                                 the library knows is enough to rescue it. */
@endphp
                        <td>
                            @php $ingLine = (string) ($row['ingredients'] ?? '');
@endphp
                            <input type="text" name="row[{{ (int) $i }}][ingredients]" class="form-control" value="{{ $ingLine }}">
                            @php $ingMatch = \App\Services\MenuImport::matchIngredients($ingLine);
@endphp
                            @if ($ingMatch['unmatched'])
                            @php /* Raw, like every other t() argument: t() substitutes first and escapes the
                                     whole string afterwards, so pre-escaping the list escaped it twice — a term
                                     read out of the file as "salt & pepper" printed as "salt &amp; pepper". */
@endphp
                            <span class="qm-hint">{{ t_raw('vendor.menu.import_ing_unmatched', [':list' => implode(', ', $ingMatch['unmatched'])]) }}</span>
                            @endif
                        </td>
                        <td>
                            @if (($row['status'] ?? '') === 'duplicate')
                            @php /* The same dish appears earlier in this very file. Saying which row
                                     it repeats is the difference between a warning and a puzzle. */
@endphp
                            <span class="qm-pill qm-pill-amber">{{ t_raw('vendor.menu.import_status_duplicate', [':n' => (int) ($row['duplicate'] ?? 0)]) }}</span>
                            @elseif ($exists)
                            <span class="qm-pill qm-pill-amber">{{ t_raw('vendor.menu.import_status_existing') }}</span>
                            @else
                            <span class="qm-pill qm-pill-green">{{ t_raw('vendor.menu.import_status_new') }}</span>
                            @endif
                        </td>
                        <td>
                            @php /* One control per row, and only the choices that make sense for it:
                                     a dish that is not on the menu cannot be updated, and a dish that
                                     is defaults to being LEFT ALONE — an import must never overwrite a
                                     price the owner did not look at. */
@endphp
                            <input type="hidden" name="row[{{ (int) $i }}][match_id]" value="{{ (int) ($row['match_id'] ?? 0) }}">
                            @php /* Carried through the review only when the file actually supplied
                                     them, so the round trip keeps the cost that drives every margin
                                     figure — and the form stays as small as the ceiling allows. */
@endphp
                            @if (isset($row['cost']))<input type="hidden" name="row[{{ (int) $i }}][cost]" value="{{ (string) $row['cost'] }}">@endif
                            @if (isset($row['available']))<input type="hidden" name="row[{{ (int) $i }}][available]" value="{{ (int) $row['available'] }}">@endif
                            <select name="row[{{ (int) $i }}][action]" class="form-select" data-import-action>
                                @if (($row['status'] ?? '') === 'duplicate')
                                @php /* Defaults to leaving it alone: adding it would put the dish on the
                                         menu twice, which is the outcome this flag exists to prevent. */
@endphp
                                <option value="skip" selected>{{ t_raw('vendor.menu.import_act_skip') }}</option>
                                <option value="add">{{ t_raw('vendor.menu.import_act_add') }}</option>
                                @elseif ($exists)
                                <option value="skip" selected>{{ t_raw('vendor.menu.import_act_skip') }}</option>
                                <option value="update">{{ t_raw('vendor.menu.import_act_update') }}</option>
                                @else
                                <option value="add" selected>{{ t_raw('vendor.menu.import_act_add') }}</option>
                                <option value="skip">{{ t_raw('vendor.menu.import_act_skip') }}</option>
                                @endif
                            </select>
                        </td>
                        <td class="qm-actions-cell">
                            @php /* The dish this row matched, opened in its own tab. "Update the one I
                                     have" is a decision about a real dish, and until now the only thing
                                     shown about that dish was its name and its price — not its photo,
                                     its section, its options or whether it is even switched on.

                                     A new tab is the point: this form holds unsaved edits to every row
                                     on the page, and navigating away throws them away. A row that is not
                                     on the menu yet has nothing to open — the dish is created on save,
                                     and the archive links to what each import produced. */
@endphp
                            @if ($exists && (int) ($row['match_id'] ?? 0) > 0)
                            <a class="qm-icon-btn" href="{{ url('/vendor/menu/item/' . (int) $row['match_id'] . '/edit') }}" target="_blank" rel="noopener" aria-label="{{ t_raw('common.edit') }}" title="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></a>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @php /* The ceiling is stated where the decision is made — but only once it is
                 CLOSE (five slots or fewer): a plan with plenty of room has nothing to
                 warn about, and a permanent notice reads as nagging. */
@endphp
        @if (!$allowance['unlimited'] && (int) $allowance['remaining'] <= 5)
        <p class="qm-hint">{{ t_raw('vendor.menu.import_allowance', [
            ':remaining' => number_format((int) $allowance['remaining']),
            ':plan'      => (string) $allowance['plan_name'],
        ]) }}</p>
        @endif
        <div class="qm-card-foot">
            <button type="submit" class="qm-btn"><i class="fas fa-file-import me-1" aria-hidden="true"></i> {{ t_raw('vendor.menu.import_apply_btn') }}</button>
        </div>
    </form>
</div>
@endif
@endif

<script>
(function () {
  'use strict';

  // Source picker: the segment sets which panel shows and what the form says it is
  // submitting, so the server never has to guess which of the three fields was meant.
  var seg = document.querySelectorAll('[data-import-src]');
  var field = document.querySelector('[data-import-src-value]');

  // Only the VISIBLE panel's file input may submit.
  //
  // The document, photo and spreadsheet panels each carry an input called menu_file, all inside
  // one form. A browser posts every one of them, and PHP keeps the LAST — which is the hidden,
  // empty spreadsheet field. So choosing a photo sent an empty upload and the page answered
  // "Choose a file first", and the same was true of a document. Spreadsheet import worked only
  // because it happens to sit last in the markup, which is also why the tests never caught it:
  // they only ever drove CSV. A disabled control is not submitted at all, so disabling the
  // inactive ones leaves exactly one menu_file in the request.
  function onlyActiveFileInput(active) {
    Array.prototype.forEach.call(document.querySelectorAll('[data-import-panel]'), function (panel) {
      var mine = panel.getAttribute('data-import-panel') === active;
      Array.prototype.forEach.call(panel.querySelectorAll('input[type="file"]'), function (input) {
        input.disabled = !mine;
      });
    });
  }
  onlyActiveFileInput((field && field.value) || '');
  Array.prototype.forEach.call(seg, function (btn) {
    // These are <button>s in a vertical nav now, so the event is click. They were radios for
    // one iteration, and the listener stayed on change — which meant the nav rendered
    // correctly and silently did nothing. Bind both, so neither shape can break it again.
    var evt = btn.tagName === 'INPUT' ? 'change' : 'click';
    btn.addEventListener(evt, function () {
      var pick = btn.getAttribute('data-import-src');
      Array.prototype.forEach.call(seg, function (b) {
        // The nav marks its own selection; qm-tabs.js does not drive these (its panels are
        // .qm-settings-panel by id, and these are [data-import-panel] by name).
        b.classList.toggle('is-active', b === btn);
        var row = b.closest('[data-import-choice]');
        if (row) { row.classList.toggle('is-highlight', b === btn); }
      });
      Array.prototype.forEach.call(document.querySelectorAll('[data-import-panel]'), function (p) {
        p.classList.toggle('d-none', p.getAttribute('data-import-panel') !== pick);
      });
      onlyActiveFileInput(pick);
      // The shared Read button belongs to the three sources that post the form. Google is a
      // stored link with its own actions, so the button hides rather than sitting there
      // promising to read a textarea nobody filled in.
      Array.prototype.forEach.call(document.querySelectorAll('[data-import-panel-foot]'), function (f) {
        f.classList.toggle('d-none', f.getAttribute('data-import-panel-foot').split(' ').indexOf(pick) === -1);
      });
      if (field) { field.value = pick; }

      // Put the choice in the URL. The nav switched panels in JS only, so the address stayed
      // /vendor/menu/import with no ?src= — and a refresh, a back button, or a bookmark all
      // dropped the vendor back on the paste box whatever they had picked. replaceState rather
      // than pushState: choosing a source is not a place you should have to press Back out of.
      if (window.history && window.history.replaceState) {
        var url = new URL(window.location.href);
        url.searchParams.set('src', pick);
        window.history.replaceState(null, '', url.toString());
      }
    });
  });

  // The section list belongs to the location, so it is rebuilt whenever the location changes.
  // A stale list would offer a section that is not there, and the import would silently return
  // nothing.
  var locPick = document.querySelector('[data-location-pick]');
  var secPick = document.getElementById('mi-location-section');
  if (locPick && secPick) {
    var byLoc = {};
    try { byLoc = JSON.parse(secPick.getAttribute('data-location-sections') || '{}'); } catch (e) { byLoc = {}; }
    var allLabel = secPick.getAttribute('data-all-label') || '';
    var tpl = secPick.getAttribute('data-dishes-label') || '%';

    function fillSections() {
      var list = byLoc[locPick.value] || [];
      secPick.innerHTML = '';
      var first = document.createElement('option');
      first.value = '0';
      first.textContent = allLabel;
      secPick.appendChild(first);
      list.forEach(function (s) {
        var o = document.createElement('option');
        o.value = String(s.id);
        o.textContent = s.name + ' — ' + tpl.replace('%', s.dishes);
        secPick.appendChild(o);
      });
    }
    locPick.addEventListener('change', fillSections);
    fillSections();
  }

  // Reading is a network round-trip to a model. Say so, and block a second submit.
  var readBtn = document.querySelector('[data-import-read]');
  var readForm = document.querySelector('[data-import-form]');
  if (readBtn && readForm) {
    readForm.addEventListener('submit', function () {
      readBtn.disabled = true;
      readBtn.classList.add('is-loading');
      readBtn.textContent = readBtn.getAttribute('data-busy');
    });
  }

  // Review list: the pill states what the button is about to do, from the row actions
  // themselves — so the number can never disagree with the table above it.
  var actions = document.querySelectorAll('[data-import-action]');
  var out = document.querySelector('[data-import-count]');
  if (!actions.length || !out) { return; }

  function sync() {
    var add = 0, upd = 0;
    Array.prototype.forEach.call(actions, function (s) {
      if (s.value === 'add') { add++; } else if (s.value === 'update') { upd++; }
    });
    out.textContent = out.getAttribute('data-tpl').replace(':add', add).replace(':update', upd);
  }
  Array.prototype.forEach.call(actions, function (s) { s.addEventListener('change', sync); });
  sync();
})();
</script>

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