@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Edit Mutasi Bank</h5>
                    </div>

                    <hr class="horizontal dark mt-0">

                    <div class="card-body">
                        <form id="formEditTrsmts" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="text-uppercase text-sm text-muted mb-3">Informasi Umum</h6>
                                </div>
                            </div>

                            {{-- Row 1: --}}
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="rekening_display" class="form-label">
                                        Rekening Bank (Sumber) <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="rekening_display"
                                            name="rekening_display" placeholder="-- Pilih Rekening --" readonly required>
                                        <input type="hidden" id="rekening_id" name="rekening_id"
                                            value="{{ $data->rekening_id }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSelectRekeningModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-rekening_id"></div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="date" class="form-label">Tanggal <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="date" name="date" required
                                        value="{{ $data->date }}">
                                    <div class="invalid-feedback" id="error-date"></div>
                                </div>

                                
                                
                            </div>

                            {{-- Row 2:  --}}
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="kode_mutasi_display" class="form-label">
                                        Kode Mutasi <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="kode_mutasi_display"
                                            name="kode_mutasi_display" placeholder="-- Pilih Kode Mutasi --" readonly required>
                                        <input type="hidden" id="kode_mutasi_id" name="kode_mutasi_id"
                                            value="{{ $data->kode_mutasi_id }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSelectKodeMutasiModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-kode_mutasi_id"></div>
                                </div>

                                

                                <div class="col-md-6 mb-3">
                                    <label for="nomor_bukti" class="form-label">Nomor Bukti <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="nomor_bukti" name="nomor_bukti"
                                        maxlength="100" placeholder="Nomor bukti akan auto generate setelah memilih tanggal" required
                                        value="{{ $data->nomor_bukti }}">
                                    <div class="invalid-feedback" id="error-nomor_bukti"></div>
                                </div>
                            </div>

                            {{-- Row 3:  --}}
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="rekening_tujuan_dari_display" class="form-label">
                                        Rekening Asal/Tujuan <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="rekening_tujuan_dari_display"
                                            name="rekening_tujuan_dari_display" readonly required>
                                        <input type="hidden" id="rekening_tujuan_dari" name="rekening_tujuan_dari"
                                            value="{{ $data->rekening_tujuan_dari }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSupplierBankModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-rekening_tujuan_dari"></div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label d-block">Project Terkait</label>
                                    <div class="form-check form-switch mt-2">
                                        <input class="form-check-input" type="checkbox" id="is_project" name="is_project"
                                            value="1" role="switch" {{ $data->is_project == 1 ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_project">Terkait Project</label>
                                    </div>
                                    <small class="text-muted">Aktifkan apabila transaksi dibebankan ke project</small>
                                </div>

                                <div class="col-md-4 mb-3" id="projectFieldRow"
                                    style="display: {{ $data->is_project == 1 ? 'block' : 'none' }};">
                                    <label for="project_display" class="form-label">
                                        Project <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="project_display"
                                            name="project_display" placeholder="-- Pilih Project --" readonly
                                            value="{{ $data->is_project && $data->project_id ? ($data->proyek ?? '') : '' }}">
                                        <input type="hidden" id="project_id" name="project_id"
                                            value="{{ $data->project_id }}">
                                        <span class="input-group-text bg-primary text-light" id="btnSearchProject" style="cursor:pointer"
                                            onclick="openSelectProjectModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-project_id"></div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Is Credit (Hidden) -->
                                <div class="col-md-6 mb-3" style="display: none;">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_credit" name="is_credit"
                                            value="1" {{ $data->is_credit == 1 ? 'checked' : '' }} disabled>
                                        <label class="form-check-label" for="is_credit">
                                            Credit (Keluar)
                                        </label>
                                    </div>
                                    <small class="text-muted">Otomatis terisi berdasarkan Kode Mutasi</small>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <!-- Section: PO Assign (Multi) -->
                            <div id="poAssignSection">
                                <div class="row">
                                    <div class="col-md-12 d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="text-uppercase text-sm text-muted mb-0">PO Assign</h6>
                                        <button type="button" class="btn btn-primary btn-sm"
                                            onclick="openSelectPOAssignModal()">
                                            <i class="fas fa-plus me-1"></i> Tambah PO
                                        </button>
                                    </div>
                                </div>

                                <div class="invalid-feedback d-block mb-2" id="error-po_items"></div>

                                <!-- List PO yang sudah dipilih -->
                                <div id="poItemsContainer">
                                    {{-- PO card dirender secara dinamis oleh JS --}}
                                    <div id="poItemsEmpty" class="text-center text-muted py-3 border rounded mb-3"
                                        style="display:none;">
                                        <i class="fas fa-inbox me-1"></i> Belum ada PO dipilih
                                    </div>
                                </div>

                                <hr class="horizontal dark">
                            </div>
                            <!-- End Section: PO Assign -->

                            <!-- Section: Pengeluaran Selain PO -->
                            <div id="nonPOSection">
                                <div class="row">
                                    <div class="col-md-12 d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="text-uppercase text-sm text-muted mb-0">Pengeluaran / Pemasukan Selain PO</h6>
                                        <button type="button" class="btn btn-primary btn-sm"
                                            onclick="addNonPOItemRow()">
                                            <i class="fas fa-plus me-1"></i> Tambah Detail
                                        </button>
                                    </div>
                                </div>

                                <div class="table-responsive mb-3">
                                    <table class="table table-sm table-bordered" id="nonPOTable">
                                        <thead style="background-color:#e9ecef;">
                                            <tr>
                                                <th width="3%" class="text-center">Aksi</th>
                                                <th width="3%" class="text-center">No</th>
                                                <th width="35%">Keterangan</th>
                                                <th width="15%" class="text-end">Qty (Unit)</th>
                                                <th width="20%" class="text-end">Amount Rupiah/Unit</th>
                                                <th width="20%" class="text-end">Amount (Rp)</th>
                                            </tr>
                                        </thead>
                                        <tbody id="nonPOTableBody">
                                            <tr id="nonPOEmptyRow">
                                                <td colspan="6" class="text-center text-muted fst-italic py-3">
                                                    <i class="fas fa-inbox me-1"></i> Belum ada pengeluaran / pemasukan selain PO ditambahkan
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <hr class="horizontal dark">

                            <!-- Section: DP / Termin -->
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="text-uppercase text-sm text-muted mb-3">
                                        DP / Termin
                                    </h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Tipe Pembayaran</label>
                                    <div class="form-check form-switch mt-2">
                                        <input class="form-check-input" type="checkbox" id="is_dp" name="is_dp"
                                            value="1" role="switch" {{ $data->is_dp == 1 ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_dp">DP / Termin</label>
                                    </div>
                                    <small class="text-muted">Aktifkan jika transaksi ini adalah DP atau Termin</small>
                                </div>
                                <div class="col-md-4 mb-3" id="dpPercentageDiv"
                                    style="display: {{ $data->is_dp == 1 ? 'block' : 'none' }};">
                                    <label for="dp_percentage" class="form-label">Persentase DP / Termin (%)</label>
                                    <input type="number" class="form-control" id="dp_percentage" name="dp_percentage"
                                        step="0.01" min="0" max="100" placeholder="0.00"
                                        value="{{ $data->dp_percentage ?? '' }}">
                                    <small class="text-muted">Nilai antara 0 - 100</small>
                                </div>
                                <div class="col-md-4 mb-3" id="dpSeqDiv"
                                    style="display: {{ $data->is_dp == 1 ? 'block' : 'none' }};">
                                    <label for="dp_seq" class="form-label">Urutan DP / Termin</label>
                                    <input type="number" class="form-control" id="dp_seq" name="dp_seq" min="1" step="1"
                                        placeholder="1" value="{{ $data->dp_seq ?? '' }}">
                                    <small class="text-muted">Urutan ke berapa (misal: DP ke-1, ke-2, dst.)</small>
                                </div>
                            </div>

                            {{-- DP Summary Table (visible when dp_seq=1) --}}
                            <div id="dpSummarySection" class="row" style="display:none;">
                                <div class="col-md-12">
                                    <div id="dpSummaryContainer">
                                        {{-- Rendered by JS --}}
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="text-uppercase text-sm text-muted mb-3">Informasi Keuangan</h6>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Gross Amount -->
                                <div class="col-md-4 mb-3">
                                    <label for="gross_amount" class="form-label">Gross Amount (Rp)</label>
                                    <input type="text" class="form-control amount-input" id="gross_amount"
                                        name="gross_amount" placeholder="0,00" readonly>
                                    <div class="invalid-feedback" id="error-gross_amount"></div>
                                    <small class="text-muted">Total nominal sebelum potongan bon & diskon (PO + Non-PO)</small>
                                </div>

                                <!-- Potongan Bon -->
                                <div class="col-md-4 mb-3">
                                    <label for="potongan_bon" class="form-label">Potongan Bon (Rp)</label>
                                    <input type="text" class="form-control amount-input" id="potongan_bon"
                                        name="potongan_bon" placeholder="0,00"
                                        value="{{ $data->potongan_bon ? number_format($data->potongan_bon, 2, ',', '.') : '0,00' }}"
                                        onkeyup="formatInputRupiah(this);calculateFinalAmount();"
                                        onblur="formatInputRupiahOnBlur(this);calculateFinalAmount();">
                                    <div class="invalid-feedback" id="error-potongan_bon"></div>
                                    <small class="text-muted">Potongan bon (opsional) — akan mengurangi net amount</small>
                                </div>

                                <!-- Diskon Nominal + Persen Button -->
                                <div class="col-md-4 mb-3">
                                    <label for="diskon" class="form-label">Diskon <span id="diskonLabel"></span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control amount-input" id="diskon"
                                            name="diskon" placeholder="0,00"
                                            value="{{ $data->diskon ? number_format($data->diskon, 2, ',', '.') : '0,00' }}"
                                            onkeyup="formatInputRupiah(this);calculateFinalAmount();"
                                            onblur="formatInputRupiahOnBlur(this);calculateFinalAmount();">
                                        <input type="hidden" id="diskon_persen" name="diskon_persen" value="{{ $data->diskon_persen ?? '' }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openDiskonPersenModal()" title="Input Diskon dalam Persen">
                                            <i class="fas fa-percent"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-diskon"></div>
                                    <small class="text-muted">Diskon nominal (opsional) — akan mengurangi net amount</small>
                                </div>
                            </div>
                            <div class="row">
                                <!-- Amount -->
                                <div class="col-md-4 mb-3">
                                    <label for="amount" class="form-label">Net Amount (Rp)</label>
                                    <input type="text" class="form-control amount-input" id="amount" name="amount"
                                        placeholder="0,00" required readonly
                                        value="{{ $data->amount ? number_format($data->amount, 2, ',', '.') : '' }}"
                                        onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
                                    <div class="invalid-feedback" id="error-amount"></div>
                                    <small class="text-muted">Net Amount = Gross Amount - Potongan Bon - Diskon</small>
                                </div>
                                <!-- PPh Amount -->
                                <div class="col-md-4 mb-3">
                                    <label for="pph_amount" class="form-label">PPh 
                                    <span id="pphRateLabel" class="text-primary"></span>
                                    <span id="pphWarningLabel" class="text-danger fw-bold" style="display:none;">
                                        <i class="fas fa-exclamation-triangle me-1"></i>Belum memilih PPh
                                    </span>
                                </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control amount-input" id="pph_amount"
                                            name="pph_amount" placeholder="0,00" readonly
                                            value="{{ $data->pph_amount ? number_format($data->pph_amount, 2, ',', '.') : '' }}">
                                        <input type="hidden" id="pph_id" name="pph_id" value="{{ $data->pph_id ?? '' }}">
                                        <input type="hidden" id="pph_rate" name="pph_rate" value="0">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSelectPPhModal()" title="Pilih Tarif PPh dari Master">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-pph_amount"></div>
                                    <small class="text-muted">Pajak Penghasilan (opsional) — dihitung dari Net Amount</small>
                                </div>
                            </div>
                            <div class="row">

                                <!-- DPP Amount -->
                                <div class="col-md-4 mb-3">
                                    <label for="dpp_amount" class="form-label">DPP Amount 
                                        <span id="dppNameLabel" class="text-primary"></span>
                                        <span id="dppWarningLabel" class="text-danger fw-bold" style="display:none;">
                                            <i class="fas fa-exclamation-triangle me-1"></i>Belum memilih DPP
                                        </span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control amount-input" id="dpp_amount" name="dpp_amount"
                                            placeholder="0,00" readonly>
                                        <input type="hidden" id="dpp_id" name="dpp_id" value="{{ $data->dpp_id ?? '' }}">
                                        <input type="hidden" id="dpp_numerator" name="dpp_numerator" value="1">
                                        <input type="hidden" id="dpp_denominator" name="dpp_denominator" value="1">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSelectDPPModal()" title="Pilih DPP dari Master">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-dpp_amount"></div>
                                    <small class="text-muted">DPP (Dasar Pengenaan Pajak) = Net Amount * (Numerator / Denominator)</small>
                                </div>

                                

                                <!-- PPN Amount -->
                                <div class="col-md-4 mb-3">
                                    <label for="ppn_amount" class="form-label">PPN 
                                        <span id="ppnRateLabel" class="text-primary"></span>
                                        <span id="ppnWarningLabel" class="text-danger fw-bold" style="display:none;">
                                            <i class="fas fa-exclamation-triangle me-1"></i>Belum memilih PPN
                                        </span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control amount-input" id="ppn_amount"
                                            name="ppn_amount" placeholder="0,00" readonly
                                            value="{{ $data->ppn_amount ? number_format($data->ppn_amount, 2, ',', '.') : '' }}">
                                        <input type="hidden" id="ppn_id" name="ppn_id" value="{{ $data->ppn_id ?? '' }}">
                                        <input type="hidden" id="ppn_rate" name="ppn_rate" value="0">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSelectPPNModal()" title="Pilih Tarif PPN dari Master">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-ppn_amount"></div>
                                    <small class="text-muted">Pajak Pertambahan Nilai (opsional) — dihitung dari DPP</small>
                                </div>

                              

                                <!-- Description -->
                                <div class="col-md-12 mb-3">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea class="form-control" id="description" name="description" rows="3" placeholder="Masukkan deskripsi transaksi">{{ $data->description ?? '' }}</textarea>
                                    <div class="invalid-feedback" id="error-description"></div>
                                    <small class="text-muted">Deskripsi detail transaksi (opsional)</small>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-warning" id="btnSubmit">
                                        <i class="fas fa-save me-1"></i> Update
                                    </button>
                                    <button type="button" class="btn btn-secondary"
                                        onclick="window.location='{{ url('/trsmts') }}'">
                                        <i class="fas fa-arrow-left me-1"></i> Kembali
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Include Modals --}}
@include('transc.trsmts.modals')

@endsection

@push('js')
<script>
    // ============================================
    // AMOUNT FORMAT FUNCTIONS (Indonesian)
    // ============================================
    
    function formatRupiah(value) {
        if (value === null || value === undefined || value === '') return '';
        let number = parseFloat(String(value).replace(/,/g, ''));
        if (isNaN(number)) return '';
        let integerPart = Math.floor(number);
        let decimalPart = Math.round((number - integerPart) * 100);
        let formatted = integerPart.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        formatted += ',' + decimalPart.toString().padStart(2, '0');
        return formatted;
    }
    
    function parseRupiah(value) {
        if (!value) return '';
        let parsed = String(value).replace(/\./g, '').replace(',', '.');
        let number = parseFloat(parsed);
        return isNaN(number) ? '' : number.toFixed(2);
    }
    
    function formatInputRupiah(input) {
        let value = input.value;
        value = value.replace(/[^0-9,]/g, '');
        if (value.includes(',')) {
            let parts = value.split(',');
            let integer = parts[0].replace(/\D/g, '');
            let decimal = parts[1].replace(/\D/g, '').substring(0, 2);
            value = integer + ',' + decimal;
        } else {
            value = value.replace(/\D/g, '');
        }
        input.value = value;
    }
    
    function formatInputRupiahOnBlur(input) {
        let value = input.value;
        if (!value) return;
        let parsed = parseRupiah(value);
        if (parsed) {
            input.value = formatRupiah(parsed);
        }
    }
    
    function parseAmount(val) {
        if (!val) return 0;
        let parsed = String(val).replace(/\./g, '').replace(',', '.');
        return parseFloat(parsed) || 0;
    }
    
    function formatAmount(val) {
        const num = parseFloat(String(val).replace(/,/g, ''));
        if (isNaN(num)) return '';
        return formatRupiah(num);
    }
    
    function formatAmountInput(el) {
        let value = el.value;
        if (!value) return;
        let parsed = parseRupiah(value);
        if (parsed) {
            el.value = formatRupiah(parsed);
        }
    }

    let poAssignData = [];
    let rekeningData = [];
    let kodeMutasiData = [];
    let supplierBankData = [];

    // Non-PO items state: [ { keterangan, amount_unit, amount_rupiah_unit, amount_rupiah } ]
    let selectedNonPOItems = @json($data->nonPOItems ?? []);
    let isLoadingPOAssign = false;
    // PO Assign pagination state
    let poAssignCurrentPage   = 1;
    let poAssignLastPage      = 1;
    let poAssignTotal         = 0;
    let poAssignPerPage       = 10;
    let poAssignCurrentSearch = '';
    let poAssignSearchTimer   = null;
    let isLoadingRekening = false;
    let isLoadingKodeMutasi = false;
    let isLoadingSuppliersBank = false;
    let isLoadingSupplierBank = false;
    let projectsData = [];
    let isLoadingProjects = false;
    // Multi-PO state: pre-populated from server for existing record
    let selectedPOItems = @json($data->poItems ?? []);
    let dpTotalData = @json($dpTotalData ?? []);

    function getDetailKey(detailKategoriId, spesifikasiId) {
        const dk = detailKategoriId || 0;
        const sp = spesifikasiId || 0;
        return `${dk}-${sp}`;
    }

    function normalizeInitialSelectedPOItems(items) {
        if (!Array.isArray(items)) return [];
        return items.map(function(po) {
            const normalizedPO = Object.assign({}, po);
            normalizedPO.selected_details = Array.isArray(po.selected_details)
                ? po.selected_details.map(function(d) {
                    return {
                        detail_kategori_id: d.detail_kategori_id,
                        detail_kategori_unit_id: d.detail_kategori_unit_id || null,
                        spesifikasi_id: d.spesifikasi_id || null,
                        kategori: d.kategori || '-',
                        detail_kategori: d.detail_kategori || '-',
                        supplier_name: d.supplier_name || null,
                        brand_name: d.brand_name || null,
                        spesifikasi_name: d.spesifikasi_name || null,
                        amount_unit: parseFloat(d.amount_unit) || 0,
                        unit: d.unit || '-',
                        amount_rupiah: parseFloat(d.amount_rupiah) || 0,
                        amount_rupiah_unit: parseFloat(d.amount_rupiah_unit) || 0,
                        gross_amount_rupiah: parseFloat(d.gross_amount_rupiah) || parseFloat(d.amount_rupiah) || 0,
                        gross_amount_rupiah_unit: parseFloat(d.gross_amount_rupiah_unit) || parseFloat(d.amount_rupiah_unit) || 0
                    };
                })
                : [];
            normalizedPO.available_details = Array.isArray(po.available_details) ? po.available_details : [];
            return normalizedPO;
        });
    }


    let initialSupplierBankId = {{ $data->rekening_tujuan_dari ?? 'null' }};

    // Saldo calculation variables
    let currentSaldoAwal = 0;
    let currentIsIn = null;
    let currentAmount = {{ $data->amount ?? 0 }};
    let originalAmount = {{ $data->amount ?? 0 }}; // original amount from backend to detect edits

    let initialRekeningId = {{ $data->rekening_id }};
    let initialKodeMutasiId = {{ $data->kode_mutasi_id }};
    let isCalculatingFinalAmount = false;

    // Tax master data pre-loaded from server for instant rendering
    let dppMaster = @json($dppMaster ?? null);
    let pphMaster = @json($pphMaster ?? null);
    let ppnMaster = @json($ppnMaster ?? null);

    // Locked months for date validation
    let lockedMonths = [];

    // ============================================
    // UPDATE LABEL FUNCTIONS
    // ============================================

    /**
     * Update PPh Label - menampilkan persentase PPh
     */
    function updatePPHLabel() {
        const pphPersen = parseFloat($('#pph_persen').val()) || 0;
        if (pphPersen > 0) {
            $('#pphLabel').html(`<span class="text-primary">(${pphPersen}%)</span>`);
        } else {
            $('#pphLabel').html('');
        }
    }

    /**
     * Update PPN Label - menampilkan persentase PPN
     */
    function updatePPNLabel() {
        const ppnPersen = parseFloat($('#ppn_persen').val()) || 0;
        if (ppnPersen > 0) {
            $('#ppnLabel').html(`<span class="text-primary">(${ppnPersen}%)</span>`);
        } else {
            $('#ppnLabel').html('');
        }
    }

    /**
     * Update Diskon Label - menampilkan persentase diskon
     */
    function updateDiskonLabel() {
        const diskonPersen = parseFloat($('#diskon_persen').val()) || 0;
        const grossVal = getGrossAmount();
        
        let displayPersen = diskonPersen;
        if (!diskonPersen && grossVal > 0) {
            const diskonNominal = parseAmount($('#diskon').val());
            if (diskonNominal > 0) {
                displayPersen = Math.round((diskonNominal / grossVal) * 100 * 100) / 100;
                $('#diskon_persen').val(displayPersen);
            }
        }
        
        if (displayPersen && grossVal > 0) {
            $('#diskonLabel').html(`<span class="text-primary">(${displayPersen}%)</span>`);
        } else {
            $('#diskonLabel').html('');
        }
    }

    // ============================================
    // CALCULATE PERCENTAGE FROM NOMINAL
    // ============================================

    /**
     * Recalculate Diskon Percentage - hitung persen dari nominal
     */
    function recalculateDiskonPersen() {
        const grossVal = getGrossAmount();
        const diskonNominal = parseAmount($('#diskon').val());
        
        if (grossVal > 0 && diskonNominal > 0) {
            let diskonPersen = (diskonNominal / grossVal) * 100;
            diskonPersen = Math.round(diskonPersen * 100) / 100;
            $('#diskon_persen').val(diskonPersen);
        } else if (diskonNominal <= 0) {
            $('#diskon_persen').val('');
        }
        updateDiskonLabel();
    }

    // ============================================
    // GROSS AMOUNT CALCULATION
    // ============================================

    /**
     * Get Gross Amount
     * Gross Amount = sum of all gross_amount_rupiah from PO & Non-PO items
     * BEFORE any deductions (potongan bon, diskon)
     */
    function getGrossAmount() {
        let gross = 0;
        
        // Sum from PO items
        if (Array.isArray(selectedPOItems)) {
            selectedPOItems.forEach(function(po) {
                if (Array.isArray(po.selected_details)) {
                    po.selected_details.forEach(function(d) {
                        gross += parseFloat(d.gross_amount_rupiah || d.amount_rupiah) || 0;
                    });
                }
            });
        }
        
        // Sum from Non-PO items
        if (Array.isArray(selectedNonPOItems)) {
            selectedNonPOItems.forEach(function(item) {
                gross += parseFloat(item.gross_amount_rupiah || item.amount_rupiah) || 0;
            });
        }
        
        return gross;
    }


    function openDiskonPersenModal() {
        Swal.fire({
            title: 'Input Persentase Diskon (%)',
            html: `
                <div class="input-group">
                    <input id="swal-diskon-persen" type="number" class="form-control" min="0" max="100" step="0.01" value="${$('#diskon_persen').val() || ''}">
                    <span class="input-group-text">%</span>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Hitung',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#028284',
            focusConfirm: false,
            preConfirm: function() {
                const value = $('#swal-diskon-persen').val();
                if (value === '' || value === null) {
                    return '';
                }
                const val = parseFloat(value);
                if (isNaN(val) || val < 0 || val > 100) {
                    Swal.showValidationMessage('Nilai harus antara 0 - 100');
                    return false;
                }
                return val;
            }
        }).then(function(result) {
            if (result.isConfirmed) {
                const rawValue = result.value;
                if (rawValue === '') {
                    $('#diskon_persen').val('');
                    $('#diskon').val('');
                    calculateFinalAmount();
                } else {
                    $('#diskon_persen').val(rawValue);
                    // Diskon dihitung dari Gross Amount
                    const grossVal = getGrossAmount();
                    if (grossVal <= 0) {
                        Swal.fire({
                            title: 'Perhatian!',
                            text: 'Belum ada item PO / Non-PO.',
                            icon: 'warning',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }
                    const diskonPersen = Math.max(0, Math.min(100, rawValue));
                    if (diskonPersen > 0) {
                        let diskonNominal = grossVal * (diskonPersen / 100);
                        $('#diskon').val(formatRupiah(diskonNominal.toFixed(2)));
                    } else {
                        $('#diskon').val('');
                    }
                    calculateFinalAmount();
                }
            }
        });
    }

    // ============================================
    // RECALCULATE PPh/PPN FROM PERCENTAGE
    // ============================================

    /**
     * Recalculate PPh/PPN Amount based on stored percentage
     * Called when amount changes or after loading from DB
     */
    function recalculatePPHPPNFromPersen() {
        // PPh/PPN dihitung dari Amount (setelah potongan bon & diskon)
        const amountVal = parseAmount($('#amount').val()) || 0;
        const pphPersen = parseFloat($('#pph_persen').val()) || 0;
        const ppnPersen = parseFloat($('#ppn_persen').val()) || 0;
        const pphId = $('#pph_id').val();
        const ppnId = $('#ppn_id').val();
        
        if (pphId && pphPersen > 0 && amountVal > 0) {
            const pph = amountVal * (pphPersen / 100);
            $('#pph_amount').val(formatRupiah(pph.toFixed(2)));
        } else if (!pphId) {
            // Jika tidak ada pph_id, jangan hapus pph_amount (biarkan nilai dari DB)
        } else if (pphPersen <= 0) {
            $('#pph_amount').val('');
        }
        
        if (ppnId && ppnPersen > 0 && amountVal > 0) {
            const ppn = amountVal * (ppnPersen / 100);
            $('#ppn_amount').val(formatRupiah(ppn.toFixed(2)));
        } else if (!ppnId) {
            // Jika tidak ada ppn_id, jangan hapus ppn_amount (biarkan nilai dari DB)
        } else if (ppnPersen <= 0) {
            $('#ppn_amount').val('');
        }
        
        if (typeof updatePPHLabel === 'function') { 
            updatePPHLabel(); 
        }
        if (typeof updatePPNLabel === 'function') { 
            updatePPNLabel(); 
        }
    }

    // ============================================
    // CALCULATE FINAL AMOUNT
    // ============================================

    /**
     * Calculate Final Amount
     * Rumus:
     *   Gross Amount = sum of gross_amount_rupiah (PO + Non-PO)
     *   Amount (DPP) = Gross Amount - Potongan Bon - Diskon
     *   PPh = Amount * pph_persen / 100
     *   PPN = Amount * ppn_persen / 100
     */
    function calculateFinalAmount() {
        recalculateDiskonPersen();
        
        isCalculatingFinalAmount = true;
        
        let grossVal = getGrossAmount();
        let potonganBon = parseAmount($('#potongan_bon').val()) || 0;
        let diskon = parseAmount($('#diskon').val()) || 0;
        
        potonganBon = Math.max(0, potonganBon);
        diskon = Math.max(0, diskon);
        
        // Update gross amount display
        $('#gross_amount').val(formatRupiah(grossVal.toFixed(2)));
        
        let totalPotongan = potonganBon + diskon;
        
        // Validate total deductions
        if (totalPotongan > grossVal && grossVal > 0) {
            Swal.fire({
                title: 'Validasi Gagal!',
                text: 'Total Potongan Bon + Diskon tidak boleh melebihi Gross Amount (Rp ' + formatRupiah(grossVal.toFixed(2)) + ')',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            
            if (potonganBon > grossVal) {
                potonganBon = 0;
                $('#potongan_bon').val(formatRupiah(potonganBon));
            }
            if (diskon > grossVal) {
                diskon = 0;
                $('#diskon').val(formatRupiah(Math.max(0, diskon)));
            }
            totalPotongan = potonganBon + diskon;
        }
        
        // Calculate final amount (DPP) = Gross - Potongan Bon - Diskon
        let finalAmount = grossVal - totalPotongan;
        finalAmount = Math.max(0, finalAmount);
        
        $('#amount').val(formatRupiah(finalAmount.toFixed(2)));
        currentAmount = finalAmount;
        
        // Update label diskon
        updateDiskonLabel();
        
        // Recalculate PPh/PPN dari Amount (setelah potongan)
        recalculatePPHPPNFromPersen();
        
        // Recalculate DPP/PPh/PPN from stored master values
        recalculateFromMaster();
        
        setTimeout(function() {
            isCalculatingFinalAmount = false;
        }, 10);
    }

$(document).ready(function() {
        // CSRF Token Setup
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Preserve first-load details exactly from trs_mutasi_bank_detail payload
        selectedPOItems = normalizeInitialSelectedPOItems(selectedPOItems);

        // Load locked months for date validation
        $.ajax({
            url: '{{ url("/trsmts/api/locked-months") }}',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    lockedMonths = response.data || [];
                }
            },
            error: function() {
                console.warn('Gagal memuat data bulan terkunci');
            }
        });

        // Load data awal
        loadRekening();
        loadKodeMutasi();
        loadPOAssign();
        // loadSupplierBankData();
        loadSuppliersBank();
                loadProjects();

        updateIsProjectSwitchState();

        // Is Project toggle
        $('#is_project').on('change', function() {
            if ($(this).is(':checked')) {
                const poHasProject = selectedPOItems.some(function(po) { return po.project_id; });
                if (poHasProject) {
                    $(this).prop('checked', false);
                    Swal.fire({
                        title: 'Perhatian!',
                        text: 'Project Terkait hanya berlaku untuk transaksi Non-PO. Jika transaksi menggunakan PO atau PO + Non-PO, Project Terkait tidak dapat dipilih secara manual karena akan mengikuti project pada PO yang dipilih.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }
                $('#projectFieldRow').slideDown(300);
            } else {
                $('#projectFieldRow').slideUp(300);
                $('#project_id').val('');
                $('#project_display').val('');
                loadPOAssign(1);
            }
        });

        // Validasi tanggal locked saat user ganti tanggal
        $('#date').on('change', function() {
            validateLockedDate($(this).val());
        });

        // Validasi tanggal locked saat form submit
        $('#formEditTrsmts').on('submit', function(e) {
            const selectedDate = $('#date').val();
            if (!validateLockedDate(selectedDate, true)) {
                e.preventDefault();
                $('#btnSubmit').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Update');
                return false;
            }
        });
        // Pre-render existing PO items from server
        renderSelectedPOItems();

        // Pre-render existing non-PO items from server
        renderNonPOTable();

        // DP / Termin toggle — langsung tampilkan summary tanpa perlu user ketik dp_seq=1
        $('#is_dp').on('change', function() {
            if ($(this).is(':checked')) {
                $('#dpPercentageDiv, #dpSeqDiv').slideDown(300);
                checkAndSetDPAuto(function(hasDp, nextSeq) {
                    if (!hasDp) {
                        $('#dp_seq').val(1);
                        renderDPSummaryTable();
                        $('#dpSummarySection').slideDown(300);
                    }
                });
            } else {
                $('#dpPercentageDiv, #dpSeqDiv').slideUp(300);
                $('#dp_percentage, #dp_seq').val('');
                $('#dpSummarySection').hide();
            }
        });
        
        $('#dp_seq').on('change', function() {
            renderDPSummaryTable();
            $('#dpSummarySection').slideDown(300);
        });

        // Initial DP render on page load (for edit mode)
        if ($('#is_dp').is(':checked')) {
            renderDPSummaryTable();
            $('#dpSummarySection').show();
        }

        // Hitung pph_persen & ppn_persen dari nilai yang sudah ada di DB
        const dbPphAmount = {{ $data->pph_amount ? $data->pph_amount : 0 }};
        const dbPpnAmount = {{ $data->ppn_amount ? $data->ppn_amount : 0 }};
        const dbAmountForPersen = parseAmount($('#amount').val()) || 0;
        
        if (dbPphAmount > 0 && dbAmountForPersen > 0) {
            const pphPersen = Math.round((dbPphAmount / dbAmountForPersen) * 100 * 100) / 100;
            $('#pph_persen').val(pphPersen);
            updatePPHLabel();
        }
        if (dbPpnAmount > 0 && dbAmountForPersen > 0) {
            const ppnPersen = Math.round((dbPpnAmount / dbAmountForPersen) * 100 * 100) / 100;
            $('#ppn_persen').val(ppnPersen);
            updatePPNLabel();
        }

        // Recalc PPh/PPN amount + labels setelah persen terisi dari DB
        recalculatePPHPPNFromPersen();
        updateDiskonLabel();
        // Final calculate untuk memastikan amount & pajak ter-update
        calculateFinalAmount();

        // Amount change handler - auto calculate PPN (11%) only if ppn_id exists
        $('#amount').on('keyup change', function() {
            if (isCalculatingFinalAmount) return;
            currentAmount = parseAmount($(this).val());
            
            // Auto calculate PPN 11% from Amount only if master PPN sudah dipilih
            const ppnId = $('#ppn_id').val();
            if (ppnId && currentAmount > 0) {
                let ppnAmount = currentAmount * 0.11;
                $('#ppn_amount').val(formatRupiah(ppnAmount));
            }
        });

        // Load initial saldo awal dan kode mutasi info untuk auto-calculate
        loadInitialSaldoData();

        // Instant render tax labels from server-injected master data
        renderInitialTaxLabelsFromServer();

        // Recalculate amounts after labels are set
        recalculateFromMaster();

        // Cek apakah pph_id kosong tapi ada pph_amount dari DB
        const initialPphId = $('#pph_id').val();
        const initialPphAmount = parseAmount($('#pph_amount').val()) || 0;
        if (!initialPphId && initialPphAmount > 0) {
            $('#pph_amount').addClass('is-invalid');
            $('#error-pph_amount').text('Data lama memiliki PPh Rp ' + formatRupiah(initialPphAmount) + ' namun belum memiliki master PPh. Silakan pilih master PPh terlebih dahulu melalui tombol search.');
            $('#pphWarningLabel').show();
        }
        
        // Tampilkan/sembunyikan warning label saat pph_id berubah
        $(document).on('change', '#pph_id', function() {
            const pphId = $(this).val();
            if (!pphId) {
                $('#pphWarningLabel').show();
            } else {
                $('#pphWarningLabel').hide();
                $('#pph_amount').removeClass('is-invalid');
                $('#error-pph_amount').text('');
            }
        });

        // Cek apakah dpp_id kosong tapi ada dpp_amount dari DB
        const initialDppId = $('#dpp_id').val();
        const initialDppAmount = parseAmount($('#dpp_amount').val()) || 0;
        if (!initialDppId && initialDppAmount > 0) {
            $('#dpp_amount').addClass('is-invalid');
            $('#error-dpp_amount').text('Data lama memiliki DPP Rp ' + formatRupiah(initialDppAmount) + ' namun belum memiliki master DPP. Silakan pilih master DPP terlebih dahulu melalui tombol search.');
            $('#dppWarningLabel').show();
        }
        
        // Tampilkan/sembunyikan warning label saat dpp_id berubah
        $(document).on('change', '#dpp_id', function() {
            const dppId = $(this).val();
            const ppnId = $('#ppn_id').val();
            if (!dppId) {
                $('#dppWarningLabel').show();
            } else {
                $('#dppWarningLabel').hide();
                $('#dpp_amount').removeClass('is-invalid');
                $('#error-dpp_amount').text('');
                // Jika ppn_id juga terisi, bersihkan warning ppn juga
                if (ppnId) {
                    $('#ppnWarningLabel').hide();
                    $('#ppn_amount').removeClass('is-invalid');
                    $('#error-ppn_amount').text('');
                }
            }
        });

        // Cek apakah ppn_id dan dpp_id sama-sama null, tapi ada ppn_amount dari DB (delayed agar tidak tertimpa calculate lain)
        setTimeout(function() {
            const initialPpnId = $('#ppn_id').val();
            const initialDppIdForPpnCheck = $('#dpp_id').val();
            const initialPpnAmountFromDb = parseFloat("{{ $data->ppn_amount ?? 0 }}") || 0;
            const initialPpnAmount = initialPpnAmountFromDb > 0 ? initialPpnAmountFromDb : (parseAmount($('#ppn_amount').val()) || 0);
            if (!initialPpnId && !initialDppIdForPpnCheck && initialPpnAmount > 0) {
                $('#dpp_amount').addClass('is-invalid');
                $('#error-dpp_amount').text('Data lama memiliki PPN Rp ' + formatRupiah(initialPpnAmount) + ' namun belum memiliki master DPP dan PPN. Silakan pilih master DPP dan PPN terlebih dahulu melalui tombol search.');
                $('#dppWarningLabel').show();
                $('#ppn_amount').addClass('is-invalid');
                $('#error-ppn_amount').text('Data lama memiliki PPN Rp ' + formatRupiah(initialPpnAmount) + ' namun belum memiliki master DPP dan PPN. Silakan pilih master DPP dan PPN terlebih dahulu melalui tombol search.');
                $('#ppnWarningLabel').show();
            } else if (!initialPpnId && initialPpnAmount > 0) {
                $('#ppn_amount').addClass('is-invalid');
                $('#error-ppn_amount').text('Data lama memiliki PPN Rp ' + formatRupiah(initialPpnAmount) + ' namun belum memiliki master PPN. Silakan pilih master PPN terlebih dahulu melalui tombol search.');
                $('#ppnWarningLabel').show();
            }
        }, 150);
        
        // Tampilkan/sembunyikan warning label saat ppn_id berubah
        $(document).on('change', '#ppn_id', function() {
            const ppnId = $(this).val();
            const dppId = $('#dpp_id').val();
            if (!ppnId && !dppId) {
                $('#ppnWarningLabel').show();
                $('#dppWarningLabel').show();
            } else if (!ppnId) {
                $('#ppnWarningLabel').show();
            } else {
                $('#ppnWarningLabel').hide();
                $('#ppn_amount').removeClass('is-invalid');
                $('#error-ppn_amount').text('');
                // Jika dpp_id juga terisi, bersihkan warning dpp juga
                if (dppId) {
                    $('#dppWarningLabel').hide();
                    $('#dpp_amount').removeClass('is-invalid');
                    $('#error-dpp_amount').text('');
                }
            }
        });

    // Form Submit Handler
    $('#formEditTrsmts').on('submit', function(e) {
        e.preventDefault();

        // Clear previous errors
        $('.form-control, .form-select').removeClass('is-invalid');
        $('.invalid-feedback').text('');

        // Validasi: pastikan semua baris PO detail dan non-PO memiliki amount > 0
        let valid = true;
        let errorMsg = '';

        // Validasi PO details
        selectedPOItems.forEach(function(po, poIdx) {
            po.selected_details.forEach(function(d, dIdx) {
                const amtUnit = parseFloat(d.amount_unit) || 0;
                const amtRupUnit = parseFloat(d.amount_rupiah_unit) || 0;
                const amtRup = parseFloat(d.amount_rupiah) || 0;
                if (amtUnit <= 0 || amtRupUnit <= 0 || amtRup <= 0) {
                    valid = false;
                    errorMsg = 'PO ' + po.po_number + ' - baris ' + (dIdx + 1) + ': Qty (Unit), Amount Rupiah/Unit, dan Amount (Rp) harus diisi dan tidak boleh 0';
                }
            });
        });

        // Validasi non-PO items
        if (valid) {
            selectedNonPOItems.forEach(function(item, idx) {
                const amtUnit = parseFloat(item.amount_unit) || 0;
                const amtRupUnit = parseFloat(item.amount_rupiah_unit) || 0;
                const amtRup = parseFloat(item.amount_rupiah) || 0;
                const ket = item.keterangan || '';
                if (amtUnit <= 0 || amtRupUnit <= 0 || amtRup <= 0) {
                    valid = false;
                    errorMsg = 'Pengeluaran Selain PO - baris ' + (idx + 1) + ' (' + (ket || '(tanpa keterangan)') + '): Qty (Unit), Amount Rupiah/Unit, dan Amount (Rp) harus diisi dan tidak boleh 0';
                }
            });
        }

        if (!valid) {
            Swal.fire({
                title: 'Validasi Gagal!',
                text: errorMsg,
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            $('#btnSubmit').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Update');
            return;
        }

        // Validasi Rekening Asal/Tujuan
        if (!$('#rekening_tujuan_dari').val()) {
            $('#rekening_tujuan_dari_display').addClass('is-invalid');
            $('#error-rekening_tujuan_dari').text('Rekening Asal/Tujuan harus diisi');
            Swal.fire({ title: 'Validasi Gagal!', text: 'Rekening Asal/Tujuan harus diisi', icon: 'warning', confirmButtonColor: '#028284' });
            $('#btnSubmit').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Update');
            return;
        }

        // Disable submit button
        $('#btnSubmit').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Mengupdate...');

        // Build po_items from selectedPOItems state
        const poItems = selectedPOItems.map(function(po) {
            return {
                po_assign_id: po.po_assign_id,
                details: po.selected_details.map(function(d) {
                    return {
                        detail_kategori_id: d.detail_kategori_id,
                        detail_kategori_unit_id: d.detail_kategori_unit_id || null,
                        spesifikasi_id: d.spesifikasi_id || null,
                        amount_unit: d.amount_unit || 0,
                        amount_rupiah: d.amount_rupiah || 0,
                        amount_rupiah_unit: d.amount_rupiah_unit || 0,
                        gross_amount_rupiah: d.gross_amount_rupiah || 0
                    };
                })
            };
        });
        console.log('PO Items to submit:', poItems);

        // Build non_po_items from selectedNonPOItems state
        const nonPOItems = selectedNonPOItems.map(function(item) {
            return {
                keterangan: item.keterangan || null,
                amount_unit: item.amount_unit || 0,
                amount_rupiah: item.amount_rupiah || 0,
                amount_rupiah_unit: item.amount_rupiah_unit || 0,
                gross_amount_rupiah: item.gross_amount_rupiah || 0
            };
        });

        // Get form data
        const formData = {
            rekening_id: $('#rekening_id').val(),
            date: $('#date').val(),
            kode_mutasi_id: $('#kode_mutasi_id').val(),
            nomor_bukti: $('#nomor_bukti').val(),
            is_credit: $('#is_credit').is(':checked') ? 1 : 0,
            is_project: $('#is_project').is(':checked') ? 1 : 0,
            project_id: $('#project_id').val() || null,
            is_dp: $('#is_dp').is(':checked') ? 1 : 0,
            dp_percentage: $('#dp_percentage').val() || null,
            dp_seq: $('#dp_seq').val() || null,
            potongan_bon: parseRupiah($('#potongan_bon').val()) || 0,
            diskon: parseRupiah($('#diskon').val()) || 0,
            diskon_persen: $('#diskon_persen').val() || null,
            amount: parseRupiah($('#amount').val()) || 0,
            dpp_id: $('#dpp_id').val() || null,
            pph_id: $('#pph_id').val() || null,
            ppn_id: $('#ppn_id').val() || null,
            dpp_amount: parseRupiah($('#dpp_amount').val()) || 0,
            pph_amount: parseRupiah($('#pph_amount').val()) || 0,
            ppn_amount: parseRupiah($('#ppn_amount').val()) || 0,
            saldo_akhir: parseRupiah($('#saldo_akhir').val()) || 0,
            rekening_tujuan_dari: $('#rekening_tujuan_dari').val() || null,
            description: $('#description').val() || null,
            po_items: poItems,
            non_po_items: nonPOItems
        };

        // AJAX PUT Request
        $.ajax({
            url: window.location.href,
            type: 'POST',
            data: JSON.stringify(formData),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-HTTP-Method-Override': 'PUT'
            },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonColor: '#028284'
                    }).then((result) => {
                        window.location.href = '{{ url("/trsmts") }}';
                    });
                } else {
                    Swal.fire({
                        title: 'Gagal!',
                        text: response.message,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                    $('#btnSubmit').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Update');
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.data.errors;
                    $.each(errors, function(field, messages) {
                        $(`#${field}`).addClass('is-invalid');
                        $(`#error-${field}`).text(messages[0]);
                    });
                    Swal.fire({
                        title: 'Validasi Gagal!',
                        text: 'Silakan periksa kembali input Anda',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                } else {
                    const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan saat mengupdate data';
                    Swal.fire({
                        title: 'Error!',
                        text: errorMsg,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
                $('#btnSubmit').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Update');
            }
        });
    });

    // Clear error on input change
    $('.form-control, .form-select').on('change keyup', function() {
        $(this).removeClass('is-invalid');
        $(`#error-${$(this).attr('name')}`).text('');
    });

    // Clear error when rekening_tujuan_dari is selected
    $('#rekening_tujuan_dari').on('change', function() {
        $('#rekening_tujuan_dari_display').removeClass('is-invalid');
        $('#error-rekening_tujuan_dari').text('');
    });

    // Auto-format amount inputs on blur
    $(document).on('blur', '.amount-input:not([readonly])', function() {
        formatAmountInput(this);
    });

    const initialAmountRaw = currentAmount;
    if (initialAmountRaw >= 0) {
        // Load amount langsung dari database saat pertama kali halaman dibuka
        const dbAmount = {{ $data->amount ?? 0 }};
        $('#amount').val(formatRupiah(dbAmount));
        currentAmount = dbAmount;
    }

    // Auto-update diskon percentage when nominal changes
    $('#diskon').on('keyup change blur', function() {
        if (!isCalculatingFinalAmount) {
            recalculateDiskonPersen();
        }
    });

    // Search handlers
    $('#searchSupplierBank').on('keyup', function () {
        const keyword = $(this).val().toLowerCase();
        const filtered = supplierBankData.filter(item => {
            return (
                (item.supplier_name || '').toLowerCase().includes(keyword) ||
                (item.nama_bank || '').toLowerCase().includes(keyword) ||
                (item.nomor_akun || '').toLowerCase().includes(keyword) ||
                (item.nama_akun || '').toLowerCase().includes(keyword)
            );
        });
        renderSupplierBankTable(filtered);
    });
    $('#searchRekening').on('keyup', function() {
        const search = $(this).val().toLowerCase();
        renderRekeningTable(rekeningData.filter(r => 
            r.nama_bank.toLowerCase().includes(search) ||
            r.nomor_akun.toLowerCase().includes(search) ||
            r.nama_akun.toLowerCase().includes(search)
        ));
    });

    $('#searchKodeMutasi').on('keyup', function() {
        const search = $(this).val().toLowerCase();
        renderKodeMutasiTable(kodeMutasiData.filter(k => {
            const jenisMutasi = k.is_in == 1 ? 'mutasi masuk' : 'mutasi keluar';
            return k.kode_mutasi.toLowerCase().includes(search) ||
                   jenisMutasi.includes(search);
        }));
    });

    $('#searchProject').on('keyup', function() {
        const search = $(this).val().toLowerCase();
        renderProjectTable(projectsData.filter(p =>
            (p.proyek || '').toLowerCase().includes(search) ||
            (p.lokasi || '').toLowerCase().includes(search) ||
            (p.pekerjaan || '').toLowerCase().includes(search) ||
            (p.pemilik || '').toLowerCase().includes(search) ||
            (p.no_spk || '').toLowerCase().includes(search) ||
            (p.sales || '').toLowerCase().includes(search)
        ));
    });

    $('#searchPOAssign').on('keyup', function() {
        clearTimeout(poAssignSearchTimer);
        poAssignCurrentSearch = $(this).val().trim();
        poAssignSearchTimer = setTimeout(function() { loadPOAssign(1); }, 400);
    });

    // Form Add Rekening
    $('#formAddRekening').on('submit', function(e) {
        e.preventDefault();
        saveRekening();
    });

    // Form Add Kode Mutasi
    $('#formAddKodeMutasi').on('submit', function(e) {
        e.preventDefault();
        saveKodeMutasi();
    });

    // Form Add Supplier
    $('#formAddSupplier').on('submit', function(e) {
        e.preventDefault();
        saveSupplier();
    });

    // Form Add Suppliers Bank
    $('#formAddSuppliersBank').on('submit', function(e) {
        e.preventDefault();
        saveSuppliersBank();
    });

    // Final refresh label setelah seluruh inisialisasi selesai
    setTimeout(function() {
        if (typeof updatePPHLabel === 'function') updatePPHLabel();
        if (typeof updatePPNLabel === 'function') updatePPNLabel();
        if (typeof updateDiskonLabel === 'function') updateDiskonLabel();
    }, 50);

        // Pastikan nilai ppn_amount/pph_amount tetap tampil dari DB jika master ID kosong
    setTimeout(function() {
        const ppnId = $('#ppn_id').val();
        const pphId = $('#pph_id').val();
        const dppId = $('#dpp_id').val();
        const ppnAmountFromDb = parseFloat("{{ $data->ppn_amount ?? 0 }}") || 0;
        const pphAmountFromDb = parseFloat("{{ $data->pph_amount ?? 0 }}") || 0;

        if (ppnAmountFromDb > 0) {
            if (!ppnId && !dppId) {
                $('#ppn_amount').val(formatRupiah(ppnAmountFromDb));
                $('#ppnWarningLabel').show();
                $('#dppWarningLabel').show();
            } else if (!ppnId) {
                $('#ppn_amount').val(formatRupiah(ppnAmountFromDb));
                $('#ppnWarningLabel').show();
            }
        }

        if (pphAmountFromDb > 0 && !pphId) {
            $('#pph_amount').val(formatRupiah(pphAmountFromDb));
            $('#pphWarningLabel').show();
        }
    }, 200);
});

// ============================================
// LOCKED DATE VALIDATION
// ============================================
function validateLockedDate(dateStr, isSubmit = false) {
    if (!dateStr) return true;
    
    const selectedDate = new Date(dateStr);
    const selectedMonth = selectedDate.getMonth() + 1; // 1-12
    const selectedYear = selectedDate.getFullYear();
    
    const lockedEntry = lockedMonths.find(function(lock) {
        return parseInt(lock.bulan) === selectedMonth && parseInt(lock.tahun) === selectedYear;
    });
    
    if (lockedEntry) {
        const monthNames = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
        const monthName = monthNames[selectedMonth - 1] || selectedMonth;
        
        Swal.fire({
            title: 'Tanggal Terkunci!',
            html: `Transaksi untuk bulan <strong>${monthName} ${selectedYear}</strong> sudah dikunci.<br>Silakan pilih tanggal bulan lain yang belum dikunci atau hubungi super admin untuk membuka kunci.`,
            icon: 'error',
            confirmButtonColor: '#d33',
            confirmButtonText: 'Mengerti'
        });
        
        // Clear the date field
        $('#date').val('');
        $('#nomor_bukti').val('');
        
        // Focus back to date input
        $('#date').focus();
        
        return false;
    }
    
    return true;
}

// ============================================
// DP FUNCTIONS (global - called from onclick and onchange)
// ============================================
function checkAndSetDPAuto(callback) {
    if (selectedPOItems.length === 0) { if (callback) callback(false, 1); return; }
    const poId = selectedPOItems[0].po_assign_id;
    let url = '{{ url("/trsmts/api/dp-check") }}/' + poId;
    const mutasiId = {{ $data->id ?? 'null' }};
    if (mutasiId) url += '?exclude_mutasi_bank_id=' + mutasiId;
    
    $.get(url, function(res) {
        if (res.success && res.data.has_dp) {
            $('#dp_seq').val(res.data.next_urutan);
            renderDPSummaryTable();
            $('#dpSummarySection').slideDown(300);
            if (callback) callback(true, res.data.next_urutan);
        } else {
            if (callback) callback(false, 1);
        }
    }).fail(function() {
        if (callback) callback(false, 1);
    });
}

function renderDPSummaryTable() {
    const container = $('#dpSummaryContainer');
    container.empty();
    if (selectedPOItems.length === 0) { 
        container.html('<div class="text-muted py-2"><i class="fas fa-info-circle me-1"></i>Tidak ada PO</div>'); 
        return; 
    }

    const dpSeq = parseInt($('#dp_seq').val()) || 1;
    const isSeq1 = dpSeq === 1;
    const titleText = isSeq1 ? 'Total Harga Awal (Harga Keseluruhan PO)' : 'Riwayat DP / Termin';
    
    const mutasiId = {{ $data->id ?? 'null' }};
    
    let html = '<div class="mb-1">' +
    '<label class="form-label">' + titleText + '</label>' +
    (isSeq1 ? '<small class="text-muted d-block">Total harga awal kontrak dan setelah dikurangi diskon dan potongan (Net Amount)</small>' : '') +
    '</div>';
    html += '<div class="table-responsive"><table class="table table-sm table-bordered">';
    html += '<thead style="background-color:#e9ecef;"><tr>';
    html += '<th style="width:30px" class="text-center"></th>';
    html += '<th style="width:40%"  class="text-center">PO Number</th>';
    if (isSeq1) {
        html += '<th  class="text-center" style="width:55%">Total Harga Awal (Rp)</th>';
    } else {
        html += '<th  class="text-center" style="width:20%">Harga Awal</th>';
        html += '<th  class="text-center" style="width:20%">Dibayar</th>';
        html += '<th  class="text-center" style="width:20%">Kurang Bayar</th>';
    }
    html += '</tr></thead><tbody>';
    
    selectedPOItems.forEach(function(po, i) {
        let totalAwal = 0;
        po.selected_details.forEach(function(d) { totalAwal += parseFloat(d.amount_rupiah) || 0; });
        // Gunakan dpTotalData dari database (total_amount dari trs_mutasi_bank_dp) jika tersedia
        const dpTotalFromDB = dpTotalData && dpTotalData[po.po_assign_id] ? dpTotalData[po.po_assign_id] : 0;
        // Saat dp_seq = 1 di mode edit, ambil dari dpTotalFromDB; jika tidak ada, tampil 0
        let displayTotal = 0;
        if (isSeq1) {
            displayTotal = (dpTotalFromDB > 0) ? dpTotalFromDB : 0;
        } else {
            displayTotal = (dpTotalFromDB > 0) ? dpTotalFromDB : totalAwal;
        }
        const formatted = formatRupiah(displayTotal.toFixed(2));
        
        html += '<tr data-po-idx="' + i + '" data-po-id="' + po.po_assign_id + '">';
        html += '<td class="text-center"><i class="fas fa-chevron-down text-muted" style="cursor:pointer;font-size:0.6rem;" onclick="toggleDPDetail(this)"></i></td>';
        html += '<td class="fw-semibold" style="word-break:break-all;">' + po.po_number + '</td>';
        if (isSeq1) {
            html += '<td class="text-end"><input type="text" class="form-control form-control-sm text-end po-dp-total" data-po-idx="' + i + '" value="' + formatted + '" onkeyup="formatInputRupiah(this);syncDPTotal(this)" onblur="formatInputRupiahOnBlur(this);syncDPTotal(this)" style="max-width:300px;margin-left:auto;font-size:0.8rem;padding:1px 4px;"></td>';
        } else {
            html += '<td class="text-end">' +
                '<span class="dp-total-awal fw-semibold">' + formatted + '</span> ' +
                '<i class="fas fa-edit text-primary ms-1" ' +
                'style="font-size:0.9em; cursor:pointer; vertical-align:middle;" ' +
                'onclick="editDPTotal(' + i + ')" title="Edit Harga Awal"></i>' +
            '</td>';
            html += '<td class="text-end dp-total-dibayar text-success fw-semibold">Rp 0,00</td>';
            html += '<td class="text-end dp-kurang-bayar text-danger fw-semibold">Rp 0,00</td>';
        }
        html += '</tr>';
        html += '<tr class="dp-detail-row" style="display:none"><td colspan="5" class="p-0"><div class="dp-detail-content px-2 py-1 bg-light border-top" style="font-size:0.7rem;"></div></td></tr>';
    });
    
    html += '</tbody></table></div>';
    
    container.append(html);
    
    if (!isSeq1) {
        // Load summary untuk termin > 1, exclude current record
        selectedPOItems.forEach(function(po, i) {
            loadDPSummaryForPO(po, i, dpSeq, mutasiId);
        });
    }
}

function toggleDPDetail(el) {
    const row = $(el).closest('tr');
    const detailRow = row.next('.dp-detail-row');
    detailRow.toggle();
    $(el).toggleClass('fa-chevron-down fa-chevron-up');
    
    if (detailRow.is(':visible') && !detailRow.data('loaded')) {
        const poId = row.data('po-id');
        const mutasiId = {{ $data->id ?? 'null' }};
        const dpSeq = parseInt($('#dp_seq').val()) || 1;
        const content = detailRow.find('.dp-detail-content');
        content.html('<div class="text-center text-muted py-2"><i class="fas fa-spinner fa-spin me-1"></i>Memuat...</div>');
        
        let url = '{{ url("/trsmts/api/dp-history") }}/' + poId;
        url += '?exclude_mutasi_bank_id=' + mutasiId + '&max_urutan=' + dpSeq;
        
        $.get(url, function(res) {
            content.empty();
            if (res.success && res.data.length > 0) {
                let h = '<table class="table table-sm table-bordered mb-0" style="font-size:0.8rem;"><thead style="background-color:#e9ecef;"><tr><th style="width:30px"  class="text-center">DP Ke-</th><th class="text-center">Tanggal</th><th class="text-center">No. Bukti</th><th class="text-center">Persentase DP (%)</th><th  class="text-center" style="width:160px">Total Dibayar</th></tr></thead><tbody>';
                res.data.forEach(function(d, idx) {
                    h += '<tr><td class="text-center" style="border:1px solid #dee2e6;">' + (idx + 1) + '</td><td style="border:1px solid #dee2e6;">' + (formatDate(d.date) || '-') + '</td><td style="border:1px solid #dee2e6;">' + (d.nomor_bukti || '-') + '</td><td style="border:1px solid #dee2e6;">' + (d.dp_percentage || '-') + '</td><td class="text-end fw-semibold" style="border:1px solid #dee2e6;">Rp ' + formatRupiah(d.amount_paid) + '</td></tr>';
                });
                h += '</tbody></table>';
                content.html(h);
            } else {
                content.html('<div class="text-muted text-center py-1"><i class="fas fa-inbox me-1"></i>Belum ada transaksi DP sebelumnya</div>');
            }
            detailRow.data('loaded', true);
        });
    }
}

function formatDate(dateString) {
    if (!dateString) return '-';

    const date = new Date(dateString);

    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    let hour = date.getHours();
    const minute = String(date.getMinutes()).padStart(2, '0');
    const ampm = hour >= 12 ? 'PM' : 'AM';

    hour = hour % 12;
    hour = hour ? hour : 12; // jam 0 menjadi 12
    hour = String(hour).padStart(2, '0');

    return `${date.getDate()}-${months[date.getMonth()]}-${date.getFullYear()} ${hour}:${minute} ${ampm}`;
}

function loadDPSummaryForPO(po, idx, maxUrutan, excludeMutasiId) {
    let dpSummaryUrl = '{{ url("/trsmts/api/dp-summary") }}/' + po.po_assign_id + '?exclude_mutasi_bank_id=' + (excludeMutasiId || '') + '&max_urutan=' + (maxUrutan || '');
    $.get(dpSummaryUrl, function(res) {
        if (res.success) {
            const row = $('tr[data-po-idx="' + idx + '"]');
            const totalAwalFormatted = formatRupiah(res.data.total_amount_awal.toFixed(2));
            const dibayarFormatted = formatRupiah(res.data.total_dibayar.toFixed(2));
            const kurangFormatted = formatRupiah(res.data.kurang_bayar.toFixed(2));
            row.find('.dp-total-awal').html(totalAwalFormatted);
            row.find('.dp-total-dibayar').html('Rp ' + dibayarFormatted);
            row.find('.dp-kurang-bayar').html('Rp ' + kurangFormatted);
        }
    });
}

function syncDPTotal(input) {
    // Visual only
}

function editDPTotal(poIdx) {
    const row = $('tr[data-po-idx="' + poIdx + '"]');
    const totalAwalSpan = row.find('.dp-total-awal');
    const currentAmountText = totalAwalSpan.text().trim();
    const mutasiId = {{ $data->id ?? 'null' }};
    const poId = row.data('po-id');

    Swal.fire({
        title: 'Edit Harga Awal',
        html: `
            <div class="mb-2 text-start">
                <label class="form-label small mb-1">Total Harga Awal (Rp)</label>
                <small class="text-muted d-block mb-2 ms-0" style="font-size:0.8rem ; padding-left:4px">  Harga awal kontrak setelah dikurangi diskon dan potongan (Net Amount)</small>
                <input id="swal-dp-amount" type="text" class="form-control" value="${currentAmountText}" onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: 'Simpan',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#028284',
        focusConfirm: false,
        preConfirm: function() {
            const val = $('#swal-dp-amount').val();
            if (!val || val.trim() === '') {
                Swal.showValidationMessage('Nilai tidak boleh kosong');
                return false;
            }
            const parsed = parseRupiah(val);
            const amount = parsed ? parseFloat(parsed) : 0;
            if (amount <= 0) {
                Swal.showValidationMessage('Nilai harus lebih dari 0');
                return false;
            }
            return amount;
        }
    }).then(function(result) {
        if (result.isConfirmed) {
            const totalAmount = result.value;
            totalAwalSpan.html(formatRupiah(totalAmount.toFixed(2)));

            const payload = {
                po_assign_id: poId,
                total_amount: totalAmount
            };
            if (mutasiId) payload.trs_mutasi_bank_id = mutasiId;

            $.ajax({
                url: '{{ url("/trsmts/api/dp-total") }}',
                type: 'POST',
                data: JSON.stringify(payload),
                contentType: 'application/json',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(res) {
                    if (res.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: res.message || 'Total harga awal berhasil disimpan',
                            icon: 'success',
                            confirmButtonColor: '#028284',
                            timer: 1500,
                            showConfirmButton: false
                        });
                    } else {
                        Swal.fire({ title: 'Gagal!', text: res.message || 'Gagal menyimpan total harga awal', icon: 'error', confirmButtonColor: '#028284' });
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire({ title: 'Error!', text: msg, icon: 'error', confirmButtonColor: '#028284' });
                }
            });
        }
    });
}

// Include the same JavaScript functions from add.blade.php
// (loadRekening, loadKodeMutasi, loadProjects, etc.) - abbreviated for space

function loadRekening() {
    isLoadingRekening = true;
    renderRekeningTable(rekeningData);
    
    $.ajax({
        url: '{{ url("/trsmts/api/rekening") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                rekeningData = response.data;
                
                // Set initial display
                const initialRek = rekeningData.find(r => r.id === initialRekeningId);
                if (initialRek) {
                    $('#rekening_display').val(initialRek.nama_bank + ' - ' + initialRek.nomor_akun);
                }
            }
        },
        complete: function() {
            isLoadingRekening = false;
            renderRekeningTable(rekeningData);
        }
    });
}

function loadKodeMutasi() {
    isLoadingKodeMutasi = true;
    renderKodeMutasiTable(kodeMutasiData);
    
    $.ajax({
        url: '{{ url("/trsmts/api/kode-mutasi") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                kodeMutasiData = response.data;
                
                // Set initial display
                const initialKm = kodeMutasiData.find(k => k.id === initialKodeMutasiId);
                if (initialKm) {
                    $('#kode_mutasi_display').val(initialKm.kode_mutasi);
                }
            }
        },
        complete: function() {
            isLoadingKodeMutasi = false;
            renderKodeMutasiTable(kodeMutasiData);
        }
    });
}

function loadProjects() {
    isLoadingProjects = true;
    renderProjectTable(projectsData);
    
    $.ajax({
        url: '{{ url("/trsmts/api/projects/active") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                projectsData = response.data;
            }
        },
        complete: function() {
            isLoadingProjects = false;
            renderProjectTable(projectsData);
        }
    });
}

// Project filter untuk PO Assign hanya dari #project_id (Project Terkait)
function getPOAssignProjectFilter() {
    return $('#project_id').val() || '';
}

function updateIsProjectSwitchState() {
    const rekeningId   = $('#rekening_id').val();
    const kodeMutasiId = $('#kode_mutasi_id').val();
    const tanggal      = $('#date').val();
    const allFilled    = rekeningId && kodeMutasiId && tanggal;
    const poExists     = selectedPOItems && selectedPOItems.length > 0;
    $('#is_project').prop('disabled', !allFilled || poExists);
    // Disable juga tombol search project ketika sudah ada PO
    $('#btnSearchProject').prop('disabled', poExists).css('cursor', poExists ? 'not-allowed' : 'pointer');
}

function loadPOAssign(page = 1) {
    isLoadingPOAssign = true;
    poAssignCurrentPage = page;
    renderPOAssignTable([]);

    $.ajax({
        url: '{{ url("/trsmts/api/po-assign") }}',
        type: 'GET',
        data: { search: poAssignCurrentSearch, page: page, per_page: poAssignPerPage, project_id: getPOAssignProjectFilter() },
        success: function(response) {
            if (response.success) {
                poAssignData        = response.data;
                poAssignCurrentPage = response.pagination.current_page;
                poAssignLastPage    = response.pagination.last_page;
                poAssignTotal       = response.pagination.total;
            }
        },
        complete: function() {
            isLoadingPOAssign = false;
            renderPOAssignTable(poAssignData);
            renderPOAssignPagination();
        }
    });
}

function loadSuppliersBank()
{
    isLoadingSuppliersBank = true;

    renderSuppliersBankTable(supplierBankData);

    $.ajax({
        url: '{{ url("/trsmts/api/supplier-bank") }}',
        type: 'GET',

        success: function(response) {

            if (response.success) {

                supplierBankData = response.data;

                // isi otomatis saat pertama buka halaman edit
                const initialBank = supplierBankData.find(
                    v => Number(v.id) === Number(initialSupplierBankId)
                );

                if (initialBank) {

                    $('#rekening_tujuan_dari').val(initialBank.id);

                    $('#rekening_tujuan_dari_display').val(
                        initialBank.supplier_name +
                        ' - ' +
                        initialBank.nama_bank +
                        ' (' +
                        initialBank.nomor_akun +
                        ')'
                    );
                }
            }
        },

        complete: function() {

            isLoadingSuppliersBank = false;

            renderSuppliersBankTable(supplierBankData);
        }
    });
}
// Copy all render, open, select, and clear functions from add.blade.php
function renderSupplierBankTable(data)
{
    const tbody = $('#supplierBankTableBody');

    tbody.empty();

    if (isLoadingSupplierBank)
    {
        tbody.html(`
            <tr>
                <td colspan="7" class="text-center">
                    <i class="fas fa-spinner fa-spin"></i> Loading...
                </td>
            </tr>
        `);

        return;
    }

    if (data.length === 0)
    {
        tbody.html(`
            <tr>
                <td colspan="7" class="text-center">
                    Tidak ada data
                </td>
            </tr>
        `);

        return;
    }

    data.forEach((item, index) => {
        // console.log('Rendering supplier bank item:', item);

        const displayText =
            `${item.supplier_name} - ${item.nama_bank} (${item.nomor_akun})`;

        tbody.append(`
            <tr>
                <td>
                    <button
                        type="button"
                        class="btn btn-sm btn-primary"
                        onclick="selectSupplierBank(
                            ${item.id},
                            '${displayText.replace(/'/g, "\\'")}'
                        )">
                        Pilih
                    </button>
                </td>

                <td class="text-center">${index + 1}</td>
                <td>${item.supplier_name ?? ''}</td>
                <td>${item.keterangan ?? ''}</td>
                <td class="${(item.nama_bank || '-') === '-' ? 'text-center' : 'text-start'}">${item.nama_bank ?? ''}</td>
                <td>${item.nomor_akun ?? ''}</td>
                <td>${item.nama_akun ?? ''}</td>
            </tr>
        `);
    });
}
function renderRekeningTable(data) {
    const tbody = $('#rekeningTableBody');
    tbody.empty();

    if (isLoadingRekening) {
        tbody.html('<tr><td colspan="7" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.html('<tr><td colspan="7" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        const saldoAwal = parseFloat(item.saldo_awal || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        const saldoAkhir = parseFloat(item.saldo_akhir || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        
        tbody.append(`
            <tr>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" 
                        onclick="selectRekening(${item.id}, '${item.nama_bank} - ${item.nomor_akun}')">
                        Pilih
                    </button>
                </td>
                <td class="text-center">${index + 1}</td>
                <td>${item.nama_bank}</td>
                <td>${item.nomor_akun}</td>
                <td>${item.nama_akun}</td>
                <td class="text-end">${saldoAwal}</td>
                <td class="text-end">${saldoAkhir}</td>
            </tr>
        `);
    });
}

function renderKodeMutasiTable(data) {
    const tbody = $('#kodeMutasiTableBody');
    tbody.empty();

    if (isLoadingKodeMutasi) {
        tbody.html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.html('<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        const jenisMutasi = item.is_in == 1 ? 'Mutasi Masuk' : 'Mutasi Keluar';
        const displayText = `${item.kode_mutasi} - ${jenisMutasi}`;
        tbody.append(`
            <tr>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" 
                        onclick="selectKodeMutasi(${item.id}, '${displayText}')">
                        Pilih
                    </button>
                </td>
                <td class="text-center">${index + 1}</td>
                <td>${item.kode_mutasi}</td>
                <td>${jenisMutasi}</td>
            </tr>
        `);
    });
}

function renderPOAssignTable(data) {
    const tbody = $('#poAssignTableBody');
    tbody.empty();

    if (isLoadingPOAssign) {
        tbody.html('<tr><td colspan="8" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.html('<tr><td colspan="8" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        const projectDisplay = item.proyek || '-';
        const supplierDisplay = item.supplier_name || '-';
        const isProjectBadge = item.is_project
            ? '<span class="badge bg-success"><i class="fas fa-check"></i> Ya</span>'
            : '<span class="badge bg-secondary"><i class="fas fa-times"></i> Tidak</span>';
        const isSupplierBadge = item.supplier_id
            ? '<span class="badge bg-success"><i class="fas fa-check"></i> Ya</span>'
            : '<span class="badge bg-secondary"><i class="fas fa-times"></i> Tidak</span>';

        tbody.append(`
            <tr>
                <td>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-primary"
                            onclick='selectPOAssign(${JSON.stringify(item)})'>
                            <i class="fas fa-check me-1"></i>Pilih
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-toggle-detail"
                            id="btnDetail_${item.id}"
                            onclick="togglePODetail(${item.id})"
                            title="Lihat Detail Items">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                </td>
                <td class="text-center">${(poAssignCurrentPage - 1) * poAssignPerPage + index + 1}</td>
                <td><span class="fw-semibold text-primary">${item.po_number}</span></td>
                <td class="text-muted small ${item.description ? 'text-start' : 'text-center'}">${item.description || '<em>-</em>'}</td>
                <td class="text-center">${isProjectBadge}</td>
                <td class="small">${projectDisplay}</td>
                <td class="text-center">${isSupplierBadge}</td>
                <td class="small">${supplierDisplay}</td>
            </tr>
            <tr id="poDetail_${item.id}" class="po-detail-row">
                <td colspan="8" class="p-0">
                    <div class="po-detail-content">
                        <div class="d-flex align-items-center gap-1 mb-2">
                            <i class="fas fa-list-ul text-muted"></i>
                            <small class="text-muted fw-semibold">Detail Items &mdash; ${item.po_number}</small>
                        </div>
                        <table class="table table-sm table-bordered" style ="font-size:0.8rem">
                            <thead style="background-color:#e9ecef;">
                                <tr>
                                    <th class="text-center" style="width:36px">#</th>
                                    <th class="text-center">Kategori</th>
                                    <th class="text-center">Detail Kategori</th>
                                    <th class="text-center" style="width:150px">Quantity (Unit)</th>
                                    <th class="text-center" style="width:70px">Unit</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </td>
            </tr>
        `);
    });
}

function togglePODetail(poId) {
    const detailRow = $(`#poDetail_${poId}`);
    const btn       = $(`#btnDetail_${poId}`);

    if (detailRow.hasClass('show')) {
        detailRow.removeClass('show');
        btn.removeClass('expanded');
        return;
    }

    detailRow.addClass('show');
    btn.addClass('expanded');

    if (detailRow.data('loaded')) return;

    const tbody = detailRow.find('tbody');
    tbody.html(`<tr><td colspan="5" class="text-center py-2 text-muted">
        <i class="fas fa-spinner fa-spin me-1"></i> Memuat detail...
    </td></tr>`);

        $.ajax({
            url: `{{ url("/trsmts/api/po-assign-detail") }}/${poId}?mutasi_bank_id={{ $data->id }}`,
            type: 'GET',
            success: function(response) {
            tbody.empty();
             if (!response.success || response.data.length === 0) {
                 tbody.html(`<tr><td colspan="5" class="text-center py-2 text-muted fst-italic">
                     <i class="fas fa-inbox me-1"></i> tidak ada data
                 </td></tr>`);
                 return;
             }
            response.data.forEach(function(d, i) {
                const amount = parseFloat(d.amount_unit || 0)
                    .toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                tbody.append(`<tr>
                    <td class="text-center">${i + 1}</td>
                    <td>${d.kategori || '-'}</td>
                    <td>${d.detail_kategori || '-'}</td>
                    <td class="text-end">${amount}</td>
                    <td>${d.unit || '-'}</td>
                </tr>`);
            });
            detailRow.data('loaded', true);
        },
        error: function() {
            tbody.html(`<tr><td colspan="5" class="text-center py-2 text-danger">
                <i class="fas fa-exclamation-triangle me-1"></i> Gagal memuat detail
            </td></tr>`);
        }
    });
}

function renderPOAssignPagination() {
    const info        = $('#poAssignInfo');
    const paginationEl = $('#poAssignPagination');

    const from = poAssignTotal === 0 ? 0 : (poAssignCurrentPage - 1) * poAssignPerPage + 1;
    const to   = Math.min(poAssignCurrentPage * poAssignPerPage, poAssignTotal);
    if (poAssignTotal === 0) {
        info.html('<span class="text-muted fst-italic">Tidak ada data ditemukan</span>');
    } else {
        info.html(`Menampilkan <strong>${from}&ndash;${to}</strong> dari <strong>${poAssignTotal}</strong> data`);
    }

    paginationEl.empty();
    if (poAssignLastPage <= 1) return;

    const ul = $('<ul class="pagination pagination-sm mb-0"></ul>');

    // Prev
    ul.append(`<li class="page-item ${poAssignCurrentPage === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${poAssignCurrentPage - 1}" aria-label="Prev">
            <i class="fas fa-chevron-left"></i>
        </a>
    </li>`);

    let startPage = Math.max(1, poAssignCurrentPage - 2);
    let endPage   = Math.min(poAssignLastPage, startPage + 4);
    if (endPage - startPage < 4) startPage = Math.max(1, endPage - 4);

    if (startPage > 1) {
        ul.append(`<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`);
        if (startPage > 2) ul.append('<li class="page-item disabled"><a class="page-link">&hellip;</a></li>');
    }

    for (let p = startPage; p <= endPage; p++) {
        ul.append(`<li class="page-item ${p === poAssignCurrentPage ? 'active' : ''}">
            <a class="page-link" href="#" data-page="${p}">${p}</a>
        </li>`);
    }

    if (endPage < poAssignLastPage) {
        if (endPage < poAssignLastPage - 1) ul.append('<li class="page-item disabled"><a class="page-link">&hellip;</a></li>');
        ul.append(`<li class="page-item"><a class="page-link" href="#" data-page="${poAssignLastPage}">${poAssignLastPage}</a></li>`);
    }

    // Next
    ul.append(`<li class="page-item ${poAssignCurrentPage === poAssignLastPage ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${poAssignCurrentPage + 1}" aria-label="Next">
            <i class="fas fa-chevron-right"></i>
        </a>
    </li>`);

    ul.on('click', 'a.page-link[data-page]', function(e) {
        e.preventDefault();
        if ($(this).closest('li').hasClass('disabled') || $(this).closest('li').hasClass('active')) return;
        const pg = parseInt($(this).data('page'));
        if (!isNaN(pg) && pg >= 1 && pg <= poAssignLastPage) loadPOAssign(pg);
    });

    paginationEl.append(ul);
}

function renderProjectTable(data) {
    const tbody = $('#projectTableBody');
    tbody.empty();

    if (isLoadingProjects) {
        tbody.html('<tr><td colspan="11" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.html('<tr><td colspan="11" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        tbody.append(`
            <tr>
            <td>
                    <button type="button" class="btn btn-sm btn-primary" 
                        onclick="selectProject(${item.id}, '${item.proyek}', '${item.no_spk || ''}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td class="text-center">${index + 1}</td>
                <td class="${item.proyek ? 'text-start' : 'text-center'}">${item.proyek}</td>
                <td class="${item.lokasi ? 'text-start' : 'text-center'}">${item.lokasi || '-'}</td>
                <td class="${item.pekerjaan ? 'text-start' : 'text-center'}">${item.pekerjaan || '-'}</td>
                <td class="${item.pemilik ? 'text-start' : 'text-center'}">${item.pemilik || '-'}</td>
                <td class="${item.no_spk ? 'text-start' : 'text-center'}">${item.no_spk || '-'}</td>
                <td class="${item.sales ? 'text-start' : 'text-center'}">${item.sales || '-'}</td>
                <td class="${item.pv_capacity ? 'text-start' : 'text-center'}">${item.pv_capacity ? parseFloat(item.pv_capacity).toFixed(2) : '-'}</td>
                <td class="${item.inverter_capacity ? 'text-start' : 'text-center'}">${item.inverter_capacity ? parseFloat(item.inverter_capacity).toFixed(2) : '-'}</td>
                <td class="${item.forex ? 'text-start' : 'text-center'}">${item.forex || '-'}</td>
            </tr>
        `);
    });
}

function renderKategoriTable(data) {
    const tbody = $('#kategoriTableBody');
    tbody.empty();

    if (isLoadingKategori) {
        tbody.html('<tr><td colspan="8" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.html('<tr><td colspan="8" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        tbody.append(`
            <tr data-id="${item.id}">
                <td class="text-center">${index + 1}</td>
                <td>${item.kategori_name || '-'}</td>
                <td>${item.code || '-'}</td>
                <td>${item.detail_kategori}</td>
                <td>${item.supplier_name || '-'}</td>
                <td>${item.brand_name || '-'}</td>
                <td>${item.spesifikasi_name || '-'}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" 
                        onclick="selectKategori(${item.id}, '${item.code}', '${item.detail_kategori}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
            </tr>
        `);
    });
}

function renderSupplierTable(data) {
    const tbody = $('#supplierTableBody');
    tbody.empty();

    if (isLoadingSupplier) {
        tbody.html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.html('<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        tbody.append(`
            <tr>
                <td class="text-center">${index + 1}</td>
                <td>${item.supplier_name}</td>
                <td>${item.keterangan || '-'}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" 
                        onclick="selectSupplier(${item.id}, '${item.supplier_name}')">
                        Pilih
                    </button>
                </td>
            </tr>
        `);
    });
}

function renderSuppliersBankTable(data) {
    const tbody = $('#supplierBankTableBody');
    tbody.empty();

    if (isLoadingSuppliersBank) {
        tbody.html('<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.html('<tr><td colspan="5" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        tbody.append(`
            <tr>
                <td class="text-center">${index + 1}</td>
                <td>${item.nama_bank}</td>
                <td>${item.nomor_akun}</td>
                <td>${item.nama_akun}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" 
                        onclick="selectSuppliersBank(${item.id}, '${item.nama_bank} - ${item.nomor_akun}')">
                        Pilih
                    </button>
                </td>
            </tr>
        `);
    });
}

// Load Kategori Induk
// function loadSupplierBankData()
// {
//     isLoadingSupplierBank = true;

//     renderSupplierBankTable(supplierBankData);

//     $.ajax({
//         url: '{{ url("/trsmts/api/supplier-bank") }}',
//         type: 'GET',

//         success: function(response)
//         {
//             if (response.success)
//             {
//                 supplierBankData = response.data;
//             }
//         },

//         error: function(xhr)
//         {
//             console.error('Gagal load supplier bank', xhr);
//         },

//         complete: function()
//         {
//             isLoadingSupplierBank = false;

//             renderSupplierBankTable(supplierBankData);
//         }
//     });
// }

// function loadSupplierBank()
// {
//     isLoadingSupplierBank = true;

//     renderSupplierBankTable(supplierBankData);

//     $.ajax({
//         url: '{{ url("/trsmts/api/supplier-bank") }}',
//         type: 'GET',

//         success: function(response)
//         {
//             if (response.success)
//             {
//                 supplierBankData = response.data;
//             }
//         },

//         error: function(xhr)
//         {
//             console.error('Gagal load supplier bank', xhr);
//         },

//         complete: function()
//         {
//             isLoadingSupplierBank = false;

//             renderSupplierBankTable(supplierBankData);
//         }
//     });
// }

function loadKategoriInduk() {
    isLoadingKategoriInduk = true;
    renderKategoriIndukTable(kategoriIndukData);
    
    $.ajax({
        url: '{{ url("/trsmts/api/kategori") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                kategoriIndukData = response.data;
            }
        },
        error: function() {},
        complete: function() {
            isLoadingKategoriInduk = false;
            renderKategoriIndukTable(kategoriIndukData);
        }
    });
}

function loadSupplierForKategori() {
    isLoadingSupplierForKategori = true;
    renderSupplierForKategoriTable(supplierForKategoriData);
    
    $.ajax({
        url: '{{ url("/trsmts/api/supplier") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                supplierForKategoriData = response.data;
            }
        },
        error: function() {},
        complete: function() {
            isLoadingSupplierForKategori = false;
            renderSupplierForKategoriTable(supplierForKategoriData);
        }
    });
}

function loadBrand() {
    isLoadingBrand = true;
    renderBrandTable(brandData);
    
    $.ajax({
        url: '{{ url("/trsmts/api/brand") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                brandData = response.data;
            }
        },
        error: function() {},
        complete: function() {
            isLoadingBrand = false;
            renderBrandTable(brandData);
        }
    });
}

function loadSpesifikasi() {
    isLoadingSpesifikasi = true;
    renderSpesifikasiTable(spesifikasiData);
    
    $.ajax({
        url: '{{ url("/trsmts/api/spesifikasi") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                spesifikasiData = response.data;
            }
        },
        error: function() {},
        complete: function() {
            isLoadingSpesifikasi = false;
            renderSpesifikasiTable(spesifikasiData);
        }
    });
}

function renderKategoriIndukTable(data) {
    const tbody = $('#kategoriIndukTableBody');
    tbody.empty();
    if (isLoadingKategoriInduk) {
        tbody.html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>');
        return;
    }
    data.forEach((item, index) => {
        tbody.append(`<tr><td class="text-center">${index + 1}</td><td>${item.code || '-'}</td><td>${item.kategori}</td><td><button class="btn btn-primary btn-sm" onclick="selectKategoriInduk(${item.id}, '${item.kategori}')"><i class="fas fa-check"></i> Pilih</button></td></tr>`);
    });
}

function renderSupplierForKategoriTable(data) {
    const tbody = $('#supplierForKategoriTableBody');
    tbody.empty();
    if (isLoadingSupplierForKategori) {
        tbody.html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>');
        return;
    }
    data.forEach((item, index) => {
        tbody.append(`<tr><td class="text-center">${index + 1}</td><td>${item.supplier_name}</td><td>${item.keterangan || '-'}</td><td><button class="btn btn-primary btn-sm" onclick="selectSupplierForKategori(${item.id}, '${item.supplier_name}')"><i class="fas fa-check"></i> Pilih</button></td></tr>`);
    });
}

function renderBrandTable(data) {
    const tbody = $('#brandTableBody');
    tbody.empty();
    if (isLoadingBrand) {
        tbody.html('<tr><td colspan="3" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="3" class="text-center">Tidak ada data</td></tr>');
        return;
    }
    data.forEach((item, index) => {
        tbody.append(`<tr><td class="text-center">${index + 1}</td><td>${item.brand}</td><td><button class="btn btn-primary btn-sm" onclick="selectBrand(${item.id}, '${item.brand}')"><i class="fas fa-check"></i> Pilih</button></td></tr>`);
    });
}

function renderSpesifikasiTable(data) {
    const tbody = $('#spesifikasiTableBody');
    tbody.empty();
    if (isLoadingSpesifikasi) {
        tbody.html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>');
        return;
    }
    data.forEach((item, index) => {
        tbody.append(`<tr><td class="text-center">${index + 1}</td><td>${item.brand_name || '-'}</td><td>${item.spesifikasi}</td><td><button class="btn btn-primary btn-sm" onclick="selectSpesifikasi(${item.id}, '${item.spesifikasi}')"><i class="fas fa-check"></i> Pilih</button></td></tr>`);
    });
}

function openSelectRekeningModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectRekening').modal('show');
        $('#searchRekening').val('').focus();
        renderRekeningTable(rekeningData);
    }, 300);
}

function openSelectKodeMutasiModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectKodeMutasi').modal('show');
        $('#searchKodeMutasi').val('').focus();
        renderKodeMutasiTable(kodeMutasiData);
    }, 300);
}

function openSelectProjectModal() {
    // Guard: jangan buka modal jika sudah ada PO (tombol search project di-disable)
    if (selectedPOItems && selectedPOItems.length > 0) return;
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectProject').modal('show');
        $('#searchProject').val('').focus();
        renderProjectTable(projectsData);
    }, 300);
}

function openSelectKategoriModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectKategori').modal('show');
        $('#searchKategori').val('').focus();
        renderKategoriTable(kategoriData);
    }, 300);
}

function openSelectSupplierModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectSupplier').modal('show');
        $('#searchSupplier').val('').focus();
        renderSupplierTable(supplierData);
    }, 300);
}

function openSelectSuppliersBankModal() {
    const supplierId = $('#supplier_id').val();
    if (!supplierId) {
        Swal.fire({
            title: 'Perhatian!',
            text: 'Silakan pilih supplier terlebih dahulu',
            icon: 'warning',
            confirmButtonColor: '#028284'
        });
        return;
    }

    $('.modal').modal('hide');
    setTimeout(function() {
        loadSuppliersBank(supplierId);
        $('#modalSelectSuppliersBank').modal('show');
        $('#searchSuppliersBank').val('').focus();
    }, 300);
}

function openSelectKategoriIndukModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectKategoriInduk').modal('show');
        $('#searchKategoriInduk').val('');
        loadKategoriInduk();
    }, 300);
}

function openSelectSupplierForKategoriModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectSupplierForKategori').modal('show');
        $('#searchSupplierForKategori').val('');
        loadSupplierForKategori();
    }, 300);
}

function openSelectBrandModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectBrand').modal('show');
        $('#searchBrand').val('');
        loadBrand();
    }, 300);
}

function openSelectSpesifikasiModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectSpesifikasi').modal('show');
        $('#searchSpesifikasi').val('');
        loadSpesifikasi();
    }, 300);
}

function selectKategoriInduk(id, kategori) {
    $('#add_kategori_id').val(id);
    $('#add_kategori_display').val(kategori);
    $('#modalSelectKategoriInduk').modal('hide');
    
    // Buka kembali modal parent
    setTimeout(function() {
        $('#modalAddKategori').modal('show');
    }, 300);
}

function selectSupplierForKategori(id, supplier_name) {
    $('#add_supplier_id').val(id);
    $('#add_supplier_display').val(supplier_name);
    $('#modalSelectSupplierForKategori').modal('hide');
    
    // Buka kembali modal parent
    setTimeout(function() {
        $('#modalAddKategori').modal('show');
    }, 300);
}

function selectBrand(id, brand) {
    $('#add_brand_id').val(id);
    $('#add_brand_display').val(brand);
    $('#modalSelectBrand').modal('hide');
    
    // Buka kembali modal parent
    setTimeout(function() {
        $('#modalAddKategori').modal('show');
    }, 300);
}

function selectSpesifikasi(id, spesifikasi) {
    $('#add_spesifikasi_id').val(id);
    $('#add_spesifikasi_display').val(spesifikasi);
    $('#modalSelectSpesifikasi').modal('hide');
    
    // Buka kembali modal parent
    setTimeout(function() {
        $('#modalAddKategori').modal('show');
    }, 300);
}

function clearSupplierKategori() {
    $('#add_supplier_id').val('');
    $('#add_supplier_display').val('');
}

function clearBrandKategori() {
    $('#add_brand_id').val('');
    $('#add_brand_display').val('');
}

function clearSpesifikasiKategori() {
    $('#add_spesifikasi_id').val('');
    $('#add_spesifikasi_display').val('');
}
function selectSupplierBank(id, text)
{
    $('#rekening_tujuan_dari').val(id);

    $('#rekening_tujuan_dari_display').val(text);

    $('#modalSelectSupplierBank').modal('hide');
}
function selectRekening(id, name) {
    $('#rekening_id').val(id);
    $('#rekening_display').val(name);
    $('#modalSelectRekening').modal('hide');
    
    // Fetch saldo awal terakhir untuk rekening ini
    $.ajax({
        url: `{{ url("/trsmts/api/saldo-awal") }}/${id}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                currentSaldoAwal = parseFloat(response.data.saldo_awal) || 0;
                
            }
        },
        error: function(xhr) {
            console.error('Error fetching saldo awal:', xhr);
            currentSaldoAwal = 0;
            
        }
    });
}

function selectKodeMutasi(id, name) {
    $('#kode_mutasi_id').val(id);
    $('#kode_mutasi_display').val(name);
    $('#modalSelectKodeMutasi').modal('hide');
    
    // Fetch info kode mutasi (is_in)
    $.ajax({
        url: `{{ url("/trsmts/api/kode-mutasi-info") }}/${id}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                currentIsIn = response.data.is_in;
                
                // Auto-set is_credit berdasarkan is_in
                // Jika is_in = true (transaksi masuk), maka is_credit = false
                // Jika is_in = false (transaksi keluar), maka is_credit = true
                $('#is_credit').prop('checked', !currentIsIn);
                updateMutasiCounterpartyFields();
            }
        },
        error: function(xhr) {
            console.error('Error fetching kode mutasi info:', xhr);
            currentIsIn = null;
            updateMutasiCounterpartyFields();
        }
    });
}

function updateMutasiCounterpartyFields() {
    // Hide both by default until kode mutasi is known
    $('#receiveFromField, #payToField').hide();

    if (currentIsIn === 1 || currentIsIn === true) {
        $('#receiveFromField').show();
        $('#payToField').hide().find('input').val('');
    } else if (currentIsIn === 0 || currentIsIn === false) {
        $('#payToField').show();
        $('#receiveFromField').hide().find('input').val('');
    }
}

function selectPOAssign(item) {
    if (selectedPOItems.find(function(p) { return p.po_assign_id === item.id; })) {
        Swal.fire({ title: 'Perhatian!', text: 'PO ' + item.po_number + ' sudah dipilih', icon: 'warning', confirmButtonColor: '#028284' });
        return;
    }
    $('#modalSelectPOAssign').modal('hide');
    const label = item.po_number
        + (item.description ? ' - ' + item.description : '')
        + ' - ' + (item.is_project ? (item.proyek || '') : (item.supplier_name || ''));
        const newPO = { po_assign_id: item.id, po_number: item.po_number, po_label: label, is_project: item.is_project, project_id: item.project_id || null, available_details: [], selected_details: [] };
    selectedPOItems.push(newPO);

    // Jika PO memiliki project
    if (item.project_id) {
        // Cek apakah user sudah memilih project yang berbeda
        const currentProjectId = $('#project_id').val();
        if (currentProjectId && currentProjectId != item.project_id) {
            Swal.fire({
                title: 'Perhatian!',
                text: 'PO ini memiliki project yang berbeda dengan project yang sudah dipilih. Hapus project terlebih dahulu atau pilih PO yang sesuai dengan project yang dipilih.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            // Remove PO yang baru ditambahkan
            selectedPOItems.pop();
            return;
        }
        $('#is_project').prop('checked', true);
        $('#project_id').val(item.project_id);
        $('#project_display').val(item.proyek || '');
        $('#projectFieldRow').show();
        $('#is_project').prop('disabled', true);
        $('#btnSearchProject').prop('disabled', true).css('cursor', 'not-allowed');
    } else {
        // Jika PO tidak punya project, nonaktifkan dan disable switch Project Terkait
        // serta bersihkan field project yang mungkin sudah dipilih sebelumnya
        $('#is_project').prop('checked', false);
        $('#project_id').val('');
        $('#project_display').val('');
        $('#projectFieldRow').slideUp(300);
        $('#is_project').prop('disabled', true);
        $('#btnSearchProject').prop('disabled', true).css('cursor', 'not-allowed');
    }

    renderSelectedPOItems();
    const poIndex = selectedPOItems.length - 1;
    $.ajax({
        url: '{{ url("/trsmts/api/po-assign-detail") }}/' + item.id,
        type: 'GET',
            success: function(response) {
                selectedPOItems[poIndex].available_details = response.data || [];
                if (response.data && response.data.length > 0) {
                    selectedPOItems[poIndex].selected_details = (response.data || []).map(function(d) {
                        const amountUnit = d.amount_unit || 0;
                        const amountRupiahUnit = d.amount_rupiah_unit || 0;
                        const amountRupiah = amountUnit * amountRupiahUnit;
                        return {
                            detail_kategori_id: d.detail_kategori_id,
                            detail_kategori_unit_id: d.detail_kategori_unit_id || null,
                            spesifikasi_id: d.spesifikasi_id || null,
                            spesifikasi_name: d.spesifikasi_name || null,
                            supplier_name: d.supplier_name || null,
                            brand_name: d.brand_name || null,
                            kategori: d.kategori || '-',
                            detail_kategori: d.detail_kategori || '-',
                            amount_unit: amountUnit,
                            unit: d.unit || '-',
                            amount_rupiah: amountRupiah,
                            amount_rupiah_unit: amountRupiahUnit,
                            gross_amount_rupiah: amountRupiah,
                            // gross_amount_rupiah_unit: amountRupiahUnit
                        };
                    });
                } else {
                    selectedPOItems[poIndex].selected_details = []; // clear selected_details
                    selectedPOItems[poIndex].manual_amount = 0;   // initialize manual amount
                }
                renderSelectedPOItems();

                // Auto-check DP if PO already has DP history
                $.get('{{ url("/trsmts/api/dp-check") }}/' + item.id, function(dpRes) {
                    if (dpRes.success && dpRes.data.has_dp) {
                        $('#is_dp').prop('checked', true);
                        $('#dp_percentage').val(dpRes.data.dp_percentage || '');
                        $('#dp_seq').val(dpRes.data.next_urutan);
                        $('#dpPercentageDiv, #dpSeqDiv').slideDown(300);
                        renderDPSummaryTable();
                        $('#dpSummarySection').slideDown(300);
                    }
                });
            },
        error: function() {
            Swal.fire({ title: 'Error!', text: 'Gagal memuat detail PO', icon: 'error', confirmButtonColor: '#028284' });
        }
    });
}

function renderSelectedPOItems() {
    const $container = $('#poItemsContainer');
    const $empty     = $('#poItemsEmpty');
    $container.find('.po-item-card').remove();
    if (selectedPOItems.length === 0) { $empty.show(); calculateAllPOTotal(); return; }
    $empty.hide();
    selectedPOItems.forEach(function(po, poIdx) {
        let rows = '';
          if (po.selected_details.length === 0) {
              rows = '<tr>'
                  + '<td colspan="11" class="text-center text-muted fst-italic py-2">'
                  + 'tidak ada detail PO'
                  + '</td>'
                  + '</tr>';
          } else {
            po.selected_details.forEach(function(d, dIdx) {
                const supplierName   = d.supplier_name || po.supplier_name || '-';
                const brandName      = d.brand_name || '-';
                const spesifikasiStr = d.spesifikasi_name || '-';
                const amtUnit = formatRupiah(d.amount_unit || 0);
                const amtRupUnit = formatRupiah( d.amount_rupiah_unit || 0);
                const amtRup  = formatRupiah(d.gross_amount_rupiah || d.amount_rupiah || 0);
                rows += '<tr>'
                    + '<td class="text-center"><button type="button" class="btn btn-danger btn-sm" onclick="removeDetailFromPoItem(' + poIdx + ',' + dIdx + ')"><i class="fas fa-trash"></i></button></td>'
                    + '<td class="text-center">' + (dIdx + 1) + '</td>'
                    + '<td>' + d.kategori + '</td>'
                    + '<td>' + d.detail_kategori + '</td>'
                    + '<td>' + supplierName + '</td>'
                    + '<td>' + brandName + '</td>'
                    + '<td>' + spesifikasiStr + '</td>'
                    + '<td class="text-end"><input type="text" class="form-control form-control-sm text-end po-detail-qty" data-po-idx="' + poIdx + '" data-d-idx="' + dIdx + '" value="' + amtUnit + '" placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this);syncQty(this)" onblur="formatInputRupiahOnBlur(this);syncQty(this)"></td>'
                    + '<td class="text-end"><input type="text" class="form-control form-control-sm text-end po-detail-amount-unit" data-po-idx="' + poIdx + '" data-d-idx="' + dIdx + '" value="' + amtRupUnit + '" placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this);syncDetailAmountUnit(this)" onblur="formatInputRupiahOnBlur(this);syncDetailAmountUnit(this)"></td>'
                    + '<td class="text-end"><input type="text" class="form-control form-control-sm text-end po-detail-amount" data-po-idx="' + poIdx + '" data-d-idx="' + dIdx + '" value="' + amtRup + '" placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this);syncDetailAmount(this)" onblur="formatInputRupiahOnBlur(this);syncDetailAmount(this)"></td>'
                    + '<td>' + d.unit + '</td>'
                    + '</tr>';
            });
        }
        const selectedKeys = po.selected_details.map(function(d) {
            return getDetailKey(d.detail_kategori_id, d.spesifikasi_id);
        });
        const hasMore = po.available_details.some(function(d) {
            const key = getDetailKey(d.detail_kategori_id, d.spesifikasi_id);
            return !selectedKeys.includes(key);
        });
        const addBtn  = hasMore ? '<button type="button" class="btn btn-outline-primary btn-sm me-1" onclick="openAddDetailToPoModal(' + poIdx + ')"><i class="fas fa-plus me-1"></i>Tambah Item</button>' : '';
        const card = '<div class="card mb-3 po-item-card">'
            + '<div class="card-header py-2 d-flex justify-content-between align-items-center bg-light">'
            + '<h6 class="mb-0 text-sm"><i class="fas fa-file-contract me-1 text-primary"></i>' + po.po_label + '</h6>'
            + '<div>' + addBtn + '<button type="button" class="btn btn-danger btn-sm" onclick="removePOItem(' + poIdx + ')"><i class="fas fa-times me-1"></i>Hapus PO</button></div>'
            + '</div>'
            + '<div class="card-body p-0"><div class="table-responsive">'
            + '<table class="table table-sm table-bordered mb-0">'
            + '<thead style="background-color:#e9ecef;"><tr>'
            + '<th width="5%" class="text-center">Aksi</th><th width="5%" class="text-center">No</th>'
            + '<th width="15%">Kategori</th><th width="15%">Detail Kategori</th>'
            + '<th width="12%">Supplier</th><th width="10%">Brand</th><th width="12%">Spesifikasi</th>'
            + '<th width="10%" class="text-end">Qty (Unit)</th>'
            + '<th width="13%" class="text-end">Amount Rupiah/Unit</th>'
            + '<th width="13%" class="text-end">Amount (Rp)</th>'
            + '<th width="10%">Unit</th>'
            + '</tr></thead>'
            + '<tbody>' + rows + '</tbody>'
            + '</table></div></div></div>';
        $container.append(card);
    });
    calculateAllPOTotal();
}

function syncDetailAmount(input) {
    const poIdx = parseInt($(input).data('po-idx'));
    const dIdx  = parseInt($(input).data('d-idx'));
    const val   = parseFloat(parseRupiah(input.value)) || 0;
    if (selectedPOItems[poIdx] && selectedPOItems[poIdx].selected_details[dIdx] !== undefined) {
        selectedPOItems[poIdx].selected_details[dIdx].amount_rupiah = val;
        selectedPOItems[poIdx].selected_details[dIdx].gross_amount_rupiah = val;
    }
    calculateAllPOTotal();
}

function syncDetailAmountUnit(input) {
    const poIdx = parseInt($(input).data('po-idx'));
    const dIdx  = parseInt($(input).data('d-idx'));
    const val   = parseFloat(parseRupiah(input.value)) || 0;
    if (selectedPOItems[poIdx] && selectedPOItems[poIdx].selected_details[dIdx] !== undefined) {
        selectedPOItems[poIdx].selected_details[dIdx].amount_rupiah_unit = val;
        selectedPOItems[poIdx].selected_details[dIdx].gross_amount_rupiah_unit = val;
        // Calculate Amount (Rp) = Qty (Unit) * Amount Rupiah/Unit
        const qty = selectedPOItems[poIdx].selected_details[dIdx].amount_unit || 0;
        const calculatedAmount = qty * val;
        selectedPOItems[poIdx].selected_details[dIdx].amount_rupiah = calculatedAmount;
        selectedPOItems[poIdx].selected_details[dIdx].gross_amount_rupiah = calculatedAmount;
        // Update the Amount (Rp) input field
        const amountInput = $(`input.po-detail-amount[data-po-idx="${poIdx}"][data-d-idx="${dIdx}"]`);
        amountInput.val(formatRupiah(calculatedAmount));
    }
    calculateAllPOTotal();
}

function syncQty(input) {
    const poIdx = parseInt($(input).data('po-idx'));
    const dIdx  = parseInt($(input).data('d-idx'));
    const val   = parseFloat(parseRupiah(input.value)) || 0;
    if (selectedPOItems[poIdx] && selectedPOItems[poIdx].selected_details[dIdx] !== undefined) {
        selectedPOItems[poIdx].selected_details[dIdx].amount_unit = val;
        // Calculate Amount (Rp) = Qty (Unit) * Amount Rupiah/Unit
        const amtUnit = selectedPOItems[poIdx].selected_details[dIdx].amount_rupiah_unit || 0;
        const calculatedAmount = val * amtUnit;
        selectedPOItems[poIdx].selected_details[dIdx].amount_rupiah = calculatedAmount;
        selectedPOItems[poIdx].selected_details[dIdx].gross_amount_rupiah = calculatedAmount;
        // Update the Amount (Rp) input field
        const amountInput = $(`input.po-detail-amount[data-po-idx="${poIdx}"][data-d-idx="${dIdx}"]`);
        amountInput.val(formatRupiah(calculatedAmount));
    }
    calculateAllPOTotal();
}
function calculateAllPOTotal() {
    let totalGross = 0;
    selectedPOItems.forEach(function(po) {
        po.selected_details.forEach(function(d) { totalGross += parseFloat(d.gross_amount_rupiah || d.amount_rupiah) || 0; });
    });
    selectedNonPOItems.forEach(function(item) {
        totalGross += parseFloat(item.gross_amount_rupiah || item.amount_rupiah) || 0;
    });

    const grossFormatted = totalGross > 0 ? formatRupiah(totalGross.toFixed(2)) : '';
    $('#gross_amount').val(grossFormatted);

    const diskonPersen = parseFloat($('#diskon_persen').val()) || 0;
    const previousGross = parseAmount($('#gross_amount').data('previous-gross')) || totalGross;
    let diskonNominal = 0;
    if (diskonPersen > 0 && totalGross > 0) {
        diskonNominal = totalGross * (diskonPersen / 100);
    } else {
        diskonNominal = parseAmount($('#diskon').val()) || 0;
    }
    diskonNominal = Math.max(0, diskonNominal);
    $('#diskon').val(formatRupiah(diskonNominal.toFixed(2)));

    // Potongan bon tetap seperti nilai yang diinput, tidak perlu recalculate
    const potonganBonNominal = parseAmount($('#potongan_bon').val()) || 0;

    const dpp = Math.max(0, totalGross - potonganBonNominal - diskonNominal);
    $('#amount').val(formatRupiah(dpp.toFixed(2)));
    currentAmount = totalGross;

    if (totalGross > 0) {
        $('#gross_amount').data('previous-gross', totalGross);
    }

        const pphPersen = parseFloat($('#pph_persen').val()) || 0;
        const ppnPersen = parseFloat($('#ppn_persen').val()) || 0;
        const pphId = $('#pph_id').val();
        const ppnId = $('#ppn_id').val();
        if (pphId && pphPersen > 0 && dpp > 0) {
            const pphNominal = dpp * (pphPersen / 100);
            $('#pph_amount').val(formatRupiah(pphNominal.toFixed(2)));
        } else if (!pphId) {
            // preserve existing pph_amount from DB
        }
        if (ppnId && ppnPersen > 0 && dpp > 0) {
            const ppnNominal = dpp * (ppnPersen / 100);
            $('#ppn_amount').val(formatRupiah(ppnNominal.toFixed(2)));
        } else if (!ppnId) {
            // preserve existing ppn_amount from DB
        }

    // Auto-calc PPh from Net Amount using master rate (tanpa perlu pilih DPP dahulu)
        const pphRate = parseFloat($('#pph_rate').val()) || 0;
        if (pphRate > 0 && dpp > 0) {
            const pphNominal = dpp * (pphRate / 100);
            $('#pph_amount').val(formatRupiah(pphNominal.toFixed(2)));
        }

    // Recalculate DPP/PPh/PPN from stored master values when details change
        recalculateFromMaster();
}


function syncManualAmount(input) {
    const poIdx = parseInt($(input).data('po-idx'));
    const val   = parseFloat(parseRupiah(input.value)) || 0;
    if (selectedPOItems[poIdx]) {
        selectedPOItems[poIdx].manual_amount = val;
    }
    calculateAllPOTotal();
    updateAmountFieldReadonlyState();
}

function updateAmountFieldReadonlyState() {
    // Amount field is always readonly - total calculated from PO details + non-PO items
    $('#amount').prop('readonly', true);
}

// ============================================
// NON-PO ITEM FUNCTIONS
// ============================================

function addNonPOItemRow() {
    selectedNonPOItems.push({
        keterangan: '',
        amount_unit: 0,
        amount_rupiah_unit: 0,
        amount_rupiah: 0,
        gross_amount_rupiah: 0,
        gross_amount_rupiah_unit: 0
    });
    renderNonPOTable();
    updateAmountFieldReadonlyState();
}

function renderNonPOTable() {
    const $tbody = $('#nonPOTableBody');
    const $empty = $('#nonPOEmptyRow');
    
    // Remove existing non-PO rows (not the empty row)
    $tbody.find('tr.nonpo-row').remove();
    
    if (selectedNonPOItems.length === 0) {
        $empty.show();
        calculateAllPOTotal();
        updateAmountFieldReadonlyState();
        return;
    }
    
    $empty.hide();
    
    selectedNonPOItems.forEach(function(item, idx) {
        const keterangan = item.keterangan || '';
        const amtUnit = formatRupiah(item.amount_unit || 0);
        const amtRupUnit = item.amount_rupiah_unit > 0 ? formatRupiah(item.gross_amount_rupiah_unit || item.amount_rupiah_unit) : '';
        const gross = parseFloat(item.gross_amount_rupiah || item.amount_rupiah) || 0;
        
        const row = '<tr class="nonpo-row">'
            + '<td class="text-center"><button type="button" class="btn btn-danger btn-sm" onclick="removeNonPOItem(' + idx + ')"><i class="fas fa-trash"></i></button></td>'
            + '<td class="text-center">' + (idx + 1) + '</td>'
            + '<td><input type="text" class="form-control form-control-sm nonpo-keterangan" data-idx="' + idx + '" value="' + keterangan.replace(/"/g, '"') + '" placeholder="Masukkan keterangan" maxlength="100" onkeyup="syncNonPOKeterangan(this)" onchange="syncNonPOKeterangan(this)"></td>'
            + '<td class="text-end"><input type="text" class="form-control form-control-sm text-end nonpo-amount-unit" data-idx="' + idx + '" value="' + amtUnit + '" placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this);syncNonPOAmountUnit(this)" onblur="formatInputRupiahOnBlur(this);syncNonPOAmountUnit(this)"></td>'
            + '<td class="text-end"><input type="text" class="form-control form-control-sm text-end nonpo-amount-rupiah-unit" data-idx="' + idx + '" value="' + amtRupUnit + '" placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this);syncNonPORupiahUnit(this)" onblur="formatInputRupiahOnBlur(this);syncNonPORupiahUnit(this)"></td>'
            + '<td class="text-end"><input type="text" class="form-control form-control-sm text-end nonpo-amount-rupiah" data-idx="' + idx + '" value="' + formatRupiah(gross) + '" placeholder="0,00" readonly maxlength="19"></td>'
            + '</tr>';
        
        $tbody.append(row);
    });
    
    calculateAllPOTotal();
}

function syncNonPOKeterangan(input) {
    const idx = parseInt($(input).data('idx'));
    if (selectedNonPOItems[idx] !== undefined) {
        selectedNonPOItems[idx].keterangan = input.value;
    }
}

function syncNonPOAmountUnit(input) {
    const idx = parseInt($(input).data('idx'));
    const val = parseFloat(parseRupiah(input.value)) || 0;
    if (selectedNonPOItems[idx] !== undefined) {
        selectedNonPOItems[idx].amount_unit = val;
        // Recalculate amount_rupiah = qty * rupiah/unit
        const rupiahUnit = selectedNonPOItems[idx].amount_rupiah_unit || 0;
        const calculated = val * rupiahUnit;
        selectedNonPOItems[idx].amount_rupiah = calculated;
        selectedNonPOItems[idx].gross_amount_rupiah = calculated;
        // Update readonly amount field
        const rupiahInput = $(`input.nonpo-amount-rupiah[data-idx="${idx}"]`);
        rupiahInput.val(formatRupiah(calculated));
    }
    calculateAllPOTotal();
}

function syncNonPORupiahUnit(input) {
    const idx = parseInt($(input).data('idx'));
    const val = parseFloat(parseRupiah(input.value)) || 0;
    if (selectedNonPOItems[idx] !== undefined) {
        selectedNonPOItems[idx].amount_rupiah_unit = val;
        selectedNonPOItems[idx].gross_amount_rupiah_unit = val;
        // Recalculate amount_rupiah = qty * rupiah/unit
        const qty = selectedNonPOItems[idx].amount_unit || 0;
        const calculated = qty * val;
        selectedNonPOItems[idx].amount_rupiah = calculated;
        selectedNonPOItems[idx].gross_amount_rupiah = calculated;
        // Update readonly amount field
        const rupiahInput = $(`input.nonpo-amount-rupiah[data-idx="${idx}"]`);
        rupiahInput.val(formatRupiah(calculated));
    }
    calculateAllPOTotal();
}

function removeNonPOItem(idx) {
    Swal.fire({
        title: 'Apakah anda yakin?',
        text: 'Detail ini akan dihapus secara permanen!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            selectedNonPOItems.splice(idx, 1);
            renderNonPOTable();
            updateAmountFieldReadonlyState();
            Swal.fire({
                title: 'Terhapus!',
                text: 'Detail berhasil dihapus.',
                icon: 'success',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}


function removeDetailFromPoItem(poIdx, dIdx) {
    const po = selectedPOItems[poIdx];
    if (!po) return;
    if (po.selected_details.length <= 1) {
        Swal.fire({ title: 'Tidak Dapat Dihapus!', text: 'Minimal harus ada satu item detail', icon: 'warning', confirmButtonColor: '#028284' });
        return;
    }
    Swal.fire({
        title: 'Apakah anda yakin?',
        text: 'Item detail ini akan dihapus secara permanen!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            po.selected_details.splice(dIdx, 1);
            renderSelectedPOItems();
            Swal.fire({
                title: 'Terhapus!',
                text: 'Item detail berhasil dihapus.',
                icon: 'success',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}

function removePOItem(poIdx) {
    Swal.fire({
        title: 'Apakah anda yakin?',
        text: 'PO beserta semua detailnya akan dihapus secara permanen!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            selectedPOItems.splice(poIdx, 1);
            renderSelectedPOItems();
            updateAmountFieldReadonlyState();
            recheckDPAfterRemove();

            // Jika semua PO dihapus, reset is_project switch ke aturan form
            if (selectedPOItems.length === 0) {
                // Cek apakah project masih terisi, jika ya maka switch tetap checked
                if (!$('#project_id').val()) {
                    $('#is_project').prop('checked', false);
                }
                updateIsProjectSwitchState();
            }

            Swal.fire({
                title: 'Terhapus!',
                text: 'PO berhasil dihapus.',
                icon: 'success',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}

function recheckDPAfterRemove() {
    if (selectedPOItems.length === 0) {
        $('#is_dp').prop('checked', false);
        $('#dp_percentage, #dp_seq').val('');
        $('#dpPercentageDiv, #dpSeqDiv').slideUp(300);
        $('#dpSummarySection').hide();
        return;
    }
    // Check if any remaining PO has DP history
    const poId = selectedPOItems[0].po_assign_id;
    $.get('{{ url("/trsmts/api/dp-check") }}/' + poId, function(dpRes) {
        if (!dpRes.success || !dpRes.data.has_dp) {
            $('#is_dp').prop('checked', false);
            $('#dp_percentage, #dp_seq').val('');
            $('#dpPercentageDiv, #dpSeqDiv').slideUp(300);
            $('#dpSummarySection').hide();
        }
    });
}

function openAddDetailToPoModal(poIdx) {
    const po = selectedPOItems[poIdx];
    if (!po) return;
    const selectedKeys    = po.selected_details.map(function(d) { return getDetailKey(d.detail_kategori_id, d.spesifikasi_id); });
    const availableItems = po.available_details.filter(function(d) {
        return !selectedKeys.includes(getDetailKey(d.detail_kategori_id, d.spesifikasi_id));
    });
    if (availableItems.length === 0) {
        Swal.fire({ title: 'Tidak Ada Opsi!', text: 'Semua item sudah ditambahkan', icon: 'info', confirmButtonColor: '#028284' });
        return;
    }
    let optionsHtml = '<option value="">-- Pilih Item --</option>';
    availableItems.forEach(function(item) {
        optionsHtml += '<option value="' + item.detail_kategori_id + '" data-spesifikasi-id="' + (item.spesifikasi_id || '') + '" data-supplier-name="' + (item.supplier_name || '') + '" data-brand-name="' + (item.brand_name || '') + '" data-spesifikasi-name="' + (item.spesifikasi_name || '') + '" data-kategori="' + (item.kategori || '') + '" data-detail-kategori="' + (item.detail_kategori || '') + '" data-amount-unit="' + (item.amount_unit || 0) + '" data-unit="' + (item.unit || '-') + '" data-default-amount-rupiah-unit="' + (item.amount_rupiah_unit || 0) + '">'
            + (item.kategori || '-') + ' - ' + (item.detail_kategori || '-') + '</option>';
    });
    Swal.fire({
        title: 'Tambah Item Detail PO',
        html: '<select id="swalPODetailSelect" class="form-select">' + optionsHtml + '</select>',
        showCancelButton: true, confirmButtonText: 'Tambah', cancelButtonText: 'Batal', confirmButtonColor: '#028284',
        preConfirm: function() {
            const select = document.getElementById('swalPODetailSelect');
            const opt = select.options[select.selectedIndex];
            if (!opt.value) { Swal.showValidationMessage('Silakan pilih item terlebih dahulu'); return false; }
            const amountUnit = parseFloat(opt.dataset.amountUnit) || 0;
            const defaultAmountRupiahUnit = parseFloat(opt.dataset.defaultAmountRupiahUnit) || 0;
            const amountRupiah = amountUnit * defaultAmountRupiahUnit;
            return {
                detail_kategori_id: parseInt(opt.value),
                spesifikasi_id: opt.dataset.spesifikasiId ? parseInt(opt.dataset.spesifikasiId) : null,
                supplier_name: opt.dataset.supplierName || null,
                brand_name: opt.dataset.brandName || null,
                spesifikasi_name: opt.dataset.spesifikasiName || null,
                kategori: opt.dataset.kategori,
                detail_kategori: opt.dataset.detailKategori,
                amount_unit: amountUnit,
                unit: opt.dataset.unit,
                amount_rupiah: amountRupiah,
                amount_rupiah_unit: defaultAmountRupiahUnit,
                gross_amount_rupiah: amountRupiah,
                gross_amount_rupiah_unit: defaultAmountRupiahUnit
            };
        }
    }).then(function(result) {
        if (result.isConfirmed && result.value) { selectedPOItems[poIdx].selected_details.push(result.value); renderSelectedPOItems(); }
    });
}

function openSelectPOAssignModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        poAssignCurrentSearch = '';
        $('#searchPOAssign').val('');
        $('#modalSelectPOAssign').modal('show');
        loadPOAssign(1);
        setTimeout(function() { $('#searchPOAssign').focus(); }, 150);
    }, 300);
}

// Render initial tax labels instantly from server-injected master data
function renderInitialTaxLabelsFromServer() {
    if (dppMaster) {
        $('#dppNameLabel').html('<span class="text-primary fw-semibold">(' + dppMaster.name + ')</span>');
        $('#dpp_numerator').val(dppMaster.dpp_numerator);
        $('#dpp_denominator').val(dppMaster.dpp_denominator);
    }
    
    if (pphMaster) {
        $('#pphRateLabel').html('<span class="text-primary fw-semibold">(' + pphMaster.rate + '%)</span>');
        $('#pph_rate').val(pphMaster.rate);
    }
    
    if (ppnMaster) {
        $('#ppnRateLabel').html('<span class="text-primary fw-semibold">(' + ppnMaster.rate + '%)</span>');
        $('#ppn_rate').val(ppnMaster.rate);
    }
}

// Load initial saldo data
function loadInitialSaldoData() {
    // Fetch saldo awal untuk rekening yang sudah dipilih
    if (initialRekeningId) {
        $.ajax({
            url: `{{ url("/trsmts/api/saldo-awal") }}/${initialRekeningId}`,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    currentSaldoAwal = parseFloat(response.data.saldo_awal) || 0;
                    
                }
            },
            error: function(xhr) {
                console.error('Error fetching initial saldo awal:', xhr);
            }
        });
    }
    
    // Fetch info kode mutasi yang sudah dipilih
    if (initialKodeMutasiId) {
        $.ajax({
            url: `{{ url("/trsmts/api/kode-mutasi-info") }}/${initialKodeMutasiId}`,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    currentIsIn = response.data.is_in;
                    
                    // Auto-set is_credit berdasarkan is_in
                    // Jika is_in = true (transaksi masuk), maka is_credit = false
                    // Jika is_in = false (transaksi keluar), maka is_credit = true
                    $('#is_credit').prop('checked', !currentIsIn);
                    updateMutasiCounterpartyFields();
                }
            },
            error: function(xhr) {
                console.error('Error fetching initial kode mutasi info:', xhr);
            }
        });
    }
}


// Select Project
function selectProject(id, proyek, no_spk) {
    $('#project_id').val(id);
    $('#project_display').val(`${proyek}`);
    $('#modalSelectProject').modal('hide');

    // Jika sudah ada PO yang dipilih, cek apakah PO tersebut punya project
    if (selectedPOItems.length > 0) {
        const poHasProject = selectedPOItems.some(function(po) { return po.project_id; });
        if (poHasProject) {
            Swal.fire({
                title: 'Perhatian!',
                text: 'Tidak bisa memilih Project karena sudah ada PO yang memiliki project. Hapus PO tersebut terlebih dahulu untuk mengganti project.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            // Reset project selection
            $('#project_id').val('');
            $('#project_display').val('');
            return;
        }
    }

    // Auto-check is_project (switch tetap enabled, akan disable setelah PO dipilih)
    $('#is_project').prop('checked', true);
    $('#projectFieldRow').show();
    // Reload PO Assign dengan filter project terbaru
    loadPOAssign(1);
}

// Select Kategori
function selectKategori(id, code, detail_kategori) {
    $('#detail_kategori_id').val(id);
    $('#kategori_display').val(`${code} - ${detail_kategori}`);
    $('#modalSelectKategori').modal('hide');
}

function selectSupplier(id, name) {
    $('#supplier_id').val(id);
    $('#supplier_display').val(name);
    
    // Clear supplier bank selection
    clearSuppliersBank();
    
    // Update hint
    $('#supplierBankHint').text('Klik tombol search untuk memilih rekening supplier');
    
    $('#modalSelectSupplier').modal('hide');
}

function selectSuppliersBank(id, name) {
    $('#supplier_bank_id').val(id);
    $('#supplier_bank_display').val(name);
    $('#modalSelectSuppliersBank').modal('hide');
}

// Open Modal Add Functions
function openSupplierBankModal()
{
    $('.modal').modal('hide');

    setTimeout(function() {

        $('#modalSelectSupplierBank').modal('show');

        $('#searchSupplierBank').val('').focus();

        renderSupplierBankTable(supplierBankData);

    }, 300);
}
function openAddProjectModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalAddProject').modal('show');
        $('#formAddProject')[0].reset();
        $('.form-control').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }, 300);
}

function openAddKategoriModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalAddKategori').modal('show');
        $('#formAddKategori')[0].reset();
        $('.form-control').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }, 300);
}

function openAddRekeningModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalAddRekening').modal('show');
        $('#formAddRekening')[0].reset();
        $('.form-control').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }, 300);
}

function openAddKodeMutasiModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalAddKodeMutasi').modal('show');
        $('#formAddKodeMutasi')[0].reset();
        $('.form-control, .form-check-input').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }, 300);
}

function openAddSupplierModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalAddSupplier').modal('show');
        $('#formAddSupplier')[0].reset();
        $('.form-control').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }, 300);
}

function openAddSuppliersBankModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalAddSuppliersBank').modal('show');
        $('#formAddSuppliersBank')[0].reset();
        $('.form-control').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }, 300);
}

function clearProject() {
    $('#project_id').val('');
    $('#project_display').val('');
}

function clearKategori() {
    $('#detail_kategori_id').val('');
    $('#kategori_display').val('');
}

function clearSupplier() {
    $('#supplier_id').val('');
    $('#supplier_display').val('');
    clearSuppliersBank();
    $('#supplierBankHint').text('Pilih supplier terlebih dahulu');
}

function clearSuppliersBank() {
    $('#supplier_bank_id').val('');
    $('#supplier_bank_display').val('');
}

// Save Project
function saveProject() {
    $('.form-control').removeClass('is-invalid');
    $('.invalid-feedback').text('');
    
    $('#btnSaveProject').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

    const formData = {
        proyek: $('#add_proyek').val(),
        lokasi: $('#add_lokasi').val(),
        pekerjaan: $('#add_pekerjaan').val(),
        pemilik: $('#add_pemilik').val(),
        no_spk: $('#add_no_spk').val(),
        sales: $('#add_sales').val(),
        pv_capacity: $('#add_pv_capacity').val(),
        inverter_capacity: $('#add_inverter_capacity').val(),
        forex: $('#add_forex').val()
    };

    $.ajax({
        url: '{{ url("/trsmts/api/projects/store") }}',
        type: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonColor: '#028284',
                    timer: 1500
                });

                // Reload projects
                loadProjects();

                // Auto select
                selectProject(response.data.id, response.data.proyek, response.data.no_spk);

                $('#modalAddProject').modal('hide');
                $('#formAddProject')[0].reset();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors || {};
                $.each(errors, function(field, messages) {
                    $(`#add_${field}`).addClass('is-invalid');
                    $(`#error-add-${field}`).text(messages[0]);
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            }
        },
        complete: function() {
            $('#btnSaveProject').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
        }
    });
}

// Save Kategori
function saveKategori() {
    $('.form-control').removeClass('is-invalid');
    $('.invalid-feedback').text('');
    
    $('#btnSaveKategori').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

    const formData = {
        kategori_id: $('#add_kategori_id').val(),
        code: $('#add_code').val(),
        detail_kategori: $('#add_detail_kategori').val(),
        supplier_id: $('#add_supplier_id').val() || null,
        brand_id: $('#add_brand_id').val() || null,
        spesifikasi_id: $('#add_spesifikasi_id').val() || null
    };

    $.ajax({
        url: '{{ url("/trsmts/api/detail-kategori/store") }}',
        type: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonColor: '#028284',
                    timer: 1500
                });

                // Reload kategori
                loadDetailKategori();

                // Auto select
                selectKategori(response.data.id, response.data.code, response.data.detail_kategori);

                $('#modalAddKategori').modal('hide');
                $('#formAddKategori')[0].reset();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors || {};
                $.each(errors, function(field, messages) {
                    $(`#add_${field}`).addClass('is-invalid');
                    $(`#error-add-${field}`).text(messages[0]);
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            }
        },
        complete: function() {
            $('#btnSaveKategori').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
        }
    });
}

// Save Rekening
function saveRekening() {
    $('.form-control').removeClass('is-invalid');
    $('.invalid-feedback').text('');
    
    $('#btnSaveRekening').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

    const formData = {
        kode_bank: $('#add_kode_bank').val(),
        nama_bank: $('#add_nama_bank').val(),
        nomor_akun: $('#add_nomor_akun').val(),
        nama_akun: $('#add_nama_akun').val(),
        saldo_awal: $('#add_saldo_awal').val(),
        tgl_saldo_awal: $('#add_tgl_saldo_awal').val()
    };

    $.ajax({
        url: '{{ url("/trsmts/api/rekening/store") }}',
        type: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonColor: '#028284',
                    timer: 1500
                });

                // Auto select
                const displayText = `${response.data.nama_bank} - ${response.data.nomor_akun}`;
                selectRekening(response.data.id, displayText);

                $('#modalAddRekening').modal('hide');
                $('#formAddRekening')[0].reset();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors || {};
                $.each(errors, function(field, messages) {
                    $(`#add_${field}`).addClass('is-invalid');
                    $(`#error-add-${field}`).text(messages[0]);
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            }
        },
        complete: function() {
            $('#btnSaveRekening').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
        }
    });
}

// Save Kode Mutasi
function saveKodeMutasi() {
    $('.form-control, .form-check-input').removeClass('is-invalid');
    $('.invalid-feedback').text('');
    
    $('#btnSaveKodeMutasi').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

    const formData = {
        kode_mutasi: $('#add_kode_mutasi').val(),
        is_in: $('input[name="is_in"]:checked').val()
    };

    $.ajax({
        url: '{{ url("/trsmts/api/kode-mutasi/store") }}',
        type: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonColor: '#028284',
                    timer: 1500
                });

                // Auto select
                const jenisMutasi = response.data.is_in == 1 ? 'Mutasi Masuk' : 'Mutasi Keluar';
                const displayText = `${response.data.kode_mutasi} - ${jenisMutasi}`;
                selectKodeMutasi(response.data.id, displayText);

                $('#modalAddKodeMutasi').modal('hide');
                $('#formAddKodeMutasi')[0].reset();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors || {};
                $.each(errors, function(field, messages) {
                    $(`#add_${field}`).addClass('is-invalid');
                    $(`#error-add-${field}`).text(messages[0]);
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            }
        },
        complete: function() {
            $('#btnSaveKodeMutasi').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
        }
    });
}

// Save Supplier
function saveSupplier() {
    $('.form-control').removeClass('is-invalid');
    $('.invalid-feedback').text('');
    
    $('#btnSaveSupplier').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

    const formData = {
        supplier_name: $('#add_supplier_name').val(),
        supplier_type: $('#add_supplier_type').val()
    };

    $.ajax({
        url: '{{ url("/trsmts/api/supplier/store") }}',
        type: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonColor: '#028284',
                    timer: 1500
                });

                // Auto select
                selectSupplier(response.data.id, response.data.supplier_name);

                $('#modalAddSupplier').modal('hide');
                $('#formAddSupplier')[0].reset();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors || {};
                $.each(errors, function(field, messages) {
                    $(`#add_${field}`).addClass('is-invalid');
                    $(`#error-add-${field}`).text(messages[0]);
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            }
        },
        complete: function() {
            $('#btnSaveSupplier').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
        }
    });
}

// Save Suppliers Bank
function saveSuppliersBank() {
    $('.form-control').removeClass('is-invalid');
    $('.invalid-feedback').text('');
    
    $('#btnSaveSuppliersBank').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

    // Ambil supplier_id dari field yang sudah dipilih
    const supplierId = $('#supplier_id').val();
    
    if (!supplierId) {
        Swal.fire({
            title: 'Peringatan!',
            text: 'Silakan pilih supplier terlebih dahulu',
            icon: 'warning',
            confirmButtonColor: '#028284'
        });
        $('#btnSaveSuppliersBank').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
        return;
    }

    const formData = {
        supplier_id: supplierId,
        kode_bank: $('#add_vb_kode_bank').val(),
        nama_bank: $('#add_vb_nama_bank').val(),
        nomor_akun: $('#add_vb_nomor_akun').val(),
        nama_akun: $('#add_vb_nama_akun').val()
    };

    $.ajax({
        url: '{{ url("/trsmts/api/supplier-bank/store") }}',
        type: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonColor: '#028284',
                    timer: 1500
                });

                // Auto select
                const displayText = `${response.data.nama_bank} - ${response.data.nomor_akun}`;
                selectSuppliersBank(response.data.id, displayText);

                $('#modalAddSuppliersBank').modal('hide');
                $('#formAddSuppliersBank')[0].reset();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors || {};
                $.each(errors, function(field, messages) {
                    const fieldName = field.replace('supplier_id', 'vb_supplier_id');
                    $(`#add_${fieldName}`).addClass('is-invalid');
                    $(`#error-add-${fieldName}`).text(messages[0]);
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            }
        },
        complete: function() {
            $('#btnSaveSuppliersBank').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
        }
    });
}

// ============================================
// MASTER DATA FOR TAX CALCULATION (DPP, PPh, PPN)
// ============================================
let dppData = [];
let pphData = [];
let ppnData = [];
let isLoadingDPP = false;
let isLoadingPPh = false;
let isLoadingPPN = false;

function loadDPPData() {
    isLoadingDPP = true;
    renderDPPTable([]);
    $.ajax({
        url: '{{ url("/trsmts/api/dpp-data") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) dppData = response.data;
        },
        complete: function() {
            isLoadingDPP = false;
            renderDPPTable(dppData);
        }
    });
}

function loadPPhData() {
    isLoadingPPh = true;
    renderPPhTable([]);
    $.ajax({
        url: '{{ url("/trsmts/api/pph-data") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) pphData = response.data;
        },
        complete: function() {
            isLoadingPPh = false;
            renderPPhTable(pphData);
        }
    });
}

function loadPPNData() {
    isLoadingPPN = true;
    renderPPNTable([]);
    $.ajax({
        url: '{{ url("/trsmts/api/ppn-data") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) ppnData = response.data;
        },
        complete: function() {
            isLoadingPPN = false;
            renderPPNTable(ppnData);
        }
    });
}

function renderDPPTable(data) {
    const tbody = $('#dppTableBody');
    tbody.empty();
    if (isLoadingDPP) {
        tbody.html('<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="5" class="text-center">Tidak ada data DPP</td></tr>');
        return;
    }
    data.forEach(function(item, index) {
        tbody.append('<tr><td><button type="button" class="btn btn-sm btn-primary" onclick="selectDPP(' + item.id + ', \'' + item.name.replace(/'/g, "\\'") + '\', ' + item.dpp_numerator + ', ' + item.dpp_denominator + ')">Pilih</button></td><td class="text-center">' + (index + 1) + '</td><td>' + item.name + '</td><td class="text-center">' + item.dpp_numerator + '</td><td class="text-center">' + item.dpp_denominator + '</td></tr>');
    });
}

function renderPPhTable(data) {
    const tbody = $('#pphTableBody');
    tbody.empty();
    if (isLoadingPPh) {
        tbody.html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="4" class="text-center">Tidak ada data PPh</td></tr>');
        return;
    }
    data.forEach(function(item, index) {
        tbody.append('<tr><td><button type="button" class="btn btn-sm btn-primary" onclick="selectPPh(' + item.id + ', \'' + item.name.replace(/'/g, "\\'") + '\', ' + item.rate + ')">Pilih</button></td><td class="text-center">' + (index + 1) + '</td><td>' + item.name + '</td><td class="text-center">' + item.rate + '%</td></tr>');
    });
}

function renderPPNTable(data) {
    const tbody = $('#ppnTableBody');
    tbody.empty();
    if (isLoadingPPN) {
        tbody.html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="4" class="text-center">Tidak ada data PPN</td></tr>');
        return;
    }
    data.forEach(function(item, index) {
        tbody.append('<tr><td><button type="button" class="btn btn-sm btn-primary" onclick="selectPPN(' + item.id + ', \'' + item.name.replace(/'/g, "\\'") + '\', ' + item.rate + ')">Pilih</button></td><td class="text-center">' + (index + 1) + '</td><td>' + item.name + '</td><td class="text-center">' + item.rate + '%</td></tr>');
    });
}

function openSelectDPPModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        loadDPPData();
        $('#modalSelectDPP').modal('show');
        $('#searchDPP').val('').focus();
    }, 300);
}

function openSelectPPhModal() {
    
    $('.modal').modal('hide');
    setTimeout(function() {
        loadPPhData();
        $('#modalSelectPPh').modal('show');
        $('#searchPPh').val('').focus();
    }, 300);
}

function openSelectPPNModal() {
    const dppId = $('#dpp_id').val();
    const dpp = parseAmount($('#amount').val());
    if (!dppId || isNaN(dpp) || dpp <= 0) {
        Swal.fire({ title: 'Perhatian!', text: 'Pilih DPP terlebih dahulu sebelum memilih PPN.', icon: 'warning', confirmButtonColor: '#028284' });
        return;
    }
    $('.modal').modal('hide');
        setTimeout(function() {
            loadPPNData();
            $('#modalSelectPPN').modal('show');
            $('#searchPPN').val('').focus();
        }, 300);
}

function selectDPP(id, name, numerator, denominator) {
    $('#dpp_id').val(id);
    $('#dpp_numerator').val(numerator);
    $('#dpp_denominator').val(denominator);
    $('#dppNameLabel').html('<span class="text-primary fw-semibold">(' + name + ')</span>');
    const netAmount = parseAmount($('#amount').val()) || 0;
    if (numerator > 0 && denominator > 0 && netAmount > 0) {
        const dppAmount = netAmount * (numerator / denominator);
        $('#dpp_amount').val(formatRupiah(dppAmount.toFixed(2)));
    } else {
        $('#dpp_amount').val('');
    }
    $('#modalSelectDPP').modal('hide');
    recalculateTaxFromDPP();
}

function selectPPh(id, name, rate) {
    $('#pph_id').val(id);
    $('#pph_rate').val(rate);
    $('#pphRateLabel').html('<span class="text-primary fw-semibold">(' + rate + '%)</span>');
    const netAmount = parseAmount($('#amount').val()) || 0;
    if (rate > 0 && netAmount > 0) {
        const pphAmount = netAmount * (rate / 100);
        $('#pph_amount').val(formatRupiah(pphAmount.toFixed(2)));
    } else {
        $('#pph_amount').val('');
    }
    $('#modalSelectPPh').modal('hide');
}

function selectPPN(id, name, rate) {
    $('#ppn_id').val(id);
    $('#ppn_rate').val(rate);
    $('#ppnRateLabel').html('<span class="text-primary fw-semibold">(' + rate + '%)</span>');
    const dppAmount = parseAmount($('#dpp_amount').val()) || 0;
    if (rate > 0 && dppAmount > 0) {
        const ppnAmount = dppAmount * (rate / 100);
        $('#ppn_amount').val(formatRupiah(ppnAmount.toFixed(2)));
    } else {
        $('#ppn_amount').val('');
    }
    $('#modalSelectPPN').modal('hide');
}

// Recalculate DPP from stored master values (called after net amount changes)
function recalculateFromMaster() {
    const dppId = $('#dpp_id').val();
    if (dppId) {
        const numerator = parseInt($('#dpp_numerator').val()) || 1;
        const denominator = parseInt($('#dpp_denominator').val()) || 1;
        const netAmount = parseAmount($('#amount').val()) || 0;
        if (numerator > 0 && denominator > 0 && netAmount > 0) {
            const dppAmount = netAmount * (numerator / denominator);
            $('#dpp_amount').val(formatRupiah(dppAmount.toFixed(2)));
            recalculateTaxFromDPP();
        }
    }
}

function recalculateTaxFromDPP() {
    const netAmount = parseAmount($('#amount').val()) || 0;
    const dppAmount = parseAmount($('#dpp_amount').val()) || 0;
    const pphId = $('#pph_id').val();
    const ppnId = $('#ppn_id').val();

    const pphRate = parseFloat($('#pph_rate').val()) || 0;
    if (pphId && pphRate > 0 && netAmount > 0) {
        const pphAmount = netAmount * (pphRate / 100);
        $('#pph_amount').val(formatRupiah(pphAmount.toFixed(2)));
    } else if (!pphId) {
        // preserve existing pph_amount from DB
    }

    const ppnRate = parseFloat($('#ppn_rate').val()) || 0;
    if (ppnId && ppnRate > 0 && dppAmount > 0) {
        const ppnAmount = dppAmount * (ppnRate / 100);
        $('#ppn_amount').val(formatRupiah(ppnAmount.toFixed(2)));
    } else if (!ppnId) {
        // preserve existing ppn_amount from DB
    }
}

// Override calculateFinalAmount to recalculate DPP/PPh/PPN from stored values
const originalCalculateFinalAmount = window.calculateFinalAmount;
window.calculateFinalAmount = function() {
    if (typeof originalCalculateFinalAmount === 'function') {
        originalCalculateFinalAmount();
    }
    const dppId = $('#dpp_id').val();
    if (dppId) {
        const numerator = parseInt($('#dpp_numerator').val()) || 1;
        const denominator = parseInt($('#dpp_denominator').val()) || 1;
        const netAmount = parseAmount($('#amount').val()) || 0;
        if (numerator > 0 && denominator > 0 && netAmount > 0) {
            const dppAmount = netAmount * (numerator / denominator);
            $('#dpp_amount').val(formatRupiah(dppAmount.toFixed(2)));
            recalculateTaxFromDPP();
        }
    }
};

$(document).on('keyup', '#searchDPP', function() {
    const search = $(this).val().toLowerCase();
    const filtered = dppData.filter(function(item) {
        return item.name.toLowerCase().includes(search);
    });
    renderDPPTable(filtered);
});

$(document).on('keyup', '#searchPPh', function() {
    const search = $(this).val().toLowerCase();
    const filtered = pphData.filter(function(item) {
        return item.name.toLowerCase().includes(search);
    });
    renderPPhTable(filtered);
});

$(document).on('keyup', '#searchPPN', function() {
    const search = $(this).val().toLowerCase();
    const filtered = ppnData.filter(function(item) {
        return item.name.toLowerCase().includes(search);
    });
    renderPPNTable(filtered);
});

$(function(){
    try {
        $('#amount').prop('readonly', true);
        $('#gross_amount').prop('readonly', true);
        $('#dpp_amount').prop('readonly', true);
        $('#pph_amount').prop('readonly', true);
        $('#ppn_amount').prop('readonly', true);
    } catch (e) { }
});
</script>
@endpush