@extends('layouts.master')

@section('title', 'Laporan Pencairan Pembayaran Hutang')

@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;
        }
        .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 Pencairan Pembayaran Hutang" pagetitle="Laporan Pencairan Pembayaran Hutang" />
    <hr>

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

            <!-- Filters -->
            <div class="row mb-4">
                <label for="" class="mt-2">Tanggal Pencairan</label>
                 <div class="col-md-3">
                    <label for="date-from">{{__('Dari')}}</label>
                    <input type="date" id="date-from" class="form-control date-picker" value="{{ now()->startOfMonth()->toDateString() }}">
                </div>
                <div class="col-md-3">
                    <label for="date-to">{{__('Sampai')}}</label>
                    <input type="date" id="date-to" class="form-control date-picker" value="{{ now()->endOfMonth()->toDateString() }}">
                </div>
                <div class="col-md-2 pt-4">
                    <button type="button" class="btn btn-primary" id="btn-search">Search</button>
                </div>
            </div>

            <!-- Data Table -->
            <div class="table-responsive">
                <table id="priceReportTable" class="table table-hover mt-3">
                    <thead>
                        <tr>
                            <th>Supplier</th>
                            <th>Tanggal Pencairan</th>
                            <th>Status</th>
                            <th>Total Nominal Bayar</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                        </tbody>
                    <tfoot>
                        <tr class="total-row">
                            <td colspan="3">Total</td>
                            <td id="total-detail-nominal" class="text-end">0</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <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 Pencairan Pembayaran Hutang</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 Doc</th>
                            <th>Tanggal Doc</th>
                            <th>Nomor Pelunasan</th>
                            <th>Nominal Bayar</th>
                            <th>Detail Nominal Bayar</th>
                            <th>Tanggal Input Pelunasan</th>
                            </tr>
                        </thead>
                        <tbody id="modal-table-body">
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                    </div>
                    </div>
                </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>
    $(document).ready(function() {
        const table = $('#priceReportTable').DataTable({
            @if(Auth::user()->role=='RO01')
            buttons: [
                'copy',
                'print',
                'excel',
                'pdf',
            ],
            @endif
            paging: true,
            searching: true,
            ordering: false,
            info: true,
            autoWidth: true,
            responsive: true,
            columns: [
                { data: 'supplier', className: 'supplier' },
                { data: 'tgl_pencairan', className: 'tgl_pencairan' },
                { data: 'status', className: 'status' },
                { data: 'total_detail_nominal', className: 'total_detail_nominal text-end' },
                {
                    data: null,
                    defaultContent: '<button class="btn btn-info btn-sm view-details"><i class="material-icons-outlined">visibility</i></button>',
                    orderable: false,
                    searchable: false
                }
            ]
        });

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

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

        $('#btn-search').on('click', function() {
            let date_from = $('#date-from').val();
            let date_to = $('#date-to').val();

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

            $.ajax({
                url: '{{ route("transaction.pencairan.report.fetch") }}',
                type: 'GET',
                data: { date_from: date_from, date_to: date_to },
                beforeSend: function() {
                    table.clear();
                    $('#noDataMessage').hide();
                    $('#priceReportTable').parent().show();
                },
                success: function(response) {
                    let groupedData = {};
                    let grandTotalDetailNominal = 0;

                    if (response && response.length > 0) {
                        $.each(response, function(index, item) {
                            const groupKey = `${item.supplier}-${item.tgl_pencairan}`;
                            const detailNominal = parseFloat(item.detail_nominal_payment) || 0;

                            if (!groupedData[groupKey]) {
                                groupedData[groupKey] = {
                                    supplier: item.supplier || 'N/A',
                                    status:item.status || 'Belum Dicairkan',
                                    tgl_pencairan: item.tgl_pencairan ? new Date(item.tgl_pencairan).toLocaleDateString('en-GB', {
                                        day: '2-digit',
                                        month: 'short',
                                        year: 'numeric'
                                    }) : 'N/A',
                                    total_detail_nominal: 0,
                                    details: []
                                };
                            }

                            groupedData[groupKey].total_detail_nominal += detailNominal;
                            groupedData[groupKey].details.push({
                                document_number: item.document_number || 'N/A',
                                document_date: item.document_date ? new Date(item.document_date).toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric'
                                }) : 'N/A',
                                payment_number: item.payment_number || 'N/A',
                                nominal_payment: item.nominal_payment ? parseFloat(item.nominal_payment).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0.00',
                                detail_nominal_payment: detailNominal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','),
                                created_at: item.created_at
                            });
                        });

                        const dataRows = Object.values(groupedData).map(group => {
                            group.total_detail_nominal = group.total_detail_nominal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                            grandTotalDetailNominal += parseFloat(group.total_detail_nominal.replace(/,/g, '')) || 0;
                            return group;
                        });

                        table.rows.add(dataRows).draw();

                        Swal.fire({
                            icon: 'success',
                            title: 'Sukses!',
                            text: 'Data berhasil ditampilkan!',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('#total-detail-nominal').text(grandTotalDetailNominal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','));
                        $('#noDataMessage').hide();
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Sukses!',
                            text: 'Tidak ada data untuk tanggal ini!',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('#noDataMessage').show();
                        $('#priceReportTable').parent().hide();
                    }
                },
                error: function(error) {
                    console.error("Error:", error);
                    alert('Terjadi kesalahan. Silakan coba lagi.');
                }
            });
        });

        // Add event listener for the "Details" button
        $('#priceReportTable tbody').on('click', 'button.view-details', function() {
            const tr = $(this).closest('tr');
            const rowData = table.row(tr).data();
            const modalBody = $('#modal-table-body');
            modalBody.empty(); // Clear previous data

            if (rowData && rowData.details) {
                rowData.details.forEach(detail => {
                    modalBody.append(`
                        <tr>
                            <td>${detail.document_number}</td>
                            <td>${detail.document_date}</td>
                            <td>${detail.payment_number}</td>
                            <td class="text-end">${detail.nominal_payment}</td>
                            <td class="text-end">${detail.detail_nominal_payment}</td>
                            <td class="text-end">${detail.created_at}</td>
                        </tr>
                    `);
                });
            }

            $('#detailModal').modal('show');
        });
    });
</script>
@endsection