@php
// เนื่องจาก Controller อาจส่งมาเป็น Collection ของ 1 รายการ (แก้ไข/สร้างจากใบเสนอราคาเดียว)
// หรือหลายรายการพร้อมกัน (สร้างจากการเลือกหลายใบเสนอราคาในโหมด Multi-select)
// เราจึงต้อง normalize ให้เป็น Collection เสมอ แล้ว loop render ฟอร์มทีละใบ
if (!($invoice instanceof \Illuminate\Support\Collection)) {
    $invoice = collect($invoice ? [$invoice] : []);
}

$invoiceCollection = $invoice->values();

if ($invoiceCollection->isEmpty()) {
    // กรณีสร้างใหม่แบบว่างเปล่า ไม่มีข้อมูลตั้งต้นจากใบเสนอราคาหรือฐานข้อมูล
    $invoiceCollection = collect([
        (object) [
            'invoice_id'                => '',
            'invoice_quotation_id'      => '',
            'invoice_no'                => '',
            'invoice_date'              => '',
            'invoice_exp_date'          => '',
            'invoice_attention'         => '',
            'invoice_attention_detail'  => '',
            'invoice_project_name'      => '',
            'invoice_project_duration'  => '',
            'invoice_main_description'  => '',
            'invoice_amount'            => '',
            'invoice_discount_type'     => '',
            'invoice_discount_value'    => '',
            'invoice_sub_services'      => '',
            'invoice_sub_amounts'       => '',
            'invoice_main_qty'          => 1,
            'invoice_sub_qtys'          => '',
            'invoice_use_qty'           => 0,
            'invoice_bank'              => '',
            'invoice_remark'            => '',
        ]
    ]);
}

// รายชื่อธนาคารสำหรับ dropdown เลือก (ถ้า Controller ยังไม่ได้ส่ง $banks มาให้ จะ fallback ไปดึงจากตาราง bank เอง)
$banks = $banks ?? \Illuminate\Support\Facades\DB::table('bank')->orderBy('bank_name')->get();

$breadcrumbs = [
        'Invoice List' => url('/invoice_list'),
        'Invoice Editor' => ''
    ];
@endphp

@extends('layouts.master')

@section('title')
    Invoice Management
@endsection

@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
    .invoice-card { border-radius: 12px; border: 1px solid #d1d9e6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; }
    .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; transition: all 0.2s; }
    .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; display: inline-block; transition: transform 0.1s; }
    .remove-btn:hover { transform: scale(1.15); }
    .btn-sync { padding: 2px 8px; font-size: 0.7rem; vertical-align: middle; margin-left: 5px; }
    .datepicker table tr td.active { background-color: #343f52 !important; border-color: #343f52 !important; }
    .input-group-text { border-color: #cbd5e0; background-color: #f8f9fa; cursor: pointer; }

    /* สไตล์เพิ่มเติมสำหรับปุ่มเปิด/ปิด Quantity */
    .btn-quantity-toggle { padding: 4px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 50px; transition: all 0.2s; }
    .qty-column { display: none; } /* ซ่อนไว้เริ่มต้น ควบคุมผ่าน jQuery */

    /* สไตล์สำหรับโหมดหลายฟอร์มพร้อมกัน (คล้ายหน้า quotation_scan_getedit) */
    .invoice-form-index-badge { background-color: #6f42c1; }
    .invoice-form-card { border-left: 4px solid #6f42c1; }
</style>
@endsection

@section('content')

<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-12 col-xl-10 mx-auto">

                <br><br>

                <div class="mb-4">
                    <h2 style="font-size: 1.3rem; color: #000;">Invoice Editor</h2>
                    @if($invoiceCollection->count() > 1)
                        <small class="text-muted">
                            <i class="uil uil-layer-group"></i>
                            กำลังสร้างใบแจ้งหนี้ {{ $invoiceCollection->count() }} ใบ จากใบเสนอราคาที่เลือกไว้ — บันทึกทีละใบได้ตามลำดับด้านล่าง
                        </small>
                    @endif
                </div>

                @foreach ($invoiceCollection as $formIndex => $invoiceItem)
                    @php
                        // ดึงค่าจาก object ของแต่ละรายการ (จาก DB หรือจาก Quotation ที่เลือกไว้)
                        $invoice_id = $invoiceItem->invoice_id ?? '';
                        $invoice_quotation_id = $invoiceItem->invoice_quotation_id ?? '';
                        $invoice_no = $invoiceItem->invoice_no ?? '';
                        $invoice_date = $invoiceItem->invoice_date ?? '';
                        $invoice_exp_date = $invoiceItem->invoice_exp_date ?? '';
                        $invoice_attention = $invoiceItem->invoice_attention ?? '';
                        $invoice_attention_detail = $invoiceItem->invoice_attention_detail ?? '';
                        $invoice_project_name = $invoiceItem->invoice_project_name ?? '';
                        $invoice_project_duration = $invoiceItem->invoice_project_duration ?? '';
                        $invoice_main_description = $invoiceItem->invoice_main_description ?? '';
                        $invoice_amount = $invoiceItem->invoice_amount ?? '';
                        $invoice_discount_type = $invoiceItem->invoice_discount_type ?? '';
                        $invoice_discount_value = $invoiceItem->invoice_discount_value ?? '';

                        $invoice_sub_services = json_decode($invoiceItem->invoice_sub_services ?? '', true) ?? [];
                        $invoice_sub_amounts = json_decode($invoiceItem->invoice_sub_amounts ?? '', true) ?? [];

                        $invoice_main_qty = $invoiceItem->invoice_main_qty ?? 1;
                        $invoice_sub_qtys = json_decode($invoiceItem->invoice_sub_qtys ?? '', true) ?? [];
                        $invoice_use_qty = $invoiceItem->invoice_use_qty ?? 0;
                        $invoice_bank = $invoiceItem->invoice_bank ?? '';
                        $invoice_remark = $invoiceItem->invoice_remark ?? '';
                    @endphp

                    <div class="card invoice-card invoice-form-card mb-6" data-form-index="{{ $formIndex }}">
                        <div class="card-body p-8 p-lg-10">

                            @if($invoiceCollection->count() > 1)
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <span class="badge invoice-form-index-badge text-white">
                                        #{{ $formIndex + 1 }} / {{ $invoiceCollection->count() }}
                                    </span>
                                    @if(!empty($invoice_quotation_id))
                                        <small class="text-muted">
                                            <i class="uil uil-link"></i> สร้างจากใบเสนอราคา ID: {{ $invoice_quotation_id }}
                                        </small>
                                    @endif
                                </div>
                            @elseif(!empty($invoice_quotation_id))
                                <small class="text-muted d-block mb-4">
                                    <i class="uil uil-link"></i> สร้างจากใบเสนอราคา ID: {{ $invoice_quotation_id }}
                                </small>
                            @endif

                            <form class="contact-form" method="post" action="{{ url('/invoice_edit') }}" enctype="multipart/form-data">
                                {{ csrf_field() }}

                                <input type="hidden" class="js-invoice-id" name="invoice_id" value="{{ $invoice_id }}">
                                <input type="hidden" class="js-quotation-id" name="quotation_id" value="{{ $invoice_quotation_id }}">
                                <input type="hidden" class="js-use-qty-input" name="use_qty" value="{{ $invoice_use_qty }}">

                                <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 js-date-start" name="q_date" placeholder="Select Date" value="{{ $invoice_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">Expiration Date:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control form-control-custom input-custom-black js-date-end" name="exp_date" placeholder="Select Date" value="{{ $invoice_exp_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="q_no" value="{{ $invoice_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="attention" value="{{ $invoice_attention }}" placeholder="Contact Person">
                                    </div>
                                    <div class="col-12">
                                        <label class="label-main">Attention Details:</label>
                                        <textarea class="form-control input-custom-black" name="attention_details" rows="2" placeholder="Address...">{{ $invoice_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-btn-sync">
                                                <i class="uil uil-sync"></i> Sync to Title
                                            </button>
                                        </label>
                                        <textarea class="form-control form-control-custom input-custom-black js-project-name" name="project_name" placeholder="Project Name">{{ $invoice_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="project_duration" placeholder="Duration">{{ $invoice_project_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 js-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 js-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-main-desc-col">
                                        <label class="label-main">Main Service Description (Title):</label>
                                        <input type="text" class="form-control form-control-custom fw-bold js-main-description" name="main_description" value="{{ $invoice_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 js-main-qty" name="main_qty" value="{{ $invoice_main_qty }}" placeholder="0" min="0">
                                    </div>
                                    <div class="col-md-3 mt-auto js-main-amount-col">
                                        <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 js-main-amount" name="total_amount" value="{{ $invoice_amount }}" placeholder="0.00" step="0.01">
                                    </div>
                                    <div class="col-md-1 d-none d-md-block" style="width: 45px;"></div>
                                </div>

                                <div class="js-sub-service-wrapper">
                                    @if(count($invoice_sub_services) > 0)
                                        @foreach($invoice_sub_services as $sIndex => $item)
                                            <div class="row gy-2 mb-3 sub-item-row align-items-center">
                                                <div class="col-md-6 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="sub_services[]" placeholder="Sub-service detail...">{{ $item }}</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 sub-qty-input" name="sub_qtys[]" value="{{ $invoice_sub_qtys[$sIndex] ?? 1 }}" placeholder="0" min="0">
                                                </div>
                                                <div class="col-md-3 mt-auto sub-amount-col">
                                                    <input type="number" class="form-control form-control-custom input-custom-black text-end sub-amount-input" name="sub_amounts[]" value="{{ $invoice_sub_amounts[$sIndex] ?? '' }}" placeholder="0.00" step="0.01">
                                                </div>
                                                <div class="col-md-1 col-2 mt-auto text-center remove-button-col" style="width: 45px; padding: 0;">
                                                    <i class="uil uil-trash-alt remove-btn {{ count($invoice_sub_services) <= 1 ? 'd-none' : '' }}"></i>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="row gy-2 mb-3 sub-item-row align-items-center">
                                            <div class="col-md-6 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="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 sub-qty-input" name="sub_qtys[]" value="1" placeholder="0" min="0">
                                            </div>
                                            <div class="col-md-3 mt-auto sub-amount-col">
                                                <input type="number" class="form-control form-control-custom input-custom-black text-end sub-amount-input" name="sub_amounts[]" placeholder="0.00" step="0.01">
                                            </div>
                                            <div class="col-md-1 col-2 mt-auto text-center remove-button-col" style="width: 45px; padding: 0;">
                                                <i class="uil uil-trash-alt remove-btn d-none"></i>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="row mt-4 sub-item-row">
                                    <div class="col-12">
                                        <button type="button" class="btn btn-add-service rounded-pill w-100 py-2 js-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">
                                            <select class="form-control input-custom-black js-bank-select" name="invoice_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 }}" {{ (string) $invoice_bank === (string) $bank->bank_id ? 'selected' : '' }} title="{{ $bank->bank_name }} ({{ $bank->bank_branch }}) - {{ $bank->bank_account_no }}" style="line-height: 1.8; padding: 6px;">
                                                        {{ $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-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="invoice_remark" rows="2" placeholder="Enter remark instead of bank account..." style="height: auto; min-height: 46px;">{{ $invoice_remark }}</textarea>
                                        </div>
                                    </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 name="discount_type" class="form-select form-select-sm ms-2 js-discount-type" style="width: 75px; height: 32px;">
                                                    <option value="percent" {{ $invoice_discount_type == 'percent' ? 'selected' : '' }}>%</option>
                                                    <option value="amount" {{ $invoice_discount_type == 'amount' ? 'selected' : '' }}>THB</option>
                                                </select>
                                                <input type="number" name="discount_value" class="form-control form-control-sm ms-2 text-center js-discount-value" value="{{ $invoice_discount_value }}" style="width: 85px; height: 32px;">
                                            </div>
                                            <span class="input-custom-black fw-bold js-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 js-net-total" style="font-size: 1.1rem;">0.00</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center mt-10">
                                    <button type="submit" class="btn btn-dark rounded-pill px-12 py-2">
                                        <i class="uil uil-save me-1"></i> Save Invoice{{ $invoiceCollection->count() > 1 ? ' #'.($formIndex + 1) : '' }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endforeach

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

<br><br>

@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>
    window.APP_BASE_URL = "{{ url('/') }}";

    $(document).ready(function() {

        // แต่ละการ์ด (.invoice-form-card) ทำงานเป็นอิสระจากกัน ไม่ชนกันเรื่อง id ซ้ำ
        // เพราะเปลี่ยนมาใช้ class + closest() สโคปเข้าฟอร์มของตัวเองแทนการอ้างอิงด้วย id ตรงๆ
        $('.invoice-form-card').each(function() {
            const $card = $(this);
            const $form = $card.find('form');

            let originalMainTitle = "";
            let isSynced = false;

            // อ่านค่าสถานะตั้งต้นจากใบเสนอราคาเก่า (ถ้ามี)
            let qtyModeActive = parseInt($form.find('.js-use-qty-input').val()) === 1;

            // Initialize Datepicker เฉพาะในฟอร์มนี้
            $form.find('.js-date-start, .js-date-end').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight: true });
            $form.find('.input-group-text').on('click', function() { $(this).prev('input').focus(); });

            // Project Name Sync
            $form.find('.js-btn-sync').on('click', function() {
                const projectVal = $form.find('.js-project-name').val();
                const $mainTitleInput = $form.find('.js-main-description');
                if (!isSynced) {
                    originalMainTitle = $mainTitleInput.val();
                    $mainTitleInput.val(projectVal);
                    $(this).addClass('btn-primary text-white').removeClass('btn-outline-primary');
                    isSynced = true;
                } else {
                    $mainTitleInput.val(originalMainTitle);
                    $(this).addClass('btn-outline-primary').removeClass('btn-primary text-white');
                    isSynced = false;
                }
            });

            // ฟังก์ชันในการสลับหน้าจอเปิด-ปิดระบบ Quantity แบบ Dynamic Responsive (สโคปเฉพาะฟอร์มนี้)
            function toggleQuantityUI(animate = true) {
                const $qtyCols = $form.find('.qty-column');
                const $headerTitle = $form.find('.js-header-desc-title');
                const $descCols = $form.find('.js-main-desc-col, .sub-desc-col');
                const $toggleBtn = $form.find('.js-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');
                    $form.find('.js-use-qty-input').val(1);

                    $headerTitle.removeClass('col-md-6').addClass('col-md-5');
                    $descCols.removeClass('col-md-8 col-md-9').addClass('col-md-6');

                    if (animate) {
                        $qtyCols.fadeIn(200);
                    } else {
                        $qtyCols.show();
                    }
                } else {
                    $toggleBtn.html('<i class="uil uil-layers-alt"></i> + Add Quantity Mode')
                              .addClass('btn-outline-dark').removeClass('btn-danger text-white');
                    $form.find('.js-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');
                    }
                }
                calculateSummary();
            }

            // กดปุ่มสลับโหมด Quantity
            $form.find('.js-btn-toggle-qty').on('click', function() {
                qtyModeActive = !qtyModeActive;
                toggleQuantityUI(true);
            });

            // สลับ Bank Account <-> Remark (สโคปเฉพาะฟอร์มนี้)
            const $bankWrapper = $form.find('.js-bank-field-wrapper');
            const $remarkWrapper = $form.find('.js-remark-field-wrapper');
            const $bankSelect = $form.find('.js-bank-select');
            const $remarkInput = $form.find('.js-remark-input');
            const $toggleBankBtn = $form.find('.js-btn-toggle-bank-remark');

            // ถ้ามีข้อมูล Remark เดิมอยู่แล้ว ให้เปิดโหมด Remark เป็นค่าเริ่มต้น
            let bankModeActive = ($remarkInput.val() || '').trim() === '';

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

            $toggleBankBtn.on('click', function() {
                bankModeActive = !bankModeActive;
                toggleBankRemarkUI(true);
            });

            // ตั้งค่าการแสดงผลตอนโหลดหน้าครั้งแรก โดยไม่ล้างค่าใดๆ ที่มีอยู่เดิม
            toggleBankRemarkUI(false);

            // ปุ่มแทรกข้อความมาตรฐานลงใน Remark (สโคปเฉพาะฟอร์มนี้)
            const $btnInsertRemark = $form.find('.js-btn-insert-remark');
            const standardRemark = 'หมายเหตุ: หากยืนยันการจัดจ้าง โปรดลงนามยืนยันและส่งกลับมาภายใน 30 วันนับจากวันที่ระบุในใบเสนอราคา';
            let remarkInserted = ($remarkInput.val() || '').trim() === standardRemark;
            if (remarkInserted) {
                $btnInsertRemark.addClass('btn-secondary text-white').removeClass('btn-outline-secondary');
                $btnInsertRemark.html('<i class="uil uil-times"></i> ล้างข้อความ');
            }

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

            // ถ้าผู้ใช้พิมพ์อะไรเองลงไป ให้ reset สถานะปุ่มกลับเป็นปกติ
            $remarkInput.on('input', function() {
                if ($(this).val() !== standardRemark) {
                    remarkInserted = false;
                    $btnInsertRemark.addClass('btn-outline-secondary').removeClass('btn-secondary text-white');
                    $btnInsertRemark.html('<i class="uil uil-comment-alt-lines"></i> แทรกข้อความมาตรฐาน');
                }
            });

            // Calculation logic: ผูกค่าเงินจาก Main Service แบบเพียวๆ ไม่เอายอดชิ้นคูณใดๆ ทั้งสิ้น
            function calculateSummary() {
                let totalBeforeDiscount = parseFloat($form.find('.js-main-amount').val()) || 0;

                let dValue = parseFloat($form.find('.js-discount-value').val()) || 0;
                let dType = $form.find('.js-discount-type').val();

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

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

            // ดักจับฟังก์ชันเหตุการณ์เฉพาะอินพุตที่เกี่ยวข้องกับตัวราคาจริงๆ ในฟอร์มนี้เท่านั้น
            $form.on('input change keyup blur mousewheel', '.js-main-amount, .js-discount-type, .js-discount-value', function() {
                calculateSummary();
            });

            // Dynamic เพิ่มแถว Sub-service ในฟอร์มนี้
            $form.find('.js-add-sub-btn').on('click', function() {
                const $wrapper = $form.find('.js-sub-service-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} sub-desc-col">
                            <label class="label-sub-purple">- Sub-service <span class="row-number">${rowCount}</span>:</label>
                            <textarea class="form-control form-control-custom input-custom-black" name="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 sub-qty-input" name="sub_qtys[]" value="1" placeholder="0" min="0">
                        </div>
                        <div class="col-md-3 mt-auto sub-amount-col">
                            <input type="number" class="form-control form-control-custom input-custom-black text-end sub-amount-input" name="sub_amounts[]" placeholder="0.00" step="0.01">
                        </div>
                        <div class="col-md-1 col-2 mt-auto text-center remove-button-col" style="width: 45px; padding: 0;">
                            <i class="uil uil-trash-alt remove-btn"></i>
                        </div>
                    </div>`;

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

            // ปุ่มลบแถว (เฉพาะแถวในฟอร์มนี้)
            $form.on('click', '.remove-btn', function() {
                $(this).closest('.sub-item-row').fadeOut(200, function() {
                    $(this).remove();
                    reorderRows();
                    updateRemoveButtons();
                });
            });

            function reorderRows() {
                $form.find('.js-sub-service-wrapper .row-number').each(function(index) { $(this).text(index + 1); });
            }
            function updateRemoveButtons() {
                $form.find('.remove-btn').toggleClass('d-none', $form.find('.js-sub-service-wrapper .sub-item-row').length <= 1);
            }

            // เรียกทำงานตอนเริ่มโหลดหน้าเว็บครั้งแรกเพื่อสแกนฟอร์มนี้
            toggleQuantityUI(false);

            // บันทึกฟอร์มนี้ด้วย AJAX แทนการ submit ปกติ เพื่อไม่ให้หน้ารีเฟรชแล้วเสียฟอร์มอื่นที่ยังไม่ได้บันทึก
            // (พฤติกรรมคล้ายหน้า quotation_scan_getedit ที่บันทึกทีละใบได้โดยไม่หลุดออกจากหน้า)
            $form.on('submit', function(e) {
                e.preventDefault();

                const formEl = this;
                const $btn = $form.find('button[type=submit]');
                const originalBtnHtml = $btn.html();

                $btn.prop('disabled', true).html('<i class="uil uil-spinner-alt"></i> กำลังบันทึก...');

                const formData = new FormData(formEl);

                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                }).done(function() {
                    if (window.Swal) {
                        window.Swal.fire({ title: 'บันทึกสำเร็จ', icon: 'success', timer: 1200, showConfirmButton: false });
                    }
                    $card.fadeOut(300, function() {
                        $(this).remove();
                        if ($('.invoice-form-card').length === 0) {
                            window.location.href = window.APP_BASE_URL + '/invoice_list';
                        }
                    });
                }).fail(function() {
                    $btn.prop('disabled', false).html(originalBtnHtml);
                    if (window.Swal) {
                        window.Swal.fire({ title: 'ผิดพลาด', text: 'บันทึกไม่สำเร็จ กรุณาตรวจสอบข้อมูล', icon: 'error' });
                    } else {
                        alert('บันทึกไม่สำเร็จ กรุณาตรวจสอบข้อมูล');
                    }
                });
            });

        });

    });
</script>
@endsection