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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 id="nama_sales" class="text-center mb-3"></h2>
                    <h2 id="pageTitle" class="text-center mb-3">Loading...</h2>
                    <div class="summary-container card-data">
                        <div class="row card-section mb-3">
                            <div class="col-md-4">
                                <div class="card-line"><span class="label">TOTAL VOLUME</span><span
                                        class="colon">:</span><span class="value" id="vol">32.752,49 KG</span></div>
                                <div class="card-line"><span class="label">UNPAID PAYMENT VOLUME</span><span
                                        class="colon">:</span><span class="value" id="unpaidVol">29.440,49 KG</span></div>
                                <div class="card-line"><span class="label">ONTIME PAYMENT VOLUME</span><span
                                        class="colon">:</span><span class="value" id="ontimeVol">3.312,00 KG</span></div>
                                <div class="card-line"><span class="label">OVERDUE PAYMENT VOLUME</span><span
                                        class="colon">:</span><span class="value" id="lateVol">0,00 KG</span></div>
                            </div>

                            <div class="col-md-4">
                                <div class="card-line"><span class="label">TOTAL AMOUNT</span><span
                                        class="colon">:</span><span class="value" id="amount">360.089.455,00 IDR</span>
                                </div>
                                <div class="card-line"><span class="label">UNPAID PAYMENT AMOUNT</span><span
                                        class="colon">:</span><span class="value" id="unpaidPayment">73.601.455,00
                                        IDR</span></div>
                                <div class="card-line"><span class="label">ONTIME PAYMENT AMOUNT</span><span
                                        class="colon">:</span><span class="value" id="ontimePaymentAmount">286.488.000,00
                                        IDR</span></div>
                                <div class="card-line"><span class="label">OVERDUE PAYMENT AMOUNT</span><span
                                        class="colon">:</span><span class="value" id="latePaymentAmount">0,00 IDR</span>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card-line"><span class="label">TOTAL PAYMENT</span><span
                                        class="colon">:</span><span class="value" id="payment">315.136.800,00 IDR</span>
                                </div>
                                <div class="card-line"><span class="label">ONTIME PAYMENT</span><span
                                        class="colon">:</span><span class="value" id="ontimePayment">315.136.800,00
                                        IDR</span></div>
                                <div class="card-line"><span class="label">OVERDUE PAYMENT</span><span
                                        class="colon">:</span><span class="value" id="latePayment">0,00 IDR</span></div>
                            </div>
                        </div>

                    </div>
                    <div class="table-responsive">
                        <table class="table display table-list" id="list_{{ $dmenu }}">
                            <thead class="thead-light" style="background-color: #00b7bd4f;" id="table-head">
                                <th>Cust Name</th>
                                <th>Cust Group</th>
                                <th>Order Volume</th>
                                <th>Amount</th>
                                <th>Currency</th>
                            </thead>
                            <tbody id="table-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            const headerDetailPayment = @json($getDetailPaymentHeader);
            //console.log("Get Detail Payment Header ", headerDetailPayment);
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            const sales = urlParams.get('sales') || 'Unknown Sales';
            const month = urlParams.get('month') || 'Unknown Month';
            const year = urlParams.get('year') || 'Unknown Year';
            const currency = urlParams.get('currency') || 'Unknown Currency';

            if (headerDetailPayment) {
                // Order Volume
                const totalVol = headerDetailPayment[0]?.total_volume ?? 0;
                const unpaidVol = headerDetailPayment[0]?.unpaid_payment_volume ?? 0;
                const ontimeVol = headerDetailPayment[0]?.ontime_payment_volume ?? 0;
                const overdueVol = headerDetailPayment[0]?.overdue_payment_volume ?? 0;
                const satuanVol = headerDetailPayment[0]?.satuan_volume ?? '';
                const formattedOrderVol = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(totalVol) + ' ' + satuanVol;

                const formattedUnpaidOrderVol = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(unpaidVol) + ' ' + satuanVol;

                const formattedOntimeOrderVol = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(ontimeVol) + ' ' + satuanVol;

                const formattedOverdueOrderVol = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(overdueVol) + ' ' + satuanVol;
                //    end order volume

                // AMOUNT
                const totalAmount = currency === 'USD' ? headerDetailPayment[0].total_amount_usd :
                    headerDetailPayment[0].total_amount_idr;
                const unpaidPaymentAmount = currency === 'USD' ? headerDetailPayment[0].unpaid_payment_amount_usd :
                    headerDetailPayment[0].unpaid_payment_amount_idr;
                const ontimePaymentAmount = currency === 'USD' ? headerDetailPayment[0].ontime_payment_amount_usd :
                    headerDetailPayment[0].ontime_payment_amount_idr;
                const overduePaymentAmount = currency === 'USD' ? headerDetailPayment[0].overdue_payment_amount_usd :
                    headerDetailPayment[0].overdue_payment_amount_idr;
                //console.log("HEHE ", headerDetailPayment[0].overdue_payment_idr);

                const formattedAmount = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(totalAmount) + ' ' + currency;
                const formattedUnpaidPaymentAmount = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(unpaidPaymentAmount) + ' ' + currency;
                const formattedOntimePaymentAmount = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(ontimePaymentAmount) + ' ' + currency;
                const formattedOverduePaymentAmount = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(overduePaymentAmount) + ' ' + currency;
                console.log('Overdue Payment Amount ', overduePaymentAmount);
                // END AMOUNT

                // payment
                const totalPayment = currency === 'USD' ? headerDetailPayment[0].ontime_payment_usd :
                    headerDetailPayment[0].total_payment_idr;
                const ontimePayment = currency === 'USD' ? headerDetailPayment[0].ontime_payment_usd :
                    headerDetailPayment[0].ontime_payment_idr;
                const overduePayment = currency === 'USD' ? headerDetailPayment[0].overdue_payment_usd :
                    headerDetailPayment[0].overdue_payment_idr;


                const formattedPayment = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(totalPayment) + ' ' + currency;
                const formattedOntimePayment = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(ontimePayment) + ' ' + currency;
                const formattedOverduePayment = new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(overduePayment) + ' ' + currency;
                // end payment

                document.getElementById('pageTitle').innerText =
                    `Detail Payment Bulan ${month} (${year})`;
                document.getElementById('nama_sales').innerText = `Sales    : ${sales}`;
                // document.getElementById('sales').innerText = ` ${detailDataPayment.sales_name}`;
                document.getElementById('vol').innerText = `${formattedOrderVol}`;
                document.getElementById('unpaidVol').innerText = `${formattedUnpaidOrderVol} `;
                document.getElementById('lateVol').innerText = `${formattedOverdueOrderVol} `;
                document.getElementById('ontimeVol').innerText = `${formattedOntimeOrderVol} `;
                document.getElementById('amount').innerText = `${formattedAmount} `;
                document.getElementById('ontimePaymentAmount').innerText = `${formattedOntimePaymentAmount}`;
                document.getElementById('latePaymentAmount').innerText = `${formattedOverduePaymentAmount}`;
                document.getElementById('unpaidPayment').innerText = `${formattedUnpaidPaymentAmount} `;
                document.getElementById('payment').innerText = `${formattedPayment} `;
                document.getElementById('ontimePayment').innerText = `${formattedOntimePayment}`;
                document.getElementById('latePayment').innerText = `${formattedOverduePayment}`;

            }
            // Inisialisasi tabel pertama kali
            commonButtons[1].action();
        });

        // Definisikan tombol-tombol DataTable
        const commonButtons = [{
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i> Excel',
                autoFilter: true,
                sheetName: 'Exported data',
                customize: function(xlsx) {
                    const sheet = xlsx.xl.worksheets['sheet1.xml'];
                    // Contoh: Set style untuk kolom tertentu

                },
                action: function(e, dt, button, config) {
                    const table = $('#list_dashboard').DataTable();
                    const visibleData = table.rows({
                        search: 'applied'
                    }).data().toArray();
                    config.exportOptions.columns = ':visible:not(:last-child)'; // Kolom yang terlihat
                    $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, button, config);
                },
                exportOptions: {
                    columns: ':visible:not(:last-child)' // Jangan ekspor kolom aksi
                }
            },
            {
                text: '<i class="fas fa-user"></i> <span class="font-weight-bold">Filter By Customer</span>',
                action: function() {
                    // Ambil data dari sessionStorage
                    const detailDataAmountByCust = @json($filterByCust);
                    const detailTransactionPayment = @json($detailTransactionPayment);
                    const queryString = window.location.search;
                    const urlParams = new URLSearchParams(queryString);
                    const currency = urlParams.get('currency') || 'Unknown Currency';

                    // const customerDetail = detailDataAmount.customerDetail ?
                    //     Object.values(detailDataAmount.customerDetail) : [];

                    const dataRows = detailDataAmountByCust.map(d => {
                        const customerCode = d.code_customer;

                        const hasLatePayment = detailTransactionPayment.some(detail => {
                            return detail.customer_name === customerCode &&
                                detail.tgl_pembayaran &&
                                detail.tgl_jatuh_tempo &&
                                new Date(detail.tgl_pembayaran) > new Date(detail.tgl_jatuh_tempo);
                        });

                        return {
                            rowData: [
                                d.code_customer || 'N/A',
                                d.customer_group || 'N/A',
                                d.total_vol || 0,
                                currency === 'USD' ? (d.total_amount_usd || 0) : (d.total_amount_idr ||
                                    0),
                                currency
                            ],
                            isProblematic: hasLatePayment
                        };
                    });

                    updateTable(dataRows, [{
                            title: 'Cust Name',
                            className: ''
                        },
                        {
                            title: 'Cust Group',
                            className: ''
                        },
                        {
                            title: 'Order Volume',
                            className: 'text-end'
                        },
                        {
                            title: 'Amount',
                            className: 'text-end'
                        },
                        {
                            title: 'Currency',
                            className: ''
                        },


                    ]);
                }
            },
            {
                text: '<i class="fas fa-cart-shopping"></i> <span class="font-weight-bold">Detail Transaction</span>',
                action: function() {
                    const detailTransactionPayment = @json($detailTransactionPayment);
                    console.log("Detail Transaction ", detailTransactionPayment);
                    const queryString = window.location.search;
                    const urlParams = new URLSearchParams(queryString);
                    const currency = urlParams.get('currency') || 'Unknown Currency';

                    //const paymentDetails = detailDataPayment.payment?.details || [];
                    // const paymentDetail = detailDataPayment.payment.details ?
                    //     Object.values(detailDataPayment.payment.details) : [];
                    const dataRows = detailTransactionPayment.map(d => ({
                        rowData: [
                            d.no_billing || 'N/A',
                            d.customer_name || 'N/A',
                            d.order_volume || 0,
                            currency === 'USD' ? (d.amount_usd || 0) : (d.amount_idr || 0),
                            currency === 'USD' ? (d.payment_usd || 0) : (d.payment_idr || 0),
                            currency,
                            d.tgl_jatuh_tempo || 'N/A',
                            d.tgl_pembayaran || 'N/A'
                        ],
                        isProblematic: d.tgl_pembayaran > d.tgl_jatuh_tempo ? true : false,
                    }));

                    updateTable(dataRows, [{
                            title: 'No. Billing'
                        },
                        {
                            title: 'Cust Name'
                        },
                        {
                            title: 'Order Volume',
                            className: 'text-end'
                        },
                        {
                            title: 'Amount',
                            className: 'text-end'
                        },
                        {
                            title: 'Payment',
                            className: 'text-end'
                        },
                        {
                            title: 'Currency'
                        },
                        {
                            title: 'Due Date'
                        },
                        {
                            title: 'Payment Date'
                        }

                    ]);
                }
            },
            {
                text: '<i class="fas fa-clock"></i> <span class="font-weight-bold">Late Payments</span>',
                action: function() {
                    const detailLatePayment = @json($latePayments);
                    console.log("Late Payments :", detailLatePayment);
                    const queryString = window.location.search;
                    const urlParams = new URLSearchParams(queryString);
                    const currency = urlParams.get('currency') || 'Unknown Currency';

                    //const paymentDetails = detailDataPayment.payment?.details || [];
                    // const paymentDetail = detailDataPayment.payment.details ?
                    //     Object.values(detailDataPayment.payment.details) : [];
                    const dataRows = detailLatePayment.map(d => ({
                        rowData: [
                            d.no_billing || 'N/A',
                            d.customer_name || 'N/A',
                            d.order_volume || 0,
                            currency === 'USD' ? (d.amount_usd || 0) : (d.amount_idr || 0),
                            currency === 'USD' ? (d.payment_usd || 0) : (d.payment_idr || 0),
                            currency,
                            d.tgl_jatuh_tempo || 'N/A',
                            d.tgl_pembayaran || 'N/A'
                        ],
                        isProblematic: true
                    }));

                    updateTable(dataRows, [{
                            title: 'No. Billing'
                        },
                        {
                            title: 'Cust Name'
                        },
                        {
                            title: 'Order Volume',
                            className: 'text-end'
                        },
                        {
                            title: 'Amount',
                            className: 'text-end'
                        },
                        {
                            title: 'Payment',
                            className: 'text-end'
                        },
                        {
                            title: 'Currency'
                        },
                        {
                            title: 'Due Date'
                        },
                        {
                            title: 'Payment Date'
                        }

                    ]);
                }
            }
        ];

        function updateTableHeaders(newHeaders) {
            // Hapus header lama
            $('#list_{{ $dmenu }} thead').empty();

            // Buat header baru
            const headerHTML = newHeaders.map(header => `<th class="${header.className || ''}">${header.title}</th>`).join(
                '');
            console.log(headerHTML)
            $('#list_{{ $dmenu }} thead').html(`<tr>${headerHTML}</tr>`);

        }

        function updateTable(dataRows, columns) {
            // Hapus DataTable lama jika ada
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                const table = $('#list_{{ $dmenu }}').DataTable();
                table.clear(); // Hapus data lama
                table.destroy(); // Hapus instance DataTable
                $('#list_{{ $dmenu }} tbody').empty(); // Hapus elemen tabel
                $('#list_{{ $dmenu }} tbody').html(''); // Buat ulang struktur tabel
            }
            // Reset header tabel
            updateTableHeaders(columns);
            // Debug: Periksa data yang akan digunakan
            console.log("Data untuk Tabel:", dataRows);
            console.log("Kolom untuk Tabel:", columns);

            // Inisialisasi DataTable baru
            $('#list_{{ $dmenu }}').DataTable({
                data: dataRows.map(row => row.rowData),
                columns: columns.map((col, index) => ({
                    title: col.title,
                    data: index,
                    className: col.className || '',
                    render: function(data, type, row, meta) {
                        const columnName = col.title.toLowerCase();

                        // Cek apakah kolom ini angka yang perlu diformat
                        const isCurrencyColumn = ['order volume', 'amount', 'payment'].includes(
                            columnName);

                        if (isCurrencyColumn) {
                            let raw = data;

                            // 1. Deteksi format
                            let numeric = 0;
                            if (typeof raw === 'string') {
                                // Format IDR: 3.724,00 → 3724.00
                                if (raw.includes(',') && raw.includes('.')) {
                                    numeric = parseFloat(raw.replace(/\./g, '').replace(',', '.'));
                                }
                                // Format USD: 3,724.00 → 3724.00
                                else if (raw.includes(',')) {
                                    numeric = parseFloat(raw.replace(/,/g, ''));
                                } else {
                                    numeric = parseFloat(raw);
                                }
                            } else {
                                numeric = parseFloat(raw);
                            }

                            // 2. Untuk sorting/filtering
                            if (type !== 'display') return numeric;

                            // 3. Tampilkan sesuai currency
                            const currency = row[columns.length - 2] ||
                                'IDR'; // Misal kolom 'Currency' ada di index terakhir-1
                            const locale = currency === 'USD' ? 'en-US' : 'id-ID';

                            return numeric.toLocaleString(locale, {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });
                        }

                        return data;
                    }
                })),
                dom: 'Bfrtip',
                buttons: commonButtons,
                responsive: true,
                autoWidth: false,
                order: [
                    [3, 'desc']
                ],
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                drawCallback: function(settings) {
                    const api = this.api(); // Akses API DataTables
                    api.rows({
                        page: 'current'
                    }).every(function(rowIdx) {
                        const row = this.node(); // Akses elemen DOM baris
                        if (dataRows[rowIdx].isProblematic) {
                            $(row).addClass(
                                'bg-custom-opacity'); // Tambahkan warna merah untuk baris bermasalah
                        }
                    });
                } // Titik koma dihapus dari sini
            });

            // Tambahkan styling ulang pada tombol
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');
        }
    </script>
    <style>
        .bg-custom-opacity {
            background-color: rgba(221, 0, 0, 0.5) !important;
            color: white;
        }

        /* .card-data {
                                                                                                                            text-align: left;

                                                                                                                        }

                                                                                                                        .card-data .label {
                                                                                                                            display: inline-block;
                                                                                                                            width: 50%;
                                                                                                                            text-align: left;
                                                                                                                            font-weight: bold;
                                                                                                                        }

                                                                                                                        .card-data .value {
                                                                                                                            display: inline-block;
                                                                                                                            text-align: right;
                                                                                                                            color: #333;
                                                                                                                        }

                                                                                                                        .card-data div {
                                                                                                                            margin-bottom: 10px;
                                                                                                                        } */

        .card-section {
            font-size: 16px;
        }

        .card-line {
            display: grid;
            grid-template-columns: auto 4px 1fr;
            column-gap: 2px;
            margin-bottom: 10px;
        }

        .card-line .label {
            font-weight: bold;
            white-space: nowrap;
        }

        .card-line .colon {
            text-align: center;
            width: 4px;
            padding-right: 0;
            /* pastikan tidak ada tambahan */
        }

        .card-line .value {
            text-align: right;
            padding-left: 4px;
            /* geser ke kiri */
        }
    </style>
@endpush