@extends('layouts.master')
@section('title', 'Fund Transfer Summary')
@section('styles')
    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .loader-spin {
            width: 40px;
            height: 40px;
            border: 4px solid #e2e8f0; /* light gray */
            border-top: 4px solid #f59e0b; /* amber-600 */
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        /* Sticky Header */
        .sticky-header th {
            position: sticky;
            top: 0;
            z-index: 30;
            background: #fef3c7; /* must have solid background */
        }


    </style>
@endsection
@section('content')
    <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-amber-50 to-white">

        <!-- Row 1: Heading -->
        <div class="mb-4 w-full">
            <h2 class="text-2xl font-semibold text-gray-800">Fund Transfer Summary</h2>
        </div>

        <!-- Row 2: Filters (Single Row) -->
        <div class="flex flex-wrap items-end gap-4 w-full">
            <div class="w-50">
                <label for="startDate" class="block text-xs font-semibold text-gray-600 mb-1">Start Pay Date</label>
                <input type="date" id="startDate" placeholder="dd-mm-yyyy" class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500 text-sm" />
            </div>
            <div class="w-50">
                <label for="endDate" class="block text-xs font-semibold text-gray-600 mb-1">End Pay Date</label>
                <input type="date" id="endDate" placeholder="dd-mm-yyyy" class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500 text-sm" />
            </div>
            <div class="flex items-center gap-2">
                <!-- Filter Button -->
                <button id="filterBtn" class="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-400 hover:bg-amber-300 text-gray-700 rounded-lg shadow-sm hover:shadow-md text-sm transition">
                    Filter
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 4h18M4 8h16M6 12h12M8 16h8" />
                    </svg>
                </button>
            </div>

        </div>
    </div>
    <!-- Table -->

    <div class="scroll-area overflow-y-auto max-h-[500px] border border-gray-200 rounded-lg">
        <table class="min-w-full text-sm text-left table-auto relative border border-gray-300">
            <thead class="bg-amber-100 text-amber-800 sticky top-0 z-10 shadow-sm">
            <tr>
                <th class="px-4 py-3 font-semibold border border-gray-300 text-center">SL</th>
                <th class="px-4 py-3 font-semibold border border-gray-300 text-center">Date</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Biller Name</th>
                <th class="px-4 py-3 font-semibold border border-gray-300 text-right">Total Amount</th>
                <th class="px-4 py-3 font-semibold border border-gray-300 text-center">Total Count</th>
            </tr>
            </thead>

            <tbody id="transactionsTable" class="divide-y divide-gray-100">
            <tr>
                <td colspan="5" class="text-center py-3 text-gray-500">Use the Filter button to load data</td>
            </tr>
            </tbody>

            <!-- Sticky Summary Footer -->
            <tfoot id="tableFooter" class="bg-amber-50 font-bold border-t-2 border-amber-300 sticky bottom-0 z-10 shadow-inner hidden">
            <tr>
                <td colspan="3" class="px-4 py-3 border border-gray-300 text-right font-bold text-gray-800">
                    Grand Total:
                </td>
                <td id="grandTotalAmountCell" class="px-4 py-3 border border-gray-300 text-right text-gray-900 font-extrabold">
                    0.00
                </td>
                <td id="grandTotalCountCell" class="px-4 py-3 border border-gray-300 text-center text-gray-900 font-extrabold">
                    0
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
    <!-- Pagination -->

@endsection
@push('scripts')
    <script>
        const today = new Date();
        const yesterday = new Date();
        yesterday.setDate(today.getDate());
        const endPicker = flatpickr("#endDate", {
            dateFormat: "m-d-Y",
            allowInput: true,
            maxDate: today
        });
        const startPicker = flatpickr("#startDate", {
            dateFormat: "m-d-Y",
            allowInput: true,
            maxDate: yesterday, // Start date cannot be today
            onChange: function(selectedDates) {
                if (selectedDates.length) {
                    const startDate = selectedDates[0];

                    // Max end date is start + 90, but not beyond today
                    let maxEndDate = new Date(startDate);
                    maxEndDate.setDate(startDate.getDate() + 90);
                    if (maxEndDate > today) maxEndDate = today;

                    endPicker.set('minDate', startDate);
                    endPicker.set('maxDate', maxEndDate);

                    const currentEndDate = endPicker.selectedDates[0];
                    if (currentEndDate) {
                        if (currentEndDate < startDate || currentEndDate > maxEndDate) {
                            endPicker.setDate(startDate);
                        }
                    }
                }
            }
        });
        const downloadBtn = document.querySelector('.relative button');
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const filterBtn = document.getElementById('filterBtn');
            const tableBody = document.getElementById('transactionsTable');
            const tableFooter = document.getElementById('tableFooter');
            const grandTotalAmountCell = document.getElementById('grandTotalAmountCell');
            const grandTotalCountCell = document.getElementById('grandTotalCountCell');

            function loadData() {
                const startDateVal = document.getElementById('startDate').value;
                const endDateVal = document.getElementById('endDate').value;
                if (tableFooter) {
                    tableFooter.classList.add('hidden');
                }
                const payload = {
                    startdate: startDateVal,
                    enddate: endDateVal
                };

                tableBody.innerHTML = `<tr>
                <td colspan="5" class="py-10">
                    <div class="flex flex-col items-center justify-center space-y-3">
                        <div class="loader-spin"></div>
                        <p class="text-lg font-semibold text-gray-700">⏳ Please wait...</p>
                        <p class="text-sm text-gray-500">
                            Loading results. This may take a few seconds depending on your filters.
                        </p>
                    </div>
                </td>
            </tr>`;

                fetch("{{ route('get-fundtransfersummary') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify(payload)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.data && data.data.length > 0) {
                            tableBody.innerHTML = '';

                            const dateDisplay = (startDateVal && endDateVal)
                                ? `${startDateVal} to ${endDateVal}`
                                : 'N/A';

                            data.data.forEach((item, index) => {
                                const formattedAmount = Number(item.total_amount ?? 0).toLocaleString('en-US', {
                                    minimumFractionDigits: 3,
                                    maximumFractionDigits: 3
                                });

                                // Extract DD/MM/YYYY date pattern from biller_name (Ref)
                                const dateMatch = item.biller_name ? item.biller_name.match(/\d{2}\/\d{2}\/\d{4}/) : null;
                                const extractedDate = dateMatch ? dateMatch[0] : 'N/A';

                                tableBody.innerHTML += `
        <tr class="hover:bg-gray-50 transition">
            <td class="px-4 py-3 border border-gray-300 text-center">${index + 1}</td>
            <td class="px-4 py-3 border border-gray-300 text-center">${item.tx_date || ''}</td>
            <td class="px-4 py-3 border border-gray-300 font-medium text-gray-800">${item.biller_name || ''}</td>
            <td class="px-4 py-3 border border-gray-300 text-right">${formattedAmount}</td>
            <td class="px-4 py-3 border border-gray-300 text-center">${item.total_count ?? 0}</td>
        </tr>
    `;
                            });
                            const formattedGrandAmount = Number(data.grand_total_amount ?? 0).toLocaleString('en-US', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });

                            // Update and show Grand Total Footer
                            if (grandTotalAmountCell) grandTotalAmountCell.innerText = formattedGrandAmount;
                            if (grandTotalCountCell) grandTotalCountCell.innerText = data.grand_total_count ?? 0;
                            if (tableFooter) tableFooter.classList.remove('hidden');
                        } else {
                            tableBody.innerHTML = `<tr><td colspan="5" class="text-center py-3 text-gray-500">No records found</td></tr>`;
                            if (tableFooter) tableFooter.classList.add('hidden');
                        }
                    })
                    .catch(() => {
                        tableBody.innerHTML = `<tr><td colspan="5" class="text-center py-3 text-red-500">Error loading data</td></tr>`;
                        if (tableFooter) tableFooter.classList.add('hidden');
                    });
            }

            filterBtn.addEventListener('click', function() {
                loadData();
            });
        });
    </script>
@endpush