@extends('layouts.dashboard')

@section('content')
@php

/**
 * Admin Taxonomy manager — tabbed CRUD over the shared building blocks.
 *
 * One view serves two screens. Classifications holds the vocabularies a diner browses by
 * (cuisines, food types, store types and the groups that organise them); Menu holds the ones
 * that describe a dish (ingredients, their categories, allergens, attributes) and so mirrors
 * the vendor's own Menu section. The controller decides which four tabs a screen shows, so the
 * nav below is built from `$screenTabs` rather than being listed here twice.
 *
 * @var string $activeTab       one of $screenTabs
 * @var array  $screenTabs      the four tab keys this screen shows, in order
 * @var string $screenBase      '/admin/taxonomy' or '/admin/menu'
 * @var array  $ingredientsBy   ['proteins' => [rows], ...] (grouped, all)
 * @var array  $ingredientCats  slug => label, from `#__ingredient_categories`
 * @var array  $cuisines        cuisine rows (with restaurant_count)
 * @var array  $tagsByGroup     ['store_type' => [rows], 'dish_type' => [rows], ...]
 * @var array  $tagGroups       slug => label, from `#__tag_groups`
 * @var array  $categoryRows    ingredient-category rows (+ label, usage)
 * @var array  $groupRows       tag-group rows (+ label, usage)
 */
$tabs = [
    'ingredients' => t_raw('admin.taxonomy.tab_ingredients'),
    'cuisines'    => t_raw('admin.taxonomy.tab_cuisines'),
    'food-types'  => t_raw('admin.taxonomy.tab_food_types'),
    'store-types' => t_raw('admin.taxonomy.tab_store_types'),
    'categories'  => t_raw('admin.taxonomy.tab_categories'),
    'groups'      => t_raw('admin.taxonomy.tab_groups'),
    'allergens'   => t_raw('admin.taxonomy.tab_allergens'),
    'attributes'  => t_raw('admin.taxonomy.tab_attributes'),
];

/* The two dimension tabs are the same screen twice — a list of slug + label + how many rows it
   classifies. Rendered from one description rather than two near-identical blocks, which is what
   let the four list tabs above drift apart in the first place. */
$dimensionTabs = [
    'categories' => [
        'rows' => $categoryRows ?? [], 'heading' => 'admin.taxonomy.heading_categories',
        'add' => 'admin.taxonomy.btn_add_category', 'empty' => 'admin.taxonomy.empty_categories',
        'confirm' => 'admin.taxonomy.confirm_delete_category', 'route' => 'category', 'icon' => 'fa-layer-group',
    ],
    'attributes' => [
        'rows' => $attributeRows ?? [], 'heading' => 'admin.taxonomy.tab_attributes',
        'add' => 'admin.taxonomy.btn_add_attribute', 'empty' => 'admin.taxonomy.empty_attributes',
        'confirm' => 'admin.taxonomy.confirm_delete_attribute', 'route' => 'attribute', 'icon' => 'fa-star',
    ],
    'allergens' => [
        'rows' => $allergenRows ?? [], 'heading' => 'admin.taxonomy.tab_allergens',
        'add' => 'admin.taxonomy.btn_add_allergen', 'empty' => 'admin.taxonomy.empty_allergens',
        'confirm' => 'admin.taxonomy.confirm_delete_allergen', 'route' => 'allergen', 'icon' => 'fa-exclamation-triangle',
    ],
    'groups' => [
        'rows' => $groupRows ?? [], 'heading' => 'admin.taxonomy.heading_groups',
        'add' => 'admin.taxonomy.btn_add_group', 'empty' => 'admin.taxonomy.empty_groups',
        'confirm' => 'admin.taxonomy.confirm_delete_group', 'route' => 'group', 'icon' => 'fa-tags',
    ],
];

// Food-type groups exclude store_type (that has its own tab).
$dishGroups = array_filter($tagGroups, static fn ($k) => $k !== 'store_type', ARRAY_FILTER_USE_KEY);

// Tags for the two tag-driven tabs.
$storeTags = $tagsByGroup['store_type'] ?? [];
$dishTags  = [];
foreach ($tagsByGroup as $g => $rows) {
    if ($g === 'store_type') { continue; }
    foreach ($rows as $row) { $dishTags[] = $row; }
}

// Resolve a taxonomy row's artwork dynamically, so every row shows its OWN:
//   1) an image path the admin chose (media library or a shipped asset), else
//   2) a glossy 3D image keyed by slug (store types + dish types ship these), else
//   3) the seeded FontAwesome glyph.
// public_path(), not dirname(__DIR__, 3): assets live under public/, and the app root has no
// assets/ at all. This screen was the one place using the latter, so $has3d was always empty
// and the admin list fell through to glyphs while the storefront - which globs public_path()
// in cuisine-card, side-panel and hero-cuisine - showed the 3D artwork for the same rows.
$has3d = [];
foreach (glob(public_path() . '/assets/client/icons3d/*.png') ?: [] as $p) { $has3d[basename($p, '.png')] = true; }

// The "Font Awesome" source draws from the one shared library — see partials/icon-library.php.
// This screen's own curated list was folded into FieldOptions::ICONS so there is a single
// place to add a glyph, and every picker in the product gains it at once.

$renderIcon = static function (?string $icon, string $slug = '') use ($has3d, $__env): string {
    // 1) An explicit choice the admin made — an uploaded image OR a chosen built-in
    //    library icon (a real path, never a FontAwesome class). This wins over the
    //    automatic slug default so the picked icon/image is always honoured.
    if ($icon !== null && $icon !== '' && !str_starts_with($icon, 'fa-')) {
        if (preg_match('#/(icons3d|svg|flags)/#', $icon)) {
            return '<span class="qm-tbl-ico"><img src="' . e(media($icon)) . '" alt="" width="34" height="34" loading="lazy"></span>';
        }
        return '<img class="qm-tbl-thumb" src="' . e(media($icon)) . '" alt="" width="44" height="44" loading="lazy">';
    }
    // 2) No explicit image: a glossy 3D icon keyed by the row's own slug, when we ship one.
    if ($slug !== '' && !empty($has3d[$slug])) {
        return '<span class="qm-tbl-ico"><img src="' . e(asset('assets/client/icons3d/' . $slug . '.png')) . '" alt="" width="34" height="34" loading="lazy"></span>';
    }
    // 3) The seeded FontAwesome glyph.
    if ($icon !== null && $icon !== '' && str_starts_with($icon, 'fa-')) {
        return '<span class="qm-tbl-ico"><i class="fas ' . e($icon) . '" aria-hidden="true"></i></span>';
    }
    return '<span class="qm-tbl-ico"><i class="fas fa-utensils" aria-hidden="true"></i></span>';
};

// The effective icon VALUE that $renderIcon displays, so the edit picker opens on
// exactly what's shown next to the title: a glossy 3D icon keyed by slug wins over a
// seeded FontAwesome fallback (otherwise "Pizza" shows a 3D pizza but edits to fa-pizza-slice).
$resolveIcon = static function (?string $icon, string $slug = '') use ($has3d, $__env): string {
    if ($icon !== null && $icon !== '' && !str_starts_with($icon, 'fa-')) {
        return $icon; // an explicit image / library path the admin chose
    }
    if ($slug !== '' && !empty($has3d[$slug])) {
        return 'assets/client/icons3d/' . $slug . '.png'; // glossy 3D icon keyed by slug
    }
    return (string) ($icon ?? ''); // the seeded FontAwesome glyph (or nothing)
};

$totalIngredients = 0;
foreach ($ingredientsBy as $rows) { $totalIngredients += count($rows); }

/*
 * Paging. Only one tab renders at a time, so the four lists share the single ?page /
 * ?per_page pair without ever competing for it — a tab is one list to the reader, and one
 * page size to the page. The controller hands over the complete taxonomy (it is small and
 * every tab needs its own totals for the tab badges), so the page is a slice taken here.
 *
 * Ingredients are one list presented under category headings, not eight lists: they are
 * flattened, sliced, then regrouped, so a page can end mid-category and the footer speaks
 * for the whole library rather than for whichever heading it happens to sit under.
 */
$flatIngredients = [];
foreach ($ingredientsBy as $catKey => $rows) {
    foreach ($rows as $row) { $flatIngredients[] = [$catKey, $row]; }
}
/*
 * "In use: 6" on a dimension row is also the number that REFUSES its delete, so it has to be able
 * to answer which six. Each count links here with its slug, and the list narrows to it — applied
 * before the pager so the footer counts the filtered set, not the whole library. Clearing it is
 * the sidebar entry itself, which carries no query.
 */
$catFilter = trim((string) (is_scalar($c = request()->query('cat')) ? $c : ''));
$grpFilter = trim((string) (is_scalar($g = request()->query('grp')) ? $g : ''));
if ($catFilter !== '') {
    $flatIngredients = array_values(array_filter($flatIngredients, static fn ($p) => $p[0] === $catFilter));
}
if ($grpFilter !== '') {
    $dishTags  = array_values(array_filter($dishTags, static fn ($r) => (string) ($r['group'] ?? '') === $grpFilter));
    $storeTags = array_values(array_filter($storeTags, static fn ($r) => (string) ($r['group'] ?? '') === $grpFilter));
}

$pager = match ($activeTab) {
    'cuisines'    => paginate(count($cuisines), 20),
    'food-types'  => paginate(count($dishTags), 20),
    'store-types' => paginate(count($storeTags), 20),
    default       => paginate(count($flatIngredients), 20),
};
$cuisines       = collect($cuisines)->all();
$cuisinesPage   = array_slice($cuisines, $pager['offset'], $pager['perPage']);
$dishTagsPage   = array_slice($dishTags, $pager['offset'], $pager['perPage']);
$storeTagsPage  = array_slice($storeTags, $pager['offset'], $pager['perPage']);
$ingredientPage = [];
foreach (array_slice($flatIngredients, $pager['offset'], $pager['perPage']) as [$catKey, $row]) {
    $ingredientPage[$catKey][] = $row;
}
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php
/*
 * Six flat tabs hid the point: the last two do not sit BESIDE the first four, they classify them.
 * The settings shell says so — one labelled group for the lists, one for the dimensions that group
 * them — and it has room for a seventh entry, which a horizontal tab row does not.
 *
 * These stay LINKS rather than the settings shell's usual data-panel buttons: each tab is a
 * server-rendered page with its own ?page slice, so switching one has to be a request. Only the
 * layout is borrowed, not the client-side panel switching.
 */
$counts = [
    'ingredients' => $totalIngredients,
    'cuisines'    => count($cuisines),
    'food-types'  => count($dishTags),
    'store-types' => count($storeTags),
    'categories'  => count($categoryRows ?? []),
                'allergens'   => count($allergenRows ?? []),
                'attributes'  => count($attributeRows ?? []),
    'groups'      => count($groupRows ?? []),
];
$navIcons = [
    'ingredients' => 'fa-carrot', 'cuisines' => 'fa-globe',
    'food-types'  => 'fa-utensils', 'store-types' => 'fa-store',
    'categories'  => 'fa-layer-group', 'groups' => 'fa-tags',
    'allergens'   => 'fa-exclamation-triangle', 'attributes' => 'fa-star',
];
@endphp
<div class="qm-settings">
    <nav class="qm-settings-nav" aria-label="{{ t_raw('admin.taxonomy.sections_aria') }}">
        @foreach ($screenTabs as $key)
        <a href="{{ url($screenBase . '?tab=' . $key) }}" class="{{ $activeTab === $key ? 'is-active' : '' }}"{!! $activeTab === $key ? ' aria-current="page"' : '' !!}>
            <i class="fas {{ $navIcons[$key] }}" aria-hidden="true"></i>{{ $tabs[$key] }}
            <span class="qm-tab-count">{{ (int) ($counts[$key] ?? 0) }}</span>
        </a>
        @endforeach
    </nav>

    <div class="qm-settings-body">
    <div class="qm-card mb-0">

    @php /* =============================================== INGREDIENTS */
@endphp
    @if ($activeTab === 'ingredients')
    <div class="qm-ops-head">
        <h2 class="mb-0">{{ t_raw('admin.taxonomy.heading_ingredients') }}{!! $catFilter !== '' ? ' — ' . e($ingredientCats[$catFilter] ?? $catFilter) : '' !!}</h2>
        <div class="d-flex align-items-center flex-wrap gap-2">
            @php /* One input for the whole tab even though the list is drawn as several tables:
                     the categories are headings over ONE library, and a row only ever moves inside
                     its own heading because that is where its <tbody> ends. */
@endphp
            @if (count($flatIngredients) > 1)
            <form method="post" action="{{ route('admin.taxonomy.ingredient.order') }}" class="d-inline">
                @csrf
                <input type="hidden" name="order" value="{{ implode(',', array_map(static fn ($p) => (int) $p[1]['id'], $flatIngredients)) }}" data-order-input>
                <button type="submit" class="qm-btn qm-btn-outline qm-btn-sm" data-order-save disabled><i class="fas fa-save me-1" aria-hidden="true"></i> {{ t_raw('common.save_order') }}</button>
            </form>
            @endif
            <button type="button" class="qm-btn qm-btn-sm" data-bs-toggle="modal" data-bs-target="#ingModal" data-ing-add>{{ t_raw('admin.taxonomy.btn_add_ingredient') }}</button>
        </div>
    </div>

    @php /* The category chips that stood here said the same thing three times over: the Ingredient
             categories tab now carries every count as a linked "In use", and the list below is
             already broken by category heading, each with its own count. */
@endphp
    @if ($totalIngredients > 0)
        @php /* The heading counts the whole category, while the
                 footer counts the page, so a category split across two pages still says how
                 big it is. */
@endphp
        @php /* The column header is printed once, above the first category: the groups are
                 sections of one list with identical columns, so repeating the header at every
                 heading reads as several tables rather than one. */
@endphp
        @php $firstGroup = true;
@endphp
        @foreach ($ingredientPage as $catKey => $rows)
        <div class="qm-cat-group-head">
            <h3>{{ $ingredientCats[$catKey] ?? ucfirst((string) $catKey) }}</h3>
            <span class="qm-count">@php $n = count($ingredientsBy[$catKey] ?? []);
@endphp{!! $n === 1 ? t('admin.taxonomy.count_item_one', [':n' => $n]) : t('admin.taxonomy.count_item_many', [':n' => $n]) !!}</span>
        </div>
        <div class="table-responsive">
        <table class="qm-table">
            @if ($firstGroup)
            <thead><tr><th class="qm-drag-col"><span class="qm-h1-sr">{{ t_raw('common.reorder') }}</span></th><th>{{ t_raw('common.name') }}</th><th>{{ t_raw('common.slug') }}</th><th>{{ t_raw('admin.taxonomy.col_veg') }}</th><th>{{ t_raw('common.active') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
            @endif
            <tbody data-order-list>
                @foreach ($rows as $ing)
                <tr data-order-row data-order-id="{{ (int) $ing['id'] }}">
                    <td class="qm-drag-cell"><button type="button" class="qm-icon-btn qm-drag-grip" data-order-handle aria-label="{{ t_raw('common.reorder') }}" title="{{ t_raw('common.reorder') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button></td>
                    <td>
                        <div class="qm-tbl-id">
                            {!! $renderIcon($ing['icon'] ?? null) !!}
                            <div class="qm-tbl-id-text">
                                <strong>{{ $ing['name'] }}</strong>
                            </div>
                        </div>
                    </td>
                    <td><code>{{ $ing['slug'] }}</code></td>
                    <td><span class="qm-pill {{ $ing['is_veg'] ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! $ing['is_veg'] ? t('admin.taxonomy.pill_veg') : t('admin.taxonomy.pill_non_veg') !!}</span></td>
                    <td><span class="qm-pill {{ $ing['is_active'] ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! $ing['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="#ingModal" data-ing-edit
                            data-id="{{ (int) $ing['id'] }}" data-name="{{ $ing['name'] }}" data-category="{{ $ing['category'] ?? 'other' }}" data-icon="{{ $ing['icon'] ?? '' }}"
                            data-veg="{{ (int) $ing['is_veg'] }}" data-active="{{ (int) $ing['is_active'] }}"
                            aria-label="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                        <form method="post" action="{{ route('admin.taxonomy.ingredient.delete') }}" class="d-inline" data-confirm="{{ t_raw('admin.taxonomy.confirm_delete_ingredient') }}">@csrf<input type="hidden" name="id" value="{{ (int) $ing['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>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @php $firstGroup = false;
@endphp
        @endforeach
        @php /* One footer for the library, not one per heading: the categories are sections
                 of a single list and share a single page cursor. The base is the MENU screen,
                 not this file's other three footers: ingredients moved there, and the toolbar
                 carries ?tab= onto the base — so /admin/taxonomy sent page two to a screen that
                 does not know the tab and answered with Cuisines. */
@endphp
        @partial('table-toolbar', ['pager' => $pager, 'base' => '/admin/menu'])
    @else
        <div class="qm-empty"><i class="fas fa-carrot d-block" aria-hidden="true"></i><h3>{{ t_raw('admin.taxonomy.empty_ingredients_title') }}</h3><p>{{ t_raw('admin.taxonomy.empty_ingredients_text') }}</p></div>
    @endif
    @endif

    @php /* =============================================== CUISINES */
@endphp
    @if ($activeTab === 'cuisines')
    <div class="qm-ops-head">
        <h2 class="mb-0">{{ t_raw('admin.taxonomy.tab_cuisines') }}</h2>
        <div class="d-flex align-items-center flex-wrap gap-2">
            @php /* The arrangement posts as one ordered list — the WHOLE set, not the page on
                     screen, so arranging page two cannot disturb page one. Its own form, because a
                     row already carries a delete form and a form inside a form is dropped by the
                     browser. Off until something moves. */
@endphp
            @if (count($cuisines) > 1)
            <form method="post" action="{{ route('admin.taxonomy.cuisine.order') }}" class="d-inline">
                @csrf
                <input type="hidden" name="order" value="{{ implode(',', array_column($cuisines, 'id')) }}" data-order-input>
                <button type="submit" class="qm-btn qm-btn-outline qm-btn-sm" data-order-save disabled><i class="fas fa-save me-1" aria-hidden="true"></i> {{ t_raw('common.save_order') }}</button>
            </form>
            @endif
            <button type="button" class="qm-btn qm-btn-sm" data-bs-toggle="modal" data-bs-target="#cuisineModal" data-cuisine-add>{{ t_raw('admin.taxonomy.btn_add_cuisine') }}</button>
        </div>
    </div>
    @php $dishById = []; foreach (($cuisineDishTags ?? []) as $dt) { $dishById[(int) $dt['id']] = $dt; }
@endphp
    <div class="table-responsive">
    @php // No data-sortable here: a column sort is a VIEW of the list, and dropping a row while one
          // is applied would save that view as the arrangement.
@endphp
    <table class="qm-table">
        <thead><tr><th class="qm-drag-col"><span class="qm-h1-sr">{{ t_raw('common.reorder') }}</span></th><th>{{ t_raw('common.name') }}</th><th>{{ t_raw('common.slug') }}</th><th>{{ t_raw('admin.taxonomy.col_dishes') }}</th><th>{{ t_raw('nav.restaurants') }}</th><th>{{ t_raw('common.active') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody data-order-list>
            @if ($cuisinesPage)
            @foreach ($cuisinesPage as $cu)
@php $cid = (int) $cu['id']; $myTagIds = $cuisineTagIds[$cid] ?? []; @endphp
            <tr data-order-row data-order-id="{{ $cid }}">
                @php // The same grip the menu arrangers use, at the row's own control height.
@endphp
                <td class="qm-drag-cell"><button type="button" class="qm-icon-btn qm-drag-grip" data-order-handle aria-label="{{ t_raw('common.reorder') }}" title="{{ t_raw('common.reorder') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button></td>
                <td>
                    <div class="qm-tbl-id">
                        <span class="qm-tbl-ico">{!! cuisine_icon_html((string) ($cu['slug'] ?? ''), $cu['icon'] ?? null) !!}</span>
                        <div class="qm-tbl-id-text">
                            <strong>{{ $cu['name'] }}</strong>
                        </div>
                    </div>
                </td>
                <td><code>{{ $cu['slug'] }}</code></td>
                <td>
                    <span class="qm-cat-dishrow">
                        @foreach ($myTagIds as $tid)
@php $dt = $dishById[(int) $tid] ?? null; if (!$dt) continue; @endphp
                            @if (!empty($has3d[(string) $dt['slug']]))
                            <img class="qm-img-22" src="{{ media('assets/client/icons3d/' . $dt['slug'] . '.png') }}" alt="{{ $dt['name'] }}" title="{{ $dt['name'] }}" width="22" height="22">
                            @else
                            {!! icon_html($dt['icon'] ?? '', 'fa-utensils', 'qm-img-22') !!}
                            @endif
                        @endforeach
                        @if (!$myTagIds)<span class="text-muted qm-fs-12">{{ t_raw('admin.taxonomy.none_placeholder') }}</span>@endif
                    </span>
                </td>
                <td>{{ (int) ($cu['restaurant_count'] ?? 0) }}</td>
                <td><span class="qm-pill {{ (int) ($cu['is_active'] ?? 1) ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! (int) ($cu['is_active'] ?? 1) ? 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="#cuisineTagsModal" data-ctag-open
                        data-id="{{ $cid }}" data-name="{{ $cu['name'] }}" data-tagids="{{ implode(',', array_map('intval', $myTagIds)) }}"
                        aria-label="{{ t_raw('admin.taxonomy.assign_dishes') }}" title="{{ t_raw('admin.taxonomy.assign_dishes') }}"><i class="fas fa-utensils" aria-hidden="true"></i></button>
                    <button type="button" class="qm-icon-btn" data-bs-toggle="modal" data-bs-target="#cuisineModal" data-cuisine-edit
                        data-id="{{ $cid }}" data-name="{{ $cu['name'] }}" data-icon="{{ $cu['icon'] ?? '' }}" data-active="{{ (int) ($cu['is_active'] ?? 1) }}"
                        aria-label="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    <form method="post" action="{{ route('admin.taxonomy.cuisine.delete') }}" class="d-inline" data-confirm="{{ t_raw('admin.taxonomy.confirm_delete_cuisine') }}">@csrf<input type="hidden" name="id" value="{{ $cid }}"><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>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 7, 'icon' => 'fa-utensils', 'msg' => t_raw('admin.taxonomy.empty_cuisines')])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/admin/taxonomy'])
    @endif

    @php /* =============================================== FOOD TYPES (tags) */
@endphp
    @if ($activeTab === 'food-types')
    <div class="qm-ops-head">
        <h2 class="mb-0">{{ t_raw('admin.taxonomy.tab_food_types') }}{!! $grpFilter !== '' ? ' — ' . e($tagGroups[$grpFilter] ?? $grpFilter) : '' !!}</h2>
        <div class="d-flex align-items-center flex-wrap gap-2">
            @php /* Seeded with THIS tab's whole list, not the page on screen. Food types and store
                     types are both rows of `tags`, so the save appends whichever group was not
                     posted — in its stored order, which keeps that group's own arrangement. */
@endphp
            @if (count($dishTags) > 1)
            <form method="post" action="{{ route('admin.taxonomy.tag.order') }}" class="d-inline">
                @csrf
                <input type="hidden" name="tab" value="food-types">
                <input type="hidden" name="order" value="{{ implode(',', array_column($dishTags, 'id')) }}" data-order-input>
                <button type="submit" class="qm-btn qm-btn-outline qm-btn-sm" data-order-save disabled><i class="fas fa-save me-1" aria-hidden="true"></i> {{ t_raw('common.save_order') }}</button>
            </form>
            @endif
            <button type="button" class="qm-btn qm-btn-sm" data-bs-toggle="modal" data-bs-target="#tagModal" data-tag-add data-defgroup="dish_type">{{ t_raw('admin.taxonomy.btn_add_food_type') }}</button>
        </div>
    </div>
    <div class="table-responsive">
    <table class="qm-table">
        <thead><tr><th class="qm-drag-col"><span class="qm-h1-sr">{{ t_raw('common.reorder') }}</span></th><th>{{ t_raw('common.name') }}</th><th>{{ t_raw('common.slug') }}</th><th>{{ t_raw('common.group') }}</th><th>{{ t_raw('common.active') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody data-order-list>
            @if ($dishTagsPage)
            @foreach ($dishTagsPage as $tg)
            <tr data-order-row data-order-id="{{ (int) $tg['id'] }}">
                <td class="qm-drag-cell"><button type="button" class="qm-icon-btn qm-drag-grip" data-order-handle aria-label="{{ t_raw('common.reorder') }}" title="{{ t_raw('common.reorder') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button></td>
                <td>
                    <div class="qm-tbl-id">
                        {!! $renderIcon($tg['icon'] ?? null, $tg['slug'] ?? '') !!}
                        <div class="qm-tbl-id-text">
                            <strong>{{ $tg['name'] }}</strong>
                        </div>
                    </div>
                </td>
                <td><code>{{ $tg['slug'] }}</code></td>
                <td><span class="qm-pill qm-pill-grey">{{ $tagGroups[$tg['group']] ?? $tg['group'] }}</span></td>
                <td><span class="qm-pill {{ (int) ($tg['is_active'] ?? 1) ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! (int) ($tg['is_active'] ?? 1) ? 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="#tagModal" data-tag-edit
                        data-id="{{ (int) $tg['id'] }}" data-name="{{ $tg['name'] }}" data-group="{{ $tg['group'] }}" data-active="{{ (int) ($tg['is_active'] ?? 1) }}" data-icon="{!! $resolveIcon($tg['icon'] ?? null, $tg['slug'] ?? '') !!}"
                        aria-label="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    <form method="post" action="{{ route('admin.taxonomy.tag.delete') }}" class="d-inline" data-confirm="{{ t_raw('admin.taxonomy.confirm_delete_food_type') }}">@csrf<input type="hidden" name="id" value="{{ (int) $tg['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>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 6, 'icon' => 'fa-tags', 'msg' => t_raw('admin.taxonomy.empty_food_types')])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/admin/taxonomy'])
    @endif

    @php /* =============================================== STORE TYPES (tags) */
@endphp
    @if ($activeTab === 'store-types')
    <div class="qm-ops-head">
        <h2 class="mb-0">{{ t_raw('admin.taxonomy.tab_store_types') }}</h2>
        <div class="d-flex align-items-center flex-wrap gap-2">
            @if (count($storeTags) > 1)
            <form method="post" action="{{ route('admin.taxonomy.tag.order') }}" class="d-inline">
                @csrf
                <input type="hidden" name="tab" value="store-types">
                <input type="hidden" name="order" value="{{ implode(',', array_column($storeTags, 'id')) }}" data-order-input>
                <button type="submit" class="qm-btn qm-btn-outline qm-btn-sm" data-order-save disabled><i class="fas fa-save me-1" aria-hidden="true"></i> {{ t_raw('common.save_order') }}</button>
            </form>
            @endif
            <button type="button" class="qm-btn qm-btn-sm" data-bs-toggle="modal" data-bs-target="#tagModal" data-tag-add data-defgroup="store_type">{{ t_raw('admin.taxonomy.btn_add_store_type') }}</button>
        </div>
    </div>
    <div class="table-responsive">
    <table class="qm-table">
        <thead><tr><th class="qm-drag-col"><span class="qm-h1-sr">{{ t_raw('common.reorder') }}</span></th><th>{{ t_raw('common.name') }}</th><th>{{ t_raw('common.slug') }}</th><th>{{ t_raw('common.active') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody data-order-list>
            @if ($storeTagsPage)
            @foreach ($storeTagsPage as $tg)
            <tr data-order-row data-order-id="{{ (int) $tg['id'] }}">
                <td class="qm-drag-cell"><button type="button" class="qm-icon-btn qm-drag-grip" data-order-handle aria-label="{{ t_raw('common.reorder') }}" title="{{ t_raw('common.reorder') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button></td>
                <td>
                    <div class="qm-tbl-id">
                        {!! $renderIcon($tg['icon'] ?? null, $tg['slug'] ?? '') !!}
                        <div class="qm-tbl-id-text">
                            <strong>{{ $tg['name'] }}</strong>
                        </div>
                    </div>
                </td>
                <td><code>{{ $tg['slug'] }}</code></td>
                <td><span class="qm-pill {{ (int) ($tg['is_active'] ?? 1) ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! (int) ($tg['is_active'] ?? 1) ? 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="#tagModal" data-tag-edit
                        data-id="{{ (int) $tg['id'] }}" data-name="{{ $tg['name'] }}" data-group="store_type" data-active="{{ (int) ($tg['is_active'] ?? 1) }}" data-icon="{!! $resolveIcon($tg['icon'] ?? null, $tg['slug'] ?? '') !!}"
                        aria-label="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    <form method="post" action="{{ route('admin.taxonomy.tag.delete') }}" class="d-inline" data-confirm="{{ t_raw('admin.taxonomy.confirm_delete_store_type') }}">@csrf<input type="hidden" name="id" value="{{ (int) $tg['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>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 5, 'icon' => 'fa-store', 'msg' => t_raw('admin.taxonomy.empty_store_types')])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/admin/taxonomy'])
    @endif

    @php /* ================================= DIMENSIONS (categories + groups) */
@endphp
    @foreach ($dimensionTabs as $dKey => $d)
@php if ($activeTab !== $dKey) { continue; }; @endphp
    <div class="qm-ops-head">
        <h2 class="mb-0">{{ t_raw($d['heading']) }}</h2>
        <div class="d-flex align-items-center flex-wrap gap-2">
            @if (count($d['rows']) > 1)
            <form method="post" action="{{ url('/admin/taxonomy/' . $d['route'] . '/order') }}" class="d-inline">
                @csrf
                <input type="hidden" name="order" value="{{ implode(',', array_column($d['rows'], 'id')) }}" data-order-input>
                <button type="submit" class="qm-btn qm-btn-outline qm-btn-sm" data-order-save disabled><i class="fas fa-save me-1" aria-hidden="true"></i> {{ t_raw('common.save_order') }}</button>
            </form>
            @endif
            <button type="button" class="qm-btn qm-btn-sm" data-bs-toggle="modal" data-bs-target="#dimModal" data-dim-add data-route="{{ $d['route'] }}">{{ t_raw($d['add']) }}</button>
        </div>
    </div>
    <div class="table-responsive">
    <table class="qm-table">
        <thead><tr><th class="qm-drag-col"><span class="qm-h1-sr">{{ t_raw('common.reorder') }}</span></th><th>{{ t_raw('common.name') }}</th><th>{{ t_raw('common.slug') }}</th><th>{{ t_raw('admin.taxonomy.col_in_use') }}</th><th>{{ t_raw('common.active') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody data-order-list>
            @if ($d['rows'])
            @foreach ($d['rows'] as $dr)
@php $drId = (int) $dr['id']; @endphp
            <tr data-order-row data-order-id="{{ $drId }}">
                <td class="qm-drag-cell"><button type="button" class="qm-icon-btn qm-drag-grip" data-order-handle aria-label="{{ t_raw('common.reorder') }}" title="{{ t_raw('common.reorder') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button></td>
                @php /* No icon cell: a dimension is a LABEL, not a thing with artwork, and the
                         same glyph on every row read as a field an operator could change. */
@endphp
                <td><strong>{{ $dr['label'] }}</strong></td>
                @php /* The slug is what every classified row stores, so it is shown but never
                         editable — see saveDimension(). */
@endphp
                <td><code>{{ $dr['slug'] }}</code></td>
                @php /* The count is the answer to "why can't I delete this?", so it goes to the
                         rows in question rather than leaving the operator to find them — but only
                         where a list on this screen actually holds them. A group classifies tags
                         and a category classifies ingredients, and each has a tab that filters by
                         it. Allergens and attributes are counted on MENU ITEMS, which no admin list
                         shows, so linking them at the ingredient filter sent the operator to a list
                         that could only ever come back empty; their count is plain text. */
@endphp
                @php /* A group's tags sit on whichever tab LISTS that group, and store types have
                         their own — Food types is every group except store_type, so the store_type
                         count linked to a list that could only ever come back empty. */
@endphp
                @php $usageUrl = match ($dKey) {
                    'groups'     => ((string) $dr['slug'] === 'store_type' ? '/admin/taxonomy?tab=store-types&grp=' : '/admin/taxonomy?tab=food-types&grp=') . urlencode((string) $dr['slug']),
                    'categories' => '/admin/menu?tab=ingredients&cat=' . urlencode((string) $dr['slug']),
                    default      => '',
                };
@endphp
                <td>@if ((int) $dr['usage'] > 0 && $usageUrl !== '')<a href="{{ url($usageUrl) }}">{{ (int) $dr['usage'] }}</a>@else{{ (int) $dr['usage'] }}@endif</td>
                <td><span class="qm-pill {{ (int) $dr['is_active'] ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! (int) $dr['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="#dimModal" data-dim-edit
                        data-route="{{ $d['route'] }}" data-id="{{ $drId }}" data-name="{{ $dr['label'] }}" data-active="{{ (int) $dr['is_active'] }}"
                        aria-label="{{ t_raw('common.edit') }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                    <form method="post" action="{{ url('/admin/taxonomy/' . $d['route'] . '/delete') }}" class="d-inline" data-confirm="{{ t_raw($d['confirm']) }}">@csrf<input type="hidden" name="id" value="{{ $drId }}"><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>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 6, 'icon' => $d['icon'], 'msg' => t_raw($d['empty'])])
            @endif
        </tbody>
    </table>
    </div>
    @endforeach
    </div>@php // .qm-card
@endphp
    </div>@php // .qm-settings-body
@endphp
</div>@php // .qm-settings
@endphp

@php /* ================================= DIMENSION MODAL (categories + groups) */
@endphp
@php /* One dialog for both: they differ only in where they post, which the trigger carries. */
@endphp
<div class="modal fade" id="dimModal" tabindex="-1" aria-labelledby="dim-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="" id="dim-form">
            @csrf
            <input type="hidden" name="id" id="dim-id" value="">
            <div class="modal-header"><h2 class="modal-title h5" id="dim-modal-title">{{ t_raw('admin.taxonomy.category_modal_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="dim-name">{{ t_raw('common.name') }}</label><input type="text" class="form-control" id="dim-name" name="name" maxlength="80" required></div>
                <label class="qm-check"><input type="checkbox" id="dim-active" name="is_active" value="1" checked> {{ t_raw('common.active') }}</label>
            </div>
            <div class="modal-footer"><button type="submit" class="qm-btn">{{ t_raw('common.save') }}</button></div>
        </form>
    </div>
</div>

@php /* ====================================================== INGREDIENT MODAL */
@endphp
<div class="modal fade" id="ingModal" tabindex="-1" aria-labelledby="ing-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('admin.taxonomy.ingredient') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" id="ing-id" value="">
            <div class="modal-header"><h2 class="modal-title h5" id="ing-modal-title" data-title-add="{{ t_raw('admin.taxonomy.modal_add_ingredient') }}" data-title-edit="{{ t_raw('admin.taxonomy.modal_edit_ingredient') }}">{{ t_raw('admin.taxonomy.modal_add_ingredient') }}</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="ing-name">{{ t_raw('common.name') }}</label><input type="text" class="form-control" id="ing-name" name="name" maxlength="80" placeholder="{{ t_raw('admin.taxonomy.placeholder_ingredient_name') }}" required></div>
                <div class="row g-3">
                    <div class="col-7 mb-3"><label class="form-label" for="ing-category">{{ t_raw('common.category') }}</label>
                        <select class="form-select" id="ing-category" name="category">
                            @php // Active only — a retired category still labels the list, but is no longer offered.
@endphp
                            @foreach (($ingredientCatOptions ?? $ingredientCats) as $ck => $cl)
                            <option value="{{ $ck }}">{{ $cl }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ t_raw('common.image') }}</label>
                    @partial('icon-picker', ['id' => 'ing-icon'])
                </div>
                <div class="d-flex gap-3 flex-wrap">
                    <label class="qm-check"><input type="checkbox" id="ing-veg" name="is_veg" value="1"> {{ t_raw('vendor.menu.attr_vegetarian') }}</label>
                    <label class="qm-check"><input type="checkbox" id="ing-active" name="is_active" value="1" checked> {{ t_raw('common.active') }}</label>
                </div>
            </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('admin.taxonomy.btn_save_ingredient') }}</button></div>
        </form>
    </div>
</div>

@php /* ====================================================== CUISINE MODAL */
@endphp
<div class="modal fade" id="cuisineModal" tabindex="-1" aria-labelledby="cuisine-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('admin.taxonomy.cuisine') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" id="cuisine-id" value="">
            <div class="modal-header"><h2 class="modal-title h5" id="cuisine-modal-title" data-title-add="{{ t_raw('admin.taxonomy.modal_add_cuisine') }}" data-title-edit="{{ t_raw('admin.taxonomy.modal_edit_cuisine') }}">{{ t_raw('admin.taxonomy.modal_add_cuisine') }}</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="cuisine-name">{{ t_raw('common.name') }}</label><input type="text" class="form-control" id="cuisine-name" name="name" maxlength="80" placeholder="{{ t_raw('admin.taxonomy.placeholder_cuisine_name') }}" required></div>
                <div class="mb-3">
                    <label class="form-label">{{ t_raw('common.image') }}</label>
                    @partial('icon-picker', ['id' => 'cuisine-icon', 'withFlag' => true, 'flags' => flag_options()])
                </div>
                @php // Retiring a cuisine 68 restaurants point at, instead of deleting it.
@endphp
                <label class="qm-check"><input type="checkbox" id="cuisine-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('admin.taxonomy.btn_save_cuisine') }}</button></div>
        </form>
    </div>
</div>

@php /* ============================================ CUISINE → DISHES MODAL */
@endphp
<div class="modal fade" id="cuisineTagsModal" tabindex="-1" aria-labelledby="ctag-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('admin.taxonomy.cuisine.tags') }}">
            @csrf
            <input type="hidden" name="cuisine_id" id="ctag-cuisine-id" value="">
            <div class="modal-header"><h2 class="modal-title h5" id="ctag-modal-title" data-title-prefix="{{ t_raw('admin.taxonomy.assign_dishes_prefix') }}">{{ t_raw('admin.taxonomy.assign_dishes') }}</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button></div>
            <div class="modal-body">
                <p class="text-muted qm-fs-13">{{ t_raw('admin.taxonomy.assign_dishes_hint') }}</p>
                <div class="qm-ctag-grid">
                    @foreach (($cuisineDishTags ?? []) as $dt)
                    <label class="qm-ctag-opt">
                        <input type="checkbox" name="dish_tags[]" value="{{ (int) $dt['id'] }}">
                        @if (!empty($has3d[(string) $dt['slug']]))
                        <img src="{{ media('assets/client/icons3d/' . $dt['slug'] . '.png') }}" alt="" width="24" height="24">
                        @else
                        {!! icon_html($dt['icon'] ?? '', 'fa-utensils', 'qm-img-22') !!}
                        @endif
                        <span>{{ $dt['name'] }}</span>
                    </label>
                    @endforeach
                </div>
            </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('admin.taxonomy.btn_save_dishes') }}</button></div>
        </form>
    </div>
</div>

@php /* ============================== FOOD TYPE / STORE TYPE MODAL (one dialog, two tabs) */
@endphp
@php /* It never says "tag": that is the table's name. Which noun it uses is decided by the tab
         that opened it, because a tab is the only way in. */
@endphp
@php $isStoreTab = $activeTab === 'store-types';
@endphp
<div class="modal fade" id="tagModal" tabindex="-1" aria-labelledby="tag-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('admin.taxonomy.tag') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" id="tag-id" value="">
            <div class="modal-header"><h2 class="modal-title h5" id="tag-modal-title" data-title-add="{!! $isStoreTab ? t('admin.taxonomy.modal_add_store_type') : t('admin.taxonomy.modal_add_food_type') !!}" data-title-edit="{!! $isStoreTab ? t('admin.taxonomy.modal_edit_store_type') : t('admin.taxonomy.modal_edit_food_type') !!}">{!! $isStoreTab ? t('admin.taxonomy.modal_add_store_type') : t('admin.taxonomy.modal_add_food_type') !!}</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="tag-name">{{ t_raw('common.name') }}</label><input type="text" class="form-control" id="tag-name" name="name" maxlength="80" placeholder="{{ t_raw('admin.taxonomy.placeholder_tag_name') }}" required></div>
                <div class="row g-3">
                    <div class="col-7 mb-3"><label class="form-label" for="tag-group">{{ t_raw('common.group') }}</label>
                        <select class="form-select" id="tag-group" name="group">
                            @foreach (($tagGroupOptions ?? $tagGroups) as $gk => $gl)
                            <option value="{{ $gk }}">{{ $gl }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ t_raw('common.image') }}</label>
                    @partial('icon-picker', ['id' => 'tag-icon'])
                </div>
                <label class="qm-check"><input type="checkbox" id="tag-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">{!! $isStoreTab ? t('admin.taxonomy.btn_save_store_type') : t('admin.taxonomy.btn_save_food_type') !!}</button></div>
        </form>
    </div>
</div>

<script>
/* Taxonomy modals carry a file <input> and (for tags) a per-tab default group,
   which the generic app.js populate doesn't cover, so wire them here — mirrors
   vendor/menu.php: clear fields on Add, pre-fill from the button's data-* on Edit. */
(function () {
    function set(elId, attr, def, add, btn) {
        var el = document.getElementById(elId);
        if (!el) { return; }
        el.value = add ? def : (btn.getAttribute(attr) || def);
    }
    function chk(elId, attr, defChecked, add, btn) {
        var el = document.getElementById(elId);
        if (!el) { return; }
        el.checked = add ? defChecked : btn.getAttribute(attr) === '1';
    }
    function clearFile(elId) {
        var el = document.getElementById(elId);
        if (el) { el.value = ''; }
    }
    /* Taxonomy artwork source — one dropdown (Font Awesome / Image, plus Flag on cuisines)
       that shows only the matching input, so a glyph and an image are never both set. */
    function iconSetPick(base, value) {
        var hidden = document.getElementById(base + '-pick');
        if (hidden) { hidden.value = value || ''; }
        document.querySelectorAll('.qm-iconsrc-panel[data-for="' + base + '"] .qm-iconpick-opt').forEach(function (b) {
            var on = b.getAttribute('data-icon') === value;
            b.classList.toggle('is-active', on);
            b.setAttribute('aria-selected', on ? 'true' : 'false');
        });
    }
    /* The image source is the media library now, so there is no file to clear — just the field's
       chosen path. Emptying it while its panel is hidden is safe: the mirror below ignores a change
       from a hidden panel, so switching to Flag or Font Awesome cannot wipe the pick just made. */
    function iconMediaField(base) {
        return document.querySelector('.qm-iconsrc-panel[data-mode="image"][data-for="' + base + '"] [data-media-field]');
    }
    function iconClearFile(base) {
        var field = iconMediaField(base);
        if (field && window.QM && window.QM.mediaField) { window.QM.mediaField.clear(field); }
    }
    function iconShowMode(base, mode) {
        document.querySelectorAll('.qm-iconsrc-panel[data-for="' + base + '"]').forEach(function (p) {
            p.hidden = (p.getAttribute('data-mode') !== mode);
        });
        /* The glyph grid is empty markup until it is shown, then cloned from the one shared library
           (partials/icon-library.php) by the same code the dropdown on every other screen uses —
           so a glyph added there appears here too. Marking the active cell waits until the cells
           exist, which is why it is re-applied from the hidden field right after the fill. */
        if (mode === 'fa') {
            var grid = document.querySelector('.qm-iconsrc-panel[data-mode="fa"][data-for="' + base + '"] [data-pc-icon-grid]');
            if (grid && window.QM && window.QM.fillIconGrid) {
                window.QM.fillIconGrid(grid);
                var cur = document.getElementById(base + '-pick');
                iconSetPick(base, cur ? cur.value : '');
            }
        }
        var sel = document.getElementById(base + '-mode');
        if (sel && sel.value !== mode) { sel.value = mode; }
        // Image mode adopts whatever the media field already holds instead of blanking the value —
        // on Edit, presetPick fills that field a moment later and the mirror carries it across.
        if (mode === 'image') {
            var mi = iconMediaField(base);
            mi = mi ? mi.querySelector('[data-media-input]') : null;
            iconSetPick(base, mi ? mi.value : '');
        } else if (mode === 'flag') { iconSetPick(base, 'flag'); iconClearFile(base); }
        else { iconClearFile(base); }
        if (mode !== 'image') { iconImagePreview(base, ''); }
    }
    /* Put the row's current image into the media field. One modal serves every row, so the field is
       rendered empty and filled from here, through the picker's own set/clear so the thumb, the
       button label and the clear button all stay in step. */
    function iconImagePreview(base, path) {
        var field = iconMediaField(base);
        if (!field || !window.QM || !window.QM.mediaField) { return; }
        if (path) {
            window.QM.mediaField.set(field, { path: path, url: '{!! e(asset('')) !!}' + path, kind: 'image' });
        } else {
            window.QM.mediaField.clear(field);
        }
    }
    /* The media field owns its own hidden input; taxonomy funnels all four sources through one.
       Mirror the chosen path across — but only from a VISIBLE image panel, so clearing the field
       while switching to another source cannot overwrite the pick that switch just made. */
    document.addEventListener('change', function (e) {
        var input = e.target && e.target.closest ? e.target.closest('[data-media-input]') : null;
        if (!input) { return; }
        var panel = input.closest('.qm-iconsrc-panel[data-mode="image"][data-for]');
        if (!panel || panel.hidden) { return; }
        iconSetPick(panel.getAttribute('data-for'), input.value);
    });
    /* Scroll the selected tile into view inside its (200px) scrolling grid. */
    function iconScrollToActive(base) {
        document.querySelectorAll('.qm-iconsrc-panel[data-for="' + base + '"]:not([hidden]) .qm-iconpick-opt.is-active').forEach(function (b) {
            var grid = b.closest('.qm-iconpick');
            if (!grid) { return; }
            var gr = grid.getBoundingClientRect(), br = b.getBoundingClientRect();
            grid.scrollTop += (br.top - gr.top) - (grid.clientHeight / 2) + (b.clientHeight / 2);
        });
    }
    /* On Add reset to the default library; on Edit show the source matching the saved value
       and preselect the icon in use (scrolled into view once the modal has opened). */
    function presetPick(base, add, btn) {
        iconSetPick(base, '');
        iconClearFile(base);
        var icon = add ? '' : (btn.getAttribute('data-icon') || '');
        var hasFlag = !!document.querySelector('#' + base + '-mode option[value="flag"]');
        // Anything with a slash or an extension is an image - including the shipped 3D and
        // ingredient sets, which the rows have always stored as plain asset paths. They open the
        // Image panel with their file already in the media field, so an edit that does not touch
        // the artwork re-posts the same path and the row keeps exactly the image it had.
        var mode = 'image';
        var flagVal = '';
        if (icon === 'flag' || icon.indexOf('flag:') === 0 || (icon === '' && hasFlag)) {
            mode = 'flag'; flagVal = (icon.indexOf('flag') === 0) ? icon : 'flag'; // cuisines default to Auto
        } else if (icon.indexOf('fa-') === 0) {
            mode = 'fa'; iconSetPick(base, icon);
        } else if (icon !== '' && icon.indexOf('/') === -1 && icon.indexOf('.') === -1) {
            // A brand mark from the shared library ("facebook"): no slash and no extension, so it is
            // neither a glyph class nor a path. Without this it fell through to the image branch and
            // the modal opened on an empty upload panel with the value orphaned.
            mode = 'fa'; iconSetPick(base, icon);
        }
        iconShowMode(base, mode);
        if (mode === 'flag') { iconSetPick(base, flagVal); } // honour the specific flag (iconShowMode reset it to Auto)
        iconImagePreview(base, mode === 'image' ? icon : '');
    }
    document.querySelectorAll('.qm-iconsrc-mode').forEach(function (sel) {
        var base = sel.getAttribute('data-for');
        sel.addEventListener('change', function () { iconShowMode(base, sel.value); });
    });
    document.addEventListener('click', function (e) {
        var b = e.target.closest('.qm-iconpick-opt');
        if (!b) { return; }
        var panel = b.closest('.qm-iconsrc-panel[data-for]');
        if (!panel) { return; }
        var base = panel.getAttribute('data-for');
        var hidden = document.getElementById(base + '-pick');
        var val = b.getAttribute('data-icon');
        iconSetPick(base, (hidden && hidden.value === val) ? '' : val); // click the active one to clear
    });

    // Filter a grid as the admin types — flags by name or ISO code, glyphs by name. One handler for
    // both, since the two searches only ever differed in which grid they were pointed at.
    document.addEventListener('input', function (e) {
        var q = e.target.closest('[data-icon-q]');
        if (!q) { return; }
        var needle = q.value.trim().toLowerCase();
        var panel = q.closest('.qm-iconsrc-panel');
        panel.querySelectorAll('.qm-iconpick-opt').forEach(function (b) {
            if (b.classList.contains('qm-iconflag-auto')) { return; } // Auto stays visible
            b.hidden = needle !== '' && (b.getAttribute('data-name') || '').indexOf(needle) === -1;
        });
        // The glyph grid is grouped under headings; a heading with every cell hidden below it reads
        // as an empty section, so the groups fold away while a search is running.
        panel.querySelectorAll('.qm-of-label').forEach(function (h) { h.hidden = needle !== ''; });
    });
    // Scroll the selected icon into view once a modal has finished opening (the grid has no
    // layout while the modal is still fading in).
    document.addEventListener('shown.bs.modal', function (e) {
        e.target.querySelectorAll('.qm-iconsrc-mode').forEach(function (sel) {
            iconScrollToActive(sel.getAttribute('data-for'));
        });
    });

    document.querySelectorAll('[data-ing-add], [data-ing-edit]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var add = btn.hasAttribute('data-ing-add');
            var t = document.getElementById('ing-modal-title');
            if (t) { t.textContent = add ? (t.getAttribute('data-title-add') || 'Add ingredient') : (t.getAttribute('data-title-edit') || 'Edit ingredient'); }
            set('ing-id', 'data-id', '', add, btn);
            set('ing-name', 'data-name', '', add, btn);
            /* On Add, default the category the same way the row and saveIngredient() do — 'other'.
               A select has no option valued '', so clearing it left the field showing NOTHING and
               posting nothing, and the ingredient was filed under Other without the dialog ever
               saying so. */
            set('ing-category', 'data-category', 'other', add, btn);
            chk('ing-veg', 'data-veg', false, add, btn);
            chk('ing-active', 'data-active', true, add, btn);
            presetPick('ing-icon', add, btn);
        });
    });

    document.querySelectorAll('[data-cuisine-add], [data-cuisine-edit]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var add = btn.hasAttribute('data-cuisine-add');
            var t = document.getElementById('cuisine-modal-title');
            if (t) { t.textContent = add ? (t.getAttribute('data-title-add') || 'Add cuisine') : (t.getAttribute('data-title-edit') || 'Edit cuisine'); }
            set('cuisine-id', 'data-id', '', add, btn);
            set('cuisine-name', 'data-name', '', add, btn);
            chk('cuisine-active', 'data-active', true, add, btn);
            presetPick('cuisine-icon', add, btn);
        });
    });

    // Cuisine → "assign dishes": pre-check the boxes from data-tagids.
    document.querySelectorAll('[data-ctag-open]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.getElementById('ctag-cuisine-id').value = btn.getAttribute('data-id') || '';
            var t = document.getElementById('ctag-modal-title');
            if (t) { t.textContent = (t.getAttribute('data-title-prefix') || 'Assign dishes — ') + (btn.getAttribute('data-name') || ''); }
            var ids = (btn.getAttribute('data-tagids') || '').split(',').filter(Boolean);
            document.querySelectorAll('#cuisineTagsModal input[name="dish_tags[]"]').forEach(function (cb) {
                cb.checked = ids.indexOf(cb.value) !== -1;
            });
        });
    });

    document.querySelectorAll('[data-tag-add], [data-tag-edit]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var add = btn.hasAttribute('data-tag-add');
            var t = document.getElementById('tag-modal-title');
            if (t) { t.textContent = add ? (t.getAttribute('data-title-add') || 'Add tag') : (t.getAttribute('data-title-edit') || 'Edit tag'); }
            set('tag-id', 'data-id', '', add, btn);
            set('tag-name', 'data-name', '', add, btn);
            chk('tag-active', 'data-active', true, add, btn);
            /* On Add, default the group to the tab's dimension; on Edit, use the row's group. */
            set('tag-group', 'data-group', btn.getAttribute('data-defgroup') || 'dish_type', add, btn);
            presetPick('tag-icon', add, btn);
        });
    });

    /* The dimension dialog serves both Categories and Groups; the trigger says which, so the form
       is pointed at that route on open rather than two dialogs existing for one job. */
    document.querySelectorAll('[data-dim-add], [data-dim-edit]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var add = btn.hasAttribute('data-dim-add');
            var form = document.getElementById('dim-form');
            form.setAttribute('action', {!! json_encode(route('admin.taxonomy')) !!} + btn.getAttribute('data-route'));
            set('dim-id', 'data-id', '', add, btn);
            set('dim-name', 'data-name', '', add, btn);
            chk('dim-active', 'data-active', true, add, btn);
            var title = document.getElementById('dim-modal-title');
            if (title) {
                var route = btn.getAttribute('data-route');
                title.textContent = route === 'attribute'
                    ? {!! json_encode(t_raw('admin.taxonomy.attribute_modal_title')) !!}
                    : route === 'allergen'
                    ? {!! json_encode(t_raw('admin.taxonomy.allergen_modal_title')) !!}
                    : (route === 'group'
                        ? {!! json_encode(t_raw('admin.taxonomy.group_modal_title')) !!}
                        : {!! json_encode(t_raw('admin.taxonomy.category_modal_title')) !!});
            }
        });
    });
})();
</script>

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