@extends('layouts.master')

@section('title','Laporan Penerimaan')

@section('css')
    <style>
        .btn-insert {
            margin-bottom: 20px;
        }

        .btn-print,
        .btn-edit {
            margin-right: 10px;
        }

        .date-filter {
            margin-bottom: 20px;
        }

        /* Align the total amount row to the right */
        .total-amount-row td {
            font-weight: bold;
            text-align: right;
            background-color: #f8f9fa;
        }
    </style>
@endsection

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

    <div class="mb-3 card">
        <div class="card-body">
            <form method="GET" action="{{ route('transaction.purchase_invoice.summary_receipt') }}">
                <div class="row">
                    <div class="col-md-4">
                        <label for="from_date">From Date</label>
                        <input type="date" name="from_date" id="from_date" class="form-control date-picker"
                            value="{{ request()->from_date }}">
                    </div>
                    <div class="col-md-4">
                        <label for="to_date">To Date</label>
                        <input type="date" name="to_date" id="to_date" class="form-control date-picker"
                            value="{{ request()->to_date }}">
                    </div>
                    <div class="col-auto d-flex align-items-end">
                        <button type="submit" class="btn btn-primary">Filter</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h6 class="mb-2 text-uppercase">Laporan Penerimaan</h6>
            <div class="table-responsive">
                <table id="example" class="table table-hover table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Kode Barang</th>
                            <th>Nama Barang</th>
                            <th>Total Qty</th>
                            <th>Action</th> {{-- New column for the button --}}
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $rowNumber = 0; // Initialize counter
                        @endphp
                        @foreach ($purchaseSummary as $itemSummary)
                        @php
                            $rowNumber++; // Increment for each grouped item row
                        @endphp
                        <tr>
                            <td>{{$rowNumber}}</td>
                            <td>{{ $itemSummary->item_code }}</td>
                            <td>{{ $itemSummary->item_name }}</td>
                            <td>{{ number_format($itemSummary->total_qty, 0) }}</td>
                            <td>
                                {{-- Button to trigger the modal and AJAX call --}}
                                <button type="button" class="btn btn-sm btn-info view-details"
                                    data-item-code="{{ $itemSummary->item_code }}"
                                    data-item-name="{{ $itemSummary->item_name }}">
                                    <i class="material-icons-outlined">visibility</i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="receiptDetailsModal" tabindex="-1" aria-labelledby="receiptDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="receiptDetailsModalLabel">Detail Penerimaan: <span id="modal-item-name"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Tanggal Dokumen</th>
                                <th>Total Qty</th>
                            </tr>
                        </thead>
                        <tbody id="receipt-details-body">
                            {{-- Details will be loaded here via AJAX --}}
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Success!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

@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() {
            var table = $('#example').DataTable( {
				lengthChange: false,
				buttons: [ 'copy', 'excel', 'pdf', 'print']
			} );

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

            // --- AJAX for Detail Modal ---
            $(document).on('click', '.view-details', function() {
                // Use 'document' or a static table wrapper like '#example' as the base listener

                var itemCode = $(this).data('item-code');
                var itemName = $(this).data('item-name');

                // Get current filter dates from the main report form
                var fromDate = $('#from_date').val();
                var toDate = $('#to_date').val();

                $('#modal-item-name').text(itemCode + ' - ' + itemName);
                $('#receipt-details-body').html('<tr><td colspan="3" class="text-center">Loading...</td></tr>');
                $('#receiptDetailsModal').modal('show');

                // AJAX call to fetch date-wise details
                $.ajax({
                    // NOTE: ADJUST THIS URL to match your route definition!
                    url: '{{ url("transaction/purchase-invoice/receipt-details") }}/' + itemCode,
                    method: 'GET',
                    data: {
                        from_date: fromDate,
                        to_date: toDate
                    },
                    success: function(response) {
                        var detailsBody = $('#receipt-details-body');
                        detailsBody.empty();

                        if (response.details && response.details.length > 0) {
                            var rowNum = 1;

                            // Define the array of month names for the d M Y format
                            const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                                                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

                            $.each(response.details, function(index, detail) {
                                // Date formatting logic (YYYY-MM-DD to d M Y)
                                var dateParts = detail.document_date.split('-');
                                var day = dateParts[2];
                                var month = monthNames[parseInt(dateParts[1]) - 1];
                                var year = dateParts[0];

                                var formattedDate = day + ' ' + month + ' ' + year;

                                detailsBody.append(
                                    '<tr>' +
                                        '<td>' + (rowNum++) + '</td>' +
                                        '<td>' + formattedDate + '</td>' +
                                        '<td>' + new Intl.NumberFormat('id-ID').format(detail.total_qty_per_date) + '</td>' +
                                    '</tr>'
                                );
                            });
                        } else {
                            detailsBody.append('<tr><td colspan="3" class="text-center">No receipt details found.</td></tr>');
                        }
                    },
                    error: function(xhr) {
                        $('#receipt-details-body').html('<tr><td colspan="3" class="text-center text-danger">Error loading details.</td></tr>');
                        console.error("Error fetching details: ", xhr);
                    }
                });
            });
        });
    </script>
@endsection