@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 PO Assignment</h5>
                    </div>

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

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

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

                            <div class="row">
                                <!-- PO Date -->
                                <div class="col-md-6 mb-3">
                                    <label for="po_date" class="form-label">
                                        Tanggal PO <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" class="form-control" id="po_date" name="po_date"
                                        value="{{ old('po_date', $data->po_date ?? '') }}">
                                    <small class="text-muted">Tanggal ini menentukan bulan/tahun di nomor PO</small>
                                    <div class="invalid-feedback" id="error-po_date"></div>
                                </div>

                                <!-- PO Number -->
                                <div class="col-md-6 mb-3">
                                    <label for="po_number" class="form-label">
                                        PO Number <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="po_number" name="po_number"
                                            value="{{ old('po_number', $data->po_number) }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="generateNextPONumber(true)">
                                            <i class="fas fa-sync-alt me-2"></i> Generate
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" id="error-po_number"></div>
                                </div>

                                <!-- Description -->
                                <div class="col-md-6 mb-3">
                                    <label for="description" class="form-label">
                                        Description
                                    </label>
                                    <input type="text" class="form-control" id="description" name="description" rows="3"
                                        placeholder="Masukkan description" value="{{ $data->description }}">
                                    <div class="invalid-feedback" id="error-description"></div>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <!-- Project Section -->
                            <div id="projectSection">
                                <div class="row align-items-center mb-2">
                                    <div class="col-md-6">
                                        <h6 class="text-uppercase text-sm text-muted mb-0">Informasi Project</h6>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-2 mb-3">
                                        <div class="form-check form-switch d-flex align-items-center">
                                            <input class="form-check-input me-2" type="checkbox" id="is_project"
                                                name="is_project" value="1" {{ $data->is_project ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_project">Terkait Project</label>
                                        </div>
                                        <small class="text-muted d-block">
                                            Aktifkan jika transaksi ini terkait project
                                        </small>
                                    </div>

                                    <div id="projectFields" class="col-md-10 mb-3"
                                        style="display: {{ $data->is_project ? 'block' : 'none' }};">
                                        <!-- Project -->
                                        <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->project_id ? ($data->project_name ?? '') : '' }}">

                                            <input type="hidden" id="project_id" name="project_id"
                                                value="{{ $data->project_id }}">

                                            <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                                onclick="openSelectProjectModal()">
                                                <i class="fas fa-search"></i>
                                            </span>

                                            <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                                onclick="clearProject()" title="Clear">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>

                                        <div class="invalid-feedback" id="error-project_id"></div>
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <!-- Planning Section -->
                            <div id="planningSection">
                                <div class="row align-items-center mb-2">
                                    <div class="col-md-6">
                                        <h6 class="text-uppercase text-sm text-muted mb-0">Informasi Budgeting</h6>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-2 mb-3">
                                        <div class="form-check form-switch d-flex align-items-center">
                                            <input class="form-check-input me-2" type="checkbox" id="is_planned"
                                                name="is_planned" value="1" {{ $data->is_planned ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_planned">Terkait Budget</label>
                                        </div>
                                        <small class="text-muted d-block">
                                            Aktifkan jika PO ini dari budget project
                                        </small>
                                    </div>

                                    <div id="planningFields" class="col-md-10 mb-3"
                                        style="display: {{ $data->is_planned ? 'block' : 'none' }};">
                                        <!-- Anggaran Plan Project -->
                                        <label for="anggaran_plan_display" class="form-label">
                                           Budget Project <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="anggaran_plan_display"
                                                name="anggaran_plan_display" placeholder="-- Pilih Anggaran Plan --"
                                                readonly
                                                value="{{ $data->anggaran_plan_project_id ? (($data->anggaran_plan_project_name ?? '') . ' (' . ($data->anggaran_plan_amount ? number_format($data->anggaran_plan_amount, 0, ',', '.') : '') . ')') : '' }}">
                                            <input type="hidden" id="anggaran_plan_project_id"
                                                name="anggaran_plan_project_id"
                                                value="{{ $data->anggaran_plan_project_id }}">
                                            <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                                onclick="openSelectAnggaranPlanModal()">
                                                <i class="fas fa-search"></i>
                                            </span>
                                            <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                                onclick="clearAnggaranPlan()" title="Clear">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>
                                        <div class="invalid-feedback" id="error-anggaran_plan_project_id"></div>

                                        <!-- Detail Plan Table -->
                                        <div id="detailPlanSection" class="mt-3"
                                            style="display: {{ $data->anggaran_plan_project_id ? 'block' : 'none' }};">
                                            <div class="card bg-light">
                                                <div class="card-header py-2">
                                                    <h6 class="mb-0 text-sm">
                                                        <i class="fas fa-list-alt me-1"></i>
                                                        Detail Budget - <span id="detailPlanTitle"
                                                            class="text-primary">Anggaran Plan</span>
                                                    </h6>
                                                </div>
                                                <div class="card-body p-0">
                                                    <div class="table-responsive" style="max-height: 250px;">
                                                        <table class="table table-sm table-bordered mb-0"
                                                            id="detailPlanTable" style="font-size:0.8rem">
                                                            <thead style="background-color:#e9ecef;">
                                                                <tr>
                                                                    <th class="text-center" width="5%">No</th>
                                                                    <th class="text-center" width="16%">Kategori</th>
                                                                    <th class="text-center" width="16%">Detail Kategori</th>
                                                                    <th class="text-center" width="10%">Supplier</th>
                                                                    <th class="text-center" width="10%">Brand</th>
                                                                    <th class="text-center" width="12%">Spesifikasi</th>
                                                                    <th class="text-center" width="8%">Quantity (Unit)</th>
                                                                    <th class="text-center" width="13%">Amount Rupiah/Unit</th>
                                                                    <th class="text-center" width="13%">Amount (Rupiah)</th>
                                                                    <th class="text-center" width="7%">Unit</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="detailPlanTableBody">
                                                                <tr>
                                                                    <td colspan="10" class="text-center text-muted py-3">
                                                                        <i class="fas fa-spinner fa-spin me-1"></i>
                                                                        Memuat data...
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </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">Detail Items</h6>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="table-responsive">
                            <table class="table table-sm table-bordered" id="detailItemsTable" style="font-size:0.8rem">
                                <thead style="background-color:#e9ecef;">
                                    <tr>
                                        <th class="text-center" width="10%">Action</th>
                                        <th class="text-center" width="5%">No</th>
                                        <th class="text-center" width="20%">Detail Kategori <span class="text-danger">*</span>
                                        </th>
                                        <th class="text-center" width="10%">Supplier</th>
                                        <th class="text-center" width="10%">Brand</th>
                                        <th class="text-center" width="13%">Spesifikasi</th>
                                        <th class="text-center" width="12%">Quantity (Unit)</th>
                                        <th class="text-center" width="12%">Unit</th>
                                    </tr>
                                </thead>
                                            <tbody id="detailItemsBody">
                                                <!-- Items will be loaded dynamically -->
                                            </tbody>
                                        </table>
                                    </div>

                                    <button type="button" class="btn btn-sm btn-success mt-2" onclick="addDetailRow()">
                                        <i class="fas fa-plus me-1"></i> Tambah Item
                                    </button>
                                </div>
                            </div>

                            <!-- Supplier Section -->
                            <div id="supplierSection">
                                <div class="row align-items-center mb-2">
                                    <div class="col-md-6">
                                        <h6 class="text-uppercase text-sm text-muted mb-0">Informasi Supplier</h6>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-2 mb-3">
                                        <div class="form-check form-switch d-flex align-items-center">
                                            <input class="form-check-input me-2" type="checkbox" id="is_supplier"
                                                name="is_supplier" value="1" {{ $data->is_supplier ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_supplier">Terkait Supplier</label>
                                        </div>
                                        <small class="text-muted d-block">Aktifkan jika transaksi ini terkait
                                            supplier</small>
                                    </div>

                                    <div id="supplierFields" class="col-md-10 mb-3"
                                        style="display: {{ $data->is_supplier ? 'block' : 'none' }};">
                                        <div class="row">
                                            <!-- Supplier -->
                                            <div class="col-md-6 mb-3">
                                                <label for="supplier_display" class="form-label">
                                                    Supplier <span class="text-danger">*</span>
                                                </label>

                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="supplier_display"
                                                        name="supplier_display" placeholder="-- Pilih Supplier --"
                                                        readonly
                                                        value="{{ $data->supplier_id ? ($data->supplier_name ?? '') : '' }}">

                                                    <input type="hidden" id="supplier_id" name="supplier_id"
                                                        value="{{ $data->supplier_id }}">

                                                    <span class="input-group-text bg-primary text-light"
                                                        style="cursor:pointer" onclick="openSelectSupplierModal()">
                                                        <i class="fas fa-search"></i>
                                                    </span>

                                                    <span class="input-group-text bg-danger text-light"
                                                        style="cursor:pointer" onclick="clearSupplier()" title="Clear">
                                                        <i class="fas fa-times"></i>
                                                    </span>
                                                </div>

                                                <div class="invalid-feedback" id="error-supplier_id"></div>
                                            </div>

                                            <!-- Supplier Bank -->
                                            <div class="col-md-6 mb-3">
                                                <label for="supplier_bank_display" class="form-label">
                                                    Rekening Supplier
                                                </label>

                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="supplier_bank_display"
                                                        name="supplier_bank_display"
                                                        placeholder="-- Pilih Rekening Supplier --" readonly
                                                        value="{{ $data->supplier_bank_id ? (($data->supplier_bank_name ?? '') . ' - ' . ($data->supplier_bank_account ?? '')) : '' }}">

                                                    <input type="hidden" id="supplier_bank_id" name="supplier_bank_id"
                                                        value="{{ $data->supplier_bank_id }}">

                                                    <span class="input-group-text bg-primary text-light"
                                                        style="cursor:pointer" onclick="openSelectSuppliersBankModal()">
                                                        <i class="fas fa-search"></i>
                                                    </span>

                                                    <span class="input-group-text bg-danger text-light"
                                                        style="cursor:pointer" onclick="clearSupplierBank()"
                                                        title="Clear">
                                                        <i class="fas fa-times"></i>
                                                    </span>
                                                </div>

                                                <small class="text-muted" id="supplierBankHint">
                                                    {{ $data->supplier_id ? 'Klik tombol search untuk memilih rekening
                                                    supplier' : 'Pilih supplier terlebih dahulu' }}
                                                </small>
                                                <div class="invalid-feedback" id="error-supplier_bank_id"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

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

@endsection

@push('js')
<script>
    // ============================================
    // CURRENCY FORMAT FUNCTIONS (Indonesian)
    // ============================================
    
    // Format number to Indonesian Rupiah format (xx.xxx.xxx,xx)
    function formatRupiah(value) {
        if (value === null || value === undefined || value === '') return '';
        
        // Parse to number
        let number = parseFloat(String(value).replace(/,/g, ''));
        if (isNaN(number)) return '';
        
        // Split integer and decimal parts
        let integerPart = Math.floor(number);
        let decimalPart = Math.round((number - integerPart) * 100);
        
        // Format integer part with dots
        let formatted = integerPart.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        
        // Add decimal part with leading zeros
        formatted += ',' + decimalPart.toString().padStart(2, '0');
        
        return formatted;
    }
    
    // Parse Indonesian Rupiah format to decimal
    function parseRupiah(value) {
        if (!value) return '';
        // Remove dots, replace comma with decimal point
        let parsed = String(value).replace(/\./g, '').replace(',', '.');
        let number = parseFloat(parsed);
        return isNaN(number) ? '' : number.toFixed(2);
    }
    
    // Format input on keyup (while typing)
    function formatInputRupiah(input) {
        let value = input.value;
        // Allow only numbers, comma, and dot
        value = value.replace(/[^0-9,]/g, '');
        
        // If comma exists, handle decimal part
        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;
    }
    
    // Format on blur (when user leaves the field)
    function formatInputRupiahOnBlur(input) {
        let value = input.value;
        if (!value) return;
        
        let parsed = parseRupiah(value);
        if (parsed) {
            input.value = formatRupiah(parsed);
        }
    }
    
    // ============================================
    // GLOBAL VARIABLES
    // ============================================
let projectsData = [];
let detailKategoriData = [];
let suppliersData = [];
let supplierBankData = [];
let unitsData = [];
let anggaranPlanData = [];

let isLoadingProjects = false;
let isLoadingDetailKategori = false;
let isLoadingSuppliers = false;
let isLoadingSupplierBank = false;
let isLoadingUnits = false;
let isLoadingAnggaranPlan = false;

// Anggaran Plan pagination state
let anggaranPlanCurrentPage   = 1;
let anggaranPlanLastPage      = 1;
let anggaranPlanTotal         = 0;
let anggaranPlanPerPage       = 10;
let anggaranPlanCurrentSearch = '';
let anggaranPlanSearchTimer   = null;

let detailRowCounter = 0;
let currentRowForSelection = null;

// Track selected anggaran plan items
let selectedAnggaranItems = new Map(); // Key: anggaranId, Value: item data
// Track detail item checkbox click order (preserve user selection order)
let detailItemClickOrder = []; // Array of detail_kategori_id in click order

// Existing details data from server
let existingDetails = @json($data->details ?? []);

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

    // Load data awal
    loadProjects();
    loadDetailKategori();
    loadSuppliers();
    loadUnits();
    loadAnggaranPlan();

    // Load existing details
    if (existingDetails.length > 0) {
        existingDetails.forEach(detail => {
            addDetailRowWithData(detail);
        });
        updateSupplierSectionVisibility();
    }

    // Load detail plan if anggaran plan exists
    const existingAnggaranPlanId = $('#anggaran_plan_project_id').val();
    if (existingAnggaranPlanId) {
        loadDetailPlan(existingAnggaranPlanId);
    }

    // Load supplier bank if supplier is selected
    const supplierId = $('#supplier_id').val();
    if (supplierId) {
        loadSupplierBank(supplierId);
        $('#supplierBankHint').text('Klik tombol search untuk memilih rekening supplier');
    }

    // Toggle Planning Fields
    $('#is_planned').on('change', function() {
        if ($(this).is(':checked')) {
            $('#planningFields').slideDown(300);
        } else {
            $('#planningFields').slideUp(300);
            clearAnggaranPlan();
        }
    });

    // Toggle Project Fields
    $('#is_project').on('change', function() {
        if ($(this).is(':checked')) {
            $('#projectFields').slideDown(300);
        } else {
            $('#projectFields').slideUp(300);
            clearProject();
        }
    });

    // Toggle Supplier Fields
    $('#is_supplier').on('change', function() {
        if ($(this).is(':checked')) {
            $('#supplierFields').slideDown(300);
        } else {
            $('#supplierFields').slideUp(300);
            clearSupplier();
        }
    });

    // Auto-generate PO number when PO date changes (only if date is selected)
    $('#po_date').on('change', function() {
        if ($(this).val()) {
            generateNextPONumber(false);
        }
    });

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

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

        // Collect detail items
        const details = [];
        $('#detailItemsBody tr').each(function() {
            const detailKategoriId = $(this).find('[name="detail_kategori_id[]"]').val();
            const detailKategoriAmount = $(this).find('[name="amount_unit[]"]').val();
            const detailKategoriUnitId = $(this).find('[name="detail_kategori_unit_id[]"]').val();
            const detailKategoriSpecId = $(this).find('[name="detail_kategori_spesifikasi_id[]"]').val();

            if (detailKategoriId) {
                details.push({
                    detail_kategori_id: detailKategoriId,
                    amount_unit: detailKategoriAmount ? parseRupiah(detailKategoriAmount) : 0,
                    detail_kategori_unit_id: detailKategoriUnitId,
                    spesifikasi_id: detailKategoriSpecId || null
                });
            }
        });

        // Prepare form data
        const formData = {
            _method: 'PUT',
            po_number: $('#po_number').val(),
            is_planned: $('#is_planned').is(':checked') ? 1 : 0,
            anggaran_plan_project_id: $('#anggaran_plan_project_id').val(),
            is_project: $('#is_project').is(':checked') ? 1 : 0,
            project_id: $('#project_id').val(),
            is_supplier: $('#is_supplier').is(':checked') ? 1 : 0,
            supplier_id: $('#supplier_id').val(),
            supplier_bank_id: $('#supplier_bank_id').val(),
            description: $('#description').val(),
            details: details
        };

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

        // AJAX Submit
        $.ajax({
            url: '{{ url("/trspoa/edit/" . $data->encrypted_id) }}',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonColor: '#028284'
                    }).then(() => {
                        window.location.href = '{{ url("/trspoa") }}';
                    });
                } 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) {
                $('#btnSubmit').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Update');

                if (xhr.status === 422) {
                    // Validation errors
                    const errors = xhr.responseJSON.data.errors;
                    $.each(errors, function(key, value) {
                        const input = $(`#${key}`);
                        input.addClass('is-invalid');
                        $(`#error-${key}`).text(value[0]);
                    });

                    Swal.fire({
                        title: 'Validasi Gagal!',
                        text: 'Mohon periksa kembali inputan Anda',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.message || 'Terjadi kesalahan sistem',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            }
        });
    });

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

    // Search handlers
    $('#searchProject').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        renderProjectTable(projectsData.filter(item =>
            item.proyek.toLowerCase().includes(searchTerm) ||
            (item.no_spk && item.no_spk.toLowerCase().includes(searchTerm))
        ));
    });

    $('#searchDetailKategori').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        renderDetailKategoriTable(detailKategoriData.filter(item =>
            item.detail_kategori.toLowerCase().includes(searchTerm) ||
            (item.kategori && item.kategori.toLowerCase().includes(searchTerm)) ||
            (item.code && item.code.toLowerCase().includes(searchTerm))
        ));
    });

    $('#searchSupplier').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        renderSupplierTable(suppliersData.filter(item =>
            item.supplier_name.toLowerCase().includes(searchTerm)
        ));
    });

    $('#searchSupplierBank').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        renderSupplierBankTable(supplierBankData.filter(item =>
            item.nama_bank.toLowerCase().includes(searchTerm) ||
            (item.nomor_akun && item.nomor_akun.toLowerCase().includes(searchTerm))
        ));
    });

    $('#searchUnit').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        renderUnitTable(unitsData.filter(item =>
            item.unit.toLowerCase().includes(searchTerm)
        ));
    });

    // Anggaran Plan search with debounce (paginated)
    $('#searchAnggaranPlan').on('input', function() {
        clearTimeout(anggaranPlanSearchTimer);
        anggaranPlanCurrentSearch = $(this).val().trim();
        $('#btnClearAnggaranSearch').toggleClass('d-none', anggaranPlanCurrentSearch === '');
        anggaranPlanSearchTimer = setTimeout(function() { loadAnggaranPlan(1); }, 400);
    });
    $('#btnClearAnggaranSearch').on('click', function() {
        $('#searchAnggaranPlan').val('').trigger('input');
    });
    $('#anggaranPlanPerPage').on('change', function() {
        anggaranPlanPerPage = parseInt($(this).val());
        loadAnggaranPlan(1);
    });
});

// Load Functions - same as add.blade.php
function loadProjects() {
    isLoadingProjects = true;
    renderProjectTable(projectsData);
    
    $.ajax({
        url: '{{ url("/trspoa/api/projects/active") }}',
        type: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                projectsData = response.data;
            } else {
                projectsData = [];
            }
            isLoadingProjects = false;
            renderProjectTable(projectsData);
        },
        error: function() {
            projectsData = [];
            isLoadingProjects = false;
            renderProjectTable([]);
        }
    });
}

function loadDetailKategori() {
    isLoadingDetailKategori = true;
    renderDetailKategoriTable(detailKategoriData);
    
    $.ajax({
        url: '{{ url("/trspoa/api/detail-kategori") }}',
        type: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                detailKategoriData = response.data;
            } else {
                detailKategoriData = [];
            }
            isLoadingDetailKategori = false;
            renderDetailKategoriTable(detailKategoriData);
        },
        error: function() {
            detailKategoriData = [];
            isLoadingDetailKategori = false;
            renderDetailKategoriTable([]);
        }
    });
}

function loadSuppliers() {
    isLoadingSuppliers = true;
    renderSupplierTable(suppliersData);
    
    $.ajax({
        url: '{{ url("/trspoa/api/supplier") }}',
        type: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                suppliersData = response.data;
            } else {
                suppliersData = [];
            }
            isLoadingSuppliers = false;
            renderSupplierTable(suppliersData);
        },
        error: function() {
            suppliersData = [];
            isLoadingSuppliers = false;
            renderSupplierTable([]);
        }
    });
}

function loadSupplierBank(supplierId = null) {
    isLoadingSupplierBank = true;
    renderSupplierBankTable(supplierBankData);
    
    const url = supplierId ? 
        `{{ url("/trspoa/api/supplier-bank") }}?supplier_id=${supplierId}` : 
        '{{ url("/trspoa/api/supplier-bank") }}';
    
    $.ajax({
        url: url,
        type: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                supplierBankData = response.data;
            } else {
                supplierBankData = [];
            }
            isLoadingSupplierBank = false;
            renderSupplierBankTable(supplierBankData);
        },
        error: function() {
            supplierBankData = [];
            isLoadingSupplierBank = false;
            renderSupplierBankTable([]);
        }
    });
}

function loadUnits() {
    isLoadingUnits = true;
    renderUnitTable(unitsData);
    
    $.ajax({
        url: '{{ url("/trspoa/api/units") }}',
        type: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                unitsData = response.data;
            } else {
                unitsData = [];
            }
            isLoadingUnits = false;
            renderUnitTable(unitsData);
        },
        error: function() {
            unitsData = [];
            isLoadingUnits = false;
            renderUnitTable([]);
        }
    });
}

function loadAnggaranPlan(page = 1, projectId = null) {
    isLoadingAnggaranPlan = true;
    anggaranPlanCurrentPage = page;
    renderAnggaranPlanTable([]);

    const ajaxData = { search: anggaranPlanCurrentSearch, page: page, per_page: anggaranPlanPerPage };
    if (projectId) {
        ajaxData.project_id = projectId;
    }

    $.ajax({
        url: '{{ url("/trspoa/api/anggaran-plan-project") }}',
        type: 'GET',
        data: ajaxData,
        success: function(response) {
            if (response.success) {
                anggaranPlanData        = response.data;
                anggaranPlanCurrentPage = response.pagination.current_page;
                anggaranPlanLastPage    = response.pagination.last_page;
                anggaranPlanTotal       = response.pagination.total;
            }
        },
        complete: function() {
            isLoadingAnggaranPlan = false;
            renderAnggaranPlanTable(anggaranPlanData);
            renderAnggaranPlanPagination();
        }
    });
}

// Render Functions - same as add.blade.php
function renderProjectTable(data) {
    const tbody = $('#projectTableBody');
    tbody.empty();

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

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

    data.forEach((item, index) => {
        tbody.append(`
            <tr>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="selectProject(${item.id}, '${item.proyek}', '${item.no_spk || ''}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td style='text-align: center;'>${index + 1}</td>
                <td  class="${item.proyek ? 'text-start' : 'text-center'}">${item.proyek}</td>
                <td class="${item.no_spk ? 'text-start' : 'text-center'}">${item.no_spk || '-'}</td>
                
            </tr>
        `);
    });
}

function renderDetailKategoriTable(data) {
    const tbody = $('#detailKategoriTableBody');
    tbody.empty();

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

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

    data.forEach((item, index) => {
        const supplierName = item.supplier_name || '';
        const brandName     = item.brand || '';
        const spesifikasiName = item.spesifikasi || '';

        tbody.append(`
            <tr>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="selectDetailKategori(${item.id}, '${item.kategori ? item.kategori.replace(/'/g, "\\'") : ''}', '${item.code ? item.code.replace(/'/g, "\\'") : ''}', '${item.detail_kategori.replace(/'/g, "\\'")}', '${supplierName.replace(/'/g, "\\'")}', '${brandName.replace(/'/g, "\\'")}', '${item.spesifikasi_id ?? ''}', '${spesifikasiName.replace(/'/g, "\\'")}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td style='text-align: center;'>${index + 1}</td>
                <td class="${item.kategori ? 'text-start' : 'text-center'}">${item.kategori || '-'}</td>
                <td class="${item.code ? 'text-start' : 'text-center'}">${item.code || '-'}</td>
                <td class="${item.detail_kategori ? 'text-start' : 'text-center'}">${item.detail_kategori}</td>
                <td class="${supplierName ? 'text-start' : 'text-center'}">${supplierName || '-'}</td>
                <td class="${brandName ? 'text-start' : 'text-center'}">${brandName || '-'}</td>
                <td class="${spesifikasiName ? 'text-start' : 'text-center'}">${spesifikasiName || '-'}</td>
            </tr>
        `);
    });
}

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

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

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

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

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

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

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

    data.forEach((item, index) => {
        tbody.append(`
            <tr>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="selectSupplierBank(${item.id}, '${item.nama_bank} - ${item.nomor_akun}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td style='text-align: center;'>${index + 1}</td>
                <td class="${item.nama_bank ? 'text-start' : 'text-center'}">${item.nama_bank}</td>
                <td class="${item.nomor_akun ? 'text-start' : 'text-center'}">${item.nomor_akun}</td>
                <td class="${item.nama_akun ? 'text-start' : 'text-center'}">${item.nama_akun}</td>
                
            </tr>
        `);
    });
}

function renderUnitTable(data) {
    const tbody = $('#unitTableBody');
    tbody.empty();

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

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

    data.forEach((item, index) => {
        tbody.append(`
            <tr>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="selectUnit(${item.id}, '${item.unit}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td style='text-align: center;'>${index + 1}</td>
                <td class="${item.unit ? 'text-start' : 'text-center'}">${item.unit}</td>
                
            </tr>
        `);
    });
}

function renderAnggaranPlanTable(data) {
    const tbody = $('#anggaranPlanTableBody');
    tbody.empty();

    if (isLoadingAnggaranPlan) {
        tbody.html('<tr><td colspan="7" class="text-center py-4 text-muted"><i class="fas fa-spinner fa-spin me-1"></i> Memuat data...</td></tr>');
        return;
    }

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

    data.forEach((item, index) => {
        const totalAmount = parseFloat(item.total_amount || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        const displayText = `${item.project_name}${item.total_amount ? ' (' + numberFormat(item.total_amount) + ')' : ''}`;

        tbody.append(`
            <tr>
                <td>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-primary btn-select-item"
                            data-id="${item.id}" data-name="${displayText.replace(/'/g, "\\'")}">
                            <i class="fas fa-check me-1"></i>Pilih Semua Data
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-toggle-anggaran-detail"
                            id="btnAnggaranDetail_${item.id}"
                            onclick="toggleAnggaranDetail(${item.id})"
                            title="Lihat Detail Items">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                </td>
                <td class="text-center">${(anggaranPlanCurrentPage - 1) * anggaranPlanPerPage + index + 1}</td>
                <td><span class="fw-semibold text-primary">${item.project_name || '-'}</span></td>
                <td class="small ${item.no_spk ? 'text-start' : 'text-center'}">${item.no_spk || '-'}</td>
                <td class="text-muted small ${item.description ? 'text-start' : 'text-center'}">${item.description || '<em>-</em>'}</td>
                <td class="text-center"><span class="badge bg-info">${item.detail_count || 0}</span></td>
                <td class="text-end fw-semibold">${totalAmount}</td>
            </tr>
            <tr id="anggaranDetail_${item.id}" class="anggaran-detail-row">
                <td colspan="7" class="p-0">
                    <div class="anggaran-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.project_name}</small>
                        </div>
                        <table class="table table-sm table-bordered anggaran-detail-table">
                            <thead style="background-color:#dddffa;">
                                <tr>
                                    <th class="text-center" style="width:36px; background-color:#dddffa; font-size:0.8rem;">
                                        <input type="checkbox" class="form-check-input select-all-detail-items" 
                                               data-parent="${item.id}" title="Pilih Semua Detail">
                                    </th>
                                    <th class="text-center" style="background-color:#dddffa; font-size:0.8rem;">#</th>
                                    <th class="text-center" style="background-color:#dddffa; font-size:0.8rem;">Kategori</th>
                                    <th class="text-center" style="background-color:#dddffa; font-size:0.8rem;">Kode</th>
                                    <th class="text-center" style="background-color:#dddffa; font-size:0.8rem;">Detail Kategori</th>
                                    <th class="text-center" style="width:120px; background-color:#dddffa; font-size:0.8rem;">Quantity (Unit)</th>
                                    <th class="text-center" style="width:130px; background-color:#dddffa; font-size:0.8rem;">Amount (Rupiah)</th>
                                    <th class="text-center" style="width:70px; background-color:#dddffa; font-size:0.8rem;">Unit</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </td>
            </tr>
        `);
    });

    // Bind "Pilih" button click events after table is rendered
    bindAnggaranPlanButtonEvents();
}

function toggleAnggaranDetail(anggaranId) {
    const detailRow = $(`#anggaranDetail_${anggaranId}`);
    const btn       = $(`#btnAnggaranDetail_${anggaranId}`);

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

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

    if (detailRow.data('loaded')) {
        // Update checkbox states when expanding
        updateDetailCheckboxesState(anggaranId);
        return;
    }

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

    $.ajax({
        url: `{{ url("/trspoa/api/anggaran-plan-project-detail") }}/${anggaranId}`,
        type: 'GET',
        success: function(response) {
            tbody.empty();
            if (!response.success || response.data.length === 0) {
                tbody.html(`<tr><td colspan="8" class="text-center py-2 text-muted fst-italic">
                    <i class="fas fa-inbox me-1"></i> Tidak ada detail item
                </td></tr>`);
                return;
            }
            
            const selectedDetails = selectedAnggaranItems.get(anggaranId)?.details || [];
            
            response.data.forEach(function(d, i) {
                const amountUnit = d.amount_unit ? parseFloat(d.amount_unit || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '0.00';
                const amountRupiah = d.amount_rupiah ? parseFloat(d.amount_rupiah || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '0.00';
                const isSelected = selectedDetails.some(sd => sd.detail_kategori_id === d.detail_kategori_id);
                
                tbody.append(`<tr>
                    <td class="text-center">
                        <input type="checkbox" class="form-check-input detail-item-checkbox" 
                               data-parent="${anggaranId}" data-detail-id="${d.detail_kategori_id}" 
                               data-detail='${JSON.stringify(d)}' ${isSelected ? 'checked' : ''}>
                    </td>
                    <td class="text-center">${i + 1}</td>
                    <td>${d.kategori || '-'}</td>
                    <td>${d.detail_kategori_code || '-'}</td>
                    <td>${d.detail_kategori || '-'}</td>
                    <td class="text-end">${amountUnit}</td>
                    <td class="text-end">${amountRupiah}</td>
                    <td>${d.unit || '-'}</td>
                </tr>`);
            });
            
            detailRow.data('loaded', true);
            bindDetailCheckboxEvents(anggaranId);
        },
        error: function() {
            tbody.html(`<tr><td colspan="8" class="text-center py-2 text-danger">
                <i class="fas fa-exclamation-triangle me-1"></i> Gagal memuat detail
            </td></tr>`);
        }
    });
}

function renderAnggaranPlanPagination() {
    const info         = $('#anggaranPlanInfo');
    const paginationEl = $('#anggaranPlanPagination');

    const from = anggaranPlanTotal === 0 ? 0 : (anggaranPlanCurrentPage - 1) * anggaranPlanPerPage + 1;
    const to   = Math.min(anggaranPlanCurrentPage * anggaranPlanPerPage, anggaranPlanTotal);
    if (anggaranPlanTotal === 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>${anggaranPlanTotal}</strong> data`);
    }

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

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

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

    let startPage = Math.max(1, anggaranPlanCurrentPage - 2);
    let endPage   = Math.min(anggaranPlanLastPage, 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 === anggaranPlanCurrentPage ? 'active' : ''}">
            <a class="page-link" href="#" data-page="${p}">${p}</a>
        </li>`);
    }

    if (endPage < anggaranPlanLastPage) {
        if (endPage < anggaranPlanLastPage - 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="${anggaranPlanLastPage}">${anggaranPlanLastPage}</a></li>`);
    }

    // Next
    ul.append(`<li class="page-item ${anggaranPlanCurrentPage === anggaranPlanLastPage ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${anggaranPlanCurrentPage + 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 <= anggaranPlanLastPage) loadAnggaranPlan(pg);
    });

    paginationEl.append(ul);
}

function numberFormat(number) {
    return new Intl.NumberFormat('id-ID').format(number);
}

// ============================================
// CHECKBOX SELECTION FUNCTIONS
// ============================================

function updateAnggaranPlanSelectButton() {
    // Update "Pilih" button text to show count of checked items
    const checkedCount = $('.detail-item-checkbox:checked').length;
    
    $('.btn-select-item').each(function() {
        const $btn = $(this);
        const anggaranId = $btn.data('id');
        const detailRow = $(`#anggaranDetail_${anggaranId}`);
        
        if (detailRow.length > 0 && detailRow.data('loaded')) {
            // Count total items in this anggaran plan
            const totalItems = $(`.detail-item-checkbox[data-parent="${anggaranId}"]`).length;
            
            if (checkedCount === 0 || checkedCount >= totalItems) {
                // No selection or all selected - show "Pilih Semua Data"
                $btn.html(`<i class="fas fa-check me-1"></i>Pilih Semua Data`);
            } else {
                // Some items selected - show "Pilih X Data"
                $btn.html(`<i class="fas fa-check me-1"></i>Pilih ${checkedCount} Data`);
            }
        } else {
            // Details not loaded yet - show default
            $btn.html(`<i class="fas fa-check me-1"></i>Pilih Semua Data`);
        }
    });
}

function updateDetailCheckboxesState(anggaranId) {
    const selectedDetails = selectedAnggaranItems.get(anggaranId)?.details || [];
    
    $(`.detail-item-checkbox[data-parent="${anggaranId}"]`).each(function() {
        const detailId = $(this).data('detail-id');
        const isChecked = selectedDetails.some(sd => sd.detail_kategori_id === detailId);
        $(this).prop('checked', isChecked);
    });
}

function bindAnggaranPlanButtonEvents() {
    // Bind click events for "Pilih" buttons in the table
    $('.btn-select-item').off('click').on('click', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const anggaranId = id;
        
        // Check if a budget plan is currently fully selected (no checkboxes or all checked)
        const totalItems = $(`.detail-item-checkbox[data-parent="${anggaranId}"]`).length;
        const checkedItems = $(`.detail-item-checkbox[data-parent="${anggaranId}"]:checked`).length;
        
        // If no checkboxes checked OR all checkboxes checked, add all items
        // Otherwise, add only checked items
        const addAllItems = (checkedItems === 0 || checkedItems >= totalItems);
        
        if (addAllItems) {
            // Load and add all detail items from selected budget plan
            $.ajax({
                url: '{{ url("/trspoa/api/anggaran-plan-project-detail") }}/' + id,
                type: 'GET',
                success: function(response) {
                    if (response.success && response.data) {
                        clearAnggaranPlan();
                        populateDetailItemsFromPlan(response.data);
                        loadDetailPlan(id); // Load detail plan table (all items)
                        $('#anggaran_plan_project_id').val(id);
                        $('#anggaran_plan_display').val(name);
                        $('#modalSelectAnggaranPlan').modal('hide');
                        updateSupplierSectionVisibility();
                    }
                }
            });
        } else {
            // Add only checked items - sort by click order
            const checkedData = [];
            const checkedItems = $(`.detail-item-checkbox[data-parent="${anggaranId}"]:checked`);
            
            // First, try to sort by click order
            if (detailItemClickOrder.length > 0) {
                // Create a map for quick lookup
                const checkedMap = new Map();
                checkedItems.each(function() {
                    const detailId = $(this).data('detail-id');
                    try {
                        const detailData = $(this).data('detail');
                        if (detailData && detailData.detail_kategori_id) {
                            checkedMap.set(detailId, detailData);
                        }
                    } catch(e) {
                        console.error('Error getting detail data:', e);
                    }
                });
                
                // Sort by click order
                detailItemClickOrder.forEach(detailId => {
                    if (checkedMap.has(detailId)) {
                        checkedData.push(checkedMap.get(detailId));
                    }
                });
            } else {
                // Fallback: no click order tracking, use DOM order
                checkedItems.each(function() {
                    try {
                        const detailData = $(this).data('detail');
                        if (detailData && detailData.detail_kategori_id) {
                            checkedData.push(detailData);
                        }
                    } catch(e) {
                        console.error('Error getting detail data:', e);
                    }
                });
            }
            
            if (checkedData.length > 0) {
                clearAnggaranPlan();
                populateDetailItemsFromPlan(checkedData);
                loadDetailPlan(id); // Load detail plan table (all items)
                $('#anggaran_plan_project_id').val(id);
                $('#anggaran_plan_display').val(name);
                $('#modalSelectAnggaranPlan').modal('hide');
                updateSupplierSectionVisibility();
            }
        }
    });
}

function bindDetailCheckboxEvents(anggaranId) {
    $(`.detail-item-checkbox[data-parent="${anggaranId}"]`).off('change').on('change', function() {
        const detailId = $(this).data('detail-id');
        
        // Track click order
        if (this.checked) {
            // Add to click order if not already present
            if (!detailItemClickOrder.includes(detailId)) {
                detailItemClickOrder.push(detailId);
            }
        } else {
            // Remove from click order when unchecked
            detailItemClickOrder = detailItemClickOrder.filter(id => id !== detailId);
        }
        
        // Update the "Pilih" button when any checkbox changes
        updateAnggaranPlanSelectButton();
    });
    
    // Add "Select All" functionality for detail items
    $(`.select-all-detail-items[data-parent="${anggaranId}"]`).off('change').on('change', function() {
        const isChecked = $(this).is(':checked');
        const anggaranId = $(this).data('parent');
        
        // Clear click order when using select all
        detailItemClickOrder = [];
        
        $(`.detail-item-checkbox[data-parent="${anggaranId}"]`).each(function() {
            const detailId = $(this).data('detail-id');
            $(this).prop('checked', isChecked);
            if (isChecked) {
                detailItemClickOrder.push(detailId);
            }
        });
        
        // Update button after select all
        updateAnggaranPlanSelectButton();
    });
}

// Open Modal Functions - same as add.blade.php
function openSelectProjectModal() {
    $('#modalSelectProject').modal('show');
    $('#searchProject').val('').focus();
    renderProjectTable(projectsData);
}

function openSelectSupplierModal() {
    $('#modalSelectSupplier').modal('show');
    $('#searchSupplier').val('').focus();
    renderSupplierTable(suppliersData);
}

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

    loadSupplierBank(supplierId);
    $('#modalSelectSupplierBank').modal('show');
    $('#searchSupplierBank').val('').focus();
}

function openSelectDetailKategoriModal(rowId) {
    currentRowForSelection = rowId;
    $('#modalSelectDetailKategori').modal('show');
    $('#searchDetailKategori').val('').focus();
    renderDetailKategoriTable(detailKategoriData);
}

function openSelectUnitModal(rowId) {
    currentRowForSelection = rowId;
    $('#modalSelectUnit').modal('show');
    $('#searchUnit').val('').focus();
    renderUnitTable(unitsData);
}

function openSelectAnggaranPlanModal() {
    const projectId = $('#project_id').val();
    $('#modalSelectAnggaranPlan').modal('show');
    $('#searchAnggaranPlan').val('').focus();
    anggaranPlanCurrentSearch = '';
    $('#btnClearAnggaranSearch').addClass('d-none');
    loadAnggaranPlan(1, projectId);
    
    // Set initial button text to "Pilih Semua Data" when modal opens
    setTimeout(function() {
        updateAnggaranPlanSelectButton();
    }, 100);
}

// Select Functions - same as add.blade.php
function selectProject(id, proyek, no_spk) {
    $('#project_id').val(id);
    $('#project_display').val(`${proyek}${no_spk ? ' - ' + no_spk : ''}`);
    
    // Clear anggaran plan when project changes (since different project has different anggaran plan)
    clearAnggaranPlan();
    
    $('#modalSelectProject').modal('hide');
}

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

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

function selectDetailKategori(id, kategori, code, detail_kategori, supplier, brand, spesifikasiId = '', spesifikasi = '') {
    if (currentRowForSelection) {
        const row = $(`#row-${currentRowForSelection}`);
        row.find('[name="detail_kategori_id[]"]').val(id);
        const displayInput = row.find('[name="detail_kategori_display[]"]');
        displayInput.val(
            `${code ? code + ' - ' : ''}${detail_kategori ? detail_kategori + ' - ' : ''}${kategori}`
        );
        displayInput.removeClass('is-invalid');
        row.find('[name="detail_kategori_spesifikasi_id[]"]').val(spesifikasiId || '');
        row.find('[name="supplier_display[]"]').val(supplier || '-');
        row.find('[name="brand_display[]"]').val(brand || '-');
        row.find('[name="spesifikasi_display[]"]').val(spesifikasi || '-');
    }
    $('#modalSelectDetailKategori').modal('hide');
    currentRowForSelection = null;
}

function selectUnit(id, unit) {
    if (currentRowForSelection) {
        $(`#row-${currentRowForSelection}`).find('[name="detail_kategori_unit_id[]"]').val(id);
        $(`#row-${currentRowForSelection}`).find('[name="unit_display[]"]').val(unit);
    }
    $('#modalSelectUnit').modal('hide');
    currentRowForSelection = null;
}

function selectAnggaranPlan() {
    // This function is no longer needed - using table "Pilih" button instead
    // Kept for compatibility but not actively used
    $('#modalSelectAnggaranPlan').modal('hide');
}

// Clear Functions - same as add.blade.php
function clearProject() {
    $('#project_id').val('');
    $('#project_display').val('');
    clearAnggaranPlan();
}

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

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

function updateSupplierSectionVisibility() {
    const hasDetailItem = $('#detailItemsBody').find('[name="detail_kategori_id[]"]').length > 0;

    if (hasDetailItem) {
        clearSupplier();
        $('#supplierSection').hide();
        $('#supplierFields').hide();
        $('#is_supplier').prop('checked', false);
    } else {
        $('#supplierSection').show();
        if ($('#is_supplier').is(':checked')) {
            $('#supplierFields').show();
        }
    }
}

function clearAnggaranPlan() {
    $('#anggaran_plan_project_id').val('');
    $('#anggaran_plan_display').val('');
    selectedAnggaranItems.clear();
    detailItemClickOrder = []; // Reset click order tracking
    $('#detailPlanSection').slideUp(200);
}

// Load Detail Plan when anggaran plan is selected
function loadDetailPlan(anggaranPlanId) {
    if (!anggaranPlanId) {
        $('#detailPlanSection').slideUp(200);
        return;
    }

    $('#detailPlanSection').slideDown(300);
    $('#detailPlanTableBody').html('<tr><td colspan="10" class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin me-1"></i> Memuat data...</td></tr>');

    $.ajax({
        url: '{{ url("/trspoa/api/anggaran-plan-project-detail") }}/' + anggaranPlanId,
        type: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                console.log('Detail plan data loaded:', response.data);
                // Always show all items in detail plan table (read-only view)
                renderDetailPlanTable(response.data);
            } else {
                $('#detailPlanTableBody').html('<tr><td colspan="10" class="text-center text-muted py-3">Data tidak ditemukan</td></tr>');
            }
        },
        error: function() {
            $('#detailPlanTableBody').html('<tr><td colspan="10" class="text-center text-danger py-3">Gagal memuat data</td></tr>');
        }
    });
}

function renderDetailPlanTable(data) {
    if (!data || data.length === 0) {
        $('#detailPlanTableBody').html('<tr><td colspan="10" class="text-center text-muted py-3">Tidak ada detail plan</td></tr>');
        return;
    }
    console.log('Rendering detail plan table with data:', data);

    let html = '';
    data.forEach(function(item, index) {
        const amountUnit = item.amount_unit ? parseFloat(item.amount_unit).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '0.00';
        const amountRupiahUnit = item.amount_rupiah_unit ? parseFloat(item.amount_rupiah_unit).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '0.00';
        const amountRupiah = item.amount_rupiah ? parseFloat(item.amount_rupiah).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '0.00';
        html += '<tr>';
        html += '<td class="text-center">' + (index + 1) + '</td>';
        html += '<td>' + (item.kategori || '-') + '</td>';
        html += '<td>' + (item.detail_kategori || '-') + '</td>';
        html += '<td>' + (item.supplier_name || '-') + '</td>';
        html += '<td>' + (item.brand_name || '-') + '</td>';
        html += '<td>' + (item.spesifikasi_name || '-') + '</td>';
        html += '<td class="text-end">' + amountUnit + '</td>';
        html += '<td class="text-end">' + amountRupiahUnit + '</td>';
        html += '<td class="text-end">' + amountRupiah + '</td>';
        html += '<td>' + (item.unit || '-') + '</td>';
        html += '</tr>';
    });

    $('#detailPlanTableBody').html(html);
}

// Populate Detail Items from Detail Plan
function populateDetailItemsFromPlan(data) {
    if (!data || data.length === 0) return;
    
    // Clear existing items first (optional - user can decide)
    // $('#detailItemsBody').empty();
    // detailRowCounter = 0;
    console.log('Populating detail items from plan:', data);
    
    // Add rows for each detail plan item
    data.forEach(function(item) {
        detailRowCounter++;
        const rowId = detailRowCounter;
        
        const displayText = [
            
            item.detail_kategori_code,
            item.detail_kategori,
            item.kategori,
        ].filter(Boolean).join(' - ');
        const unitDisplay = item.unit || '';
        const amountValue = item.amount_unit ? formatRupiah(item.amount_unit) : '';
        
        const supplierDisplay = item.supplier_name || '-';
        const brandDisplay = item.brand_name || '-';
        const spesifikasiDisplay = item.spesifikasi_name || '-';
        
        const row = `
            <tr id="row-${rowId}">
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeDetailRow(${rowId})">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
                <td class="text-center">${$('#detailItemsBody tr').length + 1}</td>
                <td>
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control form-control-sm" name="detail_kategori_display[]" 
                            placeholder="-- Pilih Detail Kategori --" readonly value="${displayText}">
                        <input type="hidden" name="detail_kategori_id[]" value="${item.detail_kategori_id || ''}">
                        <input type="hidden" name="detail_kategori_spesifikasi_id[]" value="${item.spesifikasi_id || ''}">
                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" 
                            onclick="openSelectDetailKategoriModal(${rowId})">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </td>
                <td><input type="text" class="form-control form-control-sm text-center" name="supplier_display[]" readonly value="${supplierDisplay}"></td>
                <td><input type="text" class="form-control form-control-sm text-center" name="brand_display[]" readonly value="${brandDisplay}"></td>
                <td><input type="text" class="form-control form-control-sm text-center" name="spesifikasi_display[]" readonly value="${spesifikasiDisplay}"></td>
                <td>
                    <input type="text" class="form-control form-control-sm amount-input" name="amount_unit[]" 
                        placeholder="0,00" step="0.01" min="0" maxlength="19" value="${item.amount_unit ? formatRupiah(item.amount_unit) : ''}" onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
                </td>
                <td>
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control form-control-sm" name="unit_display[]" 
                            placeholder="-- Pilih Unit --" readonly value="${item.unit || ''}">
                        <input type="hidden" name="detail_kategori_unit_id[]" value="${item.detail_kategori_unit_id || ''}">
                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" 
                            onclick="openSelectUnitModal(${rowId})">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </td>
            </tr>
        `;
        
        $('#detailItemsBody').append(row);
    });
    
    updateRowNumbers();
    updateSupplierSectionVisibility();
}

// Detail Items Management
function addDetailRow() {
    // Validasi: semua row yang ada harus memiliki Detail Kategori
    let isValid = true;
    $('#detailItemsBody tr').each(function() {
        const detailKategoriId = $(this).find('[name="detail_kategori_id[]"]').val();
        if (!detailKategoriId) {
            $(this).find('[name="detail_kategori_display[]"]').addClass('is-invalid');
            isValid = false;
        }
    });

    if (!isValid) {
        Swal.fire({
            title: 'Perhatian!',
            text: 'Mohon lengkapi Detail Kategori pada setiap baris sebelum menambah item baru.',
            icon: 'warning',
            confirmButtonColor: '#028284'
        });
        return;
    }

    detailRowCounter++;
    const rowId = detailRowCounter;
    
    const row = `
        <tr id="row-${rowId}">
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeDetailRow(${rowId})">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
            <td class="text-center">${$('#detailItemsBody tr').length + 1}</td>
            <td>
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control form-control-sm" name="detail_kategori_display[]" 
                        placeholder="-- Pilih Detail Kategori --" readonly>
                    <input type="hidden" name="detail_kategori_id[]">
                    <input type="hidden" name="detail_kategori_spesifikasi_id[]">
                    <span class="input-group-text bg-primary text-light" style="cursor:pointer" 
                        onclick="openSelectDetailKategoriModal(${rowId})">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </td>
            <td><input type="text" class="form-control form-control-sm text-center" name="supplier_display[]" readonly placeholder="-"></td>
            <td><input type="text" class="form-control form-control-sm text-center" name="brand_display[]" readonly placeholder="-"></td>
            <td><input type="text" class="form-control form-control-sm text-center" name="spesifikasi_display[]" readonly placeholder="-"></td>
            <td>
                <input type="text" class="form-control form-control-sm amount-input" name="amount_unit[]" 
                    placeholder="0,00" step="0.01" min="0" maxlength="19" onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
            </td>
            <td>
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control form-control-sm" name="unit_display[]" 
                        placeholder="-- Pilih Unit --" readonly>
                    <input type="hidden" name="detail_kategori_unit_id[]">
                    <span class="input-group-text bg-primary text-light" style="cursor:pointer" 
                        onclick="openSelectUnitModal(${rowId})">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </td>
        </tr>
    `;
    
    $('#detailItemsBody').append(row);
    updateRowNumbers();
    updateSupplierSectionVisibility();
}

function addDetailRowWithData(detail) {
    detailRowCounter++;
    const rowId = detailRowCounter;
    
    const displayText = [
        detail.detail_kategori_code,
        detail.detail_kategori_name,
        detail.kategori_name
    ].filter(Boolean).join(' - ');
    
    const supplierDisplay = detail.supplier_name || '-';
    const brandDisplay = detail.brand_name || '-';
    const spesifikasiDisplay = detail.spesifikasi_name || '-';
    
    const row = `
        <tr id="row-${rowId}">
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeDetailRow(${rowId})">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
            <td class="text-center">${$('#detailItemsBody tr').length + 1}</td>
            <td>
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control form-control-sm" name="detail_kategori_display[]" 
                        placeholder="-- Pilih Detail Kategori --" readonly value="${displayText}">
                    <input type="hidden" name="detail_kategori_id[]" value="${detail.detail_kategori_id || ''}">
                    <input type="hidden" name="detail_kategori_spesifikasi_id[]" value="${detail.spesifikasi_id || ''}">
                    <span class="input-group-text bg-primary text-light" style="cursor:pointer" 
                        onclick="openSelectDetailKategoriModal(${rowId})">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </td>
            <td><input type="text" class="form-control form-control-sm text-center" name="supplier_display[]" readonly value="${supplierDisplay}"></td>
            <td><input type="text" class="form-control form-control-sm text-center" name="brand_display[]" readonly value="${brandDisplay}"></td>
            <td><input type="text" class="form-control form-control-sm text-center" name="spesifikasi_display[]" readonly value="${spesifikasiDisplay}"></td>
            <td>
                <input type="text" class="form-control form-control-sm amount-input" name="amount_unit[]" 
                    placeholder="0,00" step="0.01" min="0" maxlength="19" value="${detail.amount_unit ? formatRupiah(detail.amount_unit) : ''}" onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
            </td>
            <td>
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control form-control-sm" name="unit_display[]" 
                        placeholder="-- Pilih Unit --" readonly value="${detail.unit_name || ''}">
                    <input type="hidden" name="detail_kategori_unit_id[]" value="${detail.detail_kategori_unit_id || ''}">
                    <span class="input-group-text bg-primary text-light" style="cursor:pointer" 
                        onclick="openSelectUnitModal(${rowId})">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </td>
        </tr>
    `;
    
    $('#detailItemsBody').append(row);
    updateRowNumbers();
    updateSupplierSectionVisibility();
}

function removeDetailRow(rowId) {
    $(`#row-${rowId}`).remove();
    updateRowNumbers();
    updateSupplierSectionVisibility();
}

function updateRowNumbers() {
    $('#detailItemsBody tr').each(function(index) {
        $(this).find('td').eq(1).text(index + 1);
    });
}

// ============================================
// PO NUMBER AUTO-GENERATE
// ============================================
function generateNextPONumber(showAlert = false) {
    const poDate = $('#po_date').val();
    
    $.ajax({
        url: '{{ url("/trspoa/api/next-po-number") }}',
        type: 'GET',
        data: { po_date: poDate },
        dataType: 'json',
        beforeSend: function() {
            $('#po_number').prop('disabled', true);
        },
        success: function(response) {
            if (response.success && response.data && response.data.po_number) {
                $('#po_number').val(response.data.po_number);
                
                // Show notification only when explicitly requested (button click)
                if (showAlert) {
                    Swal.fire({
                        title: 'PO Number Generated!',
                        text: response.data.po_number,
                        icon: 'success',
                        timer: 1500,
                        showConfirmButton: false,
                        position: 'top-start',
                        toast: true
                    });
                }
            } else {
                if (showAlert) {
                    Swal.fire({
                        title: 'Error!',
                        text: response.message || 'Gagal generate PO number',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            }
        },
        error: function(xhr) {
            if (showAlert) {
                const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan saat generate PO number';
                Swal.fire({
                    title: 'Error!',
                    text: errorMsg,
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            }
        },
        complete: function() {
            $('#po_number').prop('disabled', false);
        }
    });
}
</script>
@endpush