@php
    $foodProductOptionGroups = \App\Models\FoodProduct::normalizeOptionsInput(old('options', $foodProduct->options ?? []));
    $foodInventoryItems = collect($foodInventoryCatalog ?? [])->values()->all();
    $foodOptionErrors = collect($errors->messages())
        ->filter(static fn ($messages, $key) => $key === 'options' || str_starts_with($key, 'options.'))
        ->flatten()
        ->values();
@endphp

@push('styles')
<style>
    .food-options-card {
        border-radius: 1.25rem;
        border: 1px solid rgba(226, 232, 240, 0.9);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }

    .food-option-group {
        border-radius: 1rem;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: #f8fafc;
    }

    .food-option-choice {
        border-radius: 0.95rem;
        background: #fff;
        border: 1px solid rgba(226, 232, 240, 0.9);
    }

    .food-option-group-config {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: minmax(0, 1.7fr) 170px 130px minmax(0, 180px) 122px;
        align-items: end;
    }

    .food-option-field {
        width: 100%;
        border-radius: 0.9rem;
        border: 1px solid #e2e8f0;
        background: #fff;
        padding: 0.72rem 0.9rem;
        font-size: 0.92rem;
        line-height: 1.25rem;
    }

    .food-option-field:focus {
        outline: none;
        border-color: #fb923c;
        box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.16);
    }

    .food-option-inline-toggle {
        display: inline-flex;
        min-height: 48px;
        align-items: center;
        gap: 0.55rem;
        border-radius: 0.95rem;
        border: 1px solid #e2e8f0;
        background: #fff;
        padding: 0 0.9rem;
        font-size: 0.9rem;
        color: rgb(51 65 85);
    }

    .food-option-limits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .food-option-choices-head {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: minmax(0, 1.65fr) 108px 112px 118px 90px;
        padding: 0 0.1rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgb(100 116 139);
    }

    .food-option-choice-grid {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: minmax(0, 1.65fr) 108px 112px 118px 90px;
        grid-template-areas: "item qty unit price remove";
        align-items: end;
    }

    .food-option-choice-item {
        grid-area: item;
    }

    .food-option-choice-qty {
        grid-area: qty;
    }

    .food-option-choice-price {
        grid-area: price;
    }

    .food-option-choice-unit {
        grid-area: unit;
    }

    .food-option-choice-remove {
        grid-area: remove;
    }

    .food-option-mobile-label {
        display: none;
    }

    @media (max-width: 1100px) {
        .food-option-group-config {
            grid-template-columns: minmax(0, 1fr) 170px 130px;
        }

        .food-option-group-config [data-multiple-settings] {
            grid-column: span 2;
        }
    }

    @media (max-width: 900px) {
        .food-option-choice-grid {
            grid-template-columns: minmax(0, 1fr) 96px 96px;
            grid-template-areas:
                "item item item"
                "qty unit price"
                "remove remove remove";
        }

        .food-option-choices-head {
            display: none;
        }

        .food-option-mobile-label {
            display: block;
            margin-bottom: 0.35rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgb(100 116 139);
        }
    }

    @media (max-width: 640px) {
        .food-options-card {
            padding: 0.75rem !important;
            border-radius: 1rem;
        }

        .food-option-group {
            padding: 0.72rem !important;
        }

        .food-option-choice {
            padding: 0.68rem !important;
        }

        .food-option-group-config {
            grid-template-columns: minmax(0, 1fr);
            gap: 0.6rem;
        }

        .food-option-group-config [data-multiple-settings] {
            grid-column: auto;
        }

        .food-option-choice-grid {
            gap: 0.5rem;
            grid-template-columns: minmax(0, 1fr) 82px 82px;
            grid-template-areas:
                "item item item"
                "qty unit price"
                "remove remove remove";
        }

        .food-options-head-actions {
            width: 100%;
        }

        .food-options-head-actions > * {
            flex: 1 1 auto;
            justify-content: center;
        }
    }
</style>
@endpush

<div class="food-options-card mb-4 p-4">
    <div class="mb-4 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
        <div>
            <h3 class="text-lg font-semibold text-slate-900">Options client & supplements</h3>
            <p class="mt-1 text-sm text-slate-600">1 groupe = 1 question client. Exemple : sauces, boissons, choix du pain, supplements.</p>
        </div>
        <div class="food-options-head-actions flex flex-wrap items-center gap-2">
            <button
                type="button"
                id="addFoodOptionGroup"
                class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800"
            >
                <span>＋</span>
                Ajouter un groupe
            </button>
        </div>
    </div>

    @if($foodOptionErrors->isNotEmpty())
        <div class="mb-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
            @foreach($foodOptionErrors as $optionError)
                <p>{{ $optionError }}</p>
            @endforeach
        </div>
    @endif

    <div
        id="foodOptionsBuilder"
        data-initial-options='@json($foodProductOptionGroups)'
        data-inventory-items='@json($foodInventoryItems)'
        class="space-y-4"
    >
        <div id="foodOptionsEmptyState" class="rounded-xl border border-dashed border-slate-300 bg-slate-50 p-4 text-sm text-slate-500">
            Aucun groupe d'options. Commencez par ajouter un groupe comme <span class="font-semibold text-slate-700">Supplements</span>, <span class="font-semibold text-slate-700">Sauces</span> ou <span class="font-semibold text-slate-700">Boisson</span>.
        </div>

        <div id="foodOptionsList" class="space-y-3"></div>
    </div>
</div>

<template id="foodOptionGroupTemplate">
    <div data-option-group class="food-option-group rounded-2xl p-4">
        <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <p data-group-title class="text-sm font-semibold text-slate-900">Supplements</p>
                <p class="text-xs text-slate-500">Parametres du groupe puis choix relies au stock cuisine.</p>
            </div>
        </div>

        <div class="food-option-group-config">
            <div>
                <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Groupe / question client</label>
                <input
                    type="text"
                    data-group-name
                    class="food-option-field"
                    placeholder="Ex: Supplements, Sauces, Choix du pain"
                >
            </div>

            <div>
                <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Mode de choix</label>
                <select data-group-type class="food-option-field">
                    <option value="single">Un choix</option>
                    <option value="multiple">Plusieurs choix</option>
                </select>
            </div>

            <label class="food-option-inline-toggle">
                <input type="checkbox" value="1" data-group-required class="rounded border-slate-300 text-orange-500 focus:ring-orange-500">
                Obligatoire
            </label>

            <div data-multiple-settings class="hidden">
                <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Limites</label>
                <div class="food-option-limits">
                    <input
                        type="number"
                        min="0"
                        max="20"
                        data-group-min
                        class="food-option-field"
                        placeholder="Min"
                    >
                    <input
                        type="number"
                        min="1"
                        max="20"
                        data-group-max
                        class="food-option-field"
                        placeholder="Max"
                    >
                </div>
            </div>

            <button
                type="button"
                data-remove-group
                class="inline-flex h-12 items-center justify-center rounded-xl bg-red-50 px-3 text-sm font-semibold text-red-600 transition hover:bg-red-100"
            >
                Supprimer
            </button>
        </div>

        <div class="mt-4 rounded-2xl bg-white/75 p-3">
            <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm font-semibold text-slate-900">Choix proposes au client</p>
                    <p class="text-xs text-slate-500">Chaque choix deduit le stock selectionne quand le client le prend.</p>
                </div>
                <button
                    type="button"
                    data-add-choice
                    class="rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-800"
                >
                    Ajouter une option
                </button>
            </div>

            <div class="food-option-choices-head mb-2">
                <span>Article stock</span>
                <span>Quantite</span>
                <span>Unite</span>
                <span>Prix client</span>
                <span>Action</span>
            </div>

            <div data-choices-list class="space-y-3"></div>
        </div>
    </div>
</template>

<template id="foodOptionChoiceTemplate">
    <div data-choice-row class="food-option-choice rounded-xl p-3">
        <div class="food-option-choice-grid">
            <div class="food-option-choice-item">
                <label class="food-option-mobile-label">Article stock</label>
                <select
                    data-choice-inventory-item
                    class="food-option-field"
                >
                    <option value="">Choisir un article</option>
                </select>
                <input type="hidden" data-choice-label>
            </div>

            <div class="food-option-choice-qty">
                <label class="food-option-mobile-label">Quantite utilisee</label>
                <input
                    type="number"
                    min="0.001"
                    step="0.001"
                    data-choice-inventory-quantity
                    class="food-option-field"
                    placeholder="Ex: 20"
                >
            </div>

            <div class="food-option-choice-unit">
                <label class="food-option-mobile-label">Unite</label>
                <select data-choice-inventory-unit class="food-option-field">
                    <option value="">Unite</option>
                </select>
            </div>

            <div class="food-option-choice-price">
                <label class="food-option-mobile-label">Prix client</label>
                <input
                    type="number"
                    min="0"
                    step="0.01"
                    data-choice-price
                    class="food-option-field"
                    placeholder="0.50"
                >
            </div>

            <div class="food-option-choice-remove flex items-end">
                <button
                    type="button"
                    data-remove-choice
                    class="w-full rounded-xl bg-red-50 px-3 py-3 text-xs font-semibold text-red-600 transition hover:bg-red-100"
                >
                    Retirer
                </button>
            </div>
        </div>

        <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span data-choice-unit-hint class="rounded-full bg-slate-100 px-3 py-1 font-medium text-slate-600">Meme unite que le stock. Ex: 20 g.</span>
            <span data-choice-stock-pill class="hidden rounded-full bg-slate-100 px-3 py-1 font-medium text-slate-600"></span>
            <span data-choice-cost-pill class="hidden rounded-full bg-orange-100 px-3 py-1 font-medium text-orange-700"></span>
            <span data-choice-margin-pill class="hidden rounded-full bg-emerald-100 px-3 py-1 font-medium text-emerald-700"></span>
        </div>
    </div>
</template>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const builder = document.getElementById('foodOptionsBuilder');
    if (!builder) {
        return;
    }

    const list = document.getElementById('foodOptionsList');
    const emptyState = document.getElementById('foodOptionsEmptyState');
    const addGroupButton = document.getElementById('addFoodOptionGroup');
    const groupTemplate = document.getElementById('foodOptionGroupTemplate');
    const choiceTemplate = document.getElementById('foodOptionChoiceTemplate');

    let initialOptions = [];
    let inventoryItems = [];

    try {
        initialOptions = JSON.parse(builder.dataset.initialOptions || '[]');
    } catch (error) {
        initialOptions = [];
    }

    try {
        inventoryItems = JSON.parse(builder.dataset.inventoryItems || '[]');
    } catch (error) {
        inventoryItems = [];
    }

    const inventoryMap = new Map(inventoryItems.map(function (item) {
        return [String(item.id), item];
    }));

    function formatCurrency(amount) {
        return new Intl.NumberFormat('fr-FR', {
            style: 'currency',
            currency: 'EUR',
        }).format(amount || 0);
    }

    function formatQuantity(quantity) {
        const value = Number(quantity || 0);

        if (Number.isInteger(value)) {
            return String(value);
        }

        return value.toLocaleString('fr-FR', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 3,
        });
    }

    function normalizeUnit(unit) {
        const value = String(unit || '').trim().toLowerCase();
        const aliases = {
            'litre': 'l',
            'litres': 'l',
            'gramme': 'g',
            'grammes': 'g',
            'kilo': 'kg',
            'kilos': 'kg',
            'kilogramme': 'kg',
            'kilogrammes': 'kg',
            'pièce': 'piece',
            'pièces': 'piece',
            'pieces': 'piece',
        };

        return aliases[value] || value;
    }

    function conversionFactor(unit) {
        switch (normalizeUnit(unit)) {
            case 'g':
                return { family: 'mass', factor: 1 };
            case 'kg':
                return { family: 'mass', factor: 1000 };
            case 'ml':
                return { family: 'volume', factor: 1 };
            case 'cl':
                return { family: 'volume', factor: 10 };
            case 'l':
                return { family: 'volume', factor: 1000 };
            default:
                return null;
        }
    }

    function compatibleUnits(stockUnit) {
        const normalized = normalizeUnit(stockUnit);
        const factor = conversionFactor(normalized);

        if (factor?.family === 'mass') {
            return ['g', 'kg'];
        }

        if (factor?.family === 'volume') {
            return ['ml', 'cl', 'L'];
        }

        return [stockUnit || 'unité'];
    }

    function convertToStockQuantity(quantity, inputUnit, stockUnit) {
        const value = Math.max(0, Number(quantity || 0));
        const from = conversionFactor(inputUnit);
        const to = conversionFactor(stockUnit);

        if (!value || !from || !to || from.family !== to.family) {
            return value;
        }

        return Math.round(((value * from.factor) / to.factor) * 1000) / 1000;
    }

    function updateEmptyState() {
        emptyState.classList.toggle('hidden', list.children.length > 0);
    }

    function updateMultipleSettings(groupCard) {
        const typeField = groupCard.querySelector('[data-group-type]');
        const multipleSettings = groupCard.querySelector('[data-multiple-settings]');
        const minField = groupCard.querySelector('[data-group-min]');
        const maxField = groupCard.querySelector('[data-group-max]');
        const requiredField = groupCard.querySelector('[data-group-required]');
        const isMultiple = typeField.value === 'multiple';

        multipleSettings.classList.toggle('hidden', !isMultiple);

        if (!isMultiple) {
            minField.value = requiredField.checked ? '1' : '0';
            maxField.value = '1';
        } else {
            if (!minField.value) {
                minField.value = requiredField.checked ? '1' : '0';
            }

            const choiceCount = groupCard.querySelectorAll('[data-choice-row]').length;
            const currentMax = parseInt(maxField.value || '0', 10);
            if (!currentMax || currentMax > choiceCount) {
                maxField.value = String(Math.max(1, choiceCount));
            }
        }
    }

    function syncGroupTitle(groupCard, groupIndex) {
        const title = groupCard.querySelector('[data-group-title]');
        const name = groupCard.querySelector('[data-group-name]').value.trim();
        title.textContent = name !== ''
            ? name
            : (list.children.length > 1 ? 'Supplements ' + (groupIndex + 1) : 'Supplements');
    }

    function ensureAtLeastOneChoice(groupCard) {
        const choicesList = groupCard.querySelector('[data-choices-list]');
        if (choicesList.children.length === 0) {
            choicesList.appendChild(createChoiceRow());
        }
    }

    function populateInventoryOptions(select, selectedValue) {
        inventoryItems.forEach(function (item) {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.name + ' · ' + item.quantity + ' ' + item.unit;
            option.selected = String(selectedValue || '') === String(item.id);
            select.appendChild(option);
        });
    }

    function populateUnitOptions(select, inventoryItem, selectedValue = '') {
        const preferred = selectedValue || inventoryItem?.unit || '';
        const units = compatibleUnits(inventoryItem?.unit || preferred || 'unité');

        select.innerHTML = '';

        units.forEach(function (unit) {
            const option = document.createElement('option');
            option.value = unit;
            option.textContent = unit;
            option.selected = normalizeUnit(preferred) === normalizeUnit(unit);
            select.appendChild(option);
        });
    }

    function updateChoiceInventoryMeta(choiceRow) {
        const inventorySelect = choiceRow.querySelector('[data-choice-inventory-item]');
        const quantityInput = choiceRow.querySelector('[data-choice-inventory-quantity]');
        const unitSelect = choiceRow.querySelector('[data-choice-inventory-unit]');
        const priceInput = choiceRow.querySelector('[data-choice-price]');
        const stockPill = choiceRow.querySelector('[data-choice-stock-pill]');
        const costPill = choiceRow.querySelector('[data-choice-cost-pill]');
        const marginPill = choiceRow.querySelector('[data-choice-margin-pill]');
        const unitHint = choiceRow.querySelector('[data-choice-unit-hint]');
        const inventoryItem = inventoryMap.get(inventorySelect.value);
        const quantity = Math.max(0, Number(quantityInput.value || 0));
        const clientPrice = Math.max(0, Number(priceInput.value || 0));

        if (!inventoryItem) {
            stockPill.classList.add('hidden');
            stockPill.textContent = '';
            costPill.classList.add('hidden');
            costPill.textContent = '';
            marginPill.classList.add('hidden');
            marginPill.textContent = '';
            populateUnitOptions(unitSelect, null, unitSelect.value);
            if (unitHint) {
                unitHint.textContent = 'Choisis un article stock pour afficher les unites.';
            }
            return;
        }

        if (!unitSelect.options.length) {
            populateUnitOptions(unitSelect, inventoryItem, unitSelect.value);
        }

        const convertedQuantity = convertToStockQuantity(quantity, unitSelect.value, inventoryItem.unit);

        if (unitHint) {
            unitHint.textContent = quantity > 0
                ? 'Deduction stock: ' + formatQuantity(convertedQuantity) + ' ' + inventoryItem.unit + '.'
                : 'Stock tenu en ' + inventoryItem.unit + '.';
        }

        stockPill.textContent = 'Stock dispo: ' + formatQuantity(inventoryItem.quantity) + ' ' + inventoryItem.unit;
        stockPill.classList.remove('hidden');

        if (quantity > 0) {
            const stockCost = Number(inventoryItem.cost_per_unit || 0) * convertedQuantity;
            const margin = clientPrice - stockCost;

            costPill.textContent = 'Cout stock: ' + formatCurrency(stockCost);
            costPill.classList.remove('hidden');
            marginPill.textContent = 'Marge: ' + formatCurrency(margin);
            marginPill.classList.remove('hidden');
            marginPill.classList.toggle('bg-red-100', margin < 0);
            marginPill.classList.toggle('text-red-700', margin < 0);
            marginPill.classList.toggle('bg-emerald-100', margin >= 0);
            marginPill.classList.toggle('text-emerald-700', margin >= 0);
        } else {
            costPill.classList.add('hidden');
            costPill.textContent = '';
            marginPill.classList.add('hidden');
            marginPill.textContent = '';
        }
    }

    function syncChoiceLabelFromInventory(choiceRow, forceOverwrite = false) {
        const inventorySelect = choiceRow.querySelector('[data-choice-inventory-item]');
        const labelInput = choiceRow.querySelector('[data-choice-label]');
        const inventoryItem = inventoryMap.get(inventorySelect.value);

        if (!labelInput || !inventoryItem) {
            return;
        }

        if (forceOverwrite || labelInput.value.trim() === '') {
            labelInput.value = inventoryItem.name || '';
        }
    }

    function reindexGroup(groupCard, groupIndex) {
        groupCard.querySelector('[data-group-name]').setAttribute('name', 'options[' + groupIndex + '][name]');
        groupCard.querySelector('[data-group-type]').setAttribute('name', 'options[' + groupIndex + '][type]');
        groupCard.querySelector('[data-group-required]').setAttribute('name', 'options[' + groupIndex + '][required]');
        groupCard.querySelector('[data-group-min]').setAttribute('name', 'options[' + groupIndex + '][min]');
        groupCard.querySelector('[data-group-max]').setAttribute('name', 'options[' + groupIndex + '][max]');

        groupCard.querySelectorAll('[data-choice-row]').forEach(function (choiceRow, choiceIndex) {
            choiceRow.querySelector('[data-choice-label]').setAttribute('name', 'options[' + groupIndex + '][choices][' + choiceIndex + '][label]');
            choiceRow.querySelector('[data-choice-price]').setAttribute('name', 'options[' + groupIndex + '][choices][' + choiceIndex + '][price]');
            choiceRow.querySelector('[data-choice-inventory-item]').setAttribute('name', 'options[' + groupIndex + '][choices][' + choiceIndex + '][inventory_item_id]');
            choiceRow.querySelector('[data-choice-inventory-quantity]').setAttribute('name', 'options[' + groupIndex + '][choices][' + choiceIndex + '][inventory_quantity]');
            choiceRow.querySelector('[data-choice-inventory-unit]').setAttribute('name', 'options[' + groupIndex + '][choices][' + choiceIndex + '][inventory_quantity_unit]');
            updateChoiceInventoryMeta(choiceRow);
        });

        syncGroupTitle(groupCard, groupIndex);
        updateMultipleSettings(groupCard);
    }

    function reindexAllGroups() {
        Array.from(list.children).forEach(function (groupCard, groupIndex) {
            reindexGroup(groupCard, groupIndex);
        });
        updateEmptyState();
    }

    function appendChoiceToGroup(groupCard) {
        const choicesList = groupCard.querySelector('[data-choices-list]');
        const typeField = groupCard.querySelector('[data-group-type]');
        const maxField = groupCard.querySelector('[data-group-max]');
        const previousCount = choicesList.querySelectorAll('[data-choice-row]').length;

        choicesList.appendChild(createChoiceRow());

        if (typeField.value === 'multiple') {
            const currentMax = parseInt(maxField.value || '0', 10);
            const nextCount = choicesList.querySelectorAll('[data-choice-row]').length;

            if (!currentMax || currentMax >= previousCount) {
                maxField.value = String(nextCount);
            }
        }
    }

    function createChoiceRow(choiceData = {}) {
        const fragment = choiceTemplate.content.cloneNode(true);
        const row = fragment.querySelector('[data-choice-row]');
        const inventorySelect = row.querySelector('[data-choice-inventory-item]');
        const inventoryQuantity = row.querySelector('[data-choice-inventory-quantity]');
        const inventoryUnit = row.querySelector('[data-choice-inventory-unit]');
        const priceInput = row.querySelector('[data-choice-price]');
        const labelInput = row.querySelector('[data-choice-label]');

        populateInventoryOptions(inventorySelect, choiceData.inventory_item_id || '');
        populateUnitOptions(inventoryUnit, inventoryMap.get(String(choiceData.inventory_item_id || '')), choiceData.inventory_quantity_unit || choiceData.inventory_unit || '');
        labelInput.value = choiceData.label || '';
        priceInput.value = choiceData.price != null ? choiceData.price : '';
        inventoryQuantity.value = choiceData.inventory_quantity_input != null
            ? choiceData.inventory_quantity_input
            : (choiceData.inventory_quantity != null ? choiceData.inventory_quantity : '');
        syncChoiceLabelFromInventory(row, true);

        row.querySelector('[data-remove-choice]').addEventListener('click', function () {
            const groupCard = row.closest('[data-option-group]');
            row.remove();
            ensureAtLeastOneChoice(groupCard);
            reindexAllGroups();
        });

        inventorySelect.addEventListener('change', function () {
            populateUnitOptions(inventoryUnit, inventoryMap.get(inventorySelect.value), inventoryUnit.value);
            syncChoiceLabelFromInventory(row, true);
            updateChoiceInventoryMeta(row);
        });

        inventoryQuantity.addEventListener('input', function () {
            updateChoiceInventoryMeta(row);
        });

        inventoryUnit.addEventListener('change', function () {
            updateChoiceInventoryMeta(row);
        });

        priceInput.addEventListener('input', function () {
            updateChoiceInventoryMeta(row);
        });

        return row;
    }

    function createGroupCard(groupData = {}) {
        const fragment = groupTemplate.content.cloneNode(true);
        const groupCard = fragment.querySelector('[data-option-group]');
        const nameField = groupCard.querySelector('[data-group-name]');
        const typeField = groupCard.querySelector('[data-group-type]');
        const requiredField = groupCard.querySelector('[data-group-required]');
        const minField = groupCard.querySelector('[data-group-min]');
        const maxField = groupCard.querySelector('[data-group-max]');
        const choicesList = groupCard.querySelector('[data-choices-list]');

        const choices = Array.isArray(groupData.choices) && groupData.choices.length > 0
            ? groupData.choices
            : [{}];
        const defaultName = typeof groupData.name === 'string' && groupData.name.trim() !== ''
            ? groupData.name.trim()
            : 'Supplements';

        nameField.value = defaultName;
        typeField.value = groupData.type === 'single' ? 'single' : 'multiple';
        requiredField.checked = Boolean(groupData.required);
        minField.value = groupData.min != null ? groupData.min : (requiredField.checked ? '1' : '0');
        maxField.value = groupData.max != null && groupData.max !== ''
            ? groupData.max
            : (typeField.value === 'multiple' ? String(Math.max(1, choices.length)) : '1');

        choices.forEach(function (choice) {
            choicesList.appendChild(createChoiceRow(choice));
        });

        groupCard.querySelector('[data-remove-group]').addEventListener('click', function () {
            groupCard.remove();
            reindexAllGroups();
        });

        groupCard.querySelector('[data-add-choice]').addEventListener('click', function () {
            appendChoiceToGroup(groupCard);
            reindexAllGroups();
        });

        nameField.addEventListener('input', function () {
            const groupIndex = Array.from(list.children).indexOf(groupCard);
            syncGroupTitle(groupCard, Math.max(groupIndex, 0));
        });

        typeField.addEventListener('change', function () {
            updateMultipleSettings(groupCard);
            reindexAllGroups();
        });

        requiredField.addEventListener('change', function () {
            updateMultipleSettings(groupCard);
        });

        return groupCard;
    }

    addGroupButton.addEventListener('click', function () {
        list.appendChild(createGroupCard({
            name: 'Supplements',
            type: 'multiple',
            required: false,
            min: 0,
            choices: [{}],
        }));
        reindexAllGroups();
    });

    if (Array.isArray(initialOptions) && initialOptions.length > 0) {
        initialOptions.forEach(function (groupData) {
            list.appendChild(createGroupCard(groupData));
        });
    }

    reindexAllGroups();
});
</script>
@endpush