@extends('layouts.master')

@section('title', 'Laporan Pembayaran Piutang')

@section('css')
    <style>
        .btn-square {
            width: 100px;
        }
        .table th, .table td {
            text-align: left;
            vertical-align: middle;
            padding: 12px;
        }
        .table thead {
            background-color: #f2f2f2;
        }
        .table-responsive {
            margin-top: 20px;
            overflow-x: auto;
            width: 100%;
        }
        .table {
            width: 100% !important;
            border-collapse: collapse;
            table-layout: auto;
        }
        .table td, .table th {
            white-space: nowrap;
            max-width: none !important;
        }
        .table td {
            padding: 10px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
        .table th {
            background-color: #f8f8f8;
            font-weight: bold;
            border-bottom: 2px solid #ddd;
        }
        .table td, .table th {
            border-left: none;
            border-right: none;
        }
        #priceReportTable_wrapper {
            margin-top: 20px;
        }
        .total-row {
            font-weight: bold;
            background-color: #f2f2f2;
        }
        .total-row.text-danger td {
            color: #dc3545 !important; /* This is the official Bootstrap 'danger' color (red) */
        }
        .list-group {
            position: absolute;
            z-index: 1000;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            background-color: #fff;
        }

        .list-group-item:hover {
            background-color: #f8f9fa;
        }
    </style>
@endsection

@section('content')
    <x-page-title title="Laporan Pembayaran Piutang" pagetitle="Laporan Pembayaran Piutang" />
    <hr>

    <div class="card">
        <div class="card-body">
            <h6 class="mb-4 text-uppercase">Laporan Pembayaran Piutang</h6>

            <div class="row mb-4">
                <label for="" class="mt-2">Tanggal</label>
                   <div class="col-md-3">
                        <label for="date-from">{{__('Dari')}}</label>
                        <div class="form-group d-flex">
                        <input type="date" id="date-from" class="form-control date-picker" >
                        <button type="button" class="btn btn-danger clear-date" data-target="#date-from"><i class="material-icons-outlined">close</i></button>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label for="date-to">{{__('Sampai')}}</label>
                        <div class="form-group d-flex">
                            <input type="date" id="date-to" class="form-control date-picker" >
                            <button type="button" class="btn btn-danger clear-date" data-target="#date-to"><i class="material-icons-outlined">close</i></button>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label for="search-customer">{{__('Search Customer')}}</label>
                            <div class="form-group d-flex position-relative">
                                <input type="text" id="search-customer" class="form-control" placeholder="Search by Customer Code, Name, or Address">
                                <input type="hidden" id="customer-code" name="customer">
                                <div id="customer-search-results" class="list-group" style="display:none; position:absolute; z-index:1000; width:100%; max-width:380px;">
                                    </div>
                                <button type="button" class="btn btn-danger clear-cust"><i class="material-icons-outlined">close</i></button>
                            </div>
                    </div>
                    <div class="col-md-3">
                        <label for="date-to">Salesman</label>
                        <select name="salesman" id="salesman" class="form-control">
                            <option value="">Semua</option>
                            @foreach ($salesman as $sales)
                                <option value="{{$sales->salesman_code}}">{{$sales->salesman_name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="date-to">Status</label>
                        <select name="status" id="status" class="form-control">
                            <option value="">Semua</option>
                            <option value="belum">Belum Lunas</option>
                            <option value="lunas">Lunas</option>
                        </select>
                    </div>
                    <div class="col-md-2 pt-4">
                        <button type="button" class="btn btn-primary" id="btn-search">Search</button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="priceReportTable" class="table table-hover mt-3">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Pelanggan</th>
                                <th>No Doc</th>
                                <th>Tanda Terima</th>
                                <th>Tanggal Doc</th>
                                <th>Salesman</th>
                                <th>Total Piutang</th>
                                <th>Sisa Piutang</th>
                                <th>Total Pembayaran</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                        </tbody>
                        <tfoot>
                            <tr class="total-row text-danger">
                                <td colspan="5"></td>
                                <td>Total</td>
                                <td id="total-piutang-nominal" class="text-end">0</td> <td id="total-detail-nominal" class="text-end">0</td>
                                <td id="total-detail-payment" class="text-end">0</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                    <div id="noDataMessage" style="text-align: center; margin-top: 20px; display: none;">
                        Tidak ada data untuk ditampilkan.
                    </div>
                </div>
            </div>
        </div>

        {{-- NEW MODAL FOR DOCUMENT DETAILS (ITEM NAME AND QTY) --}}
        <div class="modal fade" id="documentDetailModal" tabindex="-1" aria-labelledby="documentDetailModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="documentDetailModalLabel">Detail Dokumen</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Nama Barang</th>
                                        <th class="text-end">Qty</th>
                                    </tr>
                                </thead>
                                <tbody id="modal-document-body">
                                    </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a id="btnPrintDocument" href="#" target="_blank" class="btn btn-primary me-2">
                            <i class="material-icons-outlined">print</i> Print
                        </a>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- END NEW MODAL --}}

        <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="detailModalLabel">Detail Pembayaran</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>No Pembayaran</th>
                                        <th>Tanggal Pembayaran</th>
                                        <th>Metode Pembayaran</th>
                                        <th class="text-end">Nominal Pembayaran</th>
                                    </tr>
                                </thead>
                                <tbody id="modal-table-body">
                                    </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('scripts')
<script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
    const customers = @json($customers);
    let activeIndexCust = -1;

    // --- Customer Search Logic ---
    document.getElementById('search-customer').addEventListener('input', function () {
        activeIndexCust = -1; // Reset active index on new input
        let query = this.value.toLowerCase();
        let resultsContainer = document.getElementById('customer-search-results');
        resultsContainer.innerHTML = '';
        resultsContainer.style.display = 'none';

        if (query.length > 0) {
            let filteredCustomers = customers.filter(c =>
                c.customer_code.toLowerCase().includes(query) ||
                c.customer_name.toLowerCase().includes(query) ||
                c.address.toLowerCase().includes(query)
            );

            if (filteredCustomers.length > 0) {
                // Adjust position for search results list to be relative to its parent
                const parentRect = this.parentElement.getBoundingClientRect();
                resultsContainer.style.top = `${parentRect.height}px`; // Position below the input
                resultsContainer.style.left = `0px`;
                resultsContainer.style.width = `${parentRect.width}px`; // Match width of the form group

                resultsContainer.style.display = 'block';
                filteredCustomers.forEach((customer, index) => {
                    let listItem = document.createElement('a');
                    listItem.className = 'list-group-item list-group-item-action';
                    listItem.href = '#';
                    listItem.dataset.index = index;
                    listItem.innerHTML = `
                        <strong>${customer.customer_code}</strong> -
                        ${customer.customer_name} <br>
                        <small>${customer.address} - ${customer.city}</small>`;
                    listItem.addEventListener('click', function (e) {
                        e.preventDefault();
                        selectCustomer(customer);
                    });
                    resultsContainer.appendChild(listItem);
                });
            }
        }
    });

    // Keydown event listener for navigation on the input field
    document.getElementById('search-customer').addEventListener('keydown', function(e) {
        const resultsContainer = document.getElementById('customer-search-results');
        const items = resultsContainer.querySelectorAll('.list-group-item');
        if (items.length === 0) return;

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            if (activeIndexCust < items.length - 1) {
                activeIndexCust++;
                updateActiveCustomer(items);
            }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (activeIndexCust > -1) {
                activeIndexCust--;
                updateActiveCustomer(items);
            }
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (activeIndexCust >= 0 && items[activeIndexCust]) {
                items[activeIndexCust].click();
            } else {
                 // If enter is pressed without selection, trigger search if input has value
                 if(this.value.length > 0) {
                     $('#btn-search').click();
                 }
            }
        }
    });

    // Helper function to update active customer
    function updateActiveCustomer(items) {
        items.forEach((item, index) => {
            item.classList.toggle('active', index === activeIndexCust);
        });
        if (activeIndexCust >= 0 && items[activeIndexCust]) {
            items[activeIndexCust].scrollIntoView({ block: 'nearest' });
        }
    }

    // Select customer function
    function selectCustomer(customer) {
        document.getElementById('customer-code').value = customer.customer_code;
        document.getElementById('search-customer').value = `${customer.customer_name} - ${customer.customer_code}`;
        document.getElementById('customer-search-results').style.display = 'none';
    }

    // Close dropdowns when clicking outside
    document.addEventListener('click', function (e) {
        if (!e.target.closest('#search-customer') && !e.target.closest('#customer-search-results')) {
            document.getElementById('customer-search-results').style.display = 'none';
        }
    });

    $('.clear-cust').on('click', function() {
        document.getElementById('customer-code').value= '';
        document.getElementById('search-customer').value= '';
    });

    // Handle the date "delete" button clicks
    $('.clear-date').on('click', function() {
        var target = $(this).data('target');
        clearDateInput(target);
    });

    function clearDateInput(inputId) {
        // Get the raw DOM element from the jQuery object
        var inputElement = $(inputId)[0];
        // Check if the flatpickr instance exists on the element
        if (inputElement && inputElement._flatpickr) {
        // Call the clear() method on the stored instance
        inputElement._flatpickr.clear();
        }
    }
    let dataRows = [];
    // --- DataTables and AJAX Logic ---
    $(document).ready(function() {
        const formatCurrency = (amount) => amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        // Initialize DataTable
        const table = $('#priceReportTable').DataTable({
            // Assuming DataTable buttons extension is loaded from your scripts
            @if(Auth::user()->role=='RO01')
            dom: 'Bfrtip', // Add 'B' for buttons
            buttons: [
                'copy',
                {
                    extend: 'print',
                    footer: true, // Include tfoot in print
                    exportOptions: {
                        // Exclude the last column (index 8) which is 'Aksi'
                        columns: ':visible:not(:last-child)',
                        footer: function ( row, data, start, end, display ) {
                            // Get the raw values from the footer cells using their IDs
                            const piutang = $('#total-piutang-nominal').text();
                            const sisaPiutang = $('#total-detail-nominal').text();
                            const payment = $('#total-detail-payment').text();

                            // Return an array with content for each of the 8 exported columns (Index 0-7)
                            return [
                                'Total', // Col 0: No
                                '',      // Col 1: Pelanggan
                                '',      // Col 2: No Doc
                                '',      // Col 3: Tanggal Doc
                                '',      // Col 4: Salesman
                                piutang, // Col 5: Total Piutang
                                sisaPiutang, // Col 6: Sisa Piutang
                                payment  // Col 7: Total Pembayaran
                            ];
                        }
                    }
                },
                {
                    extend: 'excel',
                    footer: true, // Include tfoot in excel
                    exportOptions: {
                        columns: ':visible:not(:last-child)',
                        // THIS FUNCTION IS CRUCIAL FOR EXCEL/CSV EXPORTS
                        footer: function ( row, data, start, end, display ) {
                            const piutang = $('#total-piutang-nominal').text();
                            const sisaPiutang = $('#total-detail-nominal').text();
                            const payment = $('#total-detail-payment').text();

                            // 8 columns exported (No, Pelanggan, No Doc, Tanggal Doc, Salesman, Total Piutang, Sisa Piutang, Total Pembayaran)
                            return [
                                'Total', // Col 0 (No)
                                '',      // Col 1 (Pelanggan)
                                '',      // Col 2 (No Doc)
                                '',      // Col 3 (Tanggal Doc)
                                '',      // Col 4 (Salesman)
                                piutang, // Col 5 (Total Piutang)
                                sisaPiutang, // Col 6 (Sisa Piutang)
                                payment  // Col 7 (Total Pembayaran)
                            ];
                        }
                    }
                },
                // --- FIXED PDF CONFIGURATION ---
                {
                    extend: 'pdfHtml5',
                    footer: true,
                    // Column indexes for numeric data: Total Piutang (5), Sisa Piutang (6), Total Pembayaran (7)
                    // The 'Aksi' column (8) will be excluded via the exportOptions.
                    exportOptions: {
                        columns: ':visible:not(:last-child)',
                        // Apply the same footer logic as Excel to correctly position values
                        footer: function ( row, data, start, end, display ) {
                            const piutang = $('#total-piutang-nominal').text();
                            const sisaPiutang = $('#total-detail-nominal').text();
                            const payment = $('#total-detail-payment').text();

                            return [
                                'Total', // Col 0
                                '',      // Col 1
                                '',      // Col 2
                                '',      // Col 3
                                '',      // Col 4
                                piutang, // Col 5
                                sisaPiutang, // Col 6
                                payment  // Col 7
                            ];
                        }
                    },
                    customize: function ( doc ) {
                        // Loop through the data rows starting from the second row (index 1)
                        for (let i = 1; i < doc.content[1].table.body.length; i++) {
                            // Columns are 0-indexed in the PDF body array
                            // Total Piutang (Col 5)
                            doc.content[1].table.body[i][5].alignment = 'right';
                            // Sisa Piutang (Col 6)
                            doc.content[1].table.body[i][6].alignment = 'right';
                            // Total Pembayaran (Col 7)
                            doc.content[1].table.body[i][7].alignment = 'right';
                        }

                        // Center align the header cells if desired (optional but good practice)
                        const headerRow = doc.content[1].table.body[0];
                        for (let j = 0; j < headerRow.length; j++) {
                            headerRow[j].alignment = 'center';
                        }
                    }
                },
            ],
            @endif
            paging: false,
            searching: true,
            ordering: false,
            info: true,
            autoWidth: true,
            responsive: true,
            // Ensure no extra message/div is displayed initially when hiding the table
            language: {
                zeroRecords: "Tekan tombol 'Search' untuk memuat data.",
                emptyTable: "Tekan tombol 'Search' untuk memuat data.",
            },
            columns: [
                {
                    data: null,
                    render: function(data, type, row, meta) {
                        // 1. Check if it's a subtotal row. If so, return empty.
                        if (row.isSubtotal) {
                            return '';
                        }

                        // 2. Calculate the number of subtotal rows before the current row.
                        // This requires access to the 'dataRows' array defined outside the AJAX success function.
                        let subtotalCount = 0;

                        // Loop through all dataRows preceding the current row
                        for (let i = 0; i < meta.row; i++) {
                            if (dataRows[i].isSubtotal) {
                                subtotalCount++;
                            }
                        }

                        // 3. The actual row number is the current row index + 1, minus the count of preceding subtotal rows.
                        return (meta.row + 1) - subtotalCount;
                    }
                },
                { data: 'customer' },
                // MODIFIED: Added Document Detail button
                {
                    data: 'document_number',
                    render: function(data, type, row) {
                        if (row.isSubtotal) return '';
                        // Add button right next to the document number
                        return `${data} <button class="btn btn-warning btn-sm view-doc-details ms-2" title="Detail Item"><i class="material-icons-outlined" style="font-size: 14px;">info</i></button>`;
                    }
                },
                { data: 'receivable_list_number' },
                { data: 'document_date' },
                { data: 'salesman' },
                { data: 'total_debt', className: 'total_debt text-end' },
                { data: 'debt_balance', className: 'debt_balance text-end' },
                { data: 'total_payment', className: 'total_payment text-end' },
                {
                    data: null,
                    defaultContent: '',
                    render: function(data, type, row) {
                        // This function now correctly accesses the 'isSubtotal' property of the row object
                        return row.isSubtotal ? '' : '<button class="btn btn-info btn-sm view-details"><i class="material-icons-outlined">visibility</i></button>';
                    },
                    orderable: false,
                    searchable: false
                }
            ],
            // Add a drawCallback to reinitialize event listeners after each draw
            drawCallback: function() {
                // Re-bind click event for the new document detail button
                $('#priceReportTable tbody').off('click', 'button.view-doc-details').on('click', 'button.view-doc-details', function() {
                    const tr = $(this).closest('tr');
                    const rowData = table.row(tr).data();
                    showDocumentDetailsModal(rowData);
                });
            }
        });

        // Manually place the buttons if they exist
        @if(Auth::user()->role=='RO01')
        table.buttons().container().appendTo('#priceReportTable_wrapper .col-md-6:eq(0)');
        @endif

        // Initial state: hide table parent and show message
        $('#priceReportTable').parent().hide();
        $('#noDataMessage').show();

        // Search Button Handler
        $('#btn-search').on('click', function() {
            let date_from = $('#date-from').val();
            let date_to = $('#date-to').val();
            let salesman = $('#salesman').val();
            let customer = $('#customer-code').val();
            let status = $('#status').val();

            Swal.fire({
                title: 'Loading...',
                text: 'Harap Tunggu.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
            url: '{{ route("transaction.journal.invoice_payment_recap.fetch") }}',
            type: 'GET',
            data: { date_from: date_from, date_to: date_to, salesman: salesman, status: status, customer: customer },
            beforeSend: function() {
                table.clear().draw();
                $('#noDataMessage').hide();
                $('#priceReportTable').parent().show();
                dataRows = []; // Reset for new search
                $('#total-piutang-nominal').text('0.00');
                $('#total-detail-nominal').text('0.00');
                $('#total-detail-payment').text('0.00');
            },
            success: function(response) {
                Swal.close();

            let grandTotalPiutang = 0;
            let grandTotalDebtBalance = 0;
            let grandTotalPayment = 0;

            // Object to hold data grouped by customer
            let groupedByCustomer = {};

            if (response && response.length > 0) {

                // --- STEP 1: GROUP AND CALCULATE TOTALS ---
                $.each(response, function(index, item) {
                    // **CRITICAL FIX: Use a unique group key, falling back if customer_code is missing**
                    const customerCode = item.customer_code || item.customer; // Use name as fallback
                    const groupKey = `${customerCode}`; // Combine code/name and salesman for better uniqueness

                    const docKey = `${item.document_number}-${item.document_date}`;
                    const detailPayment = parseFloat(item.payment_nominal) || 0;
                    const totalDebt = parseFloat(item.total_debt) || 0;
                    const debtBalance = parseFloat(item.debt_balance) || 0;

                    console.log(item);

                    // Initialize customer group
                    if (!groupedByCustomer[groupKey]) {
                        groupedByCustomer[groupKey] = {
                            alias: item.alias,
                            origin_customer: item.origin_customer,
                            customer_name: item.customer,
                            customer_code: item.customer_code,
                            total_piutang_cust: 0,
                            total_debt_balance_cust: 0,
                            total_payment_cust: 0,
                            documents: {}
                        };
                    }

                    // Initialize document group (only once per unique document)
                    if (!groupedByCustomer[groupKey].documents[docKey]) {
                        groupedByCustomer[groupKey].documents[docKey] = {
                            customer: item.customer+' ('+item.customer_code+')' || 'N/A',
                            document_number: item.document_number || 'N/A',
                            receivable_list_number: item.receivable_list_number || 'N/A',
                            salesman: item.salesman || '',
                            document_date: item.document_date ? new Date(item.document_date).toLocaleDateString('en-GB', {
                                day: '2-digit', month: 'short', year: 'numeric'
                            }) : 'N/A',
                            raw_total_debt: totalDebt,
                            raw_debt_balance: debtBalance,
                            raw_total_payment: 0,
                            details: [], // For payment details modal
                            // NEW: Store document line item details (assuming item_name and qty exist in the response item)
                            // If item_name/qty are repeated for the same document in the response, you need to consolidate them here.
                            // Assuming response items are payment records, and document details are only available once per document.
                            // For simplicity, I'll store them as an array of unique items.
                            document_details: [] // For document details modal
                        };

                        // Accumulate Customer and Grand Totals (Debt/Balance only once per document)
                        groupedByCustomer[groupKey].total_piutang_cust += totalDebt;
                        groupedByCustomer[groupKey].total_debt_balance_cust += debtBalance;
                        grandTotalPiutang += totalDebt;
                        grandTotalDebtBalance += debtBalance;

                        // NEW: Populate document details (Assuming document details are structured in the response object)
                        if (item.document_details && Array.isArray(item.document_details)) {
                             // Assuming item.document_details is an array like [{item_name: '...', qty: X}, ...]
                             groupedByCustomer[groupKey].documents[docKey].document_details = item.document_details;
                        } else if (item.item_name && item.qty) {
                            // Alternatively, if the response flattens items: collect unique items.
                            // NOTE: This might oversimplify if the data is not structured correctly.
                            const detailItem = { item_name: item.item_name, qty: item.qty };
                            if (!groupedByCustomer[groupKey].documents[docKey].document_details.some(d => d.item_name === detailItem.item_name)) {
                                groupedByCustomer[groupKey].documents[docKey].document_details.push(detailItem);
                            }
                        }
                    }


                    // Accumulate Payments
                    groupedByCustomer[groupKey].documents[docKey].raw_total_payment += detailPayment;
                    groupedByCustomer[groupKey].total_payment_cust += detailPayment;
                    grandTotalPayment += detailPayment;

                    // Store individual payment details (for the modal)
                    groupedByCustomer[groupKey].documents[docKey].details.push({
                        payment_number: item.payment_number || 'N/A',
                        payment_date: item.payment_date ? new Date(item.payment_date).toLocaleDateString('en-GB', {
                            day: '2-digit', month: 'short', year: 'numeric'
                        }) : 'N/A',
                        payment_name: item.payment_name || 'N/A',
                        payment_nominal: formatCurrency(detailPayment),
                    });
                });

                // --- STEP 2: BUILD dataRows WITH INTERLEAVED SUBTOTALS ---
                dataRows = [];
                // Iterate over the *values* (the groups themselves)
                Object.values(groupedByCustomer).forEach(customerGroup => {
                    console.log(customerGroup);

                    // A. Add all document rows for the current customer
                    Object.values(customerGroup.documents).forEach(doc => {
                        // Format for display
                        doc.total_debt = formatCurrency(doc.raw_total_debt);
                        doc.debt_balance = formatCurrency(doc.raw_debt_balance);
                        doc.total_payment = formatCurrency(doc.raw_total_payment);
                        dataRows.push(doc);
                    });

                    // B. IMMEDIATELY add the subtotal row for the current customer
                    dataRows.push({
                        isSubtotal: true,
                        // Display the total row header
                        customer: `Total: ${!customerGroup.alias?customerGroup.customer_name:customerGroup.origin_customer} - ${customerGroup.customer_code}`,
                        document_number: '',
                        receivable_list_number: '',
                        document_date: '',
                        salesman: '',
                        total_debt: formatCurrency(customerGroup.total_piutang_cust),
                        debt_balance: formatCurrency(customerGroup.total_debt_balance_cust),
                        total_payment: formatCurrency(customerGroup.total_payment_cust),
                        details: [],
                        document_details: [], // Important: keep empty for subtotal
                        // This ensures the row is styled and ignored by detail modal logic
                        DT_RowAttr: {
                            'class': 'total-row text-danger'
                        }
                    });
                });

                // Load the processed data into the DataTable
                table.rows.add(dataRows).draw();

                // Update Grand Totals in the table footer
                $('#total-piutang-nominal').text(formatCurrency(grandTotalPiutang));
                $('#total-detail-nominal').text(formatCurrency(grandTotalDebtBalance));
                $('#total-detail-payment').text(formatCurrency(grandTotalPayment));

                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses!',
                        text: 'Data berhasil ditampilkan!',
                        timer: 2000,
                        showConfirmButton: false
                    });

                    } else {
                        // No data found
                        table.clear().draw();
                        $('#priceReportTable').parent().hide();
                        $('#noDataMessage').show();

                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian!',
                            text: 'Tidak ada data untuk kriteria yang dipilih.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                },
                error: function(error) {
                    Swal.close();
                    console.error("Error:", error);
                    alert('Terjadi kesalahan saat mengambil data. Silakan coba lagi.');
                    table.clear().draw();
                    $('#priceReportTable').parent().hide();
                    $('#noDataMessage').show();
                }
            });
        });


        // NEW FUNCTION: Document Details Modal Handler
        function showDocumentDetailsModal(rowData) {
            const modalBody = $('#modal-document-body');
            modalBody.empty(); // Clear previous content

            if (rowData && rowData.document_details && rowData.document_details.length > 0) {
                rowData.document_details.forEach(detail => {
                    const row = `
                        <tr>
                            <td>${detail.items.item_name}</td>
                            <td class="text-end">${detail.qty}</td>
                        </tr>
                    `;
                    modalBody.append(row);
                });
            } else {
                modalBody.append('<tr><td colspan="2">Tidak ada detail item untuk dokumen ini.</td></tr>');
            }

            // --- CRITICAL STEP: Set the Print Button URL with URL Encoding ---
            const documentNumber = rowData.document_number;

            // 1. URL Encode the document number
            const encodedDocumentNumber = encodeURIComponent(documentNumber);

            // 2. Construct the full URL for the print link
            const printUrl = `/OLIVIA/transaction/journal/link-print/${encodedDocumentNumber}`; // Adjust /link-print as necessary

            // 3. Set the href attribute of the button
            $('#btnPrintDocument').attr('href', printUrl);

            // 4. Update the modal title
            $('#documentDetailModalLabel').text(`Detail Dokumen: ${documentNumber}`);

            // Show the modal
            const documentDetailModal = new bootstrap.Modal(document.getElementById('documentDetailModal'));
            documentDetailModal.show();
        }
        // END NEW FUNCTION

        // Add event listener for the "Details" button (Payment Details)
        $('#priceReportTable tbody').on('click', 'button.view-details', function() {
            // Check if the modal structure exists before trying to open it
            if(!document.getElementById('detailModal')) {
                 console.error('Modal #detailModal not found in the DOM.');
                 alert('Detail modal is missing.');
                 return;
            }

            const tr = $(this).closest('tr');
            // DataTables row().data() retrieves the row object added by table.rows.add()
            const rowData = table.row(tr).data();
            const modalBody = $('#modal-table-body');
            modalBody.empty(); // Clear previous data

            if (rowData && rowData.details) {
                // Set Modal Title based on the main row data
                $('#detailModalLabel').text(`Detail Pembayaran: ${rowData.customer} - ${rowData.document_number}`);

                rowData.details.forEach(detail => {
                    modalBody.append(`
                        <tr>
                            <td>${detail.payment_number}</td>
                            <td>${detail.payment_date}</td>
                            <td>${detail.payment_name}</td>
                            <td class="text-end">${detail.payment_nominal}</td>
                        </tr>
                    `);
                });
            } else {
                modalBody.append(`<tr><td colspan="4" class="text-center">Tidak ada detail pembayaran.</td></tr>`);
            }

            // Show the modal using jQuery's modal function (assuming Bootstrap 5 or similar)
            $('#detailModal').modal('show');
        });

        // The new document detail button event handler is now inside the drawCallback,
        // but for safety and initial load, let's keep the one here too, or rely entirely on drawCallback.
        // I've chosen to implement it via drawCallback for reliable re-binding on search/sort.
        // We can add a simple check here for the first load.
        $('#priceReportTable tbody').on('click', 'button.view-doc-details', function() {
            const tr = $(this).closest('tr');
            const rowData = table.row(tr).data();
            showDocumentDetailsModal(rowData);
        });
    });
</script>
@endsection