@extends('layouts.master')

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

@section('css')
    <style>
        .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;
        }
        #receivableCardTable_wrapper {
            margin-top: 20px;
        }
        .total-row {
            font-weight: bold;
            background-color: #f2f2f2;
        }
        .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 Saldo Piutang" pagetitle="Laporan Saldo Piutang" />
    <hr>

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

            <div class="row mb-4">
                <div class="col-md-3">
                    <label for="date-to">{{__('Date To')}}</label>
                    <input type="date" id="date-to" class="form-control date-picker" value="{{ now()->endOfMonth()->toDateString() }}">
                </div>
                <div class="col-md-3">
                    <label for="search-customer">{{__('Search Customer')}}</label>
                    <div class="form-group">
                        <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_code" value="all">
                        <div id="customer-search-results" class="list-group" style="display:none; position:absolute; z-index:1000; width:100%; max-width:380px;">
                            </div>
                    </div>
                </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="receivableCardTable" class="table table-hover mt-3">
                    <thead>
                        <tr>
                            <th>{{__("Customer Code")}}</th>
                            <th>{{__("Customer Name")}}</th>
                            <th>Saldo</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                        </tbody>
                </table>
            </div>
            <p class="text-center mt-4" id="noDataMessage">Silakan pilih tanggal dan customer, lalu klik "Search" untuk melihat data Saldo Piutang.</p>
        </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>
    // Populate customers from Laravel
    const customers = @json($customers);

    let activeIndexCust = -1;
    document.getElementById('search-customer').focus();

    // Customer autocomplete
    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';
        document.getElementById('customer-code').value = 'all';

        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) {
                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
        this.addEventListener('keydown', function(e) {
            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) { // Allow going back to no selection
                    activeIndexCust--;
                    updateActiveCustomer(items);
                }
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (activeIndexCust >= 0 && items[activeIndexCust]) {
                    items[activeIndexCust].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';
        }
    });

    $(document).ready(function() {
        const indonesianMonths = {
            '01': 'Januari',
            '02': 'Februari',
            '03': 'Maret',
            '04': 'April',
            '05': 'Mei',
            '06': 'Juni',
            '07': 'Juli',
            '08': 'Agustus',
            '09': 'September',
            '10': 'Oktober',
            '11': 'November',
            '12': 'Desember'
        };
        const table = $('#receivableCardTable').DataTable({
            paging: true,
            searching: true,
            ordering: false,
            info: true,
            autoWidth: true,
            responsive: true,
            columns: [
                {
                    data: 'customer_code',
                    className: 'customer-code',
                },
                {
                    data: 'customer_name',
                    className: 'customer-name',
                },

                {
                    data: 'saldo',
                    className: 'saldo text-end',
                    render: function (data) {
                        return parseFloat(data).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    }
                }
            ],
            buttons: [
                {
                    extend: 'copy',
                },
                {
                    extend: 'print',
                },
                {
                    extend: 'excel',
                    filename: function() {
                        var dateTo = formatDateToDDMMMYYYY($('#date-to').val());
                        return 'OLIVIA_LaporanSaldoPiutang_' + dateTo;
                    },
                },
                {
                    extend: 'pdf',
                    title:'',
                    filename: function() {
                        var dateTo = formatDateToDDMMMYYYY($('#date-to').val());
                        return 'OLIVIA_LaporanSaldoPiutang_' + dateTo;
                    },
                    pageSize: 'A4',
                    orientation: 'landscape',
                    customize: function(doc) {
                        doc.pageMargins = [20, 60, 20, 40];
                        // Remove default table header
                        doc.content[0].table.headerRows = 0;

                        // Right-align numeric columns (Total Hutang, Total Terbayar, Sisa Hutang)
                        doc.content[0].table.body.forEach(row => {
                            row[4].alignment = 'right'; // Total Hutang
                            row[5].alignment = 'right'; // Total Terbayar
                            row[6].alignment = 'right'; // Sisa Hutang
                        });

                        // Get date_from and date_to
                        let dateTo = $('#date-to').val();

                        // Format dates to Indonesian format
                        let formattedDateTo = '';
                        if (dateTo) {
                            const [yearTo, monthTo, dayTo] = dateTo.split('-');
                            formattedDateTo = `${parseInt(dayTo)} ${indonesianMonths[monthTo]} ${yearTo}`;
                        } else {
                            formattedDateTo = 'Akhir';
                        }

                        // Add custom header
                        doc.content = [{
                            text: [
                                { text: 'Laporan Saldo Piutang\n', fontSize: 14, bold: true },
                                { text: 'Olivia\n', fontSize: 12 },
                                { text: `Untuk periode per ${formattedDateTo}`, fontSize: 12 }
                            ],
                            alignment: 'center',
                            margin: [0, 0, 0, 20]
                        }, {
                            table: doc.content[0].table,
                            layout: {
                                hLineWidth: function(i, node) { return 0.5; },
                                vLineWidth: function(i, node) { return 0.5; },
                                hLineColor: function(i, node) { return '#000000'; },
                                vLineColor: function(i, node) { return '#000000'; },
                                paddingLeft: function(i, node) { return 4; },
                                paddingRight: function(i, node) { return 4; },
                                paddingTop: function(i, node) { return 4; },
                                paddingBottom: function(i, node) { return 4; }
                            },
                            margin: [0, 0, 0, 0],
                        }];


                        doc.content[1].table.body[0].forEach(cell => {
                            cell.fillColor = '#ffffff';
                            cell.color = '#000000';
                            cell.fontSize = 10;
                            cell.bold = true;
                        });

                    },
                },
            ],
        });

        function formatDateToDDMMMYYYY(dateString) {
            if (!dateString) return 'all'; // Fallback for empty dates
            var date = new Date(dateString);
            var day = String(date.getDate()).padStart(2, '0');
            var month = date.toLocaleString('en-US', { month: 'short' });
            var year = date.getFullYear();
            return `${day}${month}${year}`;
        }

        table.buttons().container()
            .appendTo( '#receivableCardTable_wrapper .col-md-6:eq(0)' );

        $('#noDataMessage').show();
        $('#receivableCardTable').parent().hide();

        $('#btn-search').on('click', function() {
            let dateTo = $('#date-to').val();
            let customer = $('#customer-code').val();

            if (!dateTo) {
                alert('Please select a date range.');
                return;
            }

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

            $.ajax({
                url: '{{ route("receivable_balance.data") }}',
                type: 'GET',
                data: {
                    date_to: dateTo,
                    customer_code: customer
                },
                beforeSend: function() {
                    table.clear();
                    $('#noDataMessage').hide();
                    $('#receivableCardTable').parent().show();
                },
                success: function(response) {
                    let dataRows = [];

                    if (response && response.length > 0) {
                        $.each(response, function(index, item) {
                            dataRows.push(item);
                        });
                        table.clear().rows.add(dataRows).draw();
                        Swal.fire({
                            icon: 'success',
                            title: 'Sukses!',
                            text: 'Data berhasil ditampilkan!',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('#noDataMessage').hide();
                    } else {
                        $('#noDataMessage').show();
                        $('#receivableCardTable').parent().hide();
                    }
                },
                error: function(error) {
                    console.error("Error:", error);
                    alert('Terjadi kesalahan. Silakan coba lagi.');
                }
            });
        });
    });
</script>
@endsection