@php
            $ad = $ad ?? null;
        @endphp
        <script>
            window.oldValues = @json(old());
            $(document).ready(function() {
                /* ===============================
                    EDIT VALUES FROM DB
                ================================*/
                const EDIT_QUADRANT = "{{ $ad?->quadrant_type }}";
                const EDIT_BRAND_ID = "{{ $ad?->brand_id ?? '' }}";
                const EDIT_STORE_ID = "{{ $ad?->store_id ?? '' }}";
                const EDIT_CATEGORY_ID = "{{ $ad?->category_id ?? '' }}";
                console.log(EDIT_CATEGORY_ID);
                const EDIT_SUB_CATEGORY_ID = "{{ $ad?->sub_category_id ?? '' }}";
                const QuadrantType = $('#quodrant_type').val();
                console.log(EDIT_SUB_CATEGORY_ID);
                let brandSubCategories = [];
                let productList = {};

console.log(EDIT_QUADRANT);

                /* ===============================
                    IMAGE TYPE
                ================================*/
                function handleImageType(type) {


                    // 1️⃣ Hide all forms + disable inputs
                    $('#oneProductForm, #twoProductForm, #threeProductForm, #fourProductForm')
                        .hide()
                        .find('input, select, textarea')
                        .prop('disabled', true);

                    // 2️⃣ Show selected form + enable inputs
                    if (type === 'one') {
                        $('#oneProductForm').show()
                            .find('input, select, textarea')
                            .prop('disabled', false);
                    } else if (type === 'two') {
                        $('#twoProductForm').show()
                            .find('input, select, textarea')
                            .prop('disabled', false);
                    } else if (type === 'three') {
                        $('#threeProductForm').show()
                            .find('input, select, textarea')
                            .prop('disabled', false);
                    } else if (type === 'four') {
                        $('#fourProductForm').show()
                            .find('input, select, textarea')
                            .prop('disabled', false);
                    }

                }

                handleImageType("{{ $ad?->image_type }}");

                $('.image_type').on('change', function() {
                    handleImageType($(this).val());
                });

                $('#background_type').on('change', function() {
                    const type = $(this).val();

                    if (type === 'color') {
                        $('#background_color_div').show();
                        $('#background_image_div').hide();
                    } else if (type === 'image') {
                        $('#background_color_div').hide();
                        $('#background_image_div').show();
                    } else {
                        $('#background_color_div').hide();
                        $('#background_image_div').hide();
                    }
                });

                function resetIdsFlow() {
                    $('#brand_id').val('').html(`<option value="">Select Brand</option>`);
                    $('#store_id').html(`<option value="">Select Store</option>`);
                    $('#category_id').html(`<option value="">Select Category</option>`);
                    $('#sub_category_id').html(`<option value="">Select Sub Category</option>`);
                    brandSubCategories = [];
                }

                function fillSelect(id, data, name) {
                    let html = `<option value="">Select ${name}</option>`;

                    let inputName = id.replace('#', '');
                    let oldValue = window.oldValues?.[inputName] ?? null;

                    data.forEach(item => {
                        let selected = (item.id == oldValue) ? 'selected' : '';
                        html += `<option value="${item.id}" ${selected}>${item.name}</option>`;
                    });
                    $(id).html(html);
                }

                function loadAllStoresIfEmpty() {

                    if ($('#store_id option').length <= 1) {
                        $.ajax({
                            url: "{{ route('get.all.stores') }}",
                            type: "GET",
                            success: function(res) {

                                // fill dropdown
                                fillSelect('#store_id', res.stores, 'Store');

                                // edit page par store auto select
                                if (EDIT_STORE_ID) {
                                    $('#store_id').val(EDIT_STORE_ID).trigger('change');
                                }
                            }
                        });
                    } else {
                        // dropdown already filled (edit page reload case)
                        if (EDIT_STORE_ID) {
                            $('#store_id').val(EDIT_STORE_ID).trigger('change');
                        }
                    }
                }


                /* ===============================
                    QUADRANT TYPE
                ================================*/
                function handleQuadrantType(type) {
                    resetIdsFlow();
                    loadAllStoresIfEmpty();
                    $('#brandBox, #priceRangeBox').hide();

                    if (type === 'Within a range of prices') {
                        $('#priceRangeBox').slideDown();
                    }

                    if (type === 'Brand-specific') {
                        $('#brandBox').slideDown();
                        loadBrands();
                    }

                    if (type === 'Carto fresh categories') loadCartoFresh();
                    if (type === 'Deals within categories') {
                        $.ajax({
                            url: "{{ route('get.deals.within.categories') }}",
                            type: "GET",
                            success: function(res) {
                                fillSelect('#store_id', res.stores, 'Store');
                                fillSelect('#category_id', res.categories, 'Categories');
                                fillSelect('#subcategory_id', res.subcategories, 'Sub Categories');
                                fillSelect('#product_id', res.products, 'Products');
                            }
                        });
                    }
                    if (type === 'New products') {
                        console.log('🟢 Quadrant Type is NEW PRODUCTS');
                        $('#oneProductForm').hide();
                        $('#fourProductForm').show();

                        loadProducts({
                            limit: 4,
                            targetForm: '#fourProductForm',
                            makeReadonly: true
                        });
                        loadSubCategories(EDIT_CATEGORY_ID);
                    }
                    if (type === 'Top sellers') {
                        loadProducts(null, null, 'top_sellers');
                    }
                    if (type === 'Free delivery') {
                        $.ajax({
                            url: "{{ route('get.free.delivery') }}",
                            type: "GET",
                            success: function(res) {
                                fillSelect('#store_id', res.stores, 'Store');
                                fillSelect('#category_id', res.categories, 'Categories');
                                fillSelect('#subcategory_id', res.subcategories, 'Sub Categories');
                                fillSelect('#product_id', res.products, 'Products');
                            }
                        });
                    }
                }

                $('#quodrant_type').on('change', function() {
                    handleQuadrantType($(this).val());
                });

                if (EDIT_QUADRANT) {
                    $('#quodrant_type').val(EDIT_QUADRANT).trigger('change');
                }

                if (EDIT_CATEGORY_ID) {
                    loadSubCategories(EDIT_CATEGORY_ID);
                }

                /* ===============================
                    BRAND FLOW (MERGED)
                ================================*/
                function loadBrands() {
                    $.get("{{ route('get.brand.specefic') }}", function(res) {

                        let html = `<option value="">Select Brand</option>`;
                        res.brands.forEach(b => {
                            html +=
                                `<option value="${b.id}" ${b.id == EDIT_BRAND_ID ? 'selected' : ''}>${b.name}</option>`;
                        });

                        $('#brand_id').html(html);
                        if (EDIT_BRAND_ID && QuadrantType == 'Brand-specific') {
                            loadBrandWiseData(EDIT_BRAND_ID, true);
                        }
                    });
                }

                function loadBrandWiseData(brandId, isEdit = false) {

                    if (!brandId) return;
                    console.log('brand-data');
                    $.get('/brand-wise-data', {
                        brand_id: brandId
                    }, function(res) {

                        /* STORE */
                        let storeHtml = `<option value="">Select Store</option>`;
                        res.stores.forEach(s => {
                            storeHtml +=
                                `<option value="${s.id}" ${isEdit && s.id == EDIT_STORE_ID ? 'selected' : ''}>${s.name}</option>`;
                        });
                        $('#store_id').html(storeHtml);

                        /* CATEGORY */
                        let catHtml = `<option value="">Select Category</option>`;
                        res.categories.forEach(c => {
                            catHtml +=
                                `<option value="${c.id}" ${isEdit && c.id == EDIT_CATEGORY_ID ? 'selected' : ''}>${c.name}</option>`;
                        });
                        $('#category_id').html(catHtml);

                        /* SUB CATEGORY */
                        brandSubCategories = res.subcategories;

                        let subHtml = `<option value="">Select Sub Category</option>`;
                        brandSubCategories
                            .filter(s => s.parent_id == EDIT_CATEGORY_ID)
                            .forEach(s => {
                                subHtml +=
                                    `<option value="${s.id}" ${isEdit && s.id == EDIT_SUB_CATEGORY_ID ? 'selected' : ''}>${s.name}</option>`;
                            });

                        $('#sub_category_id').html(subHtml);

                        loadProducts(null, null, 'brand_specefic');
                    });
                }

                $('#brand_id').on('change', function() {
                    loadBrandWiseData($(this).val());
                });

                /* ===============================
                    CARTO FRESH
                ================================*/
                function loadCartoFresh() {

                    $.ajax({
                        url: '/get-carto-fresh-data',
                        type: 'GET',
                        success: function(res) {

                            /* STORE */
                            let storeHtml = `<option value="">Select Store</option>`;
                            res.stores.forEach(s => {
                                storeHtml +=
                                    `<option value="${s.id}" ${s.id == res.store_id ? 'selected' : ''}>${s.name}</option>`;
                            });
                            $('#store_id').html(storeHtml);

                            $('#store_id').val(res.store_id).trigger('change');

                            /* CATEGORY */
                            setTimeout(() => {
                                $('#category_id').val(res.category_id).trigger('change');
                            }, 300);

                            /* SUB CATEGORY (🔥 FIX) */
                            setTimeout(() => {

                                let subHtml = `<option value="">Select Sub Category</option>`;

                                res.sub_categories.forEach(sub => {
                                    subHtml +=
                                        `<option value="${sub.id}" ${sub.id == res.sub_category_id ? 'selected' : ''}>${sub.name}</option>`;
                                });

                                $('#sub_category_id').html(subHtml);

                            }, 600);

                            /* PRODUCTS */
                            setTimeout(() => {
                                loadProducts();
                            }, 900);
                        }
                    });
                }

                function populateAllProductSelects(products) {

                    $('.product-select').each(function() {

                        let select = $(this);
                        let row = select.closest('tr');
                        let selectedId = select.data('selected'); // DB product_id

                        // Build dropdown
                        let options = `<option value="">Select Product</option>`;
                        products.forEach(product => {
                            options += `
                <option value="${product.id}" ${product.id == selectedId ? 'selected' : ''}>
                    ${product.name}
                </option>
            `;
                        });
                        select.html(options);

                        // 👉 EDIT MODE: fill title/price/image using selected product
                        {{--  if (selectedId) {
                                let product = products.find(p => p.id == selectedId);
                                if (product) {
                                    fillRow(row, product);
                                }
                            }  --}}
                    });
                }


                /* ===============================
                    LOAD PRODUCTS
                ================================*/
                function loadProducts(minPrice = null, maxPrice = null, quadrantType = null) {

                    function resetForm(formSelector) {
                        $(formSelector + ' tbody tr').each(function() {

                            //  Edit value not clear
                            if (!$(this).find('.product-select').data('selected')) {
                                $(this).find('.product-select').html(
                                    '<option value="">Select Product</option>');
                                $(this).find('input[name*="[title]"]').val('');
                                $(this).find('input[name*="[price]"]').val('');
                                $(this).find('input[name*="[new_price]"]').val('');
                            }
                        });
                    }

                    resetForm('#fourProductForm');
                    resetForm('#oneProductForm');
                    resetForm('#threeProductForm');

                    const imageType = $('input[name="image_type"]:checked').val() ?? 'four';
                    handleImageType(imageType);
                    {{--  let store_id= $('#store_id').val();
                    console.log(store_id);
                    let category_id= $('#category_id').val();
                    let subCategoryId= $('#sub_category_id').val();
                    let BrandId= $('#brand_id').val();  --}}
                    let store_id = $('#store_id').val() || EDIT_STORE_ID;
                    let category_id = $('#category_id').val() || EDIT_CATEGORY_ID;
                    let subCategoryId = $('#sub_category_id').val() || EDIT_SUB_CATEGORY_ID;
                    let BrandId = $('#brand_id').val() || EDIT_BRAND_ID;

                    $.get('{{ route('get.new.products') }}', {
                        store_id: store_id,
                        category_id: category_id,
                        subCategoryId: subCategoryId,
                        BrandId: BrandId,
                        // limit: imageType === 'one' ? 1 : 4,

                        min_price: minPrice,
                        max_price: maxPrice,
                        quodrant_type: quadrantType
                    }, function(res) {

                        if (!res.products?.length) {
                            alert('No products found');
                            return;
                        }

                        // ✅ Build productList
                        productList = {};
                        res.products.forEach(p => productList[p.id] = p);

                        // ✅ Populate selects + fill edit data
                        populateAllProductSelects(res.products);

                        console.log("📦 productList object:", productList);
                        {{--  $('#fourProductForm tbody tr').each(function(i) {
                        if (!res.products[i]) return;
                        fillRow($(this), res.products[i]);
                    });

                    $('#threeProductForm tbody tr').each(function(i) {
                        if (!res.products[i]) return;
                        fillRow($(this), res.products[i]);
                    });

                     $('#twoProductForm tbody tr').each(function(i) {
                        if (!res.products[i]) return;
                        fillRow($(this), res.products[i]);
                    });

                    $('#oneProductForm tbody tr').each(function(i) {
                        if (!res.products[i]) return;
                        fillRow($(this), res.products[i], true);
                    });  --}}
                    });
                }

                function fillRow(row, product) {

                    row.find('.product-select').val(product.id);

                    // Multi product forms
                    row.find('input[name*="[title]"]').val(product.name || '');
                    row.find('input[name*="[price]"]').val(product.price || '0.00');
                    row.find('input[name*="[new_price]"]').val(product.price || '0.00');

                    // Single product form
                    if (row.closest('#oneProductForm').length) {
                        $('input[name="title"]').val(product.name || '');
                        $('input[name="price"]').val(product.price || '0.00');
                        $('input[name="new_price"]').val(product.price || '0.00');
                    }
                }



                // 🔁 Load categories and pre-select
                function loadCategories(storeId, callback) {
                    $('#category_id').empty().append('<option value="">{{ trans('lang.select_category') }}</option>');
                    if (storeId) {
                        $.get('/get-categories-for-store/' + storeId, function(data) {
                            $.each(data, function(key, category) {
                                const selected = category.id == EDIT_CATEGORY_ID ? 'selected' : '';
                                $('#category_id').append(
                                    `<option value="${category.id}" ${selected}>${category.name}</option>`
                                );
                            });
                            callback && callback();
                        });
                    }
                }

                // 📁 Load subcategories and pre-select
                {{--  function loadSubCategories(categoryId) {
                $('#sub_category_id').empty();
                if (categoryId) {
                    $.get('/get-subcategories?category_id=' + categoryId, function(data) {
                        $('#sub_category_id').append(
                            '<option value="">{{ trans('lang.select_sub_category') }}</option>');
                        $.each(data, function(key, sub) {
                            const selected = sub.id == EDIT_SUB_CATEGORY_ID ? 'selected' : '';
                            $('#sub_category_id').append(
                                `<option value="${sub.id}" ${selected}>${sub.name}</option>`);
                        });
                    });
                }
            }  --}}

                function loadSubCategories(categoryId) {
                    const $sub = $('#sub_category_id');

                    // completely reset dropdown
                    $sub.html(`<option value="">{{ trans('lang.select_sub_category') }}</option>`);

                    if (!categoryId) return;

                    $.get('/get-subcategories', {
                        category_id: categoryId
                    }, function(data) {
                        $.each(data, function(key, sub) {
                            const selected = (sub.id == EDIT_SUB_CATEGORY_ID) ? 'selected' : '';
                            {{--  console.log(selected);  --}}
                            $sub.append(
                                `<option value="${sub.id}" ${selected}>${sub.name}</option>`
                            );
                        });
                    });
                }


                $('#priceRangeBox input').on('keyup change', function() {

                    const minPrice = $('#min_price').val();
                    const maxPrice = $('#max_price').val();

                    // call only when both values exist
                    if (minPrice !== '' && maxPrice !== '' && !isNaN(minPrice) && !isNaN(maxPrice)) {
                        loadProducts(minPrice, maxPrice);
                    }
                });






                // When editing → auto load products so selected values appear
                if ($('#store_id').val() && $('#category_id').val() && $('#sub_category_id').val()) {

                    const storeId = $('#store_id').val();
                    const categoryId = $('#category_id').val();
                    const subCategoryId = $('#sub_category_id').val();

                    loadProducts();
                }

                $('#store_id').on('change', function() {
                    const storeId = $(this).val();
                    const quadrantType = $('#quodrant_type').val();
                    const minPrice = $('#min_price').val();
                    const maxPrice = $('#max_price').val();
                    const BrandId = $('#brand_id').val();

                    $('#category_id').empty().append(
                        '<option value="">{{ trans('lang.select_category') }}</option>');
                    {{--  $('#brand_id').empty().append(
                    '<option value="">{{ trans('lang.select_brand') }}</option>');  --}}
                    $('#sub_category_id').empty().append(
                        '<option value="">{{ trans('lang.select_sub_category') }}</option>');
                    $('.product-select').empty().append(
                        '<option value="">{{ trans('lang.select_product') }}</option>');
                    if (quadrantType === 'New products') {

                        console.log('🟢 Quadrant Type is NEW PRODUCTS');

                        $('#oneProductForm').hide();
                        $('#fourProductForm').show();

                        loadProducts({
                            storeId: storeId,
                            limit: 4,
                            targetForm: '#fourProductForm',
                            makeReadonly: true
                        });

                    }
                    if (minPrice !== '' && maxPrice !== '' && !isNaN(minPrice) && !isNaN(maxPrice)) {
                        loadProducts(minPrice, maxPrice);
                    }

                    if (quadrantType === 'Top sellers') {
                        loadProducts(null, null, 'top_sellers');
                    }

                    if (quadrantType === 'Deals within categories') {
                        loadProducts(null, null, 'deals_within_categories');
                    }

                    if (quadrantType === 'Free delivery') {
                        loadProducts(null, null, 'free_delivery');
                    }


                    if (quadrantType === 'Brand-specific') {
                        loadProducts(null, null, 'brand_specefic');
                    }

                    loadCategories(storeId);

                    {{--  if (storeId) {
                    $.ajax({
                        url: `/get-categories-for-store/${storeId}`,
                        type: 'GET',
                        success: function(data) {
                            $.each(data, function(key, category) {
                                $('#category_id').append(
                                    `<option value="${category.id}">${category.name}</option>`
                                );
                            });
                        },
                        error: function() {
                            alert('Unable to load categories');
                        }
                    });
                }  --}}
                });


                // 🔁 INIT: Load all dropdowns if edit
                {{--  if (EDIT_STORE_ID) {
                loadCategories(EDIT_STORE_ID, function() {
                    if (EDIT_CATEGORY_ID) {
                        if (EDIT_SUB_CATEGORY_ID) {
                            loadProducts();
                        }
                    }
                });
            }  --}}


                // 👂 On Category Change
                $('#category_id').on('change', function() {
                    console.log('📌 Category change event fired');
                    const categoryId = $(this).val();
                    const storeId = $('#store_id').val();
                    const quadrantType = $('#quodrant_type').val();
                    const minPrice = $('#min_price').val();
                    const maxPrice = $('#max_price').val();
                    const BrandId = $('#brand_id').val();


                    console.log('👉 Selected Values:', {
                        categoryId: categoryId,
                        storeId: storeId,
                        quadrantType: quadrantType
                    });

                    // reset sub category
                    {{--  $('#sub_category_id').empty()
                    .append('<option value="">{{ trans('lang.select_sub_category') }}</option>');  --}}

                    if (!categoryId) {
                        console.warn('⚠ Missing category ');
                        {{--  return;  --}}
                    }

                    /* ===============================
                       CASE 1 : NEW PRODUCTS
                    ================================*/
                    if (quadrantType === 'New products') {

                        console.log('🟢 Quadrant Type is NEW PRODUCTS');

                        $('#oneProductForm').hide();
                        $('#fourProductForm').show();

                        loadProducts({
                            storeId: storeId,
                            categoryId: categoryId,
                            limit: 4,
                            targetForm: '#fourProductForm',
                            makeReadonly: true
                        });

                    }

                    if (minPrice !== '' && maxPrice !== '' && !isNaN(minPrice) && !isNaN(maxPrice)) {
                        loadProducts(minPrice, maxPrice);
                    }


                    if (quadrantType === 'Top sellers') {
                        loadProducts(null, null, 'top_sellers');

                    }

                    if (quadrantType === 'Deals within categories') {
                        loadProducts(null, null, 'deals_within_categories');
                    }

                    if (quadrantType === 'Free delivery') {
                        loadProducts(null, null, 'free_delivery');
                    }

                    if (quadrantType === 'Brand-specific') {
                        loadProducts(null, null, 'brand_specefic');
                    }

                    console.log(quadrantType);
                    if (BrandId !== '' && !isNaN(BrandId) && quadrantType == 'Brand-specific') {
                        console.log(' Brand specific subcategory flow');

                        let filteredSubs = brandSubCategories.filter(sub => {
                            return sub.parent_id == categoryId;
                        });

                        filteredSubs.forEach(sub => {
                            $('#sub_category_id').append(
                                `<option value="${sub.id}">${sub.name}</option>`
                            );
                        });

                        return;
                    }
                    loadSubCategories(categoryId);
                });

                // 👂 On Subcategory Change
                $('#sub_category_id').on('change', function() {
                    const storeId = $('#store_id').val();
                    const categoryId = $('#category_id').val();
                    const subCategoryId = $(this).val();
                    const BrandId = $('#brand_id').val();
                    const quadrantType = $('#quodrant_type').val();
                    const minPrice = $('#min_price').val();
                    const maxPrice = $('#max_price').val();

                    console.log("Store:", storeId, "Category:", categoryId, "Sub:", subCategoryId, "type:",
                        quadrantType, "brand:", BrandId);

                    // clear all product selects
                    $('.product-select').empty().append(
                        '<option value="">{{ trans('lang.select_product') }}</option>');

                    if (!storeId || (!categoryId && !subCategoryId)) {
                        console.log("⚠ Store ID or Category/Subcategory missing!");
                        {{--  return;  --}}
                    }
                    if (quadrantType === 'New products') {

                        console.log('🟢 Quadrant Type is NEW PRODUCTS');

                        $('#oneProductForm').hide();
                        $('#fourProductForm').show();

                        loadProducts({
                            storeId: storeId,
                            subCategoryId: subCategoryId,
                            limit: 4,
                            targetForm: '#fourProductForm',
                            makeReadonly: true
                        });

                        return;
                    }
                    if (quadrantType === 'Carto fresh categories') {

                        console.log('🟢 Quadrant Type is Carto fresh categories');

                        $('#oneProductForm').hide();
                        $('#fourProductForm').show();

                        loadProducts({
                            storeId: storeId,
                            subCategoryId: subCategoryId,
                            limit: 4,
                            targetForm: '#fourProductForm',
                            makeReadonly: true
                        });

                        return;
                    }


                    // call only when both values exist
                    if (minPrice !== '' && maxPrice !== '' && !isNaN(minPrice) && !isNaN(maxPrice)) {
                        loadProducts(minPrice, maxPrice);
                        return;
                    }

                    if (quadrantType === 'Top sellers') {
                        loadProducts(null, null, 'top_sellers');
                        return;
                    }

                    if (quadrantType === 'Deals within categories') {
                        loadProducts(null, null, 'deals_within_categories');
                        return;

                    }

                    if (quadrantType === 'Free delivery') {
                        loadProducts(null, null, 'free_delivery');
                        return;

                    }

                    if (quadrantType === 'Brand-specific') {
                        loadProducts(null, null, 'brand_specefic');
                        return;
                    }

                    loadProducts();
                });


                if (EDIT_STORE_ID) {
                    loadProducts();
                }

                // When any product is selected → fill title & price
                $(document).on('change', '.product-select', function() {

                    const productId = $(this).val();
                    const row = $(this).closest('tr');

                    if (!productId || !productList[productId]) {
                        row.find('input[name*="[title]"]').val('');
                        row.find('input[name*="[price]"]').val('');
                        row.find('input[name*="[new_price]"]').val('');
                        return;
                    }

                    fillRow(row, productList[productId]);
                });

            });

            function updateGradient() {
                const c1 = document.getElementById('color1').value;
                const c2 = document.getElementById('color2').value;
                const dir = document.getElementById('direction').value;

                // 👉 Preview ke liye
                const gradientCss = `linear-gradient(${dir}, ${c1}, ${c2})`;

                // 👉 DB ke liye
                const gradientJson = JSON.stringify([c1, c2]);

                {{--  document.getElementById('gradientPreview').style.background = gradientCss;  --}}
                document.getElementById('background_color').value = gradientJson;
                console.log(c1);
                document.getElementById('gradientPreview').style.background =
                    `linear-gradient(to bottom, ${c1}, ${c2})`;
            }

            document.getElementById('color1').addEventListener('input', updateGradient);
            document.getElementById('color2').addEventListener('input', updateGradient);
            document.getElementById('direction').addEventListener('change', updateGradient);

            document.addEventListener('DOMContentLoaded', function() {
                const bgInput = document.getElementById('background_color');
                if (!bgInput || !bgInput.value) return;

                let colors;

                try {
                    colors = JSON.parse(bgInput.value);
                } catch (e) {
                    console.warn('Invalid background_color JSON');
                    return;
                }

                if (Array.isArray(colors)) {
                    const c1 = colors[0] ?? '#ff0000';
                    const c2 = colors[1] ?? '#0000ff';
                    console.log(c1);
                    // 👉 color inputs set
                    document.getElementById('color1').value = c1;
                    document.getElementById('color2').value = c2;

                    // 👉 preview set
                    document.getElementById('gradientPreview').style.background =
                        `linear-gradient(to bottom, ${c1}, ${c2})`;
                }
            });
        </script>