{{--
    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_getedit / invoice_getedit
    (Quantity Mode, รายการย่อยพร้อมจำนวน+ยอดเงิน, ส่วนลด+ยอดสุทธิ, Sync Project Name, แทรกข้อความมาตรฐาน ฯลฯ)
    เพียงแต่ยุบมาไว้ในการ์ดเดียว 2 ฝั่ง (Quotation / Invoice) แล้วตั้งชื่อฟิลด์ตามที่ MyDocumentController::my_document_quick_add_store คาดหวังไว้
--}}
@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;
@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'] ?? '' }}">
            <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

        <div class="row gy-4">
            {{-- ================= QUOTATION SIDE ================= --}}
            <div class="col-md-6 doc-side" data-side="q">
                <h6 class="fw-bold text-violet mb-3"><i class="uil uil-file-alt"></i> Quotation</h6>

                <div class="row gy-3">
                    <div class="col-6">
                        <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-6">
                        <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-12">
                        <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'] ?? '' }}">
                    </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">{{ $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]">{{ $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]">{{ $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="mb-3 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-2 mb-3 align-items-end">
                    <div class="col-12 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-4 qty-column js-q-qty-col">
                        <label class="label-main">Qty:</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-8 js-q-main-amount-col">
                        <label class="label-main">Amount (THB):</label>
                        <input type="number" step="0.01" class="form-control form-control-custom input-custom-black js-q-main-amount" name="sets[{{ $index }}][q_total_amount]" value="{{ $q['amount'] ?? '' }}">
                    </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 align-items-end" style="padding-left:10px;">
                                <div class="col-12 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][]" rows="2">{{ $item }}</textarea>
                                </div>
                                <div class="col-4 qty-column 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-6">
                                    <input type="number" step="0.01" class="form-control form-control-custom input-custom-black q-sub-amount-input" name="sets[{{ $index }}][q_sub_amounts][]" value="{{ $qSubAmounts[$sIndex] ?? '' }}" placeholder="0.00">
                                </div>
                                <div class="col-2 text-center">
                                    <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 align-items-end" style="padding-left:10px;">
                            <div class="col-12 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][]" rows="2"></textarea>
                            </div>
                            <div class="col-4 qty-column 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-6">
                                <input type="number" step="0.01" class="form-control form-control-custom input-custom-black q-sub-amount-input" name="sets[{{ $index }}][q_sub_amounts][]" placeholder="0.00">
                            </div>
                            <div class="col-2 text-center">
                                <i class="uil uil-trash-alt remove-btn q-remove-btn d-none"></i>
                            </div>
                        </div>
                    @endif
                </div>

                <button type="button" class="btn btn-add-service rounded-pill w-100 py-2 mb-4 js-q-add-sub-btn">
                    <i class="uil uil-plus-circle me-1"></i> Add Sub-service Item
                </button>

                <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-1">
                    <div class="discount-control d-flex align-items-center">
                        <span class="label-main mb-0">Discount</span>
                        <select class="form-select form-select-sm ms-2 js-q-discount-type" name="sets[{{ $index }}][q_discount_type]" style="width: 70px; 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: 80px; 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 mb-4">
                    <span class="label-main">NET TOTAL:</span>
                    <span class="input-custom-black fw-bold js-q-net-total">0.00</span>
                </div>

                <div class="col-12 mb-3">
                    <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">{{ $q['remark'] ?? '' }}</textarea>
                </div>

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

            {{-- ================= INVOICE SIDE ================= --}}
            <div class="col-md-6 doc-side" data-side="inv">
                <h6 class="fw-bold text-violet mb-3"><i class="uil uil-invoice"></i> Invoice</h6>

                <div class="row gy-3">
                    <div class="col-6">
                        <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-6">
                        <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-12">
                        <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'] ?? '' }}">
                    </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">{{ $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]">{{ $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]">{{ $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="mb-3 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-2 mb-3 align-items-end">
                    <div class="col-12 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-4 qty-column js-inv-qty-col">
                        <label class="label-main">Qty:</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-8 js-inv-main-amount-col">
                        <label class="label-main">Amount (THB):</label>
                        <input type="number" step="0.01" class="form-control form-control-custom input-custom-black js-inv-main-amount" name="sets[{{ $index }}][inv_total_amount]" value="{{ $iv['amount'] ?? '' }}">
                    </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 align-items-end" style="padding-left:10px;">
                                <div class="col-12 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][]" rows="2">{{ $item }}</textarea>
                                </div>
                                <div class="col-4 qty-column 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-6">
                                    <input type="number" step="0.01" class="form-control form-control-custom input-custom-black inv-sub-amount-input" name="sets[{{ $index }}][inv_sub_amounts][]" value="{{ $ivSubAmounts[$sIndex] ?? '' }}" placeholder="0.00">
                                </div>
                                <div class="col-2 text-center">
                                    <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 align-items-end" style="padding-left:10px;">
                            <div class="col-12 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][]" rows="2"></textarea>
                            </div>
                            <div class="col-4 qty-column 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-6">
                                <input type="number" step="0.01" class="form-control form-control-custom input-custom-black inv-sub-amount-input" name="sets[{{ $index }}][inv_sub_amounts][]" placeholder="0.00">
                            </div>
                            <div class="col-2 text-center">
                                <i class="uil uil-trash-alt remove-btn inv-remove-btn d-none"></i>
                            </div>
                        </div>
                    @endif
                </div>

                <button type="button" class="btn btn-add-service rounded-pill w-100 py-2 mb-4 js-inv-add-sub-btn">
                    <i class="uil uil-plus-circle me-1"></i> Add Sub-service Item
                </button>

                <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-1">
                    <div class="discount-control d-flex align-items-center">
                        <span class="label-main mb-0">Discount</span>
                        <select class="form-select form-select-sm ms-2 js-inv-discount-type" name="sets[{{ $index }}][inv_discount_type]" style="width: 70px; 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: 80px; 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 mb-4">
                    <span class="label-main">NET TOTAL:</span>
                    <span class="input-custom-black fw-bold js-inv-net-total">0.00</span>
                </div>

                <div class="col-12 mb-3">
                    <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">
                        <select class="form-control input-custom-black js-bank-select" name="sets[{{ $index }}][inv_bank]" style="height:46px;">
                            <option value="">-- Select Bank Account --</option>
                            @foreach($banks as $bank)
                                <option value="{{ $bank->bank_id }}">{{ $bank->bank_name }} ({{ $bank->bank_branch }}) - {{ $bank->bank_account_no }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="js-remark-field-wrapper 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="Remark แทน Bank Account..."></textarea>
                    </div>
                </div>

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