@php
    $breadcrumbs = [
        'My Document' => url('/my_document_list'),
        'Quick Add' => ''
    ];

    // ถ้ามาจาก Bulk Import จะมี $bulkSets (array ของชุดที่สแกน+จับคู่ไว้แล้ว) ไม่งั้นเริ่มด้วย 1 ชุดว่าง
    $initialSets = $bulkSets ?? [null];
    $initialCount = count($initialSets);
@endphp

@extends('layouts.master')

@section('title')
    Quick Add Quotation + Invoice
@endsection

@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
    .quick-add-card { border-radius: 12px; border: 1px solid #d1d9e6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; }

    /* กล่องย่อยของแต่ละฝั่ง (Quotation / Invoice) ภายในการ์ดชุดเดียวกัน เต็มความกว้างเสมอ */
    .qa-subcard { border: 1px solid #edf2f7; border-radius: 10px; padding: 20px 22px; background-color: #fbfbfd; }

    .label-main { color: #000; font-weight: 700; font-size: 0.85rem; margin-bottom: 5px; display: block; }
    .label-sub-purple { color: #6f42c1 !important; font-weight: 600; font-size: 0.8rem; }
    .input-custom-black { color: #000 !important; font-weight: 600; border-color: #cbd5e0; }
    .form-control-custom { height: 40px; font-size: 0.9rem; border-radius: 6px; }
    .text-violet { color: #6f42c1; }
    .bg-violet { background-color: #6f42c1; }
    .custom-hr { border-top: 1px solid #edf2f7; margin: 1.25rem 0; }
    .table-header-bg { background-color: #f1eef8; border-bottom: 2px solid #343f52; padding: 10px; font-weight: 700; color: #60697b; border-radius: 6px 6px 0 0; }
    .btn-quantity-toggle { padding: 4px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 50px; transition: all 0.2s; }
    .btn-sync { padding: 2px 8px; font-size: 0.7rem; vertical-align: middle; margin-left: 5px; }
    .btn-add-service { background-color: #f3effb; color: #6f42c1; border: 1px dashed #6f42c1; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; }
    .btn-add-service:hover { background-color: #6f42c1; color: #fff; }
    .sub-item-row { padding-left: 10px; }
    .remove-btn { color: #d90429; cursor: pointer; font-size: 1.2rem; display: inline-block; transition: transform 0.1s; }
    .remove-btn:hover { transform: scale(1.15); }
    .input-group-text { border-color: #cbd5e0; background-color: #f8f9fa; cursor: pointer; }
    .qty-column { display: none; } /* ควบคุม แสดง/ซ่อน ผ่าน jQuery ตาม use_qty ของแต่ละฝั่ง */
    #btn-add-set:disabled { opacity: 0.5; cursor: not-allowed; }
</style>
@endsection

@section('content')
<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-12 col-xl-11 mx-auto">

                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 style="font-size: 1.3rem; color:#000;">
                        Quick Add: Quotation + Invoice
                        @if(!empty($bulkSets))
                            <span class="badge bg-violet text-white">จาก Bulk Import ({{ $initialCount }} ชุด)</span>
                        @endif
                    </h2>
                    <a href="{{ url('/my_document_list') }}" class="btn btn-outline-dark rounded-pill btn-sm">
                        <i class="uil uil-arrow-left"></i> Back
                    </a>
                </div>

                @if (session('error'))
                    <div class="alert alert-danger">{!! session('error') !!}</div>
                @endif

                <p class="text-muted" style="font-size:0.85rem;">
                    เพิ่มได้สูงสุด 5 ชุดต่อครั้ง แต่ละชุดต้องแนบไฟล์หลักฐานทั้ง Quotation และ Invoice
                    และเลือก Bank Account หรือกรอก Remark ของ Invoice อย่างใดอย่างหนึ่ง
                </p>

                <form id="quick-add-form" method="post" action="{{ url('/my_document_quick_add_store') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}

                    <div id="sets-container">
                        @foreach($initialSets as $i => $bulkSet)
                            @include('my_document._quick_add_set', ['index' => $i, 'bulkSet' => $bulkSet, 'banks' => $banks])
                        @endforeach
                    </div>

                    <div class="text-center mb-6">
                        <button type="button" id="btn-add-set" class="btn btn-outline-violet rounded-pill px-6" {{ $initialCount >= 5 ? 'disabled' : '' }} style="border:1px dashed #6f42c1; color:#6f42c1;">
                            <i class="uil uil-plus-circle"></i> + Add Set (<span id="set-count">{{ $initialCount }}</span>/5)
                        </button>
                    </div>

                    <div class="text-center mt-6">
                        <button type="submit" class="btn btn-dark rounded-pill px-12 py-2">
                            <i class="uil uil-save"></i> Save All Sets
                        </button>
                    </div>
                </form>

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

{{-- Template ที่ซ่อนไว้สำหรับ clone เพิ่มชุดใหม่ (ว่างเปล่า ไม่ prefill) --}}
<template id="set-template">
    @include('my_document._quick_add_set', ['index' => '__INDEX__', 'bulkSet' => null, 'banks' => $banks])
</template>
<br><br>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    window.APP_BASE_URL = "{{ url('/') }}";
    const MAX_SETS = 5;
    const STANDARD_REMARK = 'หมายเหตุ: หากยืนยันการจัดจ้าง โปรดลงนามยืนยันและส่งกลับมาภายใน 30 วันนับจากวันที่ระบุในใบเสนอราคา';
    let setRunningIndex = {{ $initialCount }}; // ดัชนีถัดไปที่จะใช้เวลา clone ชุดใหม่

    $(document).ready(function() {

        function updateAddButtonState() {
            const count = $('.doc-set-card').length;
            $('#set-count').text(count);
            $('#btn-add-set').prop('disabled', count >= MAX_SETS);
        }

        function renumberSetBadges() {
            $('.doc-set-card').each(function(i) {
                $(this).find('.set-index-number').text(i + 1);
            });
        }

        function renumberSubRows($wrapper, rowSelector) {
            $wrapper.find(rowSelector).each(function(i) {
                $(this).find('.row-number').text(i + 1);
            });
        }

        // -----------------------------------------------------------------
        // ผูก Logic ของฝั่งเอกสารหนึ่งฝั่ง (prefix = 'q' หรือ 'inv') ภายในการ์ดหนึ่งใบ
        // ครอบคลุม: Quantity Mode Toggle (พร้อมปรับความกว้างคอลัมน์แบบเดียวกับหน้า quotation_getedit),
        // Sync Project Name, Sub-service rows (เพิ่ม/ลบ), คำนวณส่วนลด/ยอดสุทธิ, แทรกข้อความมาตรฐานใน Remark
        // -----------------------------------------------------------------
        function initDocSide($card, prefix) {
            const $useQtyInput   = $card.find('.js-' + prefix + '-use-qty-input');
            const $toggleQtyBtn  = $card.find('.js-' + prefix + '-btn-toggle-qty');
            const $qtyCols       = $card.find('.js-' + prefix + '-qty-col');
            const $headerTitle   = $card.find('.js-' + prefix + '-header-title');
            const $mainDescCol   = $card.find('.js-' + prefix + '-main-desc-col');
            const $subWrapper    = $card.find('.js-' + prefix + '-sub-wrapper');
            const subRowSelector = '.' + prefix + '-sub-item-row';

            let qtyModeActive = parseInt($useQtyInput.val()) === 1;

            function toggleQuantityUI(animate) {
                // ดึง sub-desc-col ใหม่ทุกครั้ง เผื่อมีการเพิ่มแถวใหม่เข้ามาระหว่างทาง
                const $subDescCols = $subWrapper.find('.js-' + prefix + '-sub-desc-col');

                if (qtyModeActive) {
                    $toggleQtyBtn.html('<i class="uil uil-minus-circle"></i> Remove Quantity Mode')
                                 .addClass('btn-danger text-white').removeClass('btn-outline-dark');
                    $useQtyInput.val(1);

                    // ปรับสัดส่วนคอลัมน์ให้มีที่ว่างสำหรับช่อง Quantity (เหมือนหน้า quotation_getedit)
                    $headerTitle.removeClass('col-md-6').addClass('col-md-5');
                    $mainDescCol.removeClass('col-md-8').addClass('col-md-6');
                    $subDescCols.removeClass('col-md-6').addClass('col-md-6'); // คงที่ col-md-6 อยู่แล้วทั้งสองโหมด

                    if (animate) { $qtyCols.fadeIn(200); } else { $qtyCols.show(); }
                } else {
                    $toggleQtyBtn.html('<i class="uil uil-layers-alt"></i> + Add Quantity Mode')
                                 .addClass('btn-outline-dark').removeClass('btn-danger text-white');
                    $useQtyInput.val(0);

                    $headerTitle.removeClass('col-md-5').addClass('col-md-6');
                    $mainDescCol.removeClass('col-md-6').addClass('col-md-8');
                    // sub-desc-col คงเดิมที่ col-md-6 (มีที่ว่างเผื่อไว้อยู่แล้วตามดีไซน์ต้นฉบับ)

                    if (animate) { $qtyCols.fadeOut(150); } else { $qtyCols.hide(); }
                }
            }

            $toggleQtyBtn.off('click').on('click', function() {
                qtyModeActive = !qtyModeActive;
                toggleQuantityUI(true);
            });

            toggleQuantityUI(false);

            // --- Project Name Sync ---
            const $projectName = $card.find('.js-' + prefix + '-project-name');
            const $mainDesc = $card.find('.js-' + prefix + '-main-description');
            const $syncBtn = $card.find('.js-' + prefix + '-btn-sync');
            let originalMainTitle = '';
            let isSynced = false;

            $syncBtn.off('click').on('click', function() {
                if (!isSynced) {
                    originalMainTitle = $mainDesc.val();
                    $mainDesc.val($projectName.val());
                    $(this).addClass('btn-primary text-white').removeClass('btn-outline-primary');
                    isSynced = true;
                } else {
                    $mainDesc.val(originalMainTitle);
                    $(this).addClass('btn-outline-primary').removeClass('btn-primary text-white');
                    isSynced = false;
                }
            });

            // --- คำนวณส่วนลด / ยอดสุทธิ (อิงจาก Main Amount เพียวๆ เหมือนหน้า getedit) ---
            function calculateSummary() {
                const totalBeforeDiscount = parseFloat($card.find('.js-' + prefix + '-main-amount').val()) || 0;
                const dValue = parseFloat($card.find('.js-' + prefix + '-discount-value').val()) || 0;
                const dType = $card.find('.js-' + prefix + '-discount-type').val();

                const finalDisc = (dType === 'percent') ? (totalBeforeDiscount * dValue / 100) : dValue;
                const netTotal = totalBeforeDiscount - finalDisc;

                $card.find('.js-' + prefix + '-discount-display').text('(' + finalDisc.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ')');
                $card.find('.js-' + prefix + '-net-total').text(netTotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
            }

            $card.on('input change keyup blur mousewheel', '.js-' + prefix + '-main-amount, .js-' + prefix + '-discount-type, .js-' + prefix + '-discount-value', calculateSummary);
            calculateSummary();

            // --- เพิ่มแถว Sub-service ---
            $card.find('.js-' + prefix + '-add-sub-btn').off('click').on('click', function() {
                const rowCount = $subWrapper.find(subRowSelector).length + 1;
                const qtyStyle = qtyModeActive ? 'display:flex;' : 'display:none;';

                const newRow = $(`
                    <div class="row gy-2 mb-3 ${prefix}-sub-item-row sub-item-row align-items-center" style="display:none">
                        <div class="col-md-6 ${prefix}-sub-desc-col js-${prefix}-sub-desc-col">
                            <label class="label-sub-purple">- Sub-service <span class="row-number">${rowCount}</span>:</label>
                            <textarea class="form-control form-control-custom input-custom-black" name="sets[__IDX__][${prefix}_sub_services][]" placeholder="Sub-service detail..."></textarea>
                        </div>
                        <div class="col-md-2 qty-column mt-auto js-${prefix}-qty-col" style="${qtyStyle}">
                            <input type="number" class="form-control form-control-custom input-custom-black text-center ${prefix}-sub-qty-input" name="sets[__IDX__][${prefix}_sub_qtys][]" value="1" min="0">
                        </div>
                        <div class="col-md-3 mt-auto">
                            <input type="number" step="0.01" class="form-control form-control-custom input-custom-black text-end ${prefix}-sub-amount-input" name="sets[__IDX__][${prefix}_sub_amounts][]" placeholder="0.00">
                        </div>
                        <div class="col-md-1 col-2 mt-auto text-center" style="width: 45px; padding: 0;">
                            <i class="uil uil-trash-alt remove-btn ${prefix}-remove-btn"></i>
                        </div>
                    </div>
                `.replace(/__IDX__/g, $card.data('set-index')));

                $subWrapper.append(newRow);
                newRow.fadeIn(250);
                updateRemoveButtonsVisibility();
            });

            function updateRemoveButtonsVisibility() {
                const rows = $subWrapper.find(subRowSelector);
                rows.find('.' + prefix + '-remove-btn').toggleClass('d-none', rows.length <= 1);
            }

            // --- ลบแถว Sub-service ---
            $card.on('click', '.' + prefix + '-remove-btn', function() {
                $(this).closest(subRowSelector).fadeOut(200, function() {
                    $(this).remove();
                    renumberSubRows($subWrapper, subRowSelector);
                    updateRemoveButtonsVisibility();
                });
            });

            updateRemoveButtonsVisibility();

            // --- แทรกข้อความ Remark มาตรฐาน ---
            const $remarkInput = prefix === 'q'
                ? $card.find('.js-q-remark-input')
                : $card.find('.js-remark-input'); // ฝั่ง invoice ใช้ input ร่วมกับระบบ Bank/Remark toggle
            const $insertBtn = $card.find('.js-' + prefix + '-btn-insert-remark');

            let remarkInserted = ($remarkInput.val() || '').trim() === STANDARD_REMARK;
            function refreshInsertBtnState() {
                if (remarkInserted) {
                    $insertBtn.addClass('btn-secondary text-white').removeClass('btn-outline-secondary')
                              .html('<i class="uil uil-times"></i> ล้างข้อความ');
                } else {
                    $insertBtn.addClass('btn-outline-secondary').removeClass('btn-secondary text-white')
                              .html('<i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน');
                }
            }
            refreshInsertBtnState();

            $insertBtn.off('click').on('click', function() {
                remarkInserted = !remarkInserted;
                $remarkInput.val(remarkInserted ? STANDARD_REMARK : '');
                refreshInsertBtnState();
            });

            $remarkInput.off('input.remarkreset').on('input.remarkreset', function() {
                if (($(this).val() || '').trim() !== STANDARD_REMARK) {
                    remarkInserted = false;
                    refreshInsertBtnState();
                }
            });
        }

        // -----------------------------------------------------------------
        // ⭐ ปุ่ม "คัดลอกข้อมูลจาก Quotation ไปยัง Invoice" (สโคปเฉพาะการ์ดของชุดนี้)
        // อ้างอิง Logic เดิมจากหน้า my_document_quick_add_3 (ปุ่ม #btn_copy_to_invoice)
        // แต่ปรับให้ทำงานกับ selector class js-q-* / js-inv-* ของแต่ละการ์ด แทน id ตายตัว
        // -----------------------------------------------------------------
        function initCopyToInvoice($card) {
            const $btn = $card.find('.js-btn-copy-to-invoice');
            const setIndex = $card.data('set-index');

            $btn.off('click').on('click', function() {

                // ---------- ฟิลด์พื้นฐาน ----------
                $card.find('.js-inv-date').val($card.find('.js-q-date').val());
                $card.find('.js-inv-exp-date').val($card.find('.js-q-exp-date').val());
                $card.find('[name="sets[' + setIndex + '][inv_attention]"]').val($card.find('[name="sets[' + setIndex + '][q_attention]"]').val());
                $card.find('[name="sets[' + setIndex + '][inv_attention_detail]"]').val($card.find('[name="sets[' + setIndex + '][q_attention_detail]"]').val());
                $card.find('.js-inv-project-name').val($card.find('.js-q-project-name').val());
                $card.find('[name="sets[' + setIndex + '][inv_project_duration]"]').val($card.find('[name="sets[' + setIndex + '][q_project_duration]"]').val());
                $card.find('.js-inv-main-description').val($card.find('.js-q-main-description').val());
                $card.find('.js-inv-main-amount').val($card.find('.js-q-main-amount').val()).trigger('input');
                $card.find('.js-inv-discount-type').val($card.find('.js-q-discount-type').val());
                $card.find('.js-inv-discount-value').val($card.find('.js-q-discount-value').val()).trigger('input');

                // ---------- ซิงค์โหมด Quantity ----------
                const qMode = parseInt($card.find('.js-q-use-qty-input').val()) === 1;
                const invMode = parseInt($card.find('.js-inv-use-qty-input').val()) === 1;
                if (qMode !== invMode) {
                    $card.find('.js-inv-btn-toggle-qty').trigger('click');
                }
                $card.find('.js-inv-main-qty').val($card.find('.js-q-main-qty').val());

                // ---------- ก๊อป Sub-service rows ทั้งหมด ----------
                const $qRows = $card.find('.js-q-sub-wrapper .q-sub-item-row');
                const $invWrapper = $card.find('.js-inv-sub-wrapper');
                $invWrapper.find('.inv-sub-item-row').remove();

                const invQtyModeNow = parseInt($card.find('.js-inv-use-qty-input').val()) === 1;

                $qRows.each(function(index) {
                    const $qRow = $(this);
                    const qDesc   = $qRow.find('textarea').first().val();
                    const qQty    = $qRow.find('.q-sub-qty-input').val();
                    const qAmount = $qRow.find('.q-sub-amount-input').val();

                    const qtyStyle = invQtyModeNow ? 'display:flex;' : 'display:none;';

                    const $newRow = $(`
                        <div class="row gy-2 mb-3 inv-sub-item-row sub-item-row align-items-center">
                            <div class="col-md-6 inv-sub-desc-col js-inv-sub-desc-col">
                                <label class="label-sub-purple">- Sub-service <span class="row-number">${index + 1}</span>:</label>
                                <textarea class="form-control form-control-custom input-custom-black" name="sets[${setIndex}][inv_sub_services][]" placeholder="Sub-service detail..."></textarea>
                            </div>
                            <div class="col-md-2 qty-column mt-auto js-inv-qty-col" style="${qtyStyle}">
                                <input type="number" class="form-control form-control-custom input-custom-black text-center inv-sub-qty-input" name="sets[${setIndex}][inv_sub_qtys][]" value="1" min="0">
                            </div>
                            <div class="col-md-3 mt-auto">
                                <input type="number" step="0.01" class="form-control form-control-custom input-custom-black text-end inv-sub-amount-input" name="sets[${setIndex}][inv_sub_amounts][]" placeholder="0.00">
                            </div>
                            <div class="col-md-1 col-2 mt-auto text-center" style="width: 45px; padding: 0;">
                                <i class="uil uil-trash-alt remove-btn inv-remove-btn"></i>
                            </div>
                        </div>
                    `);

                    $newRow.find('textarea').val(qDesc || '');
                    $newRow.find('.inv-sub-qty-input').val(qQty || 1);
                    $newRow.find('.inv-sub-amount-input').val(qAmount || '');

                    $invWrapper.append($newRow);
                });

                // ถ้า Quotation ไม่มีแถวเลย (ไม่ควรเกิดขึ้นจริง แต่กันไว้) ให้สร้างแถวว่าง 1 แถวผ่านปุ่ม Add ปกติ
                if ($qRows.length === 0) {
                    $card.find('.js-inv-add-sub-btn').trigger('click');
                } else {
                    const $invRows = $invWrapper.find('.inv-sub-item-row');
                    $invRows.find('.inv-remove-btn').toggleClass('d-none', $invRows.length <= 1);
                }

                if (window.Swal) {
                    Swal.fire({ title: 'คัดลอกข้อมูลแล้ว (รวม Sub-service)', icon: 'success', timer: 1200, showConfirmButton: false });
                }
            });
        }

        // ผูก Datepicker + Bank/Remark toggle + ทั้งสองฝั่ง (Quotation/Invoice) ให้การ์ดชุดหนึ่งๆ
        function initSetCard($card) {
            $card.find('.js-q-date, .js-q-exp-date, .js-inv-date, .js-inv-exp-date')
                 .datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight: true });

            const $bankWrapper = $card.find('.js-bank-field-wrapper');
            const $remarkWrapper = $card.find('.js-remark-field-wrapper');
            const $bankSelect = $card.find('.js-bank-select');
            const $remarkInput = $card.find('.js-remark-input');
            const $toggleBtn = $card.find('.js-btn-toggle-bank-remark');

            let bankModeActive = ($remarkInput.val() || '').trim() === '';

            function render() {
                if (bankModeActive) {
                    $bankWrapper.removeClass('d-none');
                    $remarkWrapper.addClass('d-none');
                    $toggleBtn.html('<i class="uil uil-exchange"></i> Switch to Remark');
                } else {
                    $remarkWrapper.removeClass('d-none');
                    $bankWrapper.addClass('d-none');
                    $toggleBtn.html('<i class="uil uil-exchange"></i> Switch to Bank Account');
                }
            }

            $toggleBtn.off('click').on('click', function() {
                bankModeActive = !bankModeActive;
                if (bankModeActive) { $remarkInput.val(''); } else { $bankSelect.val(''); }
                render();
            });

            render();

            // ผูก Logic เต็มรูปแบบให้ทั้งฝั่ง Quotation (q) และ Invoice (inv)
            initDocSide($card, 'q');
            initDocSide($card, 'inv');

            autoAttachDraftFile($card, 'js-q-draft-file-url', 'js-q-draft-file-name', 'js-q-evidence-file');
            autoAttachDraftFile($card, 'js-inv-draft-file-url', 'js-inv-draft-file-name', 'js-inv-evidence-file');

            // ⭐ ผูกปุ่มคัดลอกข้อมูล Quotation -> Invoice ให้การ์ดนี้
            initCopyToInvoice($card);

            // ปุ่มลบชุดนี้ (เก็บไว้อย่างน้อย 1 ชุดเสมอ)
            $card.find('.btn-remove-set').off('click').on('click', function() {
                if ($('.doc-set-card').length <= 1) {
                    Swal.fire('ไม่สามารถลบได้', 'ต้องมีอย่างน้อย 1 ชุด', 'warning');
                    return;
                }
                $card.fadeOut(200, function() {
                    $(this).remove();
                    renumberSetBadges();
                    updateAddButtonState();
                });
            });
        }

        function autoAttachDraftFile($card, urlClass, nameClass, fileInputClass) {
            const url = $card.find('.' + urlClass).val();
            if (!url) return; // ชุดนี้ไม่ได้มาจาก Bulk Import หรือไม่มีไฟล์ต้นฉบับ

            const fileName = $card.find('.' + nameClass).val() || 'evidence_file';
            const $fileInput = $card.find('.' + fileInputClass);

            fetch(url)
                .then(function(res) {
                    if (!res.ok) throw new Error('โหลดไฟล์ต้นฉบับไม่สำเร็จ');
                    return res.blob();
                })
                .then(function(blob) {
                    const file = new File([blob], fileName, { type: blob.type || 'application/octet-stream' });
                    const dt = new DataTransfer();
                    dt.items.add(file);
                    $fileInput[0].files = dt.files; // เบราว์เซอร์จะโชว์ชื่อไฟล์ใน "Choose File" ให้เอง
                })
                .catch(function(err) {
                    console.error('ไม่สามารถแนบไฟล์ต้นฉบับอัตโนมัติได้:', err);
                });
        }

        $('.doc-set-card').each(function() {
            initSetCard($(this));
        });

        updateAddButtonState();

        // เพิ่มชุดใหม่ (ว่างเปล่า) จาก template สูงสุด 5 ชุด
        $('#btn-add-set').on('click', function() {
            if ($('.doc-set-card').length >= MAX_SETS) return;

            const templateHtml = $('#set-template').html().replaceAll('__INDEX__', setRunningIndex);
            const $newCard = $(templateHtml);

            $('#sets-container').append($newCard);
            initSetCard($newCard);
            renumberSetBadges();
            updateAddButtonState();

            setRunningIndex++;
        });

        // ก่อน submit: ตรวจสอบไฟล์แนบครบ + ตรวจสอบ Bank/Remark แล้วปล่อยให้ input ที่มีอยู่แล้ว (name ตรงกับ Controller) ส่งไปตามปกติ
        $('#quick-add-form').on('submit', function(e) {
            e.preventDefault();

            const formEl = this;
            const $submitBtn = $(formEl).find('button[type=submit]');
            $submitBtn.prop('disabled', true).html('<i class="uil uil-spinner-alt"></i> กำลังบันทึก...');

            const formData = new FormData(formEl);

            $.ajax({
                url: $(formEl).attr('action'),
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
            }).done(function(res) {
                Swal.fire({
                    title: 'เพิ่มข้อมูลสำเร็จแล้ว',
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                }).then(function() {
                    window.location.href = window.APP_BASE_URL + '/my_document_list';
                });
            }).fail(function(xhr) {
                $submitBtn.prop('disabled', false).html('<i class="uil uil-save"></i> Save All Sets');
                const msg = xhr.responseJSON?.message || 'บันทึกไม่สำเร็จ กรุณาตรวจสอบข้อมูลในแต่ละชุด';
                Swal.fire('ผิดพลาด', msg, 'error');
            });
        });

    });
</script>
@endsection