{{-- Générateur de déclinaisons (tailles, bonnets, couleurs...) — attend $attributes, et optionnellement $existingVariants --}}
@php
    $existingVariants = $existingVariants ?? collect();
@endphp

<div class="accordion-card-one accordion" id="accordionVariants">
    <div class="accordion-item">
        <div class="accordion-header" id="headingVariants">
            <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseVariants"
                aria-controls="collapseVariants">
                <div class="addproduct-icon list">
                    <h5><i data-feather="grid" class="add-info"></i><span>Déclinaisons (tailles, bonnets, couleurs...)</span></h5>
                    <a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
                </div>
            </div>
        </div>
        <div id="collapseVariants" class="accordion-collapse collapse show" aria-labelledby="headingVariants"
            data-bs-parent="#accordionVariants">
            <div class="accordion-body">
                <div class="dedi-variant-builder">
                    <label class="variant-toggle">
                        <input type="checkbox" id="has-variants-toggle" name="has_variants" value="1">
                        <span class="variant-toggle-track"></span>
                        <span class="variant-toggle-label">Ce produit a des déclinaisons (tailles, bonnets, couleurs...)</span>
                    </label>

                    <div id="variants-builder" class="d-none">
                        @if($attributes->isEmpty())
                            <p class="text-danger mt-3">Aucun attribut disponible. Crée d'abord des attributs (Bonnet, Tour de dos, Taille...) dans <a href="{{ route('inventory.attributes') }}">Inventaire &gt; Attributs</a>.</p>
                        @else
                            <label class="variant-section-label">Attributs à utiliser pour ce produit</label>
                            <div id="variant-attribute-checkboxes" class="variant-chip-group">
                                @foreach($attributes as $attribute)
                                    <input type="checkbox" class="variant-chip-input variant-attribute-checkbox" value="{{ $attribute->id }}" id="variant-attr-{{ $attribute->id }}">
                                    <label class="variant-chip" for="variant-attr-{{ $attribute->id }}">{{ $attribute->name }}</label>
                                @endforeach
                            </div>

                            <div id="variant-value-pickers"></div>

                            <button type="button" class="btn btn-outline-primary btn-sm mt-3 mb-2" id="generate-variants-btn">
                                <i data-feather="refresh-cw" class="me-1"></i>Générer les déclinaisons
                            </button>

                            <p class="variant-empty-msg" id="variants-empty-msg">Coche un ou plusieurs attributs et leurs valeurs ci-dessus, puis clique sur "Générer les déclinaisons".</p>

                            <div class="table-responsive">
                                <table class="table mb-0" id="variants-table">
                                    <thead>
                                        <tr>
                                            <th>Déclinaison</th>
                                            <th>Quantité</th>
                                            <th>Prix (optionnel, sinon prix de vente du produit)</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>

                            <input type="hidden" name="variants_json" id="variants-json-input">
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .dedi-variant-builder .variant-toggle {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        margin: 0;
    }
    .dedi-variant-builder .variant-toggle input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .dedi-variant-builder .variant-toggle-track {
        position: relative;
        display: inline-block;
        width: 42px;
        height: 24px;
        border-radius: 999px;
        background: var(--dedi-line, #E3E7EF);
        flex-shrink: 0;
        transition: background-color .15s ease;
    }
    .dedi-variant-builder .variant-toggle-track::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
        transition: transform .15s ease;
    }
    .dedi-variant-builder .variant-toggle input:checked + .variant-toggle-track {
        background: var(--dedi-blue, #E8187A);
    }
    .dedi-variant-builder .variant-toggle input:checked + .variant-toggle-track::after {
        transform: translateX(18px);
    }
    .dedi-variant-builder .variant-toggle-label {
        font-weight: 600;
        color: var(--dedi-ink, #1A1A1A);
    }
    .dedi-variant-builder .variant-section-label {
        display: block;
        font-weight: 600;
        margin: 20px 0 10px;
    }
    .dedi-variant-builder .variant-chip-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 4px;
    }
    .dedi-variant-builder .variant-chip-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .dedi-variant-builder .variant-chip {
        display: inline-flex;
        align-items: center;
        padding: 7px 16px;
        border-radius: 999px;
        border: 1px solid var(--dedi-line, #E3E7EF);
        background: #fff;
        color: var(--dedi-ink, #1A1A1A);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
    .dedi-variant-builder .variant-chip:hover {
        border-color: var(--dedi-blue, #E8187A);
    }
    .dedi-variant-builder .variant-chip-input:checked + .variant-chip {
        background: var(--dedi-blue, #E8187A);
        border-color: var(--dedi-blue, #E8187A);
        color: #fff;
    }
    .dedi-variant-builder .variant-chip-input:focus-visible + .variant-chip {
        outline: 2px solid var(--dedi-blue, #E8187A);
        outline-offset: 2px;
    }
    .dedi-variant-builder .variant-empty-msg {
        margin: 10px 0 16px;
        color: var(--dedi-muted, #7A6070);
        font-size: 13px;
    }
    .dedi-variant-builder #variants-table thead th {
        background: var(--dedi-blue-soft, #FDEEF5);
        color: var(--dedi-blue-deep, #B5105C);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .03em;
        font-weight: 600;
        padding: 10px 14px;
        border: none;
    }
    .dedi-variant-builder #variants-table td {
        padding: 8px 14px;
        vertical-align: middle;
        border-bottom: 1px solid var(--dedi-line, #E3E7EF);
    }
    .dedi-variant-builder #variants-table .variant-qty-input,
    .dedi-variant-builder #variants-table .variant-price-input {
        max-width: 140px;
    }
</style>

@php
    $attributesForJs = $attributes->map(function ($attribute) {
        return [
            'id' => $attribute->id,
            'name' => $attribute->name,
            'values' => $attribute->values->map(function ($value) {
                return ['id' => $value->id, 'value' => $value->value];
            })->values(),
        ];
    })->values();
@endphp
<script>
(function() {
    const attributesData = @json($attributesForJs);
    const existingVariants = @json($existingVariants);

    const toggle = document.getElementById('has-variants-toggle');
    const builder = document.getElementById('variants-builder');
    const quantityField = document.getElementById('quantity');
    const valuePickersContainer = document.getElementById('variant-value-pickers');
    const generateBtn = document.getElementById('generate-variants-btn');
    const tableBody = document.querySelector('#variants-table tbody');
    const jsonInput = document.getElementById('variants-json-input');
    const emptyMsg = document.getElementById('variants-empty-msg');

    if (!toggle || !builder) {
        return;
    }

    function findValueLabel(id) {
        for (const attr of attributesData) {
            const v = attr.values.find(v => v.id === id);
            if (v) return v.value;
        }
        return '?';
    }

    function renderValuePickers() {
        valuePickersContainer.innerHTML = '';
        document.querySelectorAll('.variant-attribute-checkbox:checked').forEach(cb => {
            const attr = attributesData.find(a => a.id === parseInt(cb.value, 10));
            if (!attr) return;

            const wrap = document.createElement('div');
            const valuesHtml = attr.values.map(v =>
                `<input type="checkbox" class="variant-chip-input variant-value-checkbox" value="${v.id}" id="variant-val-${v.id}">
                 <label class="variant-chip" for="variant-val-${v.id}">${v.value}</label>`
            ).join('');
            wrap.innerHTML = `<label class="variant-section-label" style="margin-top:12px;font-weight:500;">${attr.name}</label><div class="variant-chip-group" data-attr-id="${attr.id}">${valuesHtml}</div>`;
            valuePickersContainer.appendChild(wrap);
        });
        if (typeof feather !== 'undefined') feather.replace();
    }

    document.querySelectorAll('.variant-attribute-checkbox').forEach(cb => cb.addEventListener('change', renderValuePickers));

    function cartesian(arrays) {
        return arrays.reduce((acc, arr) => acc.flatMap(a => arr.map(v => [...a, v])), [[]]);
    }

    function currentRowsByKey() {
        const rows = {};
        tableBody.querySelectorAll('tr').forEach(tr => {
            rows[tr.dataset.key] = {
                quantity: tr.querySelector('.variant-qty-input').value,
                price: tr.querySelector('.variant-price-input').value,
            };
        });
        return rows;
    }

    function attachRowEvents() {
        tableBody.querySelectorAll('.variant-remove-row').forEach(btn => {
            btn.addEventListener('click', function() {
                btn.closest('tr').remove();
                syncJson();
            });
        });
        tableBody.querySelectorAll('.variant-qty-input, .variant-price-input').forEach(input => {
            input.addEventListener('input', syncJson);
        });
    }

    function syncJson() {
        const rows = [];
        tableBody.querySelectorAll('tr').forEach(tr => {
            rows.push({
                values: JSON.parse(tr.dataset.values),
                quantity: parseInt(tr.querySelector('.variant-qty-input').value || '0', 10),
                price: tr.querySelector('.variant-price-input').value || null,
            });
        });
        jsonInput.value = JSON.stringify(rows);
    }

    function generateTable(preset) {
        const preserved = currentRowsByKey();
        const groups = [];
        document.querySelectorAll('#variant-value-pickers [data-attr-id]').forEach(group => {
            const checked = Array.from(group.querySelectorAll('.variant-value-checkbox:checked')).map(cb => parseInt(cb.value, 10));
            if (checked.length) groups.push(checked);
        });

        tableBody.innerHTML = '';

        if (!groups.length) {
            emptyMsg.classList.remove('d-none');
            jsonInput.value = '[]';
            return;
        }
        emptyMsg.classList.add('d-none');

        cartesian(groups).forEach(comboIds => {
            const key = [...comboIds].sort((a, b) => a - b).join('-');
            const labels = comboIds.map(findValueLabel).join(' / ');

            let qty = preserved[key] ? preserved[key].quantity : '';
            let price = preserved[key] ? preserved[key].price : '';

            if (preset) {
                const match = preset.find(p => [...p.values].sort((a, b) => a - b).join('-') === key);
                if (match) {
                    qty = match.quantity;
                    price = match.price ?? '';
                }
            }

            const tr = document.createElement('tr');
            tr.dataset.key = key;
            tr.dataset.values = JSON.stringify(comboIds);
            tr.innerHTML = `<td>${labels}</td>
                <td><input type="number" min="0" class="form-control variant-qty-input" value="${qty}"></td>
                <td><input type="number" min="0" step="0.01" class="form-control variant-price-input" value="${price}"></td>
                <td><button type="button" class="btn btn-sm btn-danger variant-remove-row" title="Retirer">&times;</button></td>`;
            tableBody.appendChild(tr);
        });

        attachRowEvents();
        syncJson();
    }

    if (generateBtn) {
        generateBtn.addEventListener('click', () => generateTable());
    }

    toggle.addEventListener('change', function() {
        if (this.checked) {
            builder.classList.remove('d-none');
            if (quantityField) quantityField.disabled = true;
        } else {
            builder.classList.add('d-none');
            if (quantityField) quantityField.disabled = false;
        }
    });

    // Pré-remplissage en mode édition
    if (existingVariants.length > 0) {
        toggle.checked = true;
        toggle.dispatchEvent(new Event('change'));

        const usedValueIds = new Set();
        existingVariants.forEach(v => v.values.forEach(id => usedValueIds.add(id)));

        attributesData.forEach(attr => {
            if (attr.values.some(v => usedValueIds.has(v.id))) {
                const cb = document.getElementById('variant-attr-' + attr.id);
                if (cb) cb.checked = true;
            }
        });
        renderValuePickers();

        usedValueIds.forEach(id => {
            const cb = document.getElementById('variant-val-' + id);
            if (cb) cb.checked = true;
        });

        generateTable(existingVariants);
    }
})();
</script>