@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - Create New Section')


@section('content')
<section>
    <div class="page-head-title mb-4">
        <a href="{{ route('backend.template.product.category.manage-category') }}" class="d-inline-block">
            <h2 class="text-title fw-semibold mb-0 d-flex align-items-center">
                <i class="ri-arrow-left-s-line fs-1 me-2"></i>Create New Section
            </h2>
        </a>
    </div>

    <form id="createSectionForm" enctype="multipart/form-data">
        @csrf

        {{-- ── Section Info ──────────────────────────────────────────────── --}}
        <div class="card mb-3">
            <div class="card-body">

                {{-- Row 1: Category | Section Name | Section Type | Status --}}
                <div class="row gy-4 align-items-start">
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label">
                            Category <span class="text-danger">*</span>
                        </label>
                        @if ($preselectedCategory)
                            {{-- Pre-selected from category row — disabled dropdown --}}
                            <select class="form-select" disabled style="background-color:#f3f4f6;cursor:not-allowed;color:#374151;">
                                <option selected>{{ $preselectedCategory->name }}</option>
                            </select>
                            <small class="secondary-text mt-1 d-block">
                                <i class="ri-lock-line"></i> Category is locked. You can change it from Edit Section.
                            </small>
                            <input type="hidden" name="category_id" id="categoryIdInput" value="{{ $preselectedCategory->id }}">
                        @else
                            <div class="drop-contain">
                                <select id="categorySelect" class="js-example-basic-single">
                                    <option value="">Select</option>
                                    @foreach ($categories as $cat)
                                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" name="category_id" id="categoryIdInput" value="">
                        @endif
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label">Section Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="sectionNameInput" class="form-control" placeholder="Enter section name">
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label">Section Type <span class="text-danger">*</span></label>
                        <select name="section_type" id="sectionTypeSelect" class="form-select">
                            <option value="">Select</option>
                            <option value="carousel">Carousel</option>
                            <option value="category">Category</option>
                            <option value="tabs">Tabs</option>
                            <option value="grid">Grid</option>
                            <option value="combined">Combined</option>
                            <option value="grouped">Grouped</option>
                            <option value="cards">Cards</option>
                            <option value="layout">Layout</option>
                            <option value="banner">Banner</option>
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label d-flex align-items-center gap-1 flex-wrap">
                            Section Status
                            <small class="secondary-text fw-normal fs-12 ms-1">
                                <i class="ri-information-line"></i>
                                By default turns to <span class="text-danger fw-semibold">Inactive</span>, if no products added.
                            </small>
                        </label>
                        <div class="d-flex align-items-center gap-4 mt-2">
                            <div class="form-check custom-radio">
                                <input class="form-check-input" type="radio" name="status" id="statusActive" value="active" checked>
                                <label class="form-check-label" for="statusActive">Active</label>
                            </div>
                            <div class="form-check custom-radio">
                                <input class="form-check-input" type="radio" name="status" id="statusInactive" value="inactive">
                                <label class="form-check-label" for="statusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Category selection display — hidden when category is locked --}}
                @if (!$preselectedCategory)
                <div class="mt-4">
                    <label class="form-label">Category selection</label>
                    <div id="categorySelectionArea" class="category-selection-area">
                        <div id="categoryEmptyState" class="text-center py-2">
                            <i class="ri-information-line fs-3 secondary-text d-block mb-1"></i>
                            <p class="fw-semibold text-title mb-1">No categories selected yet!</p>
                            <small class="secondary-text">On selecting multiple categories, the section will be displayed in all selected categories.</small>
                        </div>
                        <div id="categoryChips"></div>
                    </div>
                </div>
                @endif

                {{-- Background Image + Short Description --}}
                <div class="row gy-4 mt-1">
                    <div class="col-lg-6">
                        <label class="form-label">Background Image (optional)</label>
                        <div class="section-upload-box" id="bgImageDropzone">
                            <input type="file" name="background_image" id="bgImageInput" accept=".png,.jpg,.jpeg">
                            <img src="" class="img-fluid d-none" id="bgImagePreview" style="max-height:120px;border-radius:8px;">
                            <div id="bgUploadContent" class="text-center px-3">
                                <img src="{{ asset('backend/template/svg-icon/upload-file.svg') }}" width="32" class="d-block mx-auto mb-2" alt="">
                                <p class="mb-1 secondary-text fw-medium">Click to Upload or drag and drop</p>
                                <small class="text-muted">Upload image format should be only PNG, JPG or JPEG.<br>Also, max file size should be 10MB</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-label">Short Description (optional)</label>
                        <textarea name="short_description" class="form-control" rows="7"
                            placeholder="Enter here (upto 50 characters)..."
                            style="min-height:155px;resize:vertical;"></textarea>
                    </div>
                </div>

            </div>
        </div>

        {{-- ── Add Product ───────────────────────────────────────────────── --}}
        <div class="card mb-3">
            <div class="card-body">

                {{-- Toggle header --}}
                <div class="add-product-toggle-row d-flex align-items-start justify-content-between gap-3 mb-3">
                    <div>
                        <h5 class="text-title fw-semibold mb-1">Add Product?</h5>
                        <p class="secondary-text mb-0 fs-12">
                            You can add products from the product list to active the section in the application.
                            Section won't visible in application until product get added.
                        </p>
                    </div>
                    <div class="form-check form-switch ms-2 flex-shrink-0">
                        <input class="form-check-input" type="checkbox" id="addProductToggle" role="switch" checked>
                    </div>
                </div>

                {{-- Product section (toggled) --}}
                <div id="productSection">

                    {{-- Search --}}
                    <div class="mb-3">
                        <div class="table-search-box">
                            <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}" alt="search">
                            <input type="text" id="productSearchInput" placeholder="Search by product or group name" class="table-search-input">
                        </div>
                    </div>

                    {{-- Search results --}}
                    <div id="searchResults" class="mb-3" style="display:none;">
                        <div class="table-responsive rounded-3 border">
                            <table class="table table-sm align-middle mb-0">
                                <thead class="all-table-head">
                                    <tr>
                                        <th class="p-2">Select</th>
                                        <th class="p-2">Image</th>
                                        <th class="p-2">Product Name</th>
                                        <th class="p-2">Group</th>
                                    </tr>
                                </thead>
                                <tbody id="searchResultsBody"></tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Added products table --}}
                    <div class="table-responsive rounded-3">
                        <table class="table table-nowrap align-middle mb-0" id="addedProductsTable">
                            <thead class="all-table-head">
                                <tr>
                                    <th class="p-3" style="width:44px;"></th>
                                    <th class="p-3" style="width:60px;">S.no</th>
                                    <th class="p-3">Product Group</th>
                                    <th class="p-3">Product Img</th>
                                    <th class="p-3">Product Name</th>
                                    <th class="p-3">Variant &amp; Units</th>
                                    <th class="p-3">Action</th>
                                </tr>
                            </thead>
                            <tbody id="addedProductsBody"></tbody>
                        </table>
                    </div>

                    {{-- Empty state --}}
                    <div id="noProductsMsg" class="card mt-2">
                        <div class="card-body text-center py-4">
                            <i class="ri-shopping-bag-line fs-2 secondary-text d-block mb-2"></i>
                            <p class="fw-semibold text-title mb-1">No products added yet</p>
                            <small class="secondary-text">Use the search bar above to find and add products to this section.</small>
                        </div>
                    </div>

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

        {{-- ── SEO Settings ───────────────────────────────────────────────── --}}
        <div class="card mb-3">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h4 class="card-title mb-0">SEO Settings</h4>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" id="sectionSeoToggle" role="switch" style="width:38px;height:20px;cursor:pointer;">
                </div>
            </div>
            <div class="card-body" id="sectionSeoBody" style="display:none;">
                <div class="row gy-4">
                    <div class="col-xxl-4 col-md-6">
                        <label class="form-label">Image Alt Text <span class="text-danger">*</span></label>
                        <input type="text" name="seo_image_alt" class="form-control" placeholder="Enter image alt text">
                    </div>
                    <div class="col-xxl-4 col-md-6">
                        <label class="form-label">Meta Title <span class="text-danger">*</span></label>
                        <input type="text" name="seo_meta_title" class="form-control" placeholder="Enter meta title">
                    </div>
                    <div class="col-xxl-4 col-md-6">
                        <label class="form-label">Meta Description <span class="text-danger">*</span></label>
                        <input type="text" name="seo_meta_description" class="form-control" placeholder="Enter meta description">
                    </div>
                    <div class="col-xxl-4 col-md-6">
                        <label class="form-label">Schema <span class="text-danger">*</span></label>
                        <input type="text" name="seo_schema" class="form-control" placeholder="<schema>">
                    </div>
                    <div class="col-xxl-4 col-md-6">
                        <label class="form-label">H1 <span class="text-danger">*</span></label>
                        <input type="text" name="seo_h1" class="form-control" placeholder="Enter H1">
                    </div>
                </div>
            </div>
        </div>

        {{-- Hidden scheduling inputs populated from the confirm modal --}}
        <input type="hidden" name="scheduled_from" id="scheduledFromHidden">
        <input type="hidden" name="scheduled_to"   id="scheduledToHidden">

        <div class="d-flex gap-3 justify-content-end btn-list mb-3">
            <a href="{{ route('backend.template.product.category.manage-category') }}" class="outline-button-green">Cancel</a>
            <button type="button" class="button-green" id="createSectionBtn">Create Section</button>
        </div>
    </form>

    {{-- Confirm Create Section Modal --}}
    <div class="modal fade" id="confirmCreateSectionModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">
                <div class="modal-header custom-header">
                    <h5 class="mb-0" id="confirmModalTitle">Create Section?</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">

                    {{-- Empty-section warning (shown only when no products added) --}}
                    <div id="emptyProductsWarning" style="display:none;" class="mb-4 pb-3" style="border-bottom:1px solid #eee;">
                        <p class="fw-semibold text-title mb-1">You're creating a section without any products.</p>
                        <p class="mb-1">This section will be added to the selected categories, but <strong>it will not be visible in the application until products are added.</strong></p>
                        <p class="secondary-text fs-13 mb-0">Add products later to make this section visible to users.</p>
                    </div>

                    {{-- Duration toggle --}}
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div>
                            <h6 class="fw-semibold text-title mb-1">Set Duration</h6>
                            <p class="secondary-text fs-12 mb-0">Schedule when this section should be active (optional).</p>
                        </div>
                        <div class="form-check form-switch flex-shrink-0 mb-0">
                            <input class="form-check-input" type="checkbox" id="durationToggle" role="switch" style="width:38px;height:20px;cursor:pointer;">
                        </div>
                    </div>
                    <div id="durationBody" style="display:none;" class="mt-3">
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="form-label">From Date <span class="text-danger">*</span></label>
                                <input type="text" id="scheduledFromPicker" class="form-control" placeholder="DD/MM/YYYY" autocomplete="off" readonly>
                                <div class="invalid-feedback" id="fromDateError">Please select a from date.</div>
                            </div>
                            <div class="col-6">
                                <label class="form-label">To Date <span class="text-danger">*</span></label>
                                <input type="text" id="scheduledToPicker" class="form-control" placeholder="DD/MM/YYYY" autocomplete="off" readonly>
                                <div class="invalid-feedback" id="toDateError">Please select a to date.</div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green" id="confirmCreateSectionBtn">Create Section</button>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection

@section('scripts')
<script>
$(function () {
    var addedProducts    = {};
    var selectedCategory = {
        id:   '{{ $preselectedCategory?->id ?? "" }}',
        name: '{{ $preselectedCategory?->name ?? "" }}',
    };
    var categoryLocked   = {{ $preselectedCategory ? 'true' : 'false' }};
    var searchTimeout;

    // ── Category select → chip ────────────────────────────────────────────
    $('#categorySelect').on('change', function () {
        var id   = $(this).val();
        var name = $(this).find('option:selected').text().trim();
        selectedCategory = { id: id, name: name };
        $('#categoryIdInput').val(id);
        renderCategoryChip();
    });

    function renderCategoryChip() {
        if (!selectedCategory.id) {
            $('#categoryEmptyState').show();
            $('#categoryChips').html('');
            return;
        }
        $('#categoryEmptyState').hide();
        $('#categoryChips').html(
            '<span class="category-chip">' +
                selectedCategory.name +
                (!categoryLocked ? '<span class="remove-cat" id="removeCatChip" title="Remove">×</span>' : '') +
            '</span>'
        );
    }

    $(document).on('click', '#removeCatChip', function () {
        selectedCategory = { id: '', name: '' };
        $('#categoryIdInput').val('');
        $('#categorySelect').val('').trigger('change.select2');
        renderCategoryChip();
    });

    // ── Background image preview ──────────────────────────────────────────
    $('#bgImageInput').on('change', function () {
        var file = this.files[0];
        if (!file) return;
        if (file.size > 10 * 1024 * 1024) { toastr.error('Image must be under 10MB.'); this.value = ''; return; }
        var reader = new FileReader();
        reader.onload = function (ev) {
            $('#bgImagePreview').attr('src', ev.target.result).removeClass('d-none');
            $('#bgUploadContent').addClass('d-none');
        };
        reader.readAsDataURL(file);
    });

    // ── Add Product toggle ────────────────────────────────────────────────
    $('#addProductToggle').on('change', function () {
        $(this).is(':checked') ? $('#productSection').slideDown(200) : $('#productSection').slideUp(200);
    });

    // ── Product search ────────────────────────────────────────────────────
    $('#productSearchInput').on('input', function () {
        clearTimeout(searchTimeout);
        var q = $(this).val().trim();
        if (q.length < 2) { $('#searchResults').hide(); return; }
        searchTimeout = setTimeout(function () {
            $.get('{{ route("backend.template.sections.search-products") }}', { q: q })
                .done(function (data) {
                    var html = '';
                    if (!data.length) {
                        html = '<tr><td colspan="4" class="text-center secondary-text p-3">No products found.</td></tr>';
                    } else {
                        $.each(data, function (_, p) {
                            var checked = addedProducts[p.id] ? 'checked' : '';
                            html += '<tr>' +
                                '<td class="p-2"><input type="checkbox" class="form-check-input product-select-cb"' +
                                ' data-id="'       + p.id +
                                '" data-name="'    + $('<div>').text(p.name).html() +
                                '" data-tamil="'   + $('<div>').text(p.name_tamil || '').html() +
                                '" data-group="'   + $('<div>').text(p.group || '-').html() +
                                '" data-image="'   + p.image +
                                '" data-variants="'+ $('<div>').text(p.variants_text || '').html() +
                                '" data-url="'     + p.product_url +
                                '" ' + checked + '></td>' +
                                '<td class="p-2"><img src="' + p.image + '" style="height:36px;width:36px;object-fit:cover;border-radius:6px;"></td>' +
                                '<td class="p-2 fw-medium">' + $('<div>').text(p.name).html() +
                                    (p.name_tamil ? '<br><small class="secondary-text">' + p.name_tamil + '</small>' : '') +
                                '</td>' +
                                '<td class="p-2">' + $('<div>').text(p.group || '-').html() + '</td>' +
                                '</tr>';
                        });
                    }
                    $('#searchResultsBody').html(html);
                    $('#searchResults').show();
                })
                .fail(function () {
                    $('#searchResultsBody').html('<tr><td colspan="4" class="text-center text-danger p-3">Failed to load products. Please try again.</td></tr>');
                    $('#searchResults').show();
                });
        }, 400);
    });

    $(document).on('click', function (e) {
        if (!$(e.target).closest('#searchResults, #productSearchInput').length) {
            $('#searchResults').hide();
        }
    });

    $(document).on('change', '.product-select-cb', function () {
        var cb = $(this), id = cb.data('id');
        if (cb.is(':checked')) {
            addedProducts[id] = {
                name:     cb.data('name'),
                tamil:    cb.data('tamil'),
                group:    cb.data('group'),
                image:    cb.data('image'),
                variants: cb.data('variants'),
                url:      cb.data('url'),
            };
        } else {
            delete addedProducts[id];
        }
        refreshAddedTable();
    });

    $(document).on('click', '.remove-product-btn', function () {
        var id = $(this).data('id');
        delete addedProducts[id];
        $('.product-select-cb[data-id="' + id + '"]').prop('checked', false);
        refreshAddedTable();
    });

    function refreshAddedTable() {
        var ids = Object.keys(addedProducts);
        if (!ids.length) {
            $('#addedProductsBody').html('');
            $('#noProductsMsg').show();
            return;
        }
        $('#noProductsMsg').hide();
        var html = '';
        ids.forEach(function (id, i) {
            var p = addedProducts[id];
            html += '<tr id="addedRow_' + id + '">' +
                '<td class="p-3" style="cursor:grab;"><i class="ri-drag-move-2-line fs-5 secondary-text drag-handle"></i></td>' +
                '<td class="p-3">' + (i + 1) + '</td>' +
                '<td class="p-3">' + (p.group || '-') + '</td>' +
                '<td class="p-3"><img src="' + p.image + '" style="height:40px;width:40px;object-fit:cover;border-radius:8px;" alt=""></td>' +
                '<td class="p-3">' +
                    '<span class="fw-medium text-title">' + p.name + '</span>' +
                    (p.tamil ? '<br><small class="secondary-text">' + p.tamil + '</small>' : '') +
                '</td>' +
                '<td class="p-3 secondary-text fs-13">' + (p.variants || '-') + '</td>' +
                '<td class="p-3">' +
                    '<input type="hidden" name="products[]" value="' + id + '">' +
                    '<div class="d-flex gap-2 align-items-center">' +
                        '<a href="' + (p.url || '#') + '" target="_blank" class="btn btn-outline-info btn-icon p-1 btn-sm" title="View product"><i class="ri-eye-line"></i></a>' +
                        '<button type="button" class="btn btn-outline-danger btn-icon p-1 btn-sm remove-product-btn" data-id="' + id + '" title="Remove"><i class="ri-subtract-line"></i></button>' +
                    '</div>' +
                '</td>' +
                '</tr>';
        });
        $('#addedProductsBody').html(html);
        if (typeof Sortable !== 'undefined') {
            Sortable.create(document.getElementById('addedProductsBody'), {
                handle: '.drag-handle',
                animation: 150,
                onEnd: function () { renumberRows(); },
            });
        }
    }

    function renumberRows() {
        $('#addedProductsBody tr').each(function (i) {
            $(this).find('td:nth-child(2)').text(i + 1);
        });
    }

    // ── Submit → open confirm modal ───────────────────────────────────────
    $('#createSectionBtn').on('click', function () {
        var ok = true;

        var $name = $('#sectionNameInput');
        if (!$name.val().trim()) {
            $name.addClass('error').focus();
            ok = false;
        } else { $name.removeClass('error'); }

        if (!categoryLocked && !selectedCategory.id) {
            $('#categorySelectionArea').css('border-color', '#e03137');
            ok = false;
        } else { $('#categorySelectionArea').css('border-color', ''); }

        var $type = $('#sectionTypeSelect');
        if (!$type.val()) {
            $type.addClass('is-invalid');
            ok = false;
        } else { $type.removeClass('is-invalid'); }

        if (!ok) {
            toastr.error('Please fill in all required fields.');
            return;
        }

        if ($('#sectionSeoToggle').is(':checked')) {
            $('#sectionSeoBody input').each(function () {
                if (!$(this).val().trim()) { $(this).addClass('error'); ok = false; }
                else { $(this).removeClass('error'); }
            });
            if (!ok) { toastr.error('Please fill in all required SEO fields.'); return; }
        }

        // Decide which content to show in the confirm modal
        var hasProducts = $('#addProductToggle').is(':checked') && Object.keys(addedProducts).length > 0;
        if (!hasProducts) {
            $('#confirmModalTitle').text('Create Empty Section?');
            $('#emptyProductsWarning').show();
        } else {
            $('#confirmModalTitle').text('Create Section?');
            $('#emptyProductsWarning').hide();
        }

        // Reset duration controls
        $('#durationToggle').prop('checked', false);
        $('#durationBody').hide();
        $('#scheduledFromHidden, #scheduledToHidden').val('');
        $('#scheduledFromPicker, #scheduledToPicker').val('').removeClass('is-invalid');
        if (window._fpFrom) window._fpFrom.clear();
        if (window._fpTo)   window._fpTo.clear();

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

    // ── Duration toggle ───────────────────────────────────────────────────
    $('#durationToggle').on('change', function () {
        if ($(this).is(':checked')) {
            $('#durationBody').slideDown(200);
        } else {
            $('#durationBody').slideUp(200);
            $('#scheduledFromHidden, #scheduledToHidden').val('');
            $('#scheduledFromPicker, #scheduledToPicker').val('').removeClass('is-invalid');
            if (window._fpFrom) window._fpFrom.clear();
            if (window._fpTo)   window._fpTo.clear();
        }
    });

    // ── Init flatpickr date pickers ───────────────────────────────────────
    window._fpFrom = flatpickr('#scheduledFromPicker', {
        dateFormat: 'd/m/Y',
        disableMobile: true,
        onChange: function (selectedDates) {
            if (!selectedDates[0]) return;
            var d = selectedDates[0];
            $('#scheduledFromHidden').val(
                d.getFullYear() + '-' +
                String(d.getMonth() + 1).padStart(2, '0') + '-' +
                String(d.getDate()).padStart(2, '0')
            );
            $('#scheduledFromPicker').removeClass('is-invalid');
            if (window._fpTo) window._fpTo.set('minDate', selectedDates[0]);
        },
    });

    window._fpTo = flatpickr('#scheduledToPicker', {
        dateFormat: 'd/m/Y',
        disableMobile: true,
        onChange: function (selectedDates) {
            if (!selectedDates[0]) return;
            var d = selectedDates[0];
            $('#scheduledToHidden').val(
                d.getFullYear() + '-' +
                String(d.getMonth() + 1).padStart(2, '0') + '-' +
                String(d.getDate()).padStart(2, '0')
            );
            $('#scheduledToPicker').removeClass('is-invalid');
            if (window._fpFrom) window._fpFrom.set('maxDate', selectedDates[0]);
        },
    });

    // ── Confirm → submit ──────────────────────────────────────────────────
    $('#confirmCreateSectionBtn').on('click', function () {
        // Validate duration if enabled
        if ($('#durationToggle').is(':checked')) {
            var fromOk = !!$('#scheduledFromHidden').val();
            var toOk   = !!$('#scheduledToHidden').val();
            $('#scheduledFromPicker').toggleClass('is-invalid', !fromOk);
            $('#scheduledToPicker').toggleClass('is-invalid', !toOk);
            if (!fromOk || !toOk) { return; }
        }

        $('#confirmCreateSectionModal').modal('hide');

        var seoOn = $('#sectionSeoToggle').is(':checked');
        if (!seoOn) { $('#sectionSeoBody input').prop('disabled', true); }
        var $btn = $('#createSectionBtn').prop('disabled', true);

        $.ajax({
            url: '{{ route("backend.template.sections.store") }}',
            type: 'POST',
            data: new FormData(document.getElementById('createSectionForm')),
            processData: false,
            contentType: false,
        }).done(function (res) {
            toastr.success(res.message || 'Section created successfully.');
            setTimeout(function () {
                window.location.href = '{{ route("backend.template.product.category.manage-category") }}';
            }, 800);
        }).fail(function (xhr) {
            $btn.prop('disabled', false);
            $('#sectionSeoBody input').prop('disabled', false);
            var msg = xhr.responseJSON?.errors
                ? Object.values(xhr.responseJSON.errors).flat().join('<br>')
                : (xhr.responseJSON?.message || 'Failed to create section.');
            toastr.error(msg);
        });
    });

    // ── SEO toggle ────────────────────────────────────────────────────────
    $('#sectionSeoToggle').on('change', function () {
        $(this).is(':checked') ? $('#sectionSeoBody').slideDown(200) : $('#sectionSeoBody').slideUp(200);
        if (!$(this).is(':checked')) { $('#sectionSeoBody .error').removeClass('error'); }
    });

    // Init
    if (categoryLocked && selectedCategory.id) renderCategoryChip();
    refreshAddedTable();
});
</script>
@endsection