@extends('layouts.app')

@section('content')
    <style>
        .gap-3 {
            gap: 20px;
        }

        #oneProductForm,
        #fourProductForm {
            display: none;
        }
    </style>
    <div class="page-wrapper">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">{{ trans('lang.quodrant_ads_plural') }}</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{!! route('quodrant_ads') !!}">{{ trans('lang.quodrant_ads_plural') }}</a>
                    </li>
                    <li class="breadcrumb-item active">{{ trans('lang.quodrant_ads_edit') }}</li>
                </ol>
            </div>
        </div>

        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form action="{{ route('quodrant_ads.put', $ad->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card  pb-4">

                        <div class="card-header">
                            <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                                <li role="presentation" class="nav-item">
                                    <a href="#quodrant_ads_information" aria-controls="description" role="tab"
                                        data-toggle="tab"
                                        class="nav-link active">{{ trans('lang.quodrant_ads_information') }}</a>
                                </li>
                            </ul>
                        </div>

                        <div class="card-body">

                            <div id="data-table_processing" class="dataTables_processing panel panel-default"
                                style="display: none;">
                                {{ trans('lang.processing') }}
                            </div>
                            <div class="error_top" style="display:none"></div>
                            {{--  <div class="error_top" style="display:none; color: red; margin-bottom: 15px;"></div>  --}}

                            @include('alerts.error_messages')
                            <div class="row restaurant_payout_create" role="tabpanel" style="max-width: 100% !important">

                                <div class="restaurant_payout_create-inner tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="advertisement_information">
                                        <fieldset>
                                            <legend>{{ trans('lang.quodrant_ads_edit') }}</legend>
                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.advertisement_title') }}</label>
                                                <div class="col-7">
                                                    <input type="text" class="form-control ad-title" name="main_title"
                                                        value="{{ $ad->title }}">
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.advertisement_title_help') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row width-100">
                                                <label class="col-3 control-label">Quadrant Type</label>
                                                <div class="col-7 d-flex gap-3">
                                                    <select id="quodrant_type" name="quadrant_type" class="form-control">
                                                        <option value="">Select Quadrant Type</option>
                                                        <option value="LIVE"
                                                            {{ $ad->quadrant_type == 'LIVE' ? 'selected' : '' }}>LIVE
                                                        </option>
                                                        <option value="New products"
                                                            {{ $ad->quadrant_type == 'New products' ? 'selected' : '' }}>
                                                            New products</option>
                                                        <option value="Within a range of prices"
                                                            {{ $ad->quadrant_type == 'Within a range of prices' ? 'selected' : '' }}>
                                                            Within a range of prices
                                                        </option>
                                                        <option value="Hot deals"
                                                            {{ $ad->quadrant_type == 'Hot deals' ? 'selected' : '' }}>Hot
                                                            deals</option>
                                                        <option value="Top sellers"
                                                            {{ $ad->quadrant_type == 'Top sellers' ? 'selected' : '' }}>Top
                                                            sellers</option>
                                                        <option value="Suggested for you"
                                                            {{ $ad->quadrant_type == 'Suggested for you' ? 'selected' : '' }}>
                                                            Suggested for you</option>
                                                        <option value="SmartCart finds"
                                                            {{ $ad->quadrant_type == 'SmartCart finds' ? 'selected' : '' }}>
                                                            SmartCart finds</option>
                                                        <option value="Brand-specific"
                                                            {{ $ad->quadrant_type == 'Brand-specific' ? 'selected' : '' }}>
                                                            Brand-specific</option>
                                                        <option value="Stores near you"
                                                            {{ $ad->quadrant_type == 'Stores near you' ? 'selected' : '' }}>
                                                            Stores near you</option>
                                                        <option value="Product highlight"
                                                            {{ $ad->quadrant_type == 'Product highlight' ? 'selected' : '' }}>
                                                            Product highlight</option>
                                                        <option value="Carto fresh categories"
                                                            {{ $ad->quadrant_type == 'Carto fresh categories' ? 'selected' : '' }}>
                                                            Carto fresh categories
                                                        </option>
                                                        <option value="Deals within categories"
                                                            {{ $ad->quadrant_type == 'Deals within categories' ? 'selected' : '' }}>
                                                            Deals within categories
                                                        </option>
                                                        <option value="Free delivery"
                                                            {{ $ad->quadrant_type == 'Free delivery' ? 'selected' : '' }}>
                                                            Free delivery</option>
                                                        <option value="% Off"
                                                            {{ $ad->quadrant_type == '% Off' ? 'selected' : '' }}>% Off
                                                        </option>
                                                        <option value="buy one get one @ % off"
                                                            {{ $ad->quadrant_type == 'buy one get one @ % off' ? 'selected' : '' }}>
                                                            buy one get one @ % off
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row width-100" id="brandBox" style="display:none">
                                                <label class="col-3 control-label">{{ trans('lang.brand') }}</label>
                                                <div class="col-7">
                                                    <select class="parent_category form-control" id="brand_id"
                                                        name="brand_id">
                                                        <option value="">{{ trans('lang.select_brand') }}</option>
                                                    </select>
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.brand_help') }}
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-50" id="priceRangeBox" style="display:none">
                                                <label class="col-3 control-label">Price Range</label>
                                                <div class="col-7 d-flex gap-3">
                                                    <input type="number" name="min_price" id="min_price"
                                                        @if (!empty($ad->min_price)) value="{{ $ad->min_price }}" @endif
                                                        class="form-control" placeholder="Min Price">
                                                    <input type="number" name="max_price" id="max_price"
                                                        @if (!empty($ad->max_price)) value="{{ $ad->max_price }}" @endif
                                                        class="form-control" placeholder="Max Price">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-3 control-label">Background Type</label>
                                                <div class="col-7">
                                                    <select id="background_type" name="background_type"
                                                        class="form-control">
                                                        <option value="">Select</option>
                                                        <option value="color"
                                                            {{ $ad->background_type == 'color' ? 'selected' : '' }}>Color
                                                        </option>
                                                        <option value="image"
                                                            {{ $ad->background_type == 'image' ? 'selected' : '' }}>Image
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <input type="hidden" name="old_background_image"
                                                value="{{ $ad->background }}">

                                            <div class="form-group row" id="background_color_div"
                                                style="{{ $ad->background_type == 'color' ? '' : 'display:none;' }}">
                                                <label class="col-3 control-label">Select Color</label>
                                                <div class="col-7">
                                                    <input type="color" name="background_color" class="form-control"
                                                        value="{{ $ad->background ? (str_contains($ad->background, '#') ? $ad->background : '#' . $ad->background) : '#ffffff' }}">
                                                </div>
                                            </div>


                                            <div class="form-group row" id="background_image_div"
                                                style="{{ $ad->background_type == 'image' ? '' : 'display:none;' }}">
                                                <label class="col-3 control-label">Upload Image</label>
                                                <div class="col-7">
                                                    <input type="file" name="background_image" class="form-control">

                                                    @if ($img = $ad->media->first())
                                                        <img class="rounded" style="width:50px"
                                                            src="{{ $img->getFullUrl() }}" alt="image">
                                                    @endif
                                                </div>
                                            </div>

                                            {{-- STORE --}}
                                            <div class="form-group row">
                                                <label class="col-3 control-label">Store</label>
                                                <div class="col-7">
                                                    <select class="form-control" id="store_id" name="store_id">
                                                        <option value="">Select Store</option>
                                                        @foreach ($stores as $store)
                                                            <option value="{{ $store->id }}"
                                                                {{ $store->id == $ad->store_id ? 'selected' : '' }}>
                                                                {{ $store->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            {{-- CATEGORY --}}
                                            <div class="form-group row">
                                                <label class="col-3 control-label">Category</label>
                                                <div class="col-7">
                                                    <select class="form-control" id="category_id" name="category_id">
                                                        <option value="">Select Category</option>
                                                        {{--  @foreach ($categories as $category)
                                                            <option value="{{ $category->id }}"
                                                                {{ $category->id == $ad->category_id ? 'selected' : '' }}>
                                                                {{ $category->name }}
                                                            </option>
                                                        @endforeach  --}}
                                                    </select>
                                                </div>
                                            </div>

                                            {{-- SUB CATEGORY --}}
                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label ">{{ trans('lang.sub_category') }}</label>
                                                <div class="col-7">
                                                    <select rows="7" class="sub_category form-control"
                                                        id="sub_category_id" name="sub_category_id">
                                                        <option value="">{{ trans('lang.select_sub_category') }}
                                                        </option>
                                                        @foreach ($subcategories as $sub_category)
                                                            @php
                                                                $selected = '';
                                                                if (
                                                                    old('category_id', $sub_category->id) ==
                                                                    $ad->sub_category_id
                                                                ) {
                                                                    $selected = 'selected';
                                                                }
                                                            @endphp
                                                            <option value="{{ $sub_category->id }}"
                                                                {{ old('sub_category_id', $ad->sub_category_id) == $sub_category->id ? 'selected' : '' }}>
                                                                {{ $sub_category->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                </div>
                                            </div>

                                            {{-- IMAGE TYPE --}}
                                            <div class="form-group row width-100 col-12">

                                                <label class="col-3 control-label d-block ">
                                                    {{ trans('lang.quodrant_ads_image_type') }}
                                                </label>

                                                <div class="d-flex align-items-center gap-4">

                                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                        <input type="radio" class="form-check-input image_type"
                                                            name="image_type" value="one" id="image_one"
                                                            {{ $ad->image_type == 'one' ? 'checked' : '' }}>
                                                        <label class="control-label mb-0" for="image_one">One
                                                            Product</label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                        <input type="radio" class="form-check-input image_type"
                                                            name="image_type" value="two" id="image_two"
                                                            {{ $ad->image_type == 'two' ? 'checked' : '' }}>
                                                        <label class="control-label mb-0" for="image_two">Two
                                                            Products</label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                        <input type="radio" class="form-check-input image_type"
                                                            name="image_type" value="three" id="image_three"
                                                            {{ $ad->image_type == 'three' ? 'checked' : '' }}>
                                                        <label class="control-label mb-0" for="image_three">Three
                                                            Products</label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                        <input type="radio" class="form-check-input image_type"
                                                            name="image_type" value="four" id="image_four"
                                                            {{ $ad->image_type == 'four' ? 'checked' : '' }}>
                                                        <label class="control-label mb-0" for="image_four">Four
                                                            Products</label>
                                                    </div>

                                                </div>

                                            </div>
                                            {{-- LOAD FOUR PRODUCT TABLE HERE USING LOOP --}}
                                            @include('quodrant_ads.product_table_edit')





                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.quodrant_ads_publish_date') }}</label>
                                                <div class="col-7">
                                                    <input type="date" class="form-control ad-title"
                                                        name="publish_date" value="{{ $ad->publish_date }}">

                                                </div>
                                            </div>
                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_active" name="is_active" value="1"
                                                    id="is_active" {{ $ad->is_active == 1 ? 'checked' : '' }}>

                                                <label class="col-3 control-label"
                                                    for="is_active">{{ trans('lang.is_active') }}</label>
                                            </div>
                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_home_page" name="is_home_page"
                                                    value="1" id="is_home_page"
                                                    {{ $ad->is_home_page == 1 ? 'checked' : '' }}>
                                                <label class="col-3 control-label" for="is_home_page">Is Home
                                                    Page?</label>
                                            </div>
                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_discover_page" name="is_discover_page"
                                                    value="1" id="is_discover_page"
                                                    {{ $ad->is_discover_page == 1 ? 'checked' : '' }}>
                                                <label class="col-3 control-label" for="is_discover_page">Is Discover
                                                    Page?</label>
                                            </div>
                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_shop_page" name="is_shop_page"
                                                    value="1" id="is_shop_page"
                                                    {{ $ad->is_shop_page == 1 ? 'checked' : '' }}>
                                                <label class="col-3 control-label" for="is_shop_page">Is Shop
                                                    Page?</label>
                                            </div>
                                        </fieldset>
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="form-group col-12 text-center btm-btn">
                            <button type="submit" class="btn btn-primary save_category_btn"><i class="fa fa-save"></i>
                                {{ trans('lang.save') }}
                            </button>
                            <a href="{!! route('quodrant_ads') !!}" class="btn btn-default"><i
                                    class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                        </div>

                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
    <script>
        $(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 ?? '' }}";
            const EDIT_SUB_CATEGORY_ID = "{{ $ad->sub_category_id ?? '' }}";
            const QuadrantType = $('#quodrant_type').val();
            console.log(EDIT_SUB_CATEGORY_ID);
            let brandSubCategories = [];
let productList = {};
            {{--  function setEditValues() {
    if (!window.editData) return;

    $('#store_id').val(editData.store_id).trigger('change');
    $('#category_id').val(editData.category_id).trigger('change');
    $('#sub_category_id').val(editData.sub_category_id).trigger('change');
    $('#brand_id').val(editData.brand_id).trigger('change');
}

// After AJAX dropdown load
$(document).ajaxComplete(function () {
    setEditValues();
});  --}}

            /* ===============================
                IMAGE TYPE
            ================================*/
            function handleImageType(type) {
                {{--  $('#oneProductForm').toggle(type === 'one');
                $('#twoProductForm').toggle(type === 'two');
                $('#fourProductForm').toggle(type === 'four');
                $('#threeProductForm').toggle(type === 'three');  --}}

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

            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>`;
                data.forEach(item => {
                    html += `<option value="${item.id}">${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]);
});


        });
    </script>
@endsection