@php
    $breadcrumbs = [
        'My Documents' => url('/my_document_list'),
        'Create Quotation + Invoice' => ''
    ];
@endphp
@extends('layouts.master')

@section('title')
    Create 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>
    .qa-card { border-radius: 12px; border: 1px solid #d1d9e6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; }
    .qa-card-header { background-color: #f8f9fa; border-bottom: 2px solid #343f52; font-weight: 700; font-size: 1rem; color: #343f52; padding: 14px 20px; border-radius: 12px 12px 0 0; }
    .label-main { color: #000; font-weight: 700; font-size: 0.9rem; margin-bottom: 5px; display: block; }
    .input-custom-black { color: #000000 !important; font-weight: 600; border-color: #cbd5e0; }
    .input-custom-black:focus { border-color: #3f78e0; color: #000000 !important; box-shadow: none; }
    .label-sub-purple { color: #6f42c1 !important; font-weight: 600; font-size: 0.85rem; }
    .form-control-custom { height: 40px; font-size: 0.9rem; border-radius: 6px; }
    .custom-hr { border-top: 1px solid #edf2f7; margin: 1.5rem 0; }
    .table-header-bg { background-color: #f8f9fa; border-bottom: 2px solid #343f52; padding: 10px; font-weight: 700; color: #60697b; }
    .btn-add-service { background-color: #f3effb; color: #6f42c1; border: 1px dashed #6f42c1; font-size: 0.85rem; font-weight: 600; }
    .btn-add-service:hover { background-color: #6f42c1; color: #fff; }
    .sub-item-row { padding-left: 20px; }
    .remove-btn { color: #d90429; cursor: pointer; font-size: 1.2rem; }
    .btn-quantity-toggle { padding: 4px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 50px; }
    .qty-column { display: none; }
    .input-group-text { border-color: #cbd5e0; background-color: #f8f9fa; cursor: pointer; }
    .qa-badge { background-color: #343f52; color:#fff; font-size:.7rem; padding:4px 10px; border-radius: 50px; }
</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">

                <br>
                <div class="mb-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h2 style="font-size: 1.3rem; color: #000;">สร้างใบเสนอราคา + ใบแจ้งหนี้ (สถานะ Completed)</h2>
                    <a href="{{ url('/my_document_list') }}" class="btn btn-sm btn-outline-dark rounded-pill">
                        <i class="uil uil-arrow-left"></i> Back
                    </a>
                </div>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                 <p class="text-muted" style="font-size:.85rem;">
                    ใช้สำหรับกรอกเอกสารเก่าที่เสร็จสมบูรณ์แล้วทั้งคู่ เมื่อบันทึกระบบจะตั้งสถานะเป็น <strong>Completed</strong> ให้ทั้ง 2 ใบทันที
                    และจับคู่ Quotation กับ Invoice เข้าด้วยกันโดยไม่ผ่านขั้นตอน Workflow Approve
                    <br>
                    <strong>หมายเหตุ:</strong> ขั้นตอนนี้ยังไม่ต้องเลือก Division — หลังบันทึกเสร็จ ให้กดปุ่ม "Add Document" ที่หน้า My Documents เพื่อเลือก Division ที่ต้องการเพิ่มเอกสารชุดนี้เข้าไปทีหลังได้เลย
                    <br>
                    เนื่องจากไม่ได้ผ่าน Workflow Approve จริง จึงต้อง<strong>แนบไฟล์หลักฐาน</strong> (PDF หรือรูปภาพ) แยกกันทั้ง Quotation และ Invoice เพื่อยืนยันว่าเอกสารแต่ละใบได้รับการอนุมัติ/ยืนยันจากลูกค้าเรียบร้อยแล้ว
                </p>

                <form method="post" action="{{ url('/my_document_quick_add_store') }}" id="quickAddForm" enctype="multipart/form-data">
                    @csrf

                    {{-- เลือก Division --}}
                    

                    {{-- ================= QUOTATION ================= --}}
                    <div class="card qa-card mb-6" id="qa-quotation-section">
                        <div class="qa-card-header d-flex justify-content-between align-items-center">
                            <span><span class="qa-badge me-2">1</span> Quotation</span>
                        </div>
                        <div class="card-body p-8">
                            <div class="row gy-4">
                                <div class="col-md-4">
                                    <label class="label-main">Quotation Date:</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-custom input-custom-black qa-date" id="q_date" name="q_date" placeholder="Select Date" readonly required>
                                        <span class="input-group-text"><i class="uil uil-calendar-alt"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="label-main">Expiration Date:</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-custom input-custom-black qa-date" id="q_exp_date" name="q_exp_date" placeholder="Select Date" readonly>
                                        <span class="input-group-text"><i class="uil uil-calendar-alt"></i></span>
                                    </div>
                                </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="q_no" id="q_no" placeholder="QU-2026/007" required>
                                </div>

                                <div class="col-12">
                                    <label class="label-main">Attention:</label>
                                    <input type="text" class="form-control form-control-custom input-custom-black" name="q_attention" id="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="q_attention_detail" id="q_attention_detail" rows="2" placeholder="Address..."></textarea>
                                </div>
                                <div class="col-12">
                                    <label class="label-main">Project Name:
                                        <button type="button" class="btn btn-xs btn-outline-primary" id="q_btn_sync" style="font-size:.7rem;">
                                            <i class="uil uil-sync"></i> Sync to Title
                                        </button>
                                    </label>
                                    <textarea class="form-control form-control-custom input-custom-black" id="q_project_name" name="q_project_name" placeholder="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" id="q_project_duration" name="q_project_duration" placeholder="Duration"></textarea>
                                </div>
                            </div>

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

                            <div class="table-header-bg mb-4">
                                <div class="row align-items-center">
                                    <div class="col-5 col-md-6" id="q_header_desc_title">Description</div>
                                    <div class="col-4 col-md-2 text-center qty-column">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" id="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" id="q_main_desc_col">
                                    <label class="label-main">Main Service Description (Title):</label>
                                    <input type="text" class="form-control form-control-custom fw-bold" id="q_main_description" name="q_main_description" placeholder="Main Title" style="color:#000;">
                                </div>
                                <div class="col-md-2 qty-column mt-auto">
                                    <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" id="q_main_qty" name="q_main_qty" value="1" 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" class="form-control form-control-custom input-custom-black text-end" id="q_main_amount" name="q_total_amount" placeholder="0.00" step="0.01" required>
                                </div>
                                <div class="col-md-1 d-none d-md-block" style="width:45px;"></div>
                            </div>

                            <div id="q_sub_wrapper">
                                <div class="row gy-2 mb-3 sub-item-row align-items-center">
                                    <div class="col-md-8 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="q_sub_services[]" placeholder="Sub-service detail..."></textarea>
                                    </div>
                                    <div class="col-md-2 qty-column mt-auto">
                                        <input type="number" class="form-control form-control-custom input-custom-black text-center q-sub-qty" name="q_sub_qtys[]" value="1" min="0">
                                    </div>
                                    <div class="col-md-2 mt-auto q-sub-amount-col">
                                        <input type="number" class="form-control form-control-custom input-custom-black text-end q-sub-amount" name="q_sub_amounts[]" placeholder="0.00" step="0.01">
                                    </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 d-none"></i>
                                    </div>
                                </div>
                            </div>

                            <button type="button" class="btn btn-add-service rounded-pill w-100 py-2 mt-3" id="q_add_sub_btn">
                                <i class="uil uil-plus-circle me-1"></i> Add Sub-service Item
                            </button>

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

                            <div class="row gy-4 mb-4">
                                <div class="col-12">
                                    <label class="label-main">
                                        แนบไฟล์หลักฐาน Quotation (PDF หรือรูปภาพ) <span class="text-danger">*</span>
                                    </label>
                                    <input type="file" class="form-control input-custom-black" name="q_evidence_file" id="q_evidence_file" accept=".pdf,.jpg,.jpeg,.png" required>
                                    <small class="text-muted d-block mt-1">
                                        ใช้เป็นหลักฐานยืนยันว่าใบเสนอราคานี้ได้รับการอนุมัติ/ยืนยันจากลูกค้าเรียบร้อยแล้ว
                                    </small>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-5 col-12 mb-4 text-start">
                                    <label class="label-main">Remark:
                                        <button type="button" class="btn btn-xs btn-outline-secondary" id="q_btn_insert_remark" style="font-size:.7rem;">
                                            <i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน
                                        </button>
                                    </label>
                                    <textarea class="form-control form-control-custom input-custom-black" id="q_remark" name="q_remark" rows="2" placeholder="Terms/remarks..."></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="d-flex align-items-center">
                                            <span class="label-main mb-0">Special Discount</span>
                                            <select id="q_discount_type" name="q_discount_type" class="form-select form-select-sm ms-2" style="width:75px;height:32px;">
                                                <option value="percent">%</option>
                                                <option value="amount">THB</option>
                                            </select>
                                            <input type="number" id="q_discount_value" name="q_discount_value" class="form-control form-control-sm ms-2 text-center" style="width:85px;height:32px;">
                                        </div>
                                        <span class="input-custom-black fw-bold" id="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.1rem;">NET TOTAL:</span>
                                        <span class="input-custom-black fw-bold" id="q_net_total" style="font-size:1.1rem;">0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center mb-4">
                        <button type="button" class="btn btn-outline-violet rounded-pill" id="btn_copy_to_invoice">
                            <i class="uil uil-arrow-down"></i> คัดลอกข้อมูลจาก Quotation ไปยัง Invoice
                        </button>
                    </div>

                    {{-- ================= INVOICE ================= --}}
                    <div class="card qa-card mb-6" id="qa-invoice-section">
                        <div class="qa-card-header d-flex justify-content-between align-items-center">
                            <span><span class="qa-badge me-2">2</span> Invoice</span>
                        </div>
                        <div class="card-body p-8">
                            <div class="row gy-4">
                                <div class="col-md-4">
                                    <label class="label-main">Invoice Date:</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-custom input-custom-black qa-date" id="inv_date" name="inv_date" placeholder="Select Date" readonly required>
                                        <span class="input-group-text"><i class="uil uil-calendar-alt"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="label-main">Expiration Date:</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-custom input-custom-black qa-date" id="inv_exp_date" name="inv_exp_date" placeholder="Select Date" readonly>
                                        <span class="input-group-text"><i class="uil uil-calendar-alt"></i></span>
                                    </div>
                                </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="inv_no" id="inv_no" placeholder="INV-2026/007" required>
                                </div>

                                <div class="col-12">
                                    <label class="label-main">Attention:</label>
                                    <input type="text" class="form-control form-control-custom input-custom-black" name="inv_attention" id="inv_attention" placeholder="Contact Person">
                                </div>
                                <div class="col-12">
                                    <label class="label-main">Attention Details:</label>
                                    <textarea class="form-control input-custom-black" name="inv_attention_detail" id="inv_attention_detail" rows="2" placeholder="Address..."></textarea>
                                </div>
                                <div class="col-12">
                                    <label class="label-main">Project Name:
                                        <button type="button" class="btn btn-xs btn-outline-primary" id="inv_btn_sync" style="font-size:.7rem;">
                                            <i class="uil uil-sync"></i> Sync to Title
                                        </button>
                                    </label>
                                    <textarea class="form-control form-control-custom input-custom-black" id="inv_project_name" name="inv_project_name" placeholder="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" id="inv_project_duration" name="inv_project_duration" placeholder="Duration"></textarea>
                                </div>
                            </div>

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

                            <div class="table-header-bg mb-4">
                                <div class="row align-items-center">
                                    <div class="col-5 col-md-6" id="inv_header_desc_title">Description</div>
                                    <div class="col-4 col-md-2 text-center qty-column">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" id="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" id="inv_main_desc_col">
                                    <label class="label-main">Main Service Description (Title):</label>
                                    <input type="text" class="form-control form-control-custom fw-bold" id="inv_main_description" name="inv_main_description" placeholder="Main Title" style="color:#000;">
                                </div>
                                <div class="col-md-2 qty-column mt-auto">
                                    <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" id="inv_main_qty" name="inv_main_qty" value="1" 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" class="form-control form-control-custom input-custom-black text-end" id="inv_main_amount" name="inv_total_amount" placeholder="0.00" step="0.01" required>
                                </div>
                                <div class="col-md-1 d-none d-md-block" style="width:45px;"></div>
                            </div>

                            <div id="inv_sub_wrapper">
                                <div class="row gy-2 mb-3 sub-item-row align-items-center">
                                    <div class="col-md-8 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="inv_sub_services[]" placeholder="Sub-service detail..."></textarea>
                                    </div>
                                    <div class="col-md-2 qty-column mt-auto">
                                        <input type="number" class="form-control form-control-custom input-custom-black text-center inv-sub-qty" name="inv_sub_qtys[]" value="1" min="0">
                                    </div>
                                    <div class="col-md-2 mt-auto inv-sub-amount-col">
                                        <input type="number" class="form-control form-control-custom input-custom-black text-end inv-sub-amount" name="inv_sub_amounts[]" placeholder="0.00" step="0.01">
                                    </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 d-none"></i>
                                    </div>
                                </div>
                            </div>

                            <button type="button" class="btn btn-add-service rounded-pill w-100 py-2 mt-3" id="inv_add_sub_btn">
                                <i class="uil uil-plus-circle me-1"></i> Add Sub-service Item
                            </button>

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

                            <div class="row">
                                <div class="col-12 mb-4 text-start">
                                    <label class="label-main">
                                        Bank Account: <span class="text-danger">*</span>
                                        <button type="button" class="btn btn-xs btn-outline-secondary" id="inv_btn_toggle_bank_remark" style="font-size:.7rem;">
                                            <i class="uil uil-exchange"></i> Switch to Remark
                                        </button>
                                    </label>

                                    <div id="inv_bank_field_wrapper">
                                        <select class="form-control input-custom-black" name="inv_bank" id="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 id="inv_remark_field_wrapper" class="d-none">
                                        <div class="text-end mb-1">
                                            <button type="button" class="btn btn-xs btn-outline-secondary" id="inv_btn_insert_remark" style="font-size:.7rem;">
                                                <i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน
                                            </button>
                                        </div>
                                        <textarea class="form-control form-control-custom input-custom-black" name="inv_remark" id="inv_remark" rows="2" placeholder="Enter remark instead of bank account..." style="height:auto; min-height:46px;"></textarea>
                                    </div>

                                    <small class="text-muted d-block mt-1">เลือกอย่างใดอย่างหนึ่งระหว่าง Bank Account หรือ Remark</small>
                                </div>
                                <div class="col-12 mb-4 text-start">
                                    <label class="label-main">
                                        แนบไฟล์หลักฐาน Invoice (PDF หรือรูปภาพ) <span class="text-danger">*</span>
                                    </label>
                                    <input type="file" class="form-control input-custom-black" name="inv_evidence_file" id="inv_evidence_file" accept=".pdf,.jpg,.jpeg,.png" required>
                                    <small class="text-muted d-block mt-1">
                                        ใช้เป็นหลักฐานยืนยันว่าใบแจ้งหนี้นี้ได้รับการอนุมัติ/ยืนยันจากลูกค้าเรียบร้อยแล้ว
                                    </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="d-flex align-items-center">
                                            <span class="label-main mb-0">Special Discount</span>
                                            <select id="inv_discount_type" name="inv_discount_type" class="form-select form-select-sm ms-2" style="width:75px;height:32px;">
                                                <option value="percent">%</option>
                                                <option value="amount">THB</option>
                                            </select>
                                            <input type="number" id="inv_discount_value" name="inv_discount_value" class="form-control form-control-sm ms-2 text-center" style="width:85px;height:32px;">
                                        </div>
                                        <span class="input-custom-black fw-bold" id="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.1rem;">NET TOTAL:</span>
                                        <span class="input-custom-black fw-bold" id="inv_net_total" style="font-size:1.1rem;">0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="q_use_qty" id="q_use_qty_input" value="0">
                    <input type="hidden" name="inv_use_qty" id="inv_use_qty_input" value="0">

                    <div class="text-center mt-10 mb-10">
                        <button type="submit" class="btn btn-dark rounded-pill px-12 py-2">
                            <i class="uil uil-save me-1"></i> บันทึกทั้ง 2 ใบ (Completed)
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {

    $('.qa-date').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight: true });
    $('.input-group-text').on('click', function() { $(this).prev('input').focus(); });

    const standardRemark = 'หมายเหตุ: หากยืนยันการจัดจ้าง โปรดลงนามยืนยันและส่งกลับมาภายใน 30 วันนับจากวันที่ระบุในใบเสนอราคา';

    // ---------- ฟังก์ชันกลางที่ใช้ได้ทั้ง Quotation และ Invoice (แยกด้วย prefix 'q' / 'inv') ----------
    function setupSection(prefix, subDescClass, subAmountClass, subQtyClass) {

        let qtyModeActive = false;

        function toggleQuantityUI(animate = true) {
            const $qtyCols = $('#qa-' + (prefix === 'q' ? 'quotation' : 'invoice') + '-section .qty-column');
            const $headerTitle = $('#' + prefix + '_header_desc_title');
            const $descCols = $('#' + prefix + '_main_desc_col, .' + prefix + '-sub-desc-col');
            const $toggleBtn = $('#' + prefix + '_btn_toggle_qty');

            if (qtyModeActive) {
                $toggleBtn.html('<i class="uil uil-minus-circle"></i> Remove Quantity Mode').addClass('btn-danger text-white').removeClass('btn-outline-dark');
                $('#' + prefix + '_use_qty_input').val(1);
                $headerTitle.removeClass('col-md-6').addClass('col-md-5');
                $descCols.removeClass('col-md-8').addClass('col-md-6');
                animate ? $qtyCols.fadeIn(200) : $qtyCols.show();
            } else {
                $toggleBtn.html('<i class="uil uil-layers-alt"></i> + Add Quantity Mode').addClass('btn-outline-dark').removeClass('btn-danger text-white');
                $('#' + prefix + '_use_qty_input').val(0);
                if (animate) {
                    $qtyCols.fadeOut(150, function() {
                        $headerTitle.removeClass('col-md-5').addClass('col-md-6');
                        $descCols.removeClass('col-md-6').addClass('col-md-8');
                    });
                } else {
                    $qtyCols.hide();
                    $headerTitle.removeClass('col-md-5').addClass('col-md-6');
                    $descCols.removeClass('col-md-6').addClass('col-md-8');
                }
            }
            calc();
        }

        $('#' + prefix + '_btn_toggle_qty').on('click', function() {
            qtyModeActive = !qtyModeActive;
            toggleQuantityUI(true);
        });

        function calc() {
            let total = parseFloat($('#' + prefix + '_main_amount').val()) || 0;
            let dValue = parseFloat($('#' + prefix + '_discount_value').val()) || 0;
            let dType = $('#' + prefix + '_discount_type').val();
            let disc = (dType === 'percent') ? (total * dValue / 100) : dValue;
            let net = total - disc;
            $('#' + prefix + '_discount_display').text('(' + disc.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2}) + ')');
            $('#' + prefix + '_net_total').text(net.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2}));
        }
        $(document).on('input change keyup blur mousewheel', '#' + prefix + '_main_amount, #' + prefix + '_discount_type, #' + prefix + '_discount_value', calc);

        // Project name sync
        let originalTitle = '', isSynced = false;
        $('#' + prefix + '_btn_sync').on('click', function() {
            const projectVal = $('#' + prefix + '_project_name').val();
            const $mainTitle = $('#' + prefix + '_main_description');
            if (!isSynced) {
                originalTitle = $mainTitle.val();
                $mainTitle.val(projectVal);
                $(this).addClass('btn-primary text-white').removeClass('btn-outline-primary');
                isSynced = true;
            } else {
                $mainTitle.val(originalTitle);
                $(this).addClass('btn-outline-primary').removeClass('btn-primary text-white');
                isSynced = false;
            }
        });

        // Add sub-service row
        $('#' + prefix + '_add_sub_btn').on('click', function() {
            const $wrapper = $('#' + prefix + '_sub_wrapper');
            let rowCount = $wrapper.find('.sub-item-row').length + 1;
            let descColClass = qtyModeActive ? 'col-md-6' : 'col-md-8';
            let qtyStyle = qtyModeActive ? 'display:block;' : 'display:none;';

            let newRow = `
                <div class="row gy-2 mb-3 sub-item-row align-items-center" style="display:none">
                    <div class="${descColClass} ${subDescClass}">
                        <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="${prefix}_sub_services[]" placeholder="Sub-service detail..."></textarea>
                    </div>
                    <div class="col-md-2 qty-column mt-auto" style="${qtyStyle}">
                        <input type="number" class="form-control form-control-custom input-custom-black text-center ${subQtyClass}" name="${prefix}_sub_qtys[]" value="1" min="0">
                    </div>
                    <div class="col-md-2 mt-auto ${subAmountClass}">
                        <input type="number" class="form-control form-control-custom input-custom-black text-end" name="${prefix}_sub_amounts[]" placeholder="0.00" step="0.01">
                    </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"></i>
                    </div>
                </div>`;

            $(newRow).appendTo($wrapper).fadeIn(300);
            updateRemoveButtons();
        });

        function updateRemoveButtons() {
            const $wrapper = $('#' + prefix + '_sub_wrapper');
            $wrapper.find('.remove-btn').toggleClass('d-none', $wrapper.find('.sub-item-row').length <= 1);
        }

        $(document).on('click', '#' + prefix + '_sub_wrapper .remove-btn', function() {
            $(this).closest('.sub-item-row').fadeOut(200, function() {
                $(this).remove();
                $('#' + prefix + '_sub_wrapper .row-number').each(function(i) { $(this).text(i + 1); });
                updateRemoveButtons();
            });
        });

        toggleQuantityUI(false);
    }

    setupSection('q', 'q-sub-desc-col', 'q-sub-amount-col', 'q-sub-qty');
    setupSection('inv', 'inv-sub-desc-col', 'inv-sub-amount-col', 'inv-sub-qty');

    // Insert remark มาตรฐาน (Quotation)
    let remarkInserted = false;
    $('#q_btn_insert_remark').on('click', function() {
        const $ta = $('#q_remark');
        if (!remarkInserted) {
            $ta.val(standardRemark);
            $(this).addClass('btn-secondary text-white').removeClass('btn-outline-secondary').html('<i class="uil uil-times"></i> ล้างข้อความ');
            remarkInserted = true;
        } else {
            $ta.val('');
            $(this).addClass('btn-outline-secondary').removeClass('btn-secondary text-white').html('<i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน');
            remarkInserted = false;
        }
    });

    // ปุ่มคัดลอกข้อมูลจาก Quotation -> Invoice (ให้กรอกเร็วขึ้น เพราะข้อมูลส่วนใหญ่ซ้ำกัน)
    $('#btn_copy_to_invoice').on('click', function() {
        $('#inv_date').val($('#q_date').val());
        $('#inv_exp_date').val($('#q_exp_date').val());
        $('#inv_attention').val($('#q_attention').val());
        $('#inv_attention_detail').val($('#q_attention_detail').val());
        $('#inv_project_name').val($('#q_project_name').val());
        $('#inv_project_duration').val($('#q_project_duration').val());
        $('#inv_main_description').val($('#q_main_description').val());
        $('#inv_main_amount').val($('#q_main_amount').val());
        $('#inv_discount_type').val($('#q_discount_type').val());
        $('#inv_discount_value').val($('#q_discount_value').val());
        $('#inv_main_amount').trigger('input');

        // ---------- ก๊อปโหมด Quantity + Main Qty ให้ตรงกับ Quotation ก่อน ----------
        const qQtyModeOn = parseInt($('#q_use_qty_input').val()) === 1;
        const invQtyModeOn = parseInt($('#inv_use_qty_input').val()) === 1;

        if (qQtyModeOn !== invQtyModeOn) {
            // สถานะไม่ตรงกัน สั่งกดปุ่ม toggle ของฝั่ง Invoice ให้ตรงกับ Quotation
            $('#inv_btn_toggle_qty').trigger('click');
        }
        $('#inv_main_qty').val($('#q_main_qty').val());

        // ---------- ก๊อป Sub-service rows ทั้งหมด ----------
        const $qRows = $('#q_sub_wrapper .sub-item-row');
        const $invWrapper = $('#inv_sub_wrapper');

        // ลบแถว Invoice เดิมทั้งหมดออกก่อน (ไม่ fade เพื่อความไว)
        $invWrapper.find('.sub-item-row').remove();

        // สร้างแถวใหม่ให้เท่ากับจำนวนแถวของ Quotation แล้ว fill ค่าให้ตรงกัน
        $qRows.each(function(index) {
            const $qRow = $(this);
            const qDesc = $qRow.find('textarea[name="q_sub_services[]"]').val();
            const qQty = $qRow.find('.q-sub-qty').val();
            const qAmount = $qRow.find('.q-sub-amount').val();

            const descColClass = (invQtyModeOn || qQtyModeOn) ? 'col-md-6' : 'col-md-8';
            const qtyStyle = (invQtyModeOn || qQtyModeOn) ? 'display:block;' : 'display:none;';

            const newRow = `
                <div class="row gy-2 mb-3 sub-item-row align-items-center">
                    <div class="${descColClass} 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="inv_sub_services[]" placeholder="Sub-service detail...">${$('<div>').text(qDesc).html()}</textarea>
                    </div>
                    <div class="col-md-2 qty-column mt-auto" style="${qtyStyle}">
                        <input type="number" class="form-control form-control-custom input-custom-black text-center inv-sub-qty" name="inv_sub_qtys[]" value="${qQty || 1}" min="0">
                    </div>
                    <div class="col-md-2 mt-auto inv-sub-amount-col">
                        <input type="number" class="form-control form-control-custom input-custom-black text-end" name="inv_sub_amounts[]" value="${qAmount || ''}" placeholder="0.00" step="0.01">
                    </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 ${$qRows.length <= 1 ? 'd-none' : ''}"></i>
                    </div>
                </div>`;

            $invWrapper.append(newRow);
        });

        // ถ้า Quotation ไม่มีแถวเลย (ไม่ควรเกิดขึ้นจริง แต่กันไว้) ให้สร้างแถวว่าง 1 แถว
        if ($qRows.length === 0) {
            $('#inv_add_sub_btn').trigger('click');
        }

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


    // ---------- Toggle Bank Account <-> Remark (เฉพาะฝั่ง Invoice) ----------
    const standardRemarkInvoice = 'หมายเหตุ: หากยืนยันการจัดจ้าง โปรดลงนามยืนยันและส่งกลับมาภายใน 30 วันนับจากวันที่ระบุในใบเสนอราคา';

    const $invBankWrapper   = $('#inv_bank_field_wrapper');
    const $invRemarkWrapper = $('#inv_remark_field_wrapper');
    const $invBankSelect    = $('#inv_bank');
    const $invRemarkInput   = $('#inv_remark');
    const $invToggleBtn     = $('#inv_btn_toggle_bank_remark');
    const $invInsertRemarkBtn = $('#inv_btn_insert_remark');

    let invBankModeActive = true; // ค่าเริ่มต้น: โหมด Bank Account

    function toggleInvBankRemarkUI(clearOther) {
        if (invBankModeActive) {
            $invBankWrapper.removeClass('d-none');
            $invRemarkWrapper.addClass('d-none');
            if (clearOther) { $invRemarkInput.val(''); resetInvRemarkInsertBtn(); }
            $invToggleBtn.html('<i class="uil uil-exchange"></i> Switch to Remark');
        } else {
            $invRemarkWrapper.removeClass('d-none');
            $invBankWrapper.addClass('d-none');
            if (clearOther) { $invBankSelect.val(''); }
            $invToggleBtn.html('<i class="uil uil-exchange"></i> Switch to Bank Account');
        }
    }

    $invToggleBtn.on('click', function() {
        invBankModeActive = !invBankModeActive;
        toggleInvBankRemarkUI(true);
    });

    // เริ่มต้นแสดงผลตอนโหลดหน้าครั้งแรก
    toggleInvBankRemarkUI(false);

    // ปุ่มแทรกข้อความมาตรฐานลงใน Remark ของ Invoice
    let invRemarkInserted = false;
    function resetInvRemarkInsertBtn() {
        invRemarkInserted = false;
        $invInsertRemarkBtn.addClass('btn-outline-secondary').removeClass('btn-secondary text-white')
            .html('<i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน');
    }

    $invInsertRemarkBtn.on('click', function() {
        if (!invRemarkInserted) {
            $invRemarkInput.val(standardRemarkInvoice);
            $(this).addClass('btn-secondary text-white').removeClass('btn-outline-secondary')
                .html('<i class="uil uil-times"></i> ล้างข้อความ');
            invRemarkInserted = true;
        } else {
            $invRemarkInput.val('');
            resetInvRemarkInsertBtn();
        }
    });

    $invRemarkInput.on('input', function() {
        if ($(this).val() !== standardRemarkInvoice) {
            resetInvRemarkInsertBtn();
        }
    });

    // ---------- Validate ก่อน submit: ต้องเลือก Bank หรือ Remark อย่างใดอย่างหนึ่ง + ต้องแนบไฟล์หลักฐาน ----------
    $('#quickAddForm').on('submit', function(e) {
        const bankVal = $invBankSelect.val();
        const remarkVal = ($invRemarkInput.val() || '').trim();

        if (invBankModeActive && !bankVal) {
            e.preventDefault();
            alert('กรุณาเลือก Bank Account ของ Invoice หรือกดสลับไปกรอก Remark แทน');
            return false;
        }
        if (!invBankModeActive && !remarkVal) {
            e.preventDefault();
            alert('กรุณากรอก Remark ของ Invoice (สามารถกดปุ่ม "แทรกข้อความมาตรฐาน" ได้)');
            return false;
        }

        // ตรวจสอบไฟล์หลักฐานการอนุมัติ (แยกของ Quotation และ Invoice)
        const qEvidenceInput = document.getElementById('q_evidence_file');
        if (!qEvidenceInput.files || qEvidenceInput.files.length === 0) {
            e.preventDefault();
            alert('กรุณาแนบไฟล์หลักฐานการอนุมัติของ Quotation (PDF หรือรูปภาพ)');
            return false;
        }

        const invEvidenceInput = document.getElementById('inv_evidence_file');
        if (!invEvidenceInput.files || invEvidenceInput.files.length === 0) {
            e.preventDefault();
            alert('กรุณาแนบไฟล์หลักฐานการอนุมัติของ Invoice (PDF หรือรูปภาพ)');
            return false;
        }
    });

});
</script>
@endsection