@php
    $formIdPrefix = $formIdPrefix ?? 'combo_form';
    $formPrefixesCombos = $formPrefixesCombos ?? [$formIdPrefix];
@endphp
<script>
    @if (($formMode ?? 'create') === 'edit')
        function deleteComboMedia(productId, mediaId) {
    console.log('fsdfsf');

            if (confirm('{{ trans('lang.confirm_delete_image') }}')) {
                const form = document.getElementById('media-delete-form');
                if (!form) {
                    return;
                }
                form.action = `/combos/${productId}/media/${mediaId}`;
                form.submit();
            }
        }
    @endif
    let availableComboProductsByPrefix = {};
    let comboFormPrefixes = @json($formPrefixesCombos);
    let initialComboProducts = @json($products ?? []);
    const isComboEditMode = @json(($formMode ?? 'create') === 'edit');

    function normalizeSelectedIds(selected) {
        if (!selected) {
            return [];
        }
        if (Array.isArray(selected)) {
            return selected.map(v => parseInt(v, 10)).filter(v => !Number.isNaN(v));
        }
        if (typeof selected === 'string') {
            try {
                const parsed = JSON.parse(selected);
                if (Array.isArray(parsed)) {
                    return parsed.map(v => parseInt(v, 10)).filter(v => !Number.isNaN(v));
                }
            } catch (e) {
                // fall through
            }
        }
        return [];
    }

    comboFormPrefixes.forEach(prefix => {
        availableComboProductsByPrefix[prefix] = initialComboProducts;
    });

    function generateProductRow(prefix, index = Date.now()) {
        let productOptions = '<option value="">Select</option>';
        (availableComboProductsByPrefix[prefix] || []).forEach(p => {
            productOptions += `<option value="${p.id}">${p.name}</option>`;
        });

        return `
            <tr data-id="${index}">
                <td>
                    <select name="product_items[${index}][product_id]" class="form-control combo-product-select" data-row-id="${index}">
                        ${productOptions}
                    </select>
                </td>
                <td>
                    <div class="combo-attributes" data-selected="[]">
                        <div class="combo-attribute-rows"></div>
                        <button type="button" class="btn btn-sm btn-outline-primary add-attribute-row">+ Attribute</button>
                    </div>
                </td>
                <td>
                    <input type="number" name="product_items[${index}][quantity]" value="1" min="1" class="form-control" />
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-product-row">X</button>
                </td>
            </tr>
        `;
    }

    function loadProductsForStore(prefix, storeId, options = {}) {
        const $rows = $(`#${prefix}_product-rows`);
        if (!options.keepRows) {
            $rows.empty();
        }

        if (!storeId) {
            availableComboProductsByPrefix[prefix] = [];
            return null;
        }

        return $.ajax({
            url: `/get-products-by-store/${storeId}`,
            type: 'GET',
            success: function(data) {
                availableComboProductsByPrefix[prefix] = data;
            },
            error: function() {
                alert('Could not load products for selected store.');
                availableComboProductsByPrefix[prefix] = [];
            }
        });
    }

    function buildAttributeRow(rowIndex, attributes, selectedProductAttrId) {
        let attributeOptions = '<option value="">Select Attribute</option>';
        attributes.forEach(attr => {
            attributeOptions += `<option value="${attr.id}">${attr.name}</option>`;
        });

        const uniqueKey = Date.now() + Math.floor(Math.random() * 1000);
        const selectedAttrValue = selectedProductAttrId ? String(selectedProductAttrId) : '';

        return `
            <div class="combo-attribute-row d-flex gap-2 mb-2" data-key="${uniqueKey}" data-selected-id="${selectedAttrValue}">
                <select class="form-control combo-attribute-name" data-row-id="${rowIndex}">
                    ${attributeOptions}
                </select>
                <select class="form-control combo-attribute-value" data-row-id="${rowIndex}">
                    <option value="">Select Value</option>
                </select>
                <input type="hidden" class="combo-product-attribute-id"
                    name="product_items[${rowIndex}][attributes][${uniqueKey}][product_attribute_id]"
                    value="${selectedAttrValue}">
                <input type="hidden" class="combo-attribute-value-id"
                    name="product_items[${rowIndex}][attributes][${uniqueKey}][attribute_value_id]"
                    value="">
                <button type="button" class="btn btn-danger btn-sm remove-attribute-row">X</button>
            </div>
        `;
    }

    {{--  function populateAttributes($row, productId, selectedProductAttributeIds) {
        const $attributesBox = $row.find('.combo-attributes');
        const $rows = $attributesBox.find('.combo-attribute-rows');
        $rows.empty();

        if (!productId) {
            return;
        }

        $.ajax({
            url: `/get-product-attributes/${productId}`,
            type: 'GET',
            success: function(resp) {
                const attributes = resp.attributes || [];
                $row.data('productAttributes', attributes);

                const selectedIds = normalizeSelectedIds(selectedProductAttributeIds);
                if (selectedIds.length === 0) {
                    $rows.append(buildAttributeRow($row.attr('data-id'), attributes, null));
                } else {
                    selectedIds.forEach(selectedProductAttrId => {
                        $rows.append(buildAttributeRow($row.attr('data-id'), attributes, selectedProductAttrId));
                    });
                }

                $rows.find('select').select2({ width: '100%' });

                if (selectedIds.length > 0) {
                    selectedIds.forEach(selectedProductAttrId => {
                        const attrMatch = attributes.find(a => a.values.some(v => Number(v.product_attribute_id) === Number(selectedProductAttrId)));
                        if (!attrMatch) {
                            return;
                        }
                        const $attrRow = $rows.find(`.combo-attribute-row[data-selected-id="${String(selectedProductAttrId)}"]`).last();
                        const $attributeSelect = $attrRow.find('.combo-attribute-name');
                        const $valueSelect = $attrRow.find('.combo-attribute-value');

                        $attributeSelect.val(attrMatch.id).trigger('change.select2');
                        $valueSelect.empty().append('<option value="">Select Value</option>');
                        attrMatch.values.forEach(v => {
                            const label = v.label || v.name || 'Value';
                            $valueSelect.append(`<option value="${v.id}" ${Number(v.product_attribute_id) === Number(selectedProductAttrId) ? 'selected' : ''}>${label}</option>`);
                        });
                        $valueSelect.trigger('change.select2');
                        $attrRow.find('.combo-product-attribute-id').val(selectedProductAttrId);
                        const selectedValueId = attrMatch.values.find(v => Number(v.product_attribute_id) === Number(selectedProductAttrId))?.id;
                        $attrRow.find('.combo-attribute-value-id').val(selectedValueId || '');
                    });
                }
            },
            error: function() {
                $rows.empty();
            }
        });
    }  --}}
function populateAttributes($row, productId, selectedProductAttributeIds) {

    const $attributesBox = $row.find('.combo-attributes');
    const $rows = $attributesBox.find('.combo-attribute-rows');
    const $addBtn = $attributesBox.find('.add-attribute-row');

    $rows.empty();

    if (!productId) {
        $attributesBox.hide();
        return;
    }

    $.ajax({
        url: `/get-product-attributes/${productId}`,
        type: 'GET',
        success: function(resp) {

            const attributes = resp.attributes || [];

            // ✅ No attributes case
            if (attributes.length === 0) {

                $attributesBox.show(); // box visible
                $rows.html('<p class="text-muted mb-0">No attributes available for this product</p>');
                $addBtn.hide(); // button hide

                return;
            }

            // ✅ Attributes available
            $attributesBox.show();
            $addBtn.show();

            $row.data('productAttributes', attributes);

            const selectedIds = normalizeSelectedIds(selectedProductAttributeIds);

            if (selectedIds.length === 0) {
                $rows.append(buildAttributeRow($row.attr('data-id'), attributes, null));
            } else {
                selectedIds.forEach(selectedProductAttrId => {
                    $rows.append(buildAttributeRow($row.attr('data-id'), attributes, selectedProductAttrId));
                });
            }

            $rows.find('select').select2({ width: '100%' });

        },
        error: function() {
            $attributesBox.hide();
        }
    });
}

    comboFormPrefixes.forEach(prefix => {
        const $store = $(`#${prefix}_store`);
        const $addRow = $(`#${prefix}_add-product-row`);
        const $rows = $(`#${prefix}_product-rows`);

        if ($store.length) {
            $store.on('change', function() {
                loadProductsForStore(prefix, $(this).val());
            });

            const initialStoreId = $store.val();
            if (initialStoreId) {
                loadProductsForStore(prefix, initialStoreId, { keepRows: isComboEditMode });
            }
        }

        $addRow.on('click', function() {
            const storeId = $store.val();
            if (!storeId) {
                alert('Please select a store first.');
                return;
            }

            if ((availableComboProductsByPrefix[prefix] || []).length === 0) {
                const req = loadProductsForStore(prefix, storeId, { keepRows: true });
                if (req && typeof req.then === 'function') {
                    req.then(() => {
                        if ((availableComboProductsByPrefix[prefix] || []).length === 0) {
                            alert('No products found for the selected store.');
                            return;
                        }
                        $rows.append(generateProductRow(prefix));
                    });
                    return;
                }
            }

            {{--  $rows.append(generateProductRow(prefix));  --}}
        });

        $rows.on('change', '.combo-product-select', function() {
            const $row = $(this).closest('tr');
            const productId = $(this).val();
            populateAttributes($row, productId, []);
        });

        $rows.on('click', '.add-attribute-row', function() {
            const $row = $(this).closest('tr');
            const attributes = $row.data('productAttributes') || [];
            const rowIndex = $row.attr('data-id');
            const $rowsBox = $row.find('.combo-attribute-rows');

            if (!attributes.length) {
                return;
            }
            $rowsBox.append(buildAttributeRow(rowIndex, attributes, null));
            const $lastRow = $rowsBox.find('.combo-attribute-row').last();
            $lastRow.find('select').select2({ width: '100%' });
        });

        $rows.on('click', '.remove-attribute-row', function() {
            $(this).closest('.combo-attribute-row').remove();
        });

        $rows.on('change', '.combo-attribute-name', function() {
            const $attrRow = $(this).closest('.combo-attribute-row');
            const $row = $(this).closest('tr');
            const attributes = $row.data('productAttributes') || [];
            const attrId = parseInt($(this).val(), 10);
            const $valueSelect = $attrRow.find('.combo-attribute-value');
            const $hidden = $attrRow.find('.combo-product-attribute-id');

            $valueSelect.empty().append('<option value="">Select Value</option>');
            $hidden.val('');

            const values = attributes.find(a => a.id === attrId)?.values || [];
            console.log('attrMatch.values', values)

            values.forEach(v => {
                const label = v.label || v.name || 'Value';
                $valueSelect.append(`<option value="${v.id}">${label}</option>`);
            });
            $valueSelect.trigger('change.select2');
        });

        $rows.on('change', '.combo-attribute-value', function() {
            const $attrRow = $(this).closest('.combo-attribute-row');
            const $row = $(this).closest('tr');
            const attributes = $row.data('productAttributes') || [];
            const attrId = parseInt($attrRow.find('.combo-attribute-name').val(), 10);
            const valueId = parseInt($(this).val(), 10);
            const $hidden = $attrRow.find('.combo-product-attribute-id');
            const $valueHidden = $attrRow.find('.combo-attribute-value-id');

            const match = attributes.find(a => a.id === attrId)?.values.find(v => v.id === valueId);
            $hidden.val(match ? match.product_attribute_id : '');
            $valueHidden.val(match ? match.id : '');
        });

        $rows.on('click', '.remove-product-row', function() {
            $(this).closest('tr').remove();
        });

        // Initialize existing rows (edit mode)
        $rows.find('tr').each(function() {
            const $row = $(this);
            const productId = $row.find('.combo-product-select').val();
            const selected = normalizeSelectedIds($row.find('.combo-attributes').data('selected'));
            if (productId) {
                populateAttributes($row, productId, selected);
            }
        });
    });
</script>