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


@section('content')
<section>
    <div class="page-head-title mb-4">
        <a href="{{ route('backend.template.sections.show', $section->id) }}" 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>Edit Section
            </h2>
        </a>
    </div>

    <form id="editSectionForm" 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>
                        <div class="drop-contain">
                            <select id="categorySelect" class="js-example-basic-single">
                                <option value="">Select</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ $section->category_id == $cat->id ? 'selected' : '' }}>
                                        {{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <input type="hidden" name="category_id" id="categoryIdInput" value="{{ $section->category_id }}">
                    </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"
                            value="{{ $section->name }}" 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>
                            @foreach ([
                                'carousel'  => 'Carousel',
                                'category'  => 'Category',
                                'tabs'      => 'Tabs',
                                'grid'      => 'Grid',
                                'combined'  => 'Combined',
                                'grouped'   => 'Grouped',
                                'cards'     => 'Cards',
                                'layout'    => 'Layout',
                                'banner'    => 'Banner',
                            ] as $val => $label)
                                <option value="{{ $val }}" {{ $section->section_type === $val ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </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"
                                    {{ $section->status === '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"
                                    {{ $section->status === 'inactive' ? 'checked' : '' }}>
                                <label class="form-check-label" for="statusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Category selection display --}}
                <div class="mt-4">
                    <label class="form-label">Category selection</label>
                    <div id="categorySelectionArea" class="category-selection-area">
                        <div id="categoryEmptyState" class="{{ $section->category_id ? 'd-none' : '' }} 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">
                            @if ($section->category_id && $section->category)
                                <span class="category-chip">
                                    {{ $section->category->name }}
                                    <span class="remove-cat" id="removeCatChip" title="Remove">×</span>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- 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">
                            @if ($section->background_image)
                                <img src="{{ asset('storage/' . $section->background_image) }}"
                                    class="img-fluid" id="bgImagePreview"
                                    style="max-height:120px;border-radius:8px;">
                                <div id="bgUploadContent" class="text-center px-3 d-none">
                            @else
                                <img src="" class="img-fluid d-none" id="bgImagePreview" style="max-height:120px;border-radius:8px;">
                                <div id="bgUploadContent" class="text-center px-3">
                            @endif
                                    <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>
                        @if ($section->background_image)
                            <small class="secondary-text mt-1 d-block">Upload a new image to replace the current one.</small>
                        @endif
                    </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;">{{ $section->short_description }}</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">
                            <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" style="display:none;">
                        <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;"
                        {{ ($section->seo && ($section->seo->meta_title || $section->seo->meta_description || $section->seo->schema || $section->seo->h1 || $section->seo->image_alt)) ? 'checked' : '' }}>
                </div>
            </div>
            <div class="card-body" id="sectionSeoBody"
                style="{{ ($section->seo && ($section->seo->meta_title || $section->seo->meta_description || $section->seo->schema || $section->seo->h1 || $section->seo->image_alt)) ? '' : '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" value="{{ $section->seo?->image_alt }}">
                    </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" value="{{ $section->seo?->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" value="{{ $section->seo?->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" value="{{ $section->seo?->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" value="{{ $section->seo?->h1 }}">
                    </div>
                </div>
            </div>
        </div>

        {{-- Hidden scheduling inputs populated from the confirm modal --}}
        <input type="hidden" name="scheduled_from" id="scheduledFromHidden" value="{{ $section->scheduled_from?->format('Y-m-d') }}">
        <input type="hidden" name="scheduled_to"   id="scheduledToHidden"   value="{{ $section->scheduled_to?->format('Y-m-d') }}">

        <div class="d-flex gap-3 justify-content-end btn-list mb-3">
            <a href="{{ route('backend.template.sections.show', $section->id) }}" class="outline-button-green">Cancel</a>
            <button type="button" class="button-green" id="updateSectionBtn">Save Changes</button>
        </div>
    </form>

    {{-- Confirm Update Section Modal --}}
    <div class="modal fade" id="confirmUpdateSectionModal" 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">Save Changes?</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">

                    {{-- 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;"
                                {{ $section->scheduled_from ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div id="durationBody" style="{{ $section->scheduled_from ? '' : '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
                                    value="{{ $section->scheduled_from?->format('d/m/Y') }}">
                                <div class="invalid-feedback">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
                                    value="{{ $section->scheduled_to?->format('d/m/Y') }}">
                                <div class="invalid-feedback">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="confirmUpdateSectionBtn">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection

@section('scripts')
<script>
$(function () {

    // ── Pre-populate existing products ────────────────────────────────────
    var addedProducts = {};
    @foreach ($section->products as $p)
    addedProducts[{{ $p->id }}] = {
        name:     @json($p->name),
        tamil:    @json($p->name_tamil ?? ''),
        group:    @json($p->group?->name ?? '-'),
        image:    @json($p->image ? asset('storage/' . $p->image) : asset('backend/template/svg-icon/product-img.svg')),
        variants: @json($p->pricing->map(fn($pr) => trim(($pr->variant?->value ?? '') . ($pr->unit ? ' ' . $pr->unit->nickname : '')))->filter()->unique()->join(', ')),
        url:      @json(route('backend.template.product-list.product-detail', $p->id)),
    };
    @endforeach

    var selectedCategory = {
        id:   '{{ $section->category_id }}',
        name: '{{ $section->category?->name }}',
    };

    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').removeClass('d-none');
            $('#categoryChips').html('');
            return;
        }
        $('#categoryEmptyState').addClass('d-none');
        $('#categoryChips').html(
            '<span class="category-chip">' +
                selectedCategory.name +
                '<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);
        });
    }

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

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

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

        if (!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 ($('#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 fields.'); return; }

        $('#confirmUpdateSectionModal').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 (pre-populate if section has dates) ───
    window._fpFrom = flatpickr('#scheduledFromPicker', {
        dateFormat: 'd/m/Y',
        disableMobile: true,
        defaultDate: '{{ $section->scheduled_from?->format("d/m/Y") }}' || null,
        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,
        defaultDate: '{{ $section->scheduled_to?->format("d/m/Y") }}' || null,
        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]);
        },
    });

    // If section already has a minDate/maxDate relationship, wire it up
    @if ($section->scheduled_from && $section->scheduled_to)
        if (window._fpTo)   window._fpTo.set('minDate',   new Date('{{ $section->scheduled_from->format("Y-m-d") }}'));
        if (window._fpFrom) window._fpFrom.set('maxDate', new Date('{{ $section->scheduled_to->format("Y-m-d") }}'));
    @endif

    // ── Confirm → submit ──────────────────────────────────────────────────
    $('#confirmUpdateSectionBtn').on('click', function () {
        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; }
        }

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

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

        $.ajax({
            url: '{{ route("backend.template.sections.update", $section->id) }}',
            type: 'POST',
            data: new FormData(document.getElementById('editSectionForm')),
            processData: false,
            contentType: false,
        }).done(function (res) {
            toastr.success(res.message || 'Section updated successfully.');
            setTimeout(function () {
                window.location.href = '{{ route("backend.template.sections.show", $section->id) }}';
            }, 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 update section.');
            toastr.error(msg);
        });
    });

    // Init
    refreshAddedTable();
});
</script>
@endsection