@extends('layouts.app')

@section('content')
    <style>
        .active-group {
            outline: 2px solid #28a745;
            background-color: #e6ffe6 !important;
        }
    </style>

    <div class="page-wrapper">
        <div class="row page-titles">

            <div class="col-md-5 align-self-center">

                <h3 class="text-themecolor">Sections Manage</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 active">Sections Manage</li>
                </ol>
            </div>

            <div>

            </div>

        </div>
        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form action="{{ route('category.page.put') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="is_bookit" value="{{ $activeTab === 'bookit' ? 1 : 0 }}">
                    <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="#section_manage" aria-controls="description" role="tab"
                                        data-toggle="tab" class="nav-link active">{{ trans('lang.section_manage') }}</a>
                                </li>  --}}
                                <li class="nav-item">
                                    <a class="nav-link {{ $activeTab == 'discover' ? 'active' : '' }}"
                                        href="{{ route('category.page', ['tab' => 'discover']) }}">
                                        Discover
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link {{ $activeTab == 'shop' ? 'active' : '' }}"
                                        href="{{ route('category.page', ['tab' => 'shop']) }}">
                                        Shop
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ $activeTab == 'food' ? 'active' : '' }}"
                                        href="{{ route('category.page', ['tab' => 'food']) }}">
                                        Food
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ $activeTab == 'bookit' ? 'active' : '' }}"
                                        href="{{ route('category.page', ['tab' => 'bookit']) }}">
                                        BookIT
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link {{ $activeTab == 'default_category' ? 'active' : '' }}"
                                        href="{{ route('category.page', ['tab' => 'default_category']) }}">
                                        Default Category
                                    </a>
                                </li>
                                {{-- <li role="presentation" class="nav-item">
                                <a href="#review_attributes" aria-controls="review_attributes" role="tab"
                                   data-toggle="tab"
                                   class="nav-link">{{trans('lang.reviewattribute_plural')}}</a>
                            </li> --}}
                            </ul>
                        </div>

                        @include('category_page_manage.table')
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="sectionViewModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">
                        Section: <span id="modalSectionName"></span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <ul class="list-group" id="quadrantList">
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Cancel
                    </button>

                    <button type="button" class="btn btn-primary" id="updateSectionItems">
                        Update
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {

            document.querySelectorAll(".group-toggle").forEach(function(groupToggle) {

                let groupHeaderRow = groupToggle.closest("tr.group-header");
                let sectionRow = groupHeaderRow.nextElementSibling;

                if (!sectionRow) return;

                let sectionToggles = sectionRow.querySelectorAll(".section-toggle");

                // Page load par
                if (!groupToggle.checked) {
                    sectionToggles.forEach(function(toggle) {
                        toggle.checked = false;
                    });
                }

                // Group change
                groupToggle.addEventListener("change", function() {

                    sectionToggles.forEach(function(toggle) {
                        toggle.checked = groupToggle.checked;
                    });

                });

                // Section click logic
                sectionToggles.forEach(function(toggle) {

                    toggle.addEventListener("change", function(e) {

                        if (!groupToggle.checked) {

                            e.preventDefault();
                            toggle.checked = false;

                            alert("⚠ Please turn ON the group status first.");

                        }

                    });

                });

            });

        });




        $(document).ready(function() {

            let groupCounter = 0;
            let currentGroupKey = null;

            const sectionMappings = @json($sectionMappings);
            const allQuadrants = @json($quadrants);
            const masterSections = @json($sections);

            $(document).on('click', '.view-section', function() {
            let sectionId = $(this).data('section-id');
            let sectionName = $(this).data('section-name');

            $('#modalSectionName').text(sectionName);
            $('#quadrantList').empty();

            if (sectionMappings[sectionId]) {
                console.log(sectionMappings[sectionId]);

                sectionMappings[sectionId].forEach(item => {

                    let icon = item.reference_type === 'brand' ?
                        'fa-tag' :
                        'fa-th-large';

                    $('#quadrantList').append(`
                            <li class="list-group-item d-flex align-items-center justify-content-between"
                                data-id="${item.reference_id}"
                                data-section-id="${sectionId}">
                                <div>
                                    <i class="fa ${icon} text-success me-2"></i>
                                    ${item.item_name}
                                    <span class="badge bg-light text-dark ms-2">
                                        ${item.reference_type}
                                    </span>
                                </div>

                                <div>
                                    <i class="fa fa-arrows-alt text-muted mr-3 drag-handle"
                                    style="cursor:move"></i>
                                    <button type="button"
                                            class="btn btn-sm btn-danger remove-modal-item">
                                        ×
                                    </button>
                                </div>
                            </li>
                        `);
                });

            } else {
                $('#quadrantList').append(`
                        <li class="list-group-item text-muted">
                            No items selected
                        </li>
                    `);
            }

            $('#sectionViewModal').modal('show');
            });

            $('#quadrantList').sortable({
                {{--  handle: '.drag-handle',  --}}
                {{--  placeholder: "ui-state-highlight",  --}}
            });
            $(document).on('click', '.remove-modal-item', function() {
                $(this).closest('li').remove();

            });
            // Edit existing section's items (Quadrant type) via dropdown
            $(document).on('click', '.edit-section-items', function() {
                const sectionId = parseInt($(this).data('section-id'));
                if (!sectionId) return;

                // find section in master list to know its type
                const sec = (masterSections || []).find(s => parseInt(s.id) === sectionId) || null;
                const sectionType = (sec && sec.section_type) ? String(sec.section_type).toLowerCase() : '';

                // only support Quadrant type for now
                if (sectionType !== 'quadrant') {
                    alert('This section is not Quadrant type.');
                    return;
                }

                const groupKey =
                    $(this).data('group-key') ||
                    $(this).closest('tr').find('.remove-row').data('group-key') ||
                    currentGroupKey;
                window.currentGroupKeyForItems = groupKey;

                // set current context used by #reference_ids change handler
                currentSectionId = sectionId;
                currentSectionType = 'quadrant';

                // show the type container and populate options
                $('#brandList').hide();
                $('#storeList').hide();
                $('#typeLabel').text('SELECT QUADRANT');
                $('#typeContainer').removeClass('d-none').show();

                // load all quadrants into the multi-select
                loadOptions(allQuadrants || []);

                // preselect existing mapped items for this section
                let selectedIds = [];
                if (sectionMappings && sectionMappings[sectionId]) {
                    selectedIds = sectionMappings[sectionId]
                        .filter(it => it.reference_type === 'quadrant')
                        .map(it => String(it.reference_id));
                }
                // apply selection and trigger change to sync hidden inputs
                $('#reference_ids').val(selectedIds).trigger('change');

                // scroll into view for convenience
                document.getElementById('typeContainer')?.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
            });

            $('#updateSectionItems').on('click', function() {

                let items = [];
                let sectionId = null;

                $('#quadrantList li').each(function(index) {

                    sectionId = $(this).data('section-id');

                    items.push({
                        reference_id: $(this).data('id'),
                        section_id: sectionId,
                        display_order: index + 1
                    });
                });

                if (!sectionId) {
                    alert('No items to update');
                    return;
                }

                $.ajax({
                    url: '/section-item/update',
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        section_id: sectionId,
                        items: items
                    },
                    success: function(res) {
                        if (res.status) {
                            location.reload();
                        }
                    },
                    error: function() {
                        alert('Failed to update section items');
                    }
                });
            });




            $('#reference_ids').select2({
                placeholder: 'Select options',
                width: '100%'
            });

            let order = $('#sortableSections tr').length + 1;
            let currentSectionId = null;
            let currentSectionType = null;

            /* -------------------------
               SECTION SELECT → DIRECT APPEND
            --------------------------*/


            $('#reference_ids').on('change', function() {

                if (!currentSectionId || !currentSectionType) return;

                var groupKey = window.currentGroupKeyForItems || (typeof currentGroupKey !== "undefined" ?
                    currentGroupKey : null);
                if (!groupKey) return;

                $(".section-items-" + groupKey + "-" + currentSectionId).remove();
                $(".section-type-" + groupKey + "-" + currentSectionId).remove();

                let selectedValues = $(this).val() || [];

                $('#sectionItemsContainer').append(`
                <input type="hidden"
                    class="section-type-${currentSectionId}"
                    name="section_reference_type[${currentSectionId}]"
                    value="${currentSectionType}">
            `);

                selectedValues.forEach(function(referenceId) {
                    $('#sectionItemsContainer').append(`
                    <input type="hidden"
                        class="section-items-${currentSectionId}"
                        name="section_items[${currentSectionId}][]"
                        value="${referenceId}">
                `);
                });
            });





            /* -------------------------
               SORTABLE
            --------------------------*/
            $("#sortableSections").sortable({
                update: updateOrder
            });



            function updateOrder() {
                let i = 1;
                $('.display-order').each(function() {
                    $(this).val(i++);
                });

                order = i; // 🔥 very important
            }

            function loadOptions(data) {
                $('#reference_ids').empty();
                $('#typeContainer').removeClass('d-none');

                $.each(data, function(i, item) {
                    $('#reference_ids').append(
                        `<option value="${item.id}">${item.title}</option>`
                    );
                });

                $('#reference_ids').trigger('change');
            }
            $(document).on('click', '.remove-row', function() {
                let sectionId = $(this).data('id');

                $('#row_' + sectionId).remove();
                $(`.section-items-${sectionId}`).remove(); // 🔥 VERY IMPORTANT
                updateOrder();
            });

            /* =========================
               ADD SECTION GROUP
            ========================== */
            // $('#addSectionGroup').on('click', function () {

            //     let groupName = $('#section_group_name').val().trim();

            //     if (!groupName) {
            //         alert('Please enter section group name');
            //         return;
            //     }

            //     // prevent duplicate group names
            //     if ($(`[data-group-name="${groupName}"]`).length) {
            //         alert('Group already exists');
            //         return;
            //     }

            //     groupCounter++;
            //     currentGroupKey = 'group_' + groupCounter;

            //     let groupHtml = `
        //         <!-- GROUP HEADER -->
        //         <tr class="table-secondary"
        //             data-group-key="${currentGroupKey}"
        //             data-group-name="${groupName}">
        //             <td colspan="3">
        //                 <strong>${groupName}</strong>

        //                 <input type="hidden"
        //                     name="groups[${currentGroupKey}][name]"
        //                     value="${groupName}">
        //             </td>
        //         </tr>

        //         <!-- GROUP SECTIONS CONTAINER -->
        //         <tr>
        //             <td colspan="3" class="p-0">
        //                 <table class="table mb-0">
        //                     <tbody id="sortable_${currentGroupKey}"
        //                         data-group-key="${currentGroupKey}">
        //                     </tbody>
        //                 </table>
        //             </td>
        //         </tr>
        //     `;

            //     $('#groupsContainer').append(groupHtml);
            //     $('#section_group_name').val('');

            //     initSortable(currentGroupKey);
            // });

            // $('#addSectionGroup').on('click', function () {

            //     let groupName = $('#section_group_name').val().trim();
            //     let groupIconInput = document.getElementById('section_group_icon');

            //     if (!groupName) {
            //         alert('Please enter section group name');
            //         return;
            //     }

            //     let groupKey = 'group_' + Date.now(); // unique & safe
            //     currentGroupKey = groupKey;

            //     let iconInputHtml = '';

            //     if (groupIconInput.files.length > 0) {
            //         iconInputHtml = `
        //             <input type="file"
        //                 name="groups[${groupKey}][icon]"
        //                 class="d-none group-icon-input"
        //                 data-group-key="${groupKey}">
        //         `;
            //     }

            //     let groupHtml = `
        //         <tr class="table-secondary"
        //             data-group-key="${groupKey}">

        //             <td colspan="3">
        //                 <div class="d-flex justify-content-between align-items-center w-100">
        //                     <div class="d-flex align-items-center">
        //                         <strong>${groupName}</strong>
        //                     </div>

        //                     <div>
        //                         <input type="hidden"
        //                             name="groups[${groupKey}][name]"
        //                             value="${groupName}">

        //                         ${iconInputHtml}

        //                         <button type="button"
        //                             class="btn btn-danger btn-sm remove-group"
        //                             data-group-key="${groupKey}">
        //                             Remove Group
        //                         </button>
        //                     </div>
        //                 </div>
        //             </td>
        //         </tr>

        //         <tr>
        //             <td colspan="3" class="p-0">
        //                 <table class="table mb-0">
        //                     <tbody id="sortable_${groupKey}"
        //                         data-group-key="${groupKey}">
        //                     </tbody>
        //                 </table>
        //             </td>
        //         </tr>
        //     `;

            //     $('#groupsContainer').append(groupHtml);

            //     // 🔥 copy uploaded file into hidden input
            //     if (groupIconInput.files.length > 0) {
            //         let hiddenFileInput = $(`.group-icon-input[data-group-key="${groupKey}"]`)[0];
            //         hiddenFileInput.files = groupIconInput.files;
            //     }

            //     // reset fields
            //     $('#section_group_name').val('');
            //     $('#section_group_icon').val('');

            //     initSortable(groupKey);
            // });
            //             {{--  const categories = @json($allCategories);
// let categoryOptions = categories.map(cat =>
//     `<option value="${cat.slug}">${cat.name}</option>`
// ).join('');  --}}
            @php
                // Function to build full path name
                function renderCategoryOptionsFullPath($categories, $grouped, $prefix = '')
                {
                    $html = '';
                    foreach ($categories as $category) {
                        // Build current category full name
                        $fullName = $prefix ? $prefix . ' - ' . $category->name : $category->name;
                        // Use ID as value instead of slug
                        $html .= '<option value="' . $category->slug . '">' . $fullName . '</option>';
                        // Recurse into children
                        if (isset($grouped[$category->id])) {
                            $html .= renderCategoryOptionsFullPath($grouped[$category->id], $grouped, $fullName);
                        }
                    }
                    return $html;
                }

                // Top-level categories have parent_id = null
                $topCategories = $grouped[null] ?? [];
            @endphp






            $('#addSectionGroup').on('click', function() {

                let groupName = $('#section_group_name').val().trim();
                if (!groupName) return alert('Enter group name');

                let groupKey = 'group_' + Date.now();
                let categoryFieldHtml =
                    `<select class="form-select mt-2 form-select-sm" name="groups[${groupKey}][category_slug]" style="width: 160px;">
                        <option value="">Select Category</option>
                        {!! renderCategoryOptionsFullPath($topCategories, $grouped) !!}
                    </select>`;

                let html = `
                    <tr class="table-secondary group-header"
                        data-group-name="${groupName}"
                        data-group-key="${groupKey}"
                        data-category-slug="">
                        <td colspan="">
                            <strong>${groupName}</strong>
                            <input type="hidden"
                            name="groups[${groupKey}][name]"
                            value="${groupName}">
                        </td>
                        <td style="width:12%;">

                            <input type="color"
                            name="groups[${groupKey}][group_text_color]"
                            value="#000000"
                            title="Group Text Color"
                            style="width:40px; height:30px; padding:0; border:none;">
                        </td>
                        <td style="width:12%;">

                            <input type="color"
                            name="groups[${groupKey}][background_color]"
                            value="#ffffff"
                            title="Group Background Color"
                            style="width:40px; height:30px; padding:0; border:none;">
                        </td>
                        <td style="width:25%;">


                            <input type="file"
                            name="groups[${groupKey}][icon]"
                            accept="image/*">

                            <!-- Category Dropdown -->
                            ${categoryFieldHtml}
                        </td>

                        <td style="width:12%;">
 <label class="switch mr-2" title="Group Active / Inactive">
                                            <input type="checkbox"  class="group-toggle"
                                                name="groups[${groupKey}][group_status]"
                                              checked >
                                            <span class="slider"></span>
                                        </label>

                            <button type="button"
                                class="btn btn-danger btn-sm remove-group">
                                Remove Group
                            </button>

                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                        <table class="table mb-0">
                            <tbody id="sortable_${groupKey}"></tbody>
                        </table>
                        </td>
                    </tr>
                `;

                $('#groupsContainer').append(html);
                let $newGroupRow = $(`[data-group-key="${groupKey}"]`);
                let newGroupSlug = $newGroupRow.find(`select[name="groups[${groupKey}][category_slug]"]`).val() || '';
                $newGroupRow.attr('data-category-slug', newGroupSlug);
                $('#section_group_name').val('');

                currentGroupKey = groupKey;

                // visual highlight (optional but recommended)
                $('.group-header').removeClass('active-group');
                $(`[data-group-key="${groupKey}"]`).addClass('active-group');

            });

            $(document).on('click', '.group-header', function() {
                currentGroupKey = $(this).data('group-key');

                // visual feedback
                $('.group-header').removeClass('active-group');
                $(this).addClass('active-group');
            });

            $(document).on('change', 'select[name$="[category_slug]"]', function() {
                let $groupRow = $(this).closest('tr.group-header');
                if ($groupRow.length) {
                    $groupRow.attr('data-category-slug', $(this).val() || '');
                }
            });


            {{--  $(document).on('click', '.view-section', function() {

                let sectionId = $(this).data('section-id');
                let sectionName = $(this).data('section-name');

                if (!sectionId) {
                    console.error('Section ID missing on view button', this);
                    return;
                }

                $('#modalSectionName').text(sectionName || 'Section');
                $('#quadrantList').empty();

                if (sectionMappings[sectionId]) {
                    sectionMappings[sectionId].forEach(item => {
                        let icon = item.reference_type === 'brand' ?
                            'fa-tag' :
                            'fa-th-large';

                        $('#quadrantList').append(`
                    <li class="list-group-item d-flex align-items-center justify-content-between"
                        data-id="${item.reference_id}"
                        data-section-id="${sectionId}">
                        <div>
                            <i class="fa ${icon} text-success me-2"></i>
                            ${item.item_name}
                            <span class="badge bg-light text-dark ms-2">
                                ${item.reference_type}
                            </span>
                        </div>
                    </li>
                `);
                    });
                } else {
                    $('#quadrantList').append(`
                <li class="list-group-item text-muted">
                    No items selected
                </li>
            `);
                }

                $('#sectionViewModal').modal('show');
            });  --}}



            /* =========================
               SECTION SELECT
            ========================== */
            $('#section_select').on('change', function() {

                if (!currentGroupKey) {
                    alert('Please select or create a Section Group first');
                    $(this).val('');
                    return;
                }

                if (!currentGroupKey) {
                    alert('Please create a Section Group first');
                    $(this).val('');
                    return;
                }

                let sectionId = $(this).val();
                let sectionName = $(this).find(':selected').text();

                if (!sectionId) return;

                let tbody = $(`#sortable_${currentGroupKey}`);

                if (!tbody.length) {
                    alert('Invalid group selected');
                    return;
                }

                let rowId = `${currentGroupKey}_section_${sectionId}`;

                // prevent duplicate section inside same group
                if ($('#' + rowId).length) {
                    alert('Section already added in this group');
                    return;
                }

                let order = $(`#sortable_${currentGroupKey} tr`).length + 1;
                let groupCategorySlug = $(`[data-group-key="${currentGroupKey}"]`).attr('data-category-slug') || '';

                let row = `
                    <tr id="${rowId}">
                        <td style="cursor:move; padding-left:30px;">
                            <i class="fa fa-bars mr-2"></i>

                            <input type="hidden"
                                name="groups[${currentGroupKey}][sections][${sectionId}][id]"
                                value="${sectionId}">

                            <div class="d-inline-block">
                                <input type="text"
                                    name="groups[${currentGroupKey}][sections][${sectionId}][section_title_custom]"
                                    value="${sectionName.trim()}"
                                    title="Enter Section Name"
                                    class="form-control"
                                    placeholder="Enter Section Name"
                                />
                            </div>

                            <input type="hidden"
                                name="groups[${currentGroupKey}][sections][${sectionId}][category_slug]"
                                value="${groupCategorySlug}">

                            <input type="hidden"
                                class="display-order"
                                name="groups[${currentGroupKey}][sections][${sectionId}][order]"
                                value="${order}">
                        </td>

                        <!-- Text Color -->
                        <td>
                            <input type="color"
                                name="groups[${currentGroupKey}][sections][${sectionId}][section_text_color]"
                                value="#000000"
                                style="width:40px;height:30px;border:none;padding:0;">
                        </td>

                        <!-- Background Color -->
                        <td>
                            <input type="color"
                                name="groups[${currentGroupKey}][sections][${sectionId}][section_bg_color]"
                                value="#ffffff"
                                style="width:40px;height:30px;border:none;padding:0;">
                        </td>

                        <td>
                            <button type="button"
                                    class="btn btn-danger btn-sm remove-row"
                                    data-group-key="${currentGroupKey}"
                                    data-section-id="${sectionId}">
                                X
                            </button>
                        </td>

                        <td>
                            <label class="switch">
                                <input type="checkbox"
                                    name="groups[${currentGroupKey}][sections][${sectionId}][status]"
                                    checked>
                                <span class="slider"></span>
                            </label>
                        </td>
                    </tr>
                `;
                let sectionType = $(this).find(':selected').data('type');
                let sectionsName = $(this).find(':selected').data('name'); // 🔥 NEW
                if (!sectionId) return;

                currentSectionId = sectionId; // 🔥 VERY IMPORTANT
                currentSectionType = sectionType; // 🔥 VERY IMPORTANT

                $('#reference_ids').empty();
                $('#typeContainer').addClass('d-none');

                $('#typeLabel').text('SELECT ' + sectionType.toUpperCase());

                {{--  if (sectionType === 'quadrant') {
                    loadOptions(@json($quadrants));
                }  --}}
                if (sectionType === 'quadrant') {
                    console.log(sectionType);

                    let quadrants = @json($quadrants);
                    console.log(quadrants);

                    let filteredQuadrants = quadrants;
                    {{--  console.log(sectionsName);  --}}
                    // ✅ ONLY for Carto Deals
                    if (sectionsName === 'carto_deals') {

                        filteredQuadrants = quadrants.filter(q => {
                            // slug based (preferred)
                            if (q.quadrant_type) {
                                return q.quadrant_type === 'Deals within categories';
                            }
                            console.log(filteredQuadrants);

                            // fallback: title based
                            return q.title.toLowerCase().includes('Deals within categories');
                        });
                    }

                    loadOptions(filteredQuadrants);
                }

                if (sectionType === 'brand') {

                    $('#typeContainer').hide();
                    $('#brandList').show();

                    let brands = @json($brands);
                    let html = '';

                    brands.forEach(brand => {
                        html += `
                            <li class="list-group-item d-flex align-items-center brand_data"
                                data-id="${brand.id}">

                                <i class="fa fa-arrows-alt" style="margin-right: 6px;"></i>
                                ${brand.title}

                                <!-- 🔥 hidden input for section_items -->
                                <input type="hidden"
                                    name="section_items[${sectionId}][]"
                                    value="${brand.id}">
                            </li>
                        `;
                    });

                    // 🔥 hidden input for section_reference_type (ONLY ONCE)
                    $('#sectionItemsContainer').append(`
                        <input type="hidden"
                            class="section-type-${sectionId}"
                            name="section_reference_type[${sectionId}]"
                            value="brand">
                    `);

                    $('#brandSortable').html(html);

                    // sortable
                    $('#brandSortable').sortable({
                        // order auto-maintained via hidden inputs
                    });
                }

                if (sectionType === 'store') {

                    $('#typeContainer').hide();
                    $('#storeList').show();

                    let stores = @json($stores);
                    let html = '';

                    stores.forEach(store => {
                        html += `
                            <li class="list-group-item d-flex align-items-center store_data"
                                data-id="${store.id}">

                                <i class="fa fa-arrows-alt" style="margin-right: 6px;"></i>
                                ${store.title}

                                <!-- 🔥 hidden input for section_items -->
                                <input type="hidden"
                                    name="section_items[${sectionId}][]"
                                    value="${store.id}">
                            </li>
                        `;
                    });

                    // 🔥 hidden input for section_reference_type (ONLY ONCE)
                    $('#sectionItemsContainer').append(`
                        <input type="hidden"
                            class="section-type-${sectionId}"
                            name="section_reference_type[${sectionId}]"
                            value="store">
                    `);

                    $('#storeSortable').html(html);

                    // sortable
                    $('#storeSortable').sortable({
                        // order auto-maintained via hidden inputs
                    });
                }
                // $(`#sortable_${currentGroupKey}`).append(row);
                tbody.append(row);
            });


            /* =========================
               REMOVE SECTION
            ========================== */
            $(document).on('click', '.remove-row', function() {

                if (!confirm('Are you sure you want to remove this section?')) return;

                let groupKey = $(this).data('group-key');
                let sectionId = $(this).data('section-id');

                $(`#${groupKey}_section_${sectionId}`).remove();
                updateOrder(groupKey);
            });

            $(document).on('click', '.remove-group', function() {

                if (!confirm('Are you sure you want to remove this entire section group?')) {
                    return;
                }

                // group header row
                let $groupHeaderRow = $(this).closest('tr');

                // the row that contains the inner table (sections)
                let $groupSectionsRow = $groupHeaderRow.next('tr');

                // remove both
                $groupHeaderRow.remove();
                $groupSectionsRow.remove();

                // reset active group if this was the active one
                let groupKey = $(this).data('group-key');
                if (typeof currentGroupKey !== 'undefined' && currentGroupKey === groupKey) {
                    currentGroupKey = null;
                }
            });


            /* =========================
               SORTABLE PER GROUP
            ========================== */
            function initSortable(groupKey) {
                $(`#sortable_${groupKey}`).sortable({
                    update: function() {
                        updateOrder(groupKey);
                    }
                });
            }

            function updateOrder(groupKey) {
                let i = 1;
                $(`#sortable_${groupKey} .display-order`).each(function() {
                    $(this).val(i++);
                });
            }

            // Edit existing section's items (Quadrant type) via dropdown - vanilla JS
            document.addEventListener('click', function(ev) {
                var btn = ev.target.closest ? ev.target.closest('.edit-section-items') : null;
                if (!btn) return;
                var sectionId = parseInt(btn.getAttribute('data-section-id'));
                if (!sectionId) return;

                // set current context used by #reference_ids change handler
                currentSectionId = sectionId;
                currentSectionType = 'quadrant';

                // show container
                var typeContainer = document.getElementById('typeContainer');
                var typeLabel = document.getElementById('typeLabel');
                if (typeContainer) {
                    typeContainer.classList.remove('d-none');
                }
                if (typeLabel) {
                    typeLabel.textContent = 'SELECT QUADRANT';
                }

                // populate options
                var sel = document.getElementById('reference_ids');
                if (!sel) return;
                sel.innerHTML = '';
                var list = (typeof allQuadrants !== 'undefined' && allQuadrants) ? allQuadrants : [];
                for (var i = 0; i < list.length; i++) {
                    var opt = document.createElement('option');
                    opt.value = list[i].id;
                    opt.textContent = list[i].title;
                    sel.appendChild(opt);
                }
                // preselect existing mapped items
                var selected = [];
                if (typeof sectionMappings !== 'undefined' && sectionMappings && sectionMappings[
                        sectionId]) {
                    var arr = sectionMappings[sectionId];
                    for (var k = 0; k < arr.length; k++) {
                        if (arr[k].reference_type === 'quadrant') selected.push(String(arr[k]
                            .reference_id));
                    }
                }
                for (var j = 0; j < sel.options.length; j++) {
                    var o = sel.options[j];
                    o.selected = selected.indexOf(String(o.value)) >= 0;
                }
                // trigger change so hidden inputs sync
                if (window.jQuery && jQuery.fn && jQuery.fn.trigger) {
                    jQuery(sel).trigger('change');
                } else {
                    sel.dispatchEvent(new Event('change', {
                        bubbles: true
                    }));
                }
            });

            $('[data-group-key]').each(function() {
                let groupKey = $(this).data('group-key');
                initSortable(groupKey);
                currentGroupKey = groupKey; // last group active
            });

        });
    </script>
@endsection