{{--
    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
--}}
@php
    $q = $bulkSet['quotation'] ?? [];
    $iv = $bulkSet['invoice'] ?? [];

    $qSubServices = implode("\n", $q['sub_services'] ?? []);
    $ivSubServices = implode("\n", $iv['sub_services'] ?? []);
@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 อัตโนมัติ กรุณาตรวจทานความถูกต้องก่อนบันทึก
            </div>
        @endif

        <div class="row gy-4">
            {{-- ================= QUOTATION SIDE ================= --}}
            <div class="col-md-6">
                <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:</label>
                        <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_project_name]" value="{{ $q['project_name'] ?? '' }}">
                    </div>
                    <div class="col-12">
                        <label class="label-main">Project Duration:</label>
                        <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_project_duration]" value="{{ $q['project_duration'] ?? '' }}">
                    </div>
                    <div class="col-12">
                        <label class="label-main">Main Description:</label>
                        <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_main_description]" value="{{ $q['main_description'] ?? '' }}">
                    </div>
                    <div class="col-12">
                        <label class="label-main">Sub-services (1 บรรทัด = 1 รายการ):</label>
                        <textarea class="form-control form-control-custom input-custom-black js-q-subservices" name="sets[{{ $index }}][q_sub_services_raw]" rows="3">{{ $qSubServices }}</textarea>
                    </div>
                    <div class="col-6">
                        <label class="label-main">Amount (THB):</label>
                        <input type="number" step="0.01" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_total_amount]" value="{{ $q['amount'] ?? '' }}">
                    </div>
                    <div class="col-3">
                        <label class="label-main">Disc. Type:</label>
                        <select class="form-select form-control-custom" name="sets[{{ $index }}][q_discount_type]">
                            <option value="percent" {{ ($q['discount_type'] ?? '') == 'percent' ? 'selected' : '' }}>%</option>
                            <option value="amount" {{ ($q['discount_type'] ?? '') == 'amount' ? 'selected' : '' }}>THB</option>
                        </select>
                    </div>
                    <div class="col-3">
                        <label class="label-main">Disc. Value:</label>
                        <input type="number" step="0.01" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][q_discount_value]" value="{{ $q['discount_value'] ?? 0 }}">
                    </div>
                    <div class="col-12">
                        <label class="label-main">Remark:</label>
                        <textarea class="form-control form-control-custom input-custom-black" 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>
            </div>

            {{-- ================= INVOICE SIDE ================= --}}
            <div class="col-md-6">
                <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:</label>
                        <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_project_name]" value="{{ $iv['project_name'] ?? '' }}">
                    </div>
                    <div class="col-12">
                        <label class="label-main">Project Duration:</label>
                        <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_project_duration]" value="{{ $iv['project_duration'] ?? '' }}">
                    </div>
                    <div class="col-12">
                        <label class="label-main">Main Description:</label>
                        <input type="text" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_main_description]" value="{{ $iv['main_description'] ?? '' }}">
                    </div>
                    <div class="col-12">
                        <label class="label-main">Sub-services (1 บรรทัด = 1 รายการ):</label>
                        <textarea class="form-control form-control-custom input-custom-black js-inv-subservices" name="sets[{{ $index }}][inv_sub_services_raw]" rows="3">{{ $ivSubServices }}</textarea>
                    </div>
                    <div class="col-6">
                        <label class="label-main">Amount (THB):</label>
                        <input type="number" step="0.01" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_total_amount]" value="{{ $iv['amount'] ?? '' }}">
                    </div>
                    <div class="col-3">
                        <label class="label-main">Disc. Type:</label>
                        <select class="form-select form-control-custom" name="sets[{{ $index }}][inv_discount_type]">
                            <option value="percent" {{ ($iv['discount_type'] ?? '') == 'percent' ? 'selected' : '' }}>%</option>
                            <option value="amount" {{ ($iv['discount_type'] ?? '') == 'amount' ? 'selected' : '' }}>THB</option>
                        </select>
                    </div>
                    <div class="col-3">
                        <label class="label-main">Disc. Value:</label>
                        <input type="number" step="0.01" class="form-control form-control-custom input-custom-black" name="sets[{{ $index }}][inv_discount_value]" value="{{ $iv['discount_value'] ?? 0 }}">
                    </div>

                    <div class="col-12">
                        <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">
                            <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>
</div>