@extends('layouts.master')
@section('title', 'bKash Mock ORG Infos')
@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', '') }} Mock ORG Info Details</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</label>
                <select id="orgCode" class="w-full text-sm">
                    <option value="">Select an organization</option>
                </select>
            </div>

            <div class="w-50">
                <label for="testId" class="block text-xs font-semibold text-gray-600 mb-1">Test ID</label>
                <input type="text" id="testId" placeholder="Enter Test 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-50">
                <label for="orgType" class="block text-xs font-semibold text-gray-600 mb-1">ORG Type</label>
                <select id="orgType" class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500">
                    <option value="">All</option>
                    <option value="Prepaid">Prepaid</option>
                    <option value="Postpaid">Postpaid</option>
                </select>
            </div>

            <div class="w-50">
                <label for="payType" class="block text-xs font-semibold text-gray-600 mb-1">Pay Type</label>
                <select id="payType" class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500">
                    <option value="">All</option>
                    <option value="CHK_BILL">Check Bill</option>
                    <option value="PAY_BILL">Pay Bill</option>
                    <option value="QUR_BILL">Query Bill</option>
                    <!-- Add your pay types here -->
                </select>
            </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">Org Code</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Test ID</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">ORG Type</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Pay Type</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Response Time</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Response Status</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Response Type</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Create Info</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Update Info</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Status</th>
            </tr>
            </thead>

            <tbody id="transactionsTable" class="divide-y divide-gray-100">
            <tr><td colspan="11" class="text-center py-10 text-gray-500">
                    <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">Loading initial data...</p>
                    </div>
                </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
            (Page <span id="currentPage">0</span> of <span id="totalPages">0</span>)
        </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:opacity-50 disabled:cursor-not-allowed" disabled>Next</button>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        let orgData = [];
        // Load organization data
        $.get("/getUATOrgGroupInfo", 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
            });
        }).fail(function() {
            console.error('Failed to load organization data');
        });
        // Handle organization selection
        $('#orgCode').on('select2:select', function(e) {
            const selectedCode = e.params.data.id;
            console.log('Selected Org Code:', selectedCode);
        });
    </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 || '',
                    test_id: document.getElementById('testId').value || '',
                    org_type: document.getElementById('orgType').value || '',
                    pay_type: document.getElementById('payType').value || '',
                    offset: page,  // This will be converted to page_number in backend
                    limit: 10
                };

                console.log('Sending payload:', payload); // Debug log

                // Show loading state
                tableBody.innerHTML = `<tr>
                    <td colspan="11" 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-mock-env-data') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify(payload)
                })
                    .then(res => res.json())
                    .then(data => {
                        console.log('API Response:', data); // Debug log

                        if(data.data && data.data.length > 0){
                            tableBody.innerHTML = '';
                            data.data.forEach((item, index) => {
                                const responseStatusClass =
                                    item.RESPONSE_STATUS === "Success"
                                        ? "bg-green-100 text-green-800"
                                        : item.RESPONSE_STATUS === "Failed"
                                            ? "bg-yellow-100 text-yellow-800"
                                            : "";

                                const statusClass =
                                    item.STATUS === "A"
                                        ? "bg-green-100 text-green-800"
                                        : "bg-yellow-100 text-yellow-800";

                                const createdInfo = `${item.CREATE_DATE || ''}${item.CREATE_BY ? ' - ' + item.CREATE_BY : ''}`;
                                const updatedInfo = `${item.UPDATE_DATE || ''}${item.UPDATE_BY ? ' - ' + item.UPDATE_BY : ''}`;

                                // Calculate serial number based on page
                                const serialNumber = ((page - 1) * 10) + index + 1;

                                tableBody.innerHTML += `
                                <tr class="hover:bg-gray-50 transition">
                                    <td class="px-4 py-3 border border-gray-300">${serialNumber}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.ORG_CODE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.TEST_ID || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.ORG_TYPE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.PAY_TYPE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.RESPONSE_TIME || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300 ${responseStatusClass}">
                                        ${item.RESPONSE_STATUS || ''}
                                    </td>
                                    <td class="px-4 py-3 border border-gray-300">${item.RESPONSE_TYPE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${createdInfo}</td>
                                    <td class="px-4 py-3 border border-gray-300">${updatedInfo}</td>
                                    <td class="px-4 py-3 border border-gray-300 ${statusClass}">
                                        ${item.STATUS || ''}
                                    </td>
                                </tr>
                            `;
                            });

                            // Update pagination based on API response
                            currentPage = parseInt(data.page_number) || page;
                            totalPages = parseInt(data.total_pages) || 1;
                            const totalRecords = parseInt(data.total_records) || 0;
                            const pageSize = parseInt(data.page_size) || 10;

                            // Calculate start and end item numbers
                            const startItem = ((currentPage - 1) * pageSize) + 1;
                            const endItem = Math.min(currentPage * pageSize, totalRecords);

                            // Update pagination buttons
                            prevPageBtn.disabled = currentPage <= 1;
                            nextPageBtn.disabled = currentPage >= totalPages;

                            // Update pagination info display
                            document.getElementById('currentItemsShowing').innerText = startItem;
                            document.getElementById('totalItemsShowing').innerText = endItem;
                            document.getElementById('totalItems').innerText = totalRecords;
                            document.getElementById('currentPage').innerText = currentPage;
                            document.getElementById('totalPages').innerText = totalPages;

                        } else {
                            tableBody.innerHTML = `<tr><td colspan="11" class="text-center py-10 text-gray-500">
                            <div class="flex flex-col items-center justify-center space-y-2">
                                <svg class="w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                                </svg>
                                <p class="text-base font-medium">No records found</p>
                                <p class="text-sm">Try adjusting your filters</p>
                            </div>
                        </td></tr>`;

                            // Reset pagination info
                            document.getElementById('currentItemsShowing').innerText = '0';
                            document.getElementById('totalItemsShowing').innerText = '0';
                            document.getElementById('totalItems').innerText = '0';
                            document.getElementById('currentPage').innerText = '0';
                            document.getElementById('totalPages').innerText = '0';

                            prevPageBtn.disabled = true;
                            nextPageBtn.disabled = true;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        tableBody.innerHTML = `<tr><td colspan="11" class="text-center py-10 text-red-500">
                        <div class="flex flex-col items-center justify-center space-y-2">
                            <svg class="w-16 h-16 text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <p class="text-base font-medium">Error loading data</p>
                            <p class="text-sm">Please try again later</p>
                        </div>
                    </td></tr>`;

                        // Reset pagination
                        prevPageBtn.disabled = true;
                        nextPageBtn.disabled = true;
                    });
            }

            // Initial data load on page load (without any filters)
            loadData(1);

            // Event listeners - Filter button reloads data with current filter values
            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