{{-- 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-card">
                        <input type="checkbox" id="has-variants-toggle" name="has_variants" value="1">
                        <span class="variant-toggle-track" aria-hidden="true"></span>
                        <span class="variant-toggle-copy">
                            <span class="variant-toggle-title">Ce produit a des déclinaisons</span>
                            <span class="variant-toggle-hint">Tailles, bonnets, couleurs… Activez pour gérer le stock par variante.</span>
                        </span>
                    </label>

                    <div id="variants-builder" class="d-none">
                        @if($attributes->isEmpty())
                            <div class="variant-alert">
                                <i data-feather="alert-circle"></i>
                                <div>
                                    <strong>Aucun attribut disponible</strong>
                                    <p class="mb-0">Créez d’abord des attributs (Bonnet, Tour de dos, Taille…) dans
                                        <a href="{{ route('inventory.attributes') }}">Inventaire &gt; Attributs</a>.
                                    </p>
                                </div>
                            </div>
                        @else
                            <div class="variant-steps">
                                <div class="variant-step">
                                    <div class="variant-step-header">
                                        <span class="variant-step-num">1</span>
                                        <div>
                                            <span class="variant-section-label">Choisir les attributs</span>
                                            <p class="variant-step-hint">Sélectionnez les types de déclinaisons pour ce produit.</p>
                                        </div>
                                    </div>
                                    <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 }}">
                                                <span class="variant-chip-check" aria-hidden="true"></span>
                                                {{ $attribute->name }}
                                            </label>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="variant-step" id="variant-values-step">
                                    <div class="variant-step-header">
                                        <span class="variant-step-num">2</span>
                                        <div>
                                            <span class="variant-section-label">Choisir les valeurs</span>
                                            <p class="variant-step-hint">Puis sélectionnez les valeurs pour chaque attribut.</p>
                                        </div>
                                    </div>
                                    <div id="variant-value-pickers">
                                        <div class="variant-values-placeholder" id="variant-values-placeholder">
                                            <i data-feather="mouse-pointer"></i>
                                            <span>Sélectionnez au moins un attribut ci-dessus pour afficher ses valeurs.</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="variant-step">
                                    <div class="variant-step-header">
                                        <span class="variant-step-num">3</span>
                                        <div>
                                            <span class="variant-section-label">Générer la liste</span>
                                            <p class="variant-step-hint">Créez toutes les combinaisons, puis renseignez quantité et prix.</p>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary variant-generate-btn" id="generate-variants-btn">
                                        <i data-feather="refresh-cw"></i>
                                        Générer les déclinaisons
                                    </button>
                                </div>
                            </div>

                            <div class="variant-results d-none" id="variants-results">
                                <div class="variant-results-header">
                                    <strong id="variants-count-label">0 déclinaison</strong>
                                    <span class="variant-results-note">Quantité obligatoire · Prix optionnel (sinon prix de vente du produit)</span>
                                </div>
                                <div class="table-responsive variant-table-wrap">
                                    <table class="table mb-0" id="variants-table">
                                        <thead>
                                            <tr>
                                                <th>Déclinaison</th>
                                                <th style="width:140px">Quantité</th>
                                                <th style="width:180px">Prix (optionnel)</th>
                                                <th style="width:56px"></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>

                            <p class="variant-empty-msg d-none" id="variants-empty-msg">Sélectionnez au moins une valeur par attribut, puis générez les déclinaisons.</p>

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

<style>
    .dedi-variant-builder {
        --vb-radius: 12px;
        padding: 4px 2px 8px;
    }

    .dedi-variant-builder .variant-toggle-card {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 22px;
        margin: 4px 0 0;
        border: 1px solid var(--dedi-line, #EDDDEA);
        border-radius: var(--vb-radius);
        background: var(--dedi-blue-mist, #FFF5F8);
        cursor: pointer;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .dedi-variant-builder .variant-toggle-card:hover {
        border-color: var(--dedi-blue, #E8187A);
    }
    .dedi-variant-builder .variant-toggle-card:has(input:checked) {
        border-color: var(--dedi-blue, #E8187A);
        box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.12);
    }
    .dedi-variant-builder .variant-toggle-card > input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .dedi-variant-builder .variant-toggle-track {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 26px;
        margin-top: 4px;
        border-radius: 999px;
        background: #D6CCD3;
        flex-shrink: 0;
        transition: background-color .15s ease;
    }
    .dedi-variant-builder .variant-toggle-track::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        transition: transform .15s ease;
    }
    .dedi-variant-builder .variant-toggle-card > input:checked + .variant-toggle-track {
        background: var(--dedi-blue, #E8187A);
    }
    .dedi-variant-builder .variant-toggle-card > input:checked + .variant-toggle-track::after {
        transform: translateX(18px);
    }
    .dedi-variant-builder .variant-toggle-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
        padding-top: 1px;
    }
    .dedi-variant-builder .variant-toggle-title {
        font-weight: 650;
        color: var(--dedi-ink, #1A1A1A) !important;
        font-size: 15px;
        line-height: 1.3;
    }
    .dedi-variant-builder .variant-toggle-hint {
        font-size: 13px;
        color: var(--dedi-muted, #7A6070) !important;
        font-weight: 450;
        line-height: 1.4;
    }

    .dedi-variant-builder .variant-alert {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-top: 18px;
        padding: 14px 16px;
        border-radius: var(--vb-radius);
        background: var(--dedi-danger-soft, #FDECEC);
        color: var(--dedi-ink, #1A1A1A);
        border: 1px solid #F5C2C2;
    }
    .dedi-variant-builder .variant-alert svg {
        width: 18px;
        height: 18px;
        color: var(--dedi-danger, #DC2626);
        flex-shrink: 0;
        margin-top: 2px;
    }
    .dedi-variant-builder .variant-alert a {
        color: var(--dedi-blue, #E8187A);
        font-weight: 600;
    }

    .dedi-variant-builder .variant-steps {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: 20px;
    }
    .dedi-variant-builder .variant-step {
        padding: 18px;
        border: 1px solid var(--dedi-line, #EDDDEA);
        border-radius: var(--vb-radius);
        background: #fff;
    }
    .dedi-variant-builder .variant-step-header {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 14px;
    }
    .dedi-variant-builder .variant-step-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--dedi-blue, #E8187A);
        color: #fff !important;
        font-size: 13px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .dedi-variant-builder .variant-section-label {
        display: block;
        font-weight: 650;
        color: var(--dedi-ink, #1A1A1A) !important;
        font-size: 14px;
        margin: 0 0 2px;
        line-height: 1.3;
    }
    .dedi-variant-builder .variant-step-hint {
        margin: 0;
        font-size: 12.5px;
        color: var(--dedi-muted, #7A6070) !important;
        font-weight: 450;
    }

    .dedi-variant-builder .variant-chip-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .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;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1.5px solid var(--dedi-line, #EDDDEA);
        background: #fff;
        color: var(--dedi-ink, #1A1A1A) !important;
        font-size: 13px;
        font-weight: 550;
        cursor: pointer;
        user-select: none;
        margin: 0;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    }
    .dedi-variant-builder .variant-chip-check {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1.5px solid #C9B8C3;
        background: #fff;
        position: relative;
        flex-shrink: 0;
        transition: border-color .15s ease, background-color .15s ease;
    }
    .dedi-variant-builder .variant-chip-check::after {
        content: '';
        position: absolute;
        left: 4px;
        top: 1px;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0);
        transition: transform .12s ease;
    }
    .dedi-variant-builder .variant-chip:hover {
        border-color: var(--dedi-blue, #E8187A);
        box-shadow: 0 0 0 3px rgba(232, 24, 122, 0.08);
    }
    .dedi-variant-builder .variant-chip-input:checked + .variant-chip {
        background: var(--dedi-blue-soft, #FDEEF5);
        border-color: var(--dedi-blue, #E8187A);
        color: var(--dedi-blue-deep, #B5105C) !important;
    }
    .dedi-variant-builder .variant-chip-input:checked + .variant-chip .variant-chip-check {
        background: var(--dedi-blue, #E8187A);
        border-color: var(--dedi-blue, #E8187A);
    }
    .dedi-variant-builder .variant-chip-input:checked + .variant-chip .variant-chip-check::after {
        transform: rotate(45deg) scale(1);
    }
    .dedi-variant-builder .variant-chip-input:focus-visible + .variant-chip {
        outline: 2px solid var(--dedi-blue, #E8187A);
        outline-offset: 2px;
    }

    .dedi-variant-builder .variant-value-block {
        margin-top: 12px;
        padding: 14px;
        border-radius: 10px;
        background: var(--dedi-blue-mist, #FFF5F8);
        border: 1px dashed var(--dedi-line, #EDDDEA);
    }
    .dedi-variant-builder .variant-value-block:first-child {
        margin-top: 0;
    }
    .dedi-variant-builder .variant-value-block .variant-section-label {
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: 600;
    }

    .dedi-variant-builder .variant-values-placeholder {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px;
        border-radius: 10px;
        background: var(--dedi-canvas, #FFF5F8);
        border: 1px dashed var(--dedi-line, #EDDDEA);
        color: var(--dedi-muted, #7A6070);
        font-size: 13px;
    }
    .dedi-variant-builder .variant-values-placeholder svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: var(--dedi-blue, #E8187A);
    }

    .dedi-variant-builder .variant-generate-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        font-weight: 600;
        border-radius: 10px;
    }
    .dedi-variant-builder .variant-generate-btn svg {
        width: 15px;
        height: 15px;
    }

    .dedi-variant-builder .variant-results {
        margin-top: 18px;
        border: 1px solid var(--dedi-line, #EDDDEA);
        border-radius: var(--vb-radius);
        overflow: hidden;
        background: #fff;
    }
    .dedi-variant-builder .variant-results-header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 16px;
        background: var(--dedi-blue-soft, #FDEEF5);
        border-bottom: 1px solid var(--dedi-line, #EDDDEA);
    }
    .dedi-variant-builder .variant-results-header strong {
        color: var(--dedi-ink, #1A1A1A);
        font-size: 14px;
    }
    .dedi-variant-builder .variant-results-note {
        font-size: 12px;
        color: var(--dedi-muted, #7A6070);
    }
    .dedi-variant-builder #variants-table thead th {
        background: #fff;
        color: var(--dedi-ink, #1A1A1A);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 650;
        padding: 10px 14px;
        border: none;
        border-bottom: 1px solid var(--dedi-line, #EDDDEA);
    }
    .dedi-variant-builder #variants-table td {
        padding: 10px 14px;
        vertical-align: middle;
        border-bottom: 1px solid var(--dedi-line, #EDDDEA);
        color: var(--dedi-ink, #1A1A1A);
    }
    .dedi-variant-builder #variants-table tbody tr:last-child td {
        border-bottom: none;
    }
    .dedi-variant-builder #variants-table .variant-label-cell {
        font-weight: 600;
    }
    .dedi-variant-builder #variants-table .variant-qty-input,
    .dedi-variant-builder #variants-table .variant-price-input {
        max-width: 100%;
        border-radius: 8px;
    }
    .dedi-variant-builder .variant-remove-row {
        width: 34px;
        height: 34px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid var(--dedi-line, #EDDDEA);
        background: #fff;
        color: var(--dedi-muted, #7A6070);
        font-size: 18px;
        line-height: 1;
    }
    .dedi-variant-builder .variant-remove-row:hover {
        background: var(--dedi-danger-soft, #FDECEC);
        border-color: #F5C2C2;
        color: var(--dedi-danger, #DC2626);
    }
    .dedi-variant-builder .variant-empty-msg {
        margin: 14px 0 0;
        padding: 12px 14px;
        border-radius: 10px;
        background: #FFF8E8;
        border: 1px solid #F5E2B8;
        color: #8A6A1F !important;
        font-size: 13px;
        font-weight: 500;
    }
</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 valuesPlaceholder = document.getElementById('variant-values-placeholder');
    const generateBtn = document.getElementById('generate-variants-btn');
    const tableBody = document.querySelector('#variants-table tbody');
    const resultsWrap = document.getElementById('variants-results');
    const countLabel = document.getElementById('variants-count-label');
    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 refreshIcons() {
        if (typeof feather !== 'undefined') feather.replace();
    }

    function updateResultsVisibility(count) {
        if (!resultsWrap) return;
        if (count > 0) {
            resultsWrap.classList.remove('d-none');
            if (countLabel) {
                countLabel.textContent = count + (count > 1 ? ' déclinaisons' : ' déclinaison');
            }
        } else {
            resultsWrap.classList.add('d-none');
        }
    }

    function renderValuePickers() {
        if (!valuePickersContainer) return;

        const checkedAttrs = Array.from(document.querySelectorAll('.variant-attribute-checkbox:checked'));
        valuePickersContainer.innerHTML = '';

        if (!checkedAttrs.length) {
            valuePickersContainer.innerHTML = `
                <div class="variant-values-placeholder" id="variant-values-placeholder">
                    <i data-feather="mouse-pointer"></i>
                    <span>Sélectionnez au moins un attribut ci-dessus pour afficher ses valeurs.</span>
                </div>`;
            refreshIcons();
            return;
        }

        checkedAttrs.forEach(cb => {
            const attr = attributesData.find(a => a.id === parseInt(cb.value, 10));
            if (!attr) return;

            const wrap = document.createElement('div');
            wrap.className = 'variant-value-block';
            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}">
                    <span class="variant-chip-check" aria-hidden="true"></span>
                    ${v.value}
                 </label>`
            ).join('');

            if (!attr.values.length) {
                wrap.innerHTML = `<span class="variant-section-label">${attr.name}</span>
                    <p class="variant-step-hint mb-0">Aucune valeur définie pour cet attribut.</p>`;
            } else {
                wrap.innerHTML = `<span class="variant-section-label">${attr.name}</span>
                    <div class="variant-chip-group" data-attr-id="${attr.id}">${valuesHtml}</div>`;
            }
            valuePickersContainer.appendChild(wrap);
        });
        refreshIcons();
    }

    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 = {};
        if (!tableBody) return 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();
                updateResultsVisibility(tableBody.querySelectorAll('tr').length);
            });
        });
        tableBody.querySelectorAll('.variant-qty-input, .variant-price-input').forEach(input => {
            input.addEventListener('input', syncJson);
        });
    }

    function syncJson() {
        if (!jsonInput || !tableBody) return;
        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) {
        if (!tableBody) return;
        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) {
            if (emptyMsg) emptyMsg.classList.remove('d-none');
            updateResultsVisibility(0);
            if (jsonInput) jsonInput.value = '[]';
            return;
        }
        if (emptyMsg) emptyMsg.classList.add('d-none');

        const combos = cartesian(groups);
        combos.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 class="variant-label-cell">${labels}</td>
                <td><input type="number" min="0" class="form-control variant-qty-input" value="${qty}" placeholder="0"></td>
                <td><input type="number" min="0" step="0.01" class="form-control variant-price-input" value="${price}" placeholder="Auto"></td>
                <td><button type="button" class="variant-remove-row" title="Retirer">&times;</button></td>`;
            tableBody.appendChild(tr);
        });

        attachRowEvents();
        syncJson();
        updateResultsVisibility(combos.length);
        refreshIcons();
    }

    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;
        }
        refreshIcons();
    });

    // 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);
    }

    refreshIcons();
})();
</script>