@extends('layouts.master')
@section('title', 'bKash Support Dashboard')
@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">{{ session('biller_org_code', '') }} Transaction Status</h2>
        </div>

        <!-- Row 2: Filters (Single Row) -->
        <div class="flex flex-wrap items-end gap-4 w-full">
            <div class="w-80">
                <label for="orgCode" class="block text-xs font-semibold text-gray-600 mb-1">Org Code<span class="text-red-800"> *</span></label>
                <select id="orgCode" class="w-full text-sm">
                    <option disabled selected>Select an organization</option>
                </select>
            </div>

            <div class="w-50">
                <label for="startDate" class="block text-xs font-semibold text-gray-600 mb-1">Start Pay Date<span class="text-red-800"> *</span></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<span class="text-red-800"> *</span></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="w-70">
                <label for="txnId" class="block text-xs font-semibold text-gray-600 mb-1">Transaction ID</label>
                <input type="text" id="txnId" placeholder="Enter Transaction ID"
                       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-70">
                <label for="acctNo" class="block text-xs font-semibold text-gray-600 mb-1">Account No</label>
                <input type="text" id="acctNo" placeholder="Enter Account No" 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-40">
                <label for="mobileNo" class="block text-xs font-semibold text-gray-600 mb-1">Mobile Number</label>
                <input type="text" id="mobileNo" placeholder="Enter Mobile Number"
                       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-header">
            <tr>
                <th class="px-4 py-3 font-semibold border border-gray-300">Serial</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">Account Number</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">bkash Account</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Transaction ID</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Payment Status</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Order No.</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Initiate Time</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Updated Time</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Total Amount</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Bill Month</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Biller Response (Message)</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Next Retry</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Biller trx/Ref ID</th>
            </tr>
            </thead>

            <tbody id="transactionsTable" class="divide-y divide-gray-100">
            <tr><td colspan="12" class="text-center py-3 text-gray-500">Use the Filter button to load data</td></tr>
            </tbody>
        </table>
    </div>
    <!-- Pagination -->
    <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between bg-gray-50">
        <div class="text-xs text-amber-800 font-semibold">Showing <span id="currentItemsShowing">0</span> to <span id="totalItemsShowing">0</span> of <span id="totalItems">0</span> entries</div>
        <div class="flex space-x-2">
            <button id="prevPageBtn" class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-700 bg-white hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" disabled>Previous</button>
            <button id="nextPageBtn" class="px-3 py-1 border border-gray-300 rounded text-sm text-white bg-amber-600 hover:bg-amber-700" disabled>Next</button>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        let orgData = [];

        $.get("/getOrgGroupInfo", function(data) {
            orgData = data.map(org => ({
                id: org.ORG_CODE,
                text: org.ORG_NAME+' -('+org.ORG_CODE+')'
            }));

            $('#orgCode').select2({
                placeholder: "Select Organization",
                width: '100%',
                data: orgData,
                allowClear: true
            });
        });
        $('#orgCode').on('select2:select', function(e) {
            const selectedCode = e.params.data.id;
            const selectedProduct = orgMap.get(selectedCode);
        });
        const today = new Date();
        const yesterday = new Date();
        yesterday.setDate(today.getDate());
        const endPicker = flatpickr("#endDate", {
            dateFormat: "d-m-Y",
            allowInput: true,
            maxDate: today
        });

        const startPicker = flatpickr("#startDate", {
            dateFormat: "d-m-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 prevPageBtn = document.getElementById('prevPageBtn');
            const nextPageBtn = document.getElementById('nextPageBtn');
            let currentPage = 1;
            let totalPages = 1;

            function loadData(page = 1) {
                const payload = {
                    orgcode: document.getElementById('orgCode').value,
                    bank_tran_id: document.getElementById('txnId').value,
                    acc_num: document.getElementById('acctNo').value,
                    user_mobile: document.getElementById('mobileNo').value,
                    startdate: document.getElementById('startDate').value,
                    enddate: document.getElementById('endDate').value,
                    offset: (page - 1) * 10,
                    limit: 10
                };

                // Mandatory field check
                if(!payload.orgcode || !payload.startdate || !payload.enddate){
                    Swal.fire({
                        text: "Please Select Org Code and Pay Date.",
                        icon: "error"
                    });
                    return;
                }

                tableBody.innerHTML = `<tr>
    <td colspan="14" class="py-10">
        <div class="flex flex-col items-center justify-center space-y-3">

            <!-- Custom spinner -->
            <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-transactionsStatus') }}", {
                    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 = '';
                            data.data.forEach((item, index) => {
                                tableBody.innerHTML += `
                                        <tr class="hover:bg-gray-50 transition">
                                            <td class="px-4 py-3 border border-gray-300">${payload.offset + index + 1}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.ORG_NAME || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.ACC_NUM || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.USER_MOBILE || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.BKASH_TRANS_ID || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.PAY_STATUS || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.ORDER_NO || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.ORIGINATE_TIME || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.PAY_DATE || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300 text-right">${item.TRANS_AMOUNT || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.BILL_MON || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.BILLER_RESPONSE || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300 text-right">${item.RETRY_STATUS || ''}</td>
                                            <td class="px-4 py-3 border border-gray-300">${item.BILLER_TRX_ID || ''}</td>
                                        </tr>
                                    `;
                                });

                            currentPage = page;
                            totalPages = Math.ceil(data.total / 10);
                            prevPageBtn.disabled = currentPage <= 1;
                            nextPageBtn.disabled = currentPage >= totalPages;

                            // Update info
                            document.getElementById('currentItemsShowing').innerText = (payload.offset + 1);
                            document.getElementById('totalItemsShowing').innerText = payload.offset + data.data.length;
                            document.getElementById('totalItems').innerText = data.total;

                        } else {
                            tableBody.innerHTML = `<tr><td colspan="11" class="text-center py-3 text-gray-500">No records found</td></tr>`;
                        }
                    })
                    .catch(() => {
                        tableBody.innerHTML = `<tr><td colspan="11" class="text-center py-3 text-red-500">Error loading data</td></tr>`;
                    });
            }

            filterBtn.addEventListener('click', function(){ loadData(1); });
            prevPageBtn.addEventListener('click', function(){ if(currentPage > 1) loadData(currentPage - 1); });
            nextPageBtn.addEventListener('click', function(){ if(currentPage < totalPages) loadData(currentPage + 1); });
        });
    </script>
@endpush