@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">Tambah Budget Project</h5>
                    </div>

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

                    <div class="card-body">
                        <form id="formAddTrsbgt" method="POST">
                            @csrf

                            <!-- Header Section -->
                            <div class="row">
                                <!-- Project -->
                                <div class="col-md-6 mb-3">
                                    <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 required>

                                        <input type="hidden" id="project_id" name="project_id">

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

                                    <div class="invalid-feedback" id="error-project_id"></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"
                                        placeholder="Masukkan deskripsi (optional)" maxlength="255">
                                    <div class="invalid-feedback" id="error-description"></div>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <!-- Details Section -->
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="text-uppercase text-sm text-muted mb-3">
                                        <i class="fas fa-list"></i> Detail Anggaran
                                    </h6>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-sm" id="detailsTable">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center" width="50">Aksi</th>
                                            <th class="text-center" width="40">No</th>
                                            <th class="text-center" width="180">Detail Kategori <span class="text-danger">*</span></th>
                                            <th class="text-center" width="160">Supplier</th>
                                            <th class="text-center" width="160">Brand</th>
                                            <th class="text-center" width="180">Spesifikasi</th>
                                            <th class="text-center" style="min-width: 150px;">Unit<span class="text-danger">*</span></th>
                                            <th class="text-center" width="120">Qty (Unit)<span class="text-danger">*</span></th>
                                            <th class="text-center" width="140">Amount Rupiah/Unit<span class="text-danger">*</span></th>
                                            <th class="text-center" width="140">Total Amount (Rp) <span class="text-danger">*</span></th>
                                        </tr>
                                    </thead>
                                    <tbody id="detailsBody">
                                        <!-- Dynamic rows will be added here -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="text-danger small mt-1" id="error-details"></div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-success btn-sm" onclick="addDetailRow()">
                                        <i class="fas fa-plus me-1"></i> Tambah Detail
                                    </button>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <!-- Amount (Rp) - Total from Details -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="amount" class="form-label">
                                        Total Amount (Rp) <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control amount-input text-end" id="amount_display"
                                        placeholder="0,00" maxlength="19" required readonly
                                        onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
                                    <input type="hidden" name="amount" id="amount">
                                    <div class="invalid-feedback" id="error-amount"></div>
                                    <small class="text-muted">Total budget dalam Rupiah (otomatis dari detail)</small>
                                </div>
                            </div>

                            <hr class="horizontal dark">

                            <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('/trsbgt') }}'">
                                        <i class="fas fa-arrow-left me-1"></i> Kembali
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Include Modals --}}
@include('transc.trsbgt.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;
        // Get cursor position adjustment
        let cursorPos = input.selectionStart;
        let oldLength = value.length;
        
        // 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 kategoriData = [];
    let unitData = [];
    let isLoadingProjects = false;
    let isLoadingKategori = false;
    let isLoadingUnit = false;
    let detailRowIndex = 0;
    let currentDetailRow = null;

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

        // Load data awal
        loadProjects();
        loadDetailKategori();
        loadUnit();

        // Add first detail row
        addDetailRow();

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

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

            // Validate details
            const details = collectDetails();
            if (details.length === 0) {
                $('#error-details').text('Detail anggaran wajib diisi minimal 1 item.');
                Swal.fire({
                    title: 'Validasi Gagal!',
                    text: 'Silakan tambahkan minimal 1 detail anggaran',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }

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

            // Get amount value
            let amountValue = $('#amount').val();

            // Get form data
            const formData = {
                project_id: $('#project_id').val(),
                description: $('#description').val(),
                amount: amountValue,
                details: details,
                _token: $('input[name="_token"]').val()
            };

            // AJAX Post Request
            $.ajax({
                url: '{{ url("/trsbgt") }}',
                type: 'POST',
                data: formData,
                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("/trsbgt") }}';
                        });
                    } 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> Simpan');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.data.errors;
                        
                        $.each(errors, function(field, messages) {
                            if (field.startsWith('details.')) {
                                $('#error-details').text(messages[0]);
                            } else {
                                $(`#${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 menyimpan data';
                        
                        Swal.fire({
                            title: 'Error!',
                            text: errorMsg,
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }

                    $('#btnSubmit').prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
                }
            });
        });

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

        // Realtime total amount update
        $(document).on('keyup blur change', '#detailsBody input[id^="amount_rupiah_"]', function() {
            updateTotalAmount();
        });
        
        // Also update when amount_rupiah_unit changes
        $(document).on('keyup blur change', '#detailsBody input[id^="amount_rupiah_unit_"]', function() {
            autoCalculateAmountRupiah($(this).attr('id').replace('amount_rupiah_unit_', ''));
            updateTotalAmount();
        });
        
        // Also update when amount_unit changes
        $(document).on('keyup blur change', '#detailsBody input[id^="amount_unit_"]', function() {
            autoCalculateAmountRupiah($(this).attr('id').replace('amount_unit_', ''));
            updateTotalAmount();
        });

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

        // Search kategori
        $('#searchKategori').on('keyup', function() {
            const search = $(this).val().toLowerCase();
            renderKategoriTable(kategoriData.filter(k => 
                k.detail_kategori.toLowerCase().includes(search) ||
                k.code.toLowerCase().includes(search) ||
                (k.kategori_name && k.kategori_name.toLowerCase().includes(search))
            ));
        });

        // Search unit
        $('#searchUnit').on('keyup', function() {
            const search = $(this).val().toLowerCase();
            renderUnitTable(unitData.filter(u => 
                u.unit.toLowerCase().includes(search)
            ));
        });
    });

    // ============================================
    // DETAIL ROW FUNCTIONS
    // ============================================

    function addDetailRow() {
        // Validasi: semua row yang ada harus memiliki Detail Kategori, Unit, Qty, dan Amount Rupiah/Unit
        let isValid = true;
        let firstErrorRow = null;
        
        $('#detailsBody tr').each(function() {
            const row = $(this);
            const kategoriId = row.find('input[name$="[detail_kategori_id]"]').val();
            const unitId = row.find('input[name$="[detail_kategori_unit_id]"]').val();
            const amountUnit = row.find('input[name$="[amount_unit]"]').val();
            const amountRupiahUnit = row.find('input[name$="[amount_rupiah_unit]"]').val();
            
            // Check Detail Kategori
            if (!kategoriId) {
                row.find('input[id^="kategori_display_"]').addClass('is-invalid');
                isValid = false;
                if (!firstErrorRow) firstErrorRow = row;
            } else {
                row.find('input[id^="kategori_display_"]').removeClass('is-invalid');
            }
            
            // Check Unit
            if (!unitId) {
                row.find('input[id^="unit_display_"]').addClass('is-invalid');
                isValid = false;
                if (!firstErrorRow) firstErrorRow = row;
            } else {
                row.find('input[id^="unit_display_"]').removeClass('is-invalid');
            }
            
            // Check Qty (amount_unit)
            if (!amountUnit || amountUnit.trim() === '') {
                row.find('input[id^="amount_unit_"]').addClass('is-invalid');
                isValid = false;
                if (!firstErrorRow) firstErrorRow = row;
            } else {
                row.find('input[id^="amount_unit_"]').removeClass('is-invalid');
            }
            
            // Check Amount Rupiah/Unit
            if (!amountRupiahUnit || amountRupiahUnit.trim() === '') {
                row.find('input[id^="amount_rupiah_unit_"]').addClass('is-invalid');
                isValid = false;
                if (!firstErrorRow) firstErrorRow = row;
            } else {
                row.find('input[id^="amount_rupiah_unit_"]').removeClass('is-invalid');
            }
        });

        if (!isValid) {
            Swal.fire({
                title: 'Perhatian!',
                text: 'Mohon lengkapi Detail Kategori, Unit, Qty, dan Amount Rupiah/Unit pada setiap baris sebelum menambah data baru.',
                icon: 'warning',
                confirmButtonColor: '#028284'
            });
            // Scroll to first error row
            if (firstErrorRow) {
                $('html, body').animate({
                    scrollTop: firstErrorRow.offset().top - 100
                }, 300);
            }
            return;
        }
        
        detailRowIndex++;
        const rowHtml = `
            <tr id="detailRow${detailRowIndex}">
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeDetailRow(${detailRowIndex})">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
                <td class="text-center">${$('#detailsBody tr').length + 1}</td>
                        <td>
                            <input type="hidden" name="details[${detailRowIndex}][detail_kategori_id]" id="detail_kategori_id_${detailRowIndex}">
                            <input type="hidden" name="details[${detailRowIndex}][spesifikasi_id]" id="spesifikasi_id_${detailRowIndex}">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control form-control-sm" 
                            id="kategori_display_${detailRowIndex}" 
                            placeholder="-- Pilih Kategori --" readonly>
                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                            onclick="openSelectKategoriModalForRow(${detailRowIndex})">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm"
                        id="supplier_display_${detailRowIndex}"
                        placeholder="-" readonly>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm"
                        id="brand_display_${detailRowIndex}"
                        placeholder="-" readonly>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm"
                        id="spesifikasi_display_${detailRowIndex}"
                        placeholder="-" readonly>
                </td>
                <td>
                    <input type="hidden" name="details[${detailRowIndex}][detail_kategori_unit_id]" id="detail_kategori_unit_id_${detailRowIndex}">
                    <div class="input-group input-group-sm" style="flex-wrap: nowrap; min-width: 150px;">
                        <input type="text" class="form-control form-control-sm" 
                            id="unit_display_${detailRowIndex}" 
                            placeholder="-- Pilih Unit --" readonly>
                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                            onclick="openSelectUnitModalForRow(${detailRowIndex})">
                            <i class="fas fa-search"></i>
                        </span>
                        <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                            onclick="clearUnitForRow(${detailRowIndex})">
                            <i class="fas fa-times"></i>
                        </span>
                    </div>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm amount-input text-end" 
                        name="details[${detailRowIndex}][amount_unit]" 
                        id="amount_unit_${detailRowIndex}"
                        placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm amount-input text-end" 
                        name="details[${detailRowIndex}][amount_rupiah_unit]" 
                        id="amount_rupiah_unit_${detailRowIndex}"
                        placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)">
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm amount-input text-end" 
                        name="details[${detailRowIndex}][amount_rupiah]" 
                        id="amount_rupiah_${detailRowIndex}"
                        placeholder="0,00" maxlength="19" onkeyup="formatInputRupiah(this)" onblur="formatInputRupiahOnBlur(this)" readonly>
                </td>
            </tr>
        `;
        $('#detailsBody').append(rowHtml);
        renumberRows();
    }

    function removeDetailRow(index) {
        if ($('#detailsBody tr').length <= 1) {
            Swal.fire({ title: 'Tidak Bisa!', text: 'Minimal harus ada satu baris detail anggaran.', icon: 'warning', confirmButtonColor: '#028284' });
            return;
        }
        $(`#detailRow${index}`).remove();
        renumberRows();
        updateTotalAmount();
    }

    function renumberRows() {
        $('#detailsBody tr').each(function(i) {
            $(this).find('td:eq(1)').text(i + 1);
        });
    }

    function updateTotalAmount() {
        let totalAmountRupiah = 0;

        $('#detailsBody tr').each(function() {
            // Get amount_rupiah (direct input)
            const amountRupiah = $(this).find('input[name$="[amount_rupiah]"]').val();
            
            // Get amount_unit and amount_rupiah_unit for auto-calculation
            const amountUnit = $(this).find('input[name$="[amount_unit]"]').val();
            const amountRupiahUnit = $(this).find('input[name$="[amount_rupiah_unit]"]').val();
            
            // If amount_rupiah is directly entered, use it
            if (amountRupiah) {
                let parsed = parseRupiah(amountRupiah);
                if (parsed) {
                    totalAmountRupiah += parseFloat(parsed);
                }
            } 
            // Otherwise, calculate: amount_unit * amount_rupiah_unit
            else if (amountUnit && amountRupiahUnit) {
                let parsedUnit = parseRupiah(amountUnit);
                let parsedRupiahUnit = parseRupiah(amountRupiahUnit);
                if (parsedUnit && parsedRupiahUnit) {
                    totalAmountRupiah += (parseFloat(parsedUnit) * parseFloat(parsedRupiahUnit));
                }
            }
        });

        // Update display
        $('#amount_display').val(formatRupiah(totalAmountRupiah));
        $('#amount').val(totalAmountRupiah.toFixed(2));
    }
    
    function autoCalculateAmountRupiah(rowIndex) {
        const amountUnit = $('#amount_unit_' + rowIndex).val();
        const amountRupiahUnit = $('#amount_rupiah_unit_' + rowIndex).val();
        const amountRupiahInput = $('#amount_rupiah_' + rowIndex);
        
        // Only auto-calculate if both fields have value
        if (amountUnit && amountRupiahUnit) {
            let parsedUnit = parseRupiah(amountUnit);
            let parsedRupiahUnit = parseRupiah(amountRupiahUnit);
            
            if (parsedUnit && parsedRupiahUnit) {
                let calculated = parseFloat(parsedUnit) * parseFloat(parsedRupiahUnit);
                amountRupiahInput.val(formatRupiah(calculated));
            }
        }
    }

    function collectDetails() {
        const details = [];
        
        $('#detailsBody tr').each(function() {
            const row = $(this);
            const kategoriId = row.find('input[name$="[detail_kategori_id]"]').val();
            const unitId = row.find('input[name$="[detail_kategori_unit_id]"]').val();
            const amountUnit = row.find('input[name$="[amount_unit]"]').val();
            const amountRupiahUnit = row.find('input[name$="[amount_rupiah_unit]"]').val();
            const amountRupiah = row.find('input[name$="[amount_rupiah]"]').val();

            // Hanya push jika semua field wajib terisi: kategori, unit, qty, amount_rupiah_unit
            if (kategoriId && unitId && amountUnit && amountRupiahUnit) {
                details.push({
                    detail_kategori_id: kategoriId,
                    spesifikasi_id: row.find('input[name$="[spesifikasi_id]"]').val() || null,
                    detail_kategori_unit_id: unitId,
                    amount_unit: parseRupiah(amountUnit),
                    amount_rupiah_unit: parseRupiah(amountRupiahUnit),
                    amount_rupiah: amountRupiah ? parseRupiah(amountRupiah) : parseFloat(parseRupiah(amountUnit)) * parseFloat(parseRupiah(amountRupiahUnit))
                });
            }
        });

        updateTotalAmount();
        return details;
    }

    // ============================================
    // LOAD DATA FUNCTIONS
    // ============================================

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

    function loadDetailKategori() {
        isLoadingKategori = true;
        renderKategoriTable(kategoriData);
        
        $.ajax({
            url: '{{ url("/trsbgt/api/detail-kategori") }}',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    kategoriData = response.data;
                }
            },
            complete: function() {
                isLoadingKategori = false;
                renderKategoriTable(kategoriData);
            }
        });
    }

    function loadUnit() {
        isLoadingUnit = true;
        renderUnitTable(unitData);
        
        $.ajax({
            url: '{{ url("/trsbgt/api/unit") }}',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    unitData = response.data;
                }
            },
            complete: function() {
                isLoadingUnit = false;
                renderUnitTable(unitData);
            }
        });
    }

    // ============================================
    // RENDER TABLE FUNCTIONS
    // ============================================

    function renderProjectTable(data) {
        let html = '';
        
        if (isLoadingProjects) {
            html = '<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>';
        } else if (data.length === 0) {
            html = '<tr><td colspan="5" class="text-center">Tidak ada data</td></tr>';
        } else {
            data.forEach((item, index) => {
                html += `
                    <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 class="text-center">${index + 1}</td>
                        <td>${item.proyek}</td>
                        <td  class="${item.lokasi ? 'text-start' : 'text-center'}">${item.lokasi || '-'}</td>
                        <td  class="${item.no_spk ? 'text-start' : 'text-center'}">${item.no_spk || '-'}</td>
                    </tr>
                `;
            });
        }
        $('#projectTableBody').html(html);
    }

    function renderKategoriTable(data) {
        let html = '';
        
        if (isLoadingKategori) {
            html = '<tr><td colspan="8" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>';
        } else if (data.length === 0) {
            html = '<tr><td colspan="8" class="text-center">Tidak ada data</td></tr>';
        } else {
            data.forEach((item, index) => {
                html += `
                    <tr>
                        <td>
                            <button class="btn btn-primary btn-sm" onclick="selectKategoriForRow(${item.id}, '${(item.code || '').replace(/'/g, '&#39;')}', '${(item.detail_kategori || '').replace(/'/g, '&#39;')}', '${(item.supplier_name || '').replace(/'/g, '&#39;')}', '${(item.brand_name || '').replace(/'/g, '&#39;')}', '${(item.spesifikasi_name || '').replace(/'/g, '&#39;')}', ${item.spesifikasi_id ?? 'null'})">
                                <i class="fas fa-check"></i> Pilih
                            </button>
                        </td>
                        <td class="text-center">${index + 1}</td>
                        <td  class="${item.kategori_name ? 'text-start' : 'text-center'}">${item.kategori_name || '-'}</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="${item.supplier_name ? 'text-start' : 'text-center'}">${item.supplier_name || '-'}</td>
                        <td class="${item.brand_name ? 'text-start' : 'text-center'}">${item.brand_name || '-'}</td>
                        <td class="${item.spesifikasi_name ? 'text-start' : 'text-center'}">${item.spesifikasi_name || '-'}</td>
                    </tr>
                `;
            });
        }
        $('#kategoriTableBody').html(html);
    }

    function renderUnitTable(data) {
        let html = '';
        
        if (isLoadingUnit) {
            html = '<tr><td colspan="3" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>';
        } else if (data.length === 0) {
            html = '<tr><td colspan="3" class="text-center">Tidak ada data</td></tr>';
        } else {
            data.forEach((item, index) => {
                html += `
                    <tr>
                        <td>
                            <button class="btn btn-primary btn-sm" onclick="selectUnitForRow(${item.id}, '${item.unit}')">
                                <i class="fas fa-check"></i> Pilih
                            </button>
                        </td>
                        <td class="text-center">${index + 1}</td>
                        <td  class="${item.unit ? 'text-start' : 'text-center'}">${item.unit}</td>
                    </tr>
                `;
            });
        }
        $('#unitTableBody').html(html);
    }

    // ============================================
    // MODAL FUNCTIONS
    // ============================================

    function openSelectProjectModal() {
        $('.modal').modal('hide');
        setTimeout(function() {
            $('#modalSelectProject').modal('show');
            $('#searchProject').val('').focus();
            renderProjectTable(projectsData);
        }, 300);
    }

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

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

    function setKategoriMetaForRow(rowIndex, supplier, brand, spesifikasi) {
        $(`#supplier_display_${rowIndex}`).val(supplier || '-');
        $(`#brand_display_${rowIndex}`).val(brand || '-');
        $(`#spesifikasi_display_${rowIndex}`).val(spesifikasi || '-');
    }

    function selectKategoriForRow(id, code, detail_kategori, supplier, brand, spesifikasi, spesifikasiId = '') {
        if (currentDetailRow) {
            console.log('Spesifikasi ID:', spesifikasiId);
            $(`#detail_kategori_id_${currentDetailRow}`).val(id);
            $(`#spesifikasi_id_${currentDetailRow}`).val(spesifikasiId || '');
            $(`#kategori_display_${currentDetailRow}`).val(`${code} - ${detail_kategori}`);
            setKategoriMetaForRow(currentDetailRow, supplier, brand, spesifikasi);
            $('#modalSelectKategori').modal('hide');
            currentDetailRow = null;
        }
    }

    function openSelectUnitModalForRow(rowIndex) {
        currentDetailRow = rowIndex;
        $('.modal').modal('hide');
        setTimeout(function() {
            $('#modalSelectUnit').modal('show');
            $('#searchUnit').val('').focus();
            renderUnitTable(unitData);
        }, 300);
    }

    function selectUnitForRow(id, unit) {
        if (currentDetailRow) {
            $(`#detail_kategori_unit_id_${currentDetailRow}`).val(id);
            $(`#unit_display_${currentDetailRow}`).val(unit);
            $('#modalSelectUnit').modal('hide');
            currentDetailRow = null;
        }
    }

    function clearUnitForRow(rowIndex) {
        $(`#detail_kategori_unit_id_${rowIndex}`).val('');
        $(`#unit_display_${rowIndex}`).val('');
    }
</script>
@endpush