{{--
    Partial สำหรับ 1 ชุด (Quotation + Invoice) ในหน้า my_document_quick_add
    รับตัวแปร:
      $index    : ลำดับชุด (0,1,2,...) หรือ '__INDEX__' สำหรับ template ที่ใช้ clone ด้วย JS
      $bulkSet  : array ['quotation_draft_id'=>, 'invoice_draft_id'=>, 'quotation'=>[...], 'invoice'=>[...]] หรือ null
      $banks    : รายชื่อธนาคารสำหรับ dropdown

    โครงสร้าง: Quotation (เต็มความกว้าง) -> ปุ่มคัดลอกข้อมูล -> Invoice (เต็มความกว้าง)
    ใช้ Layout เดียวกับหน้า quotation_getedit.blade.php / invoice_getedit.blade.php
    (col-md-4 สำหรับวันที่, col-md-8/2/3 สำหรับ Description/Qty/Amount, col-md-6/2/3/1 สำหรับ Sub-service)
    เพียงแต่เปลี่ยนชื่อ id เป็น class ที่สโคปด้วย prefix js-q- / js-inv- เพื่อให้ใช้ซ้ำได้หลายชุดในหน้าเดียว

    ⚠️ หมายเหตุ (แก้บั๊กจากรอบก่อน): เดิมใช้ col-md-6 สองฝั่งวางเคียงกันในแถวเดียว แล้วแทรกปุ่ม col-12
    คั่นกลาง ทำให้ Bootstrap grid ล้น (6+12 > 12) และตัดฝั่ง Invoice หลุดไปแสดงว่างๆ
    รอบนี้เปลี่ยนเป็นวางเต็มความกว้างสลับกัน (Quotation -> ปุ่ม -> Invoice) ไม่มีปัญหาการล้นแถวอีกต่อไป
--}}
@php
    $q = $bulkSet['quotation'] ?? [];
    $iv = $bulkSet['invoice'] ?? [];

    $qSubServices = $q['sub_services'] ?? [];
    $ivSubServices = $iv['sub_services'] ?? [];

    $qSubAmounts = $q['sub_amounts'] ?? [];
    $ivSubAmounts = $iv['sub_amounts'] ?? [];

    $qSubQtys = $q['sub_qtys'] ?? [];
    $ivSubQtys = $iv['sub_qtys'] ?? [];

    $qUseQty = $q['use_qty'] ?? 0;
    $ivUseQty = $iv['use_qty'] ?? 0;

    $qMainQty = $q['main_qty'] ?? 1;
    $ivMainQty = $iv['main_qty'] ?? 1;

    // ---------------------------------------------------------------------
    // Auto-match ข้อมูลธนาคารที่สแกนได้จากใต้ตาราง Invoice (หัวข้อ "Payment to")
    // กับรายการ Bank Account ที่มีอยู่ในระบบ เทียบด้วย "เลขที่บัญชี" เป็นหลัก
    // (ตัดอักขระที่ไม่ใช่ตัวเลขออกก่อนเทียบ กันกรณีรูปแบบขีด/ช่องว่างไม่ตรงกัน เช่น 091-0-18108-0 vs 0910181080)
    //
    // ถ้าไม่พบเลขบัญชีที่ตรงกันเลย แต่ AI สรุปมาว่าใต้ตารางเป็นข้อความสั้นๆ ไม่มีรายละเอียดธนาคาร
    // (เช่น "Pay to: SIIT Consulting Center") ให้สลับฟอร์มไปโหมด Remark แล้วเติมข้อความนั้นให้อัตโนมัติแทน
    // ผู้ใช้ยังตรวจสอบ/แก้ไขเองได้เสมอก่อนบันทึกจริง
    // ---------------------------------------------------------------------
    $ivBankSelectedId = null;
    $ivUseRemarkMode  = false;
    $ivRemarkPrefill  = '';

    if (!empty($iv)) {
        $scannedAccountNo = preg_replace('/[^0-9]/', '', $iv['payment_account_no'] ?? '');

        if ($scannedAccountNo !== '') {
            foreach ($banks as $bank) {
                $bankAccountDigits = preg_replace('/[^0-9]/', '', $bank->bank_account_no);
                if ($bankAccountDigits !== '' && $bankAccountDigits === $scannedAccountNo) {
                    $ivBankSelectedId = $bank->bank_id;
                    break;
                }
            }
        }

        if (!$ivBankSelectedId) {
            $remarkText = trim((string) ($iv['payment_remark'] ?? ''));
            if ($remarkText !== '') {
                $ivUseRemarkMode = true;
                $ivRemarkPrefill = $remarkText;
            }
        }
    }
@endphp
<div class="card quick-add-card doc-set-card mb-6" data-set-index="{{ $index }}">
    <div class="card-body p-6 p-lg-8">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <span class="badge bg-violet text-white set-index-badge">ชุดที่ <span class="set-index-number">{{ is_numeric($index) ? $index + 1 : '' }}</span></span>
            <button type="button" class="btn btn-sm btn-outline-danger rounded-pill btn-remove-set">
                <i class="uil uil-trash-alt"></i> ลบชุดนี้
            </button>
        </div>

        @if(!empty($bulkSet))
            <input type="hidden" class="js-q-draft-id" name="sets[{{ $index }}][quotation_draft_id]" value="{{ $bulkSet['quotation_draft_id'] ?? '' }}">
            <input type="hidden" class="js-inv-draft-id" name="sets[{{ $index }}][invoice_draft_id]" value="{{ $bulkSet['invoice_draft_id'] ?? '' }}">

            <input type="hidden" class="js-q-draft-file-url" value="{{ !empty($bulkSet['quotation_draft_path']) ? asset($bulkSet['quotation_draft_path']) : '' }}">
            <input type="hidden" class="js-q-draft-file-name" value="{{ $bulkSet['quotation_draft_name'] ?? '' }}">
            <input type="hidden" class="js-inv-draft-file-url" value="{{ !empty($bulkSet['invoice_draft_path']) ? asset($bulkSet['invoice_draft_path']) : '' }}">
            <input type="hidden" class="js-inv-draft-file-name" value="{{ $bulkSet['invoice_draft_name'] ?? '' }}">
            <div class="alert alert-info py-2 px-3 mb-4" style="font-size: 0.8rem;">
                <i class="uil uil-robot"></i> ข้อมูลด้านล่างเติมมาจากการสแกน AI อัตโนมัติ กรุณาตรวจทานความถูกต้องก่อนบันทึก (ยอดเงินของรายการย่อยและโหมด Quantity ต้องกรอก/เปิดเองหลังสแกน)
            </div>
        @endif

        {{-- ================= QUOTATION SECTION (เต็มความกว้าง) ================= --}}
        <div class="qa-subcard doc-side mb-4" data-side="q">
            <h6 class="fw-bold text-violet mb-4"><i class="uil uil-file-alt"></i> Quotation</h6>

            <div class="row gy-4">
                <div class="col-md-4">
                    <label class="label-main">Quotation Date:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black js-q-date" name="sets[{{ $index }}][q_date]" placeholder="YYYY-MM-DD" value="{{ $q['doc_date'] ?? '' }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="label-main">Expiration Date:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black js-q-exp-date" name="sets[{{ $index }}][q_exp_date]" placeholder="YYYY-MM-DD" value="{{ $q['doc_exp_date'] ?? '' }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="label-main">Quotation No.:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_no]" value="{{ $q['doc_no'] ?? '' }}" placeholder="QU-2026/007">
                </div>
                <div class="col-12">
                    <label class="label-main">Attention:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_attention]" value="{{ $q['attention'] ?? '' }}" placeholder="Contact Person">
                </div>
                <div class="col-12">
                    <label class="label-main">Attention Details:</label>
                    <textarea class="form-control input-custom-black" name="sets[{{ $index }}][q_attention_detail]" rows="2" placeholder="Address...">{{ $q['attention_detail'] ?? '' }}</textarea>
                </div>
                <div class="col-12">
                    <label class="label-main">
                        Project Name:
                        <button type="button" class="btn btn-xs btn-outline-primary btn-sync js-q-btn-sync">
                            <i class="uil uil-sync"></i> Sync to Title
                        </button>
                    </label>
                    <textarea class="form-control form-control-custom input-custom-black js-q-project-name" name="sets[{{ $index }}][q_project_name]" placeholder="Project Name">{{ $q['project_name'] ?? '' }}</textarea>
                </div>
                <div class="col-12">
                    <label class="label-main">Project Duration:</label>
                    <textarea class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_project_duration]" placeholder="Duration">{{ $q['project_duration'] ?? '' }}</textarea>
                </div>
            </div>

            <div class="custom-hr"></div>

            <input type="hidden" class="js-q-use-qty-input" name="sets[{{ $index }}][q_use_qty]" value="{{ $qUseQty }}">

            <div class="table-header-bg mb-4">
                <div class="row align-items-center">
                    <div class="col-5 col-md-6 js-q-header-title">Description</div>
                    <div class="col-4 col-md-2 text-center qty-column js-q-qty-col">Quantity</div>
                    <div class="col-3 text-end">Amount (THB)</div>
                    <div class="col-md-1 col-2 text-center" style="width: 45px;"></div>
                </div>
            </div>

            <div class="mb-4 text-start">
                <button type="button" class="btn btn-xs btn-outline-dark btn-quantity-toggle js-q-btn-toggle-qty">
                    <i class="uil uil-layers-alt"></i> + Add Quantity Mode
                </button>
            </div>

            <div class="row gy-3 mb-4 align-items-center">
                <div class="col-md-8 js-q-main-desc-col">
                    <label class="label-main">Main Service Description (Title):</label>
                    <input type="text" class="form-control form-control-custom fw-bold input-custom-black js-q-main-description" name="sets[{{ $index }}][q_main_description]" value="{{ $q['main_description'] ?? '' }}" placeholder="Main Title">
                </div>
                <div class="col-md-2 qty-column mt-auto js-q-qty-col">
                    <label class="label-main text-center d-md-none">Quantity:</label>
                    <input type="number" class="form-control form-control-custom input-custom-black text-center js-q-main-qty" name="sets[{{ $index }}][q_main_qty]" value="{{ $qMainQty }}" min="0">
                </div>
                <div class="col-md-3 mt-auto">
                    <label class="label-main text-end d-md-none">Amount (THB):</label>
                    <input type="number" step="0.01" class="form-control form-control-custom input-custom-black text-end js-q-main-amount" name="sets[{{ $index }}][q_total_amount]" value="{{ $q['amount'] ?? '' }}" placeholder="0.00">
                </div>
                <div class="col-md-1 d-none d-md-block" style="width: 45px;"></div>
            </div>

            <div class="js-q-sub-wrapper">
                @if(count($qSubServices) > 0)
                    @foreach($qSubServices as $sIndex => $item)
                        <div class="row gy-2 mb-3 q-sub-item-row sub-item-row align-items-center">
                            <div class="col-md-6 q-sub-desc-col js-q-sub-desc-col">
                                <label class="label-sub-purple">- Sub-service <span class="row-number">{{ $sIndex + 1 }}</span>:</label>
                                <textarea class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_sub_services][]" placeholder="Sub-service detail...">{{ $item }}</textarea>
                            </div>
                            <div class="col-md-2 qty-column mt-auto js-q-qty-col">
                                <input type="number" class="form-control form-control-custom input-custom-black text-center q-sub-qty-input" name="sets[{{ $index }}][q_sub_qtys][]" value="{{ $qSubQtys[$sIndex] ?? 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 q-sub-amount-input" name="sets[{{ $index }}][q_sub_amounts][]" value="{{ $qSubAmounts[$sIndex] ?? '' }}" 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 q-remove-btn {{ count($qSubServices) <= 1 ? 'd-none' : '' }}"></i>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="row gy-2 mb-3 q-sub-item-row sub-item-row align-items-center">
                        <div class="col-md-6 q-sub-desc-col js-q-sub-desc-col">
                            <label class="label-sub-purple">- Sub-service <span class="row-number">1</span>:</label>
                            <textarea class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_sub_services][]" placeholder="Sub-service detail..."></textarea>
                        </div>
                        <div class="col-md-2 qty-column mt-auto js-q-qty-col">
                            <input type="number" class="form-control form-control-custom input-custom-black text-center q-sub-qty-input" name="sets[{{ $index }}][q_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 q-sub-amount-input" name="sets[{{ $index }}][q_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 q-remove-btn d-none"></i>
                        </div>
                    </div>
                @endif
            </div>

            <div class="row mt-2 sub-item-row">
                <div class="col-12">
                    <button type="button" class="btn btn-add-service rounded-pill w-100 py-2 js-q-add-sub-btn">
                        <i class="uil uil-plus-circle me-1"></i> Add Sub-service Item
                    </button>
                </div>
            </div>

            <div class="custom-hr"></div>

            <div class="row">
                <div class="col-md-5 col-12 mb-4 mb-md-0 text-start">
                    <label class="label-main">
                        Remark:
                        <button type="button" class="btn btn-xs btn-outline-secondary btn-sync js-q-btn-insert-remark">
                            <i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน
                        </button>
                    </label>
                    <textarea class="form-control form-control-custom input-custom-black js-q-remark-input" name="sets[{{ $index }}][q_remark]" rows="2" style="height:auto; min-height:70px;">{{ $q['remark'] ?? '' }}</textarea>
                </div>
                <div class="col-md-7 col-12 text-end mt-auto">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="discount-control d-flex align-items-center">
                            <span class="label-main mb-0">Special Discount</span>
                            <select class="form-select form-select-sm ms-2 js-q-discount-type" name="sets[{{ $index }}][q_discount_type]" style="width: 75px; height: 32px;">
                                <option value="percent" {{ ($q['discount_type'] ?? '') == 'percent' ? 'selected' : '' }}>%</option>
                                <option value="amount" {{ ($q['discount_type'] ?? '') == 'amount' ? 'selected' : '' }}>THB</option>
                            </select>
                            <input type="number" step="0.01" class="form-control form-control-sm ms-2 text-center js-q-discount-value" name="sets[{{ $index }}][q_discount_value]" value="{{ $q['discount_value'] ?? 0 }}" style="width: 85px; height: 32px;">
                        </div>
                        <span class="input-custom-black fw-bold js-q-discount-display">(0.00)</span>
                    </div>
                    <div class="d-flex justify-content-between pt-2 border-top border-dark">
                        <span class="label-main" style="font-size: 1.05rem;">NET TOTAL:</span>
                        <span class="input-custom-black fw-bold js-q-net-total" style="font-size: 1.05rem;">0.00</span>
                    </div>
                </div>
            </div>

            <div class="col-12 mt-4">
                <label class="label-main">แนบไฟล์หลักฐาน (ลูกค้ายืนยัน Quotation):</label>
                <input type="file" class="form-control js-q-evidence-file" name="sets[{{ $index }}][q_evidence_file]" accept=".pdf,.jpg,.jpeg,.png">
            </div>
        </div>

        {{-- ================= COPY TO INVOICE BUTTON ================= --}}
        <div class="text-center mb-4">
            <button type="button" class="btn btn-outline-violet rounded-pill js-btn-copy-to-invoice" style="border:1px dashed #6f42c1; color:#6f42c1;">
                <i class="uil uil-arrow-down"></i> คัดลอกข้อมูลจาก Quotation ไปยัง Invoice
            </button>
        </div>

        {{-- ================= INVOICE SECTION (เต็มความกว้าง) ================= --}}
        <div class="qa-subcard doc-side" data-side="inv">
            <h6 class="fw-bold text-violet mb-4"><i class="uil uil-invoice"></i> Invoice</h6>

            <div class="row gy-4">
                <div class="col-md-4">
                    <label class="label-main">Invoice Date:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black js-inv-date" name="sets[{{ $index }}][inv_date]" placeholder="YYYY-MM-DD" value="{{ $iv['doc_date'] ?? '' }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="label-main">Expiration Date:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black js-inv-exp-date" name="sets[{{ $index }}][inv_exp_date]" placeholder="YYYY-MM-DD" value="{{ $iv['doc_exp_date'] ?? '' }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="label-main">Invoice No.:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_no]" value="{{ $iv['doc_no'] ?? '' }}" placeholder="CON007/2025">
                </div>
                <div class="col-12">
                    <label class="label-main">Attention:</label>
                    <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_attention]" value="{{ $iv['attention'] ?? '' }}" placeholder="Contact Person">
                </div>
                <div class="col-12">
                    <label class="label-main">Attention Details:</label>
                    <textarea class="form-control input-custom-black" name="sets[{{ $index }}][inv_attention_detail]" rows="2" placeholder="Address...">{{ $iv['attention_detail'] ?? '' }}</textarea>
                </div>
                <div class="col-12">
                    <label class="label-main">
                        Project Name:
                        <button type="button" class="btn btn-xs btn-outline-primary btn-sync js-inv-btn-sync">
                            <i class="uil uil-sync"></i> Sync to Title
                        </button>
                    </label>
                    <textarea class="form-control form-control-custom input-custom-black js-inv-project-name" name="sets[{{ $index }}][inv_project_name]" placeholder="Project Name">{{ $iv['project_name'] ?? '' }}</textarea>
                </div>
                <div class="col-12">
                    <label class="label-main">Project Duration:</label>
                    <textarea class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_project_duration]" placeholder="Duration">{{ $iv['project_duration'] ?? '' }}</textarea>
                </div>
            </div>

            <div class="custom-hr"></div>

            <input type="hidden" class="js-inv-use-qty-input" name="sets[{{ $index }}][inv_use_qty]" value="{{ $ivUseQty }}">

            <div class="table-header-bg mb-4">
                <div class="row align-items-center">
                    <div class="col-5 col-md-6 js-inv-header-title">Description</div>
                    <div class="col-4 col-md-2 text-center qty-column js-inv-qty-col">Quantity</div>
                    <div class="col-3 text-end">Amount (THB)</div>
                    <div class="col-md-1 col-2 text-center" style="width: 45px;"></div>
                </div>
            </div>

            <div class="mb-4 text-start">
                <button type="button" class="btn btn-xs btn-outline-dark btn-quantity-toggle js-inv-btn-toggle-qty">
                    <i class="uil uil-layers-alt"></i> + Add Quantity Mode
                </button>
            </div>

            <div class="row gy-3 mb-4 align-items-center">
                <div class="col-md-8 js-inv-main-desc-col">
                    <label class="label-main">Main Service Description (Title):</label>
                    <input type="text" class="form-control form-control-custom fw-bold input-custom-black js-inv-main-description" name="sets[{{ $index }}][inv_main_description]" value="{{ $iv['main_description'] ?? '' }}" placeholder="Main Title">
                </div>
                <div class="col-md-2 qty-column mt-auto js-inv-qty-col">
                    <label class="label-main text-center d-md-none">Quantity:</label>
                    <input type="number" class="form-control form-control-custom input-custom-black text-center js-inv-main-qty" name="sets[{{ $index }}][inv_main_qty]" value="{{ $ivMainQty }}" min="0">
                </div>
                <div class="col-md-3 mt-auto">
                    <label class="label-main text-end d-md-none">Amount (THB):</label>
                    <input type="number" step="0.01" class="form-control form-control-custom input-custom-black text-end js-inv-main-amount" name="sets[{{ $index }}][inv_total_amount]" value="{{ $iv['amount'] ?? '' }}" placeholder="0.00">
                </div>
                <div class="col-md-1 d-none d-md-block" style="width: 45px;"></div>
            </div>

            <div class="js-inv-sub-wrapper">
                @if(count($ivSubServices) > 0)
                    @foreach($ivSubServices as $sIndex => $item)
                        <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">{{ $sIndex + 1 }}</span>:</label>
                                <textarea class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_sub_services][]" placeholder="Sub-service detail...">{{ $item }}</textarea>
                            </div>
                            <div class="col-md-2 qty-column mt-auto js-inv-qty-col">
                                <input type="number" class="form-control form-control-custom input-custom-black text-center inv-sub-qty-input" name="sets[{{ $index }}][inv_sub_qtys][]" value="{{ $ivSubQtys[$sIndex] ?? 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[{{ $index }}][inv_sub_amounts][]" value="{{ $ivSubAmounts[$sIndex] ?? '' }}" 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 {{ count($ivSubServices) <= 1 ? 'd-none' : '' }}"></i>
                            </div>
                        </div>
                    @endforeach
                @else
                    <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">1</span>:</label>
                            <textarea class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_sub_services][]" placeholder="Sub-service detail..."></textarea>
                        </div>
                        <div class="col-md-2 qty-column mt-auto js-inv-qty-col">
                            <input type="number" class="form-control form-control-custom input-custom-black text-center inv-sub-qty-input" name="sets[{{ $index }}][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[{{ $index }}][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 d-none"></i>
                        </div>
                    </div>
                @endif
            </div>

            <div class="row mt-2 sub-item-row">
                <div class="col-12">
                    <button type="button" class="btn btn-add-service rounded-pill w-100 py-2 js-inv-add-sub-btn">
                        <i class="uil uil-plus-circle me-1"></i> Add Sub-service Item
                    </button>
                </div>
            </div>

            <div class="custom-hr"></div>

            <div class="row">
                <div class="col-12 mb-4 text-start">
                    <label class="label-main">
                        Bank Account:
                        <button type="button" class="btn btn-xs btn-outline-secondary btn-sync js-btn-toggle-bank-remark">
                            <i class="uil uil-exchange"></i> Switch to Remark
                        </button>
                    </label>
                    <div class="js-bank-field-wrapper {{ $ivUseRemarkMode ? 'd-none' : '' }}">
                        <select class="form-control input-custom-black js-bank-select" name="sets[{{ $index }}][inv_bank]" style="width: 100%; max-width: 100%; height: 46px; line-height: 1.6; padding-top: 8px; padding-bottom: 8px; font-size: 0.9rem; border-radius: 6px;">
                            <option value="">-- Select Bank Account --</option>
                            @foreach($banks as $bank)
                                <option value="{{ $bank->bank_id }}" title="{{ $bank->bank_name }} ({{ $bank->bank_branch }}) - {{ $bank->bank_account_no }}" {{ $ivBankSelectedId == $bank->bank_id ? 'selected' : '' }}>
                                    {{ $bank->bank_name }} ({{ $bank->bank_branch }}) - {{ $bank->bank_account_no }}
                                </option>
                            @endforeach
                        </select>
                        @if($ivBankSelectedId)
                            <small class="text-success d-block mt-1"><i class="uil uil-check-circle"></i> เลือกให้อัตโนมัติจากเลขบัญชีที่สแกนได้ กรุณาตรวจสอบอีกครั้ง</small>
                        @endif
                    </div>
                    <div class="js-remark-field-wrapper {{ $ivUseRemarkMode ? '' : 'd-none' }}">
                        <div class="text-end mb-1">
                            <button type="button" class="btn btn-xs btn-outline-secondary btn-sync js-inv-btn-insert-remark">
                                <i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน
                            </button>
                        </div>
                        <textarea class="form-control form-control-custom input-custom-black js-remark-input" name="sets[{{ $index }}][inv_remark]" rows="2" placeholder="Enter remark instead of bank account...">{{ $ivRemarkPrefill }}</textarea>
                        @if($ivUseRemarkMode)
                            <small class="text-success d-block mt-1"><i class="uil uil-check-circle"></i> สลับเป็น Remark และเติมให้อัตโนมัติ (ใต้ตารางไม่มีรายละเอียดธนาคารให้จับคู่) กรุณาตรวจสอบอีกครั้ง</small>
                        @endif
                    </div>
                    <small class="text-muted d-block mt-1">เลือกอย่างใดอย่างหนึ่งระหว่าง Bank Account หรือ Remark</small>
                </div>
            </div>

            <div class="row">
                <div class="col-md-7 col-12 text-end mt-auto ms-auto">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="discount-control d-flex align-items-center">
                            <span class="label-main mb-0">Special Discount</span>
                            <select class="form-select form-select-sm ms-2 js-inv-discount-type" name="sets[{{ $index }}][inv_discount_type]" style="width: 75px; height: 32px;">
                                <option value="percent" {{ ($iv['discount_type'] ?? '') == 'percent' ? 'selected' : '' }}>%</option>
                                <option value="amount" {{ ($iv['discount_type'] ?? '') == 'amount' ? 'selected' : '' }}>THB</option>
                            </select>
                            <input type="number" step="0.01" class="form-control form-control-sm ms-2 text-center js-inv-discount-value" name="sets[{{ $index }}][inv_discount_value]" value="{{ $iv['discount_value'] ?? 0 }}" style="width: 85px; height: 32px;">
                        </div>
                        <span class="input-custom-black fw-bold js-inv-discount-display">(0.00)</span>
                    </div>
                    <div class="d-flex justify-content-between pt-2 border-top border-dark">
                        <span class="label-main" style="font-size: 1.05rem;">NET TOTAL:</span>
                        <span class="input-custom-black fw-bold js-inv-net-total" style="font-size: 1.05rem;">0.00</span>
                    </div>
                </div>
            </div>

            <div class="col-12 mt-4">
                <label class="label-main">แนบไฟล์หลักฐาน (ลูกค้ายืนยัน Invoice):</label>
                <input type="file" class="form-control js-inv-evidence-file" name="sets[{{ $index }}][inv_evidence_file]" accept=".pdf,.jpg,.jpeg,.png">
            </div>
        </div>

    </div>
</div>