@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 */
        }
        /* Mock row highlight */
        .mock-row {
            background-color: #fef3c7 !important; /* amber-100 */
        }
        .mock-row:hover {
            background-color: #fde68a !important; /* amber-200 on hover */
        }
    </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 + Button -->
        <div class="mb-4 w-full flex items-center justify-between">
            <h2 class="text-2xl font-semibold text-gray-800"> Mock ORG Info</h2>
            <a href="{{ route('bkashMock.create') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-medium rounded-lg shadow-sm transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                </svg>
                Create New Mock
            </a>
        </div>
        <!-- Row 2: Filters (Single Row) -->
    </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">Org Name</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Web Address</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Email</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Address</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 Mode</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Action</th>
            </tr>
            </thead>

            <tbody id="transactionsTable" class="divide-y divide-gray-100">
            <tr><td colspan="9" 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>
        document.addEventListener("DOMContentLoaded", function() {
            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 = {
                    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="9" 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.
                            </p>
                        </div>
                    </td>
                </tr>`;

                fetch("{{ route('get-orggroup-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) => {
                                // Calculate serial number based on page
                                const serialNumber = ((page - 1) * 10) + index + 1;

                                // Check if GROUP_NAME is "MOCK" and add class accordingly
                                const rowClass = item.GROUP_NAME === "MOCK" ? "mock-row" : "hover:bg-gray-50";

                                tableBody.innerHTML += `
                                <tr class="${rowClass} 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.ORG_NAME || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.WEB_ADDR || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.EMAIL || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.ADDRESS || ''}</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.PAYMODE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">
                                        <div class="flex items-center gap-2">
                                            <button
                                                onclick="editRecord('${item.ORG_CODE}')"
                                                class="inline-flex items-center px-2 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded transition"
                                                title="Edit">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                </svg>
                                            </button>
                                            <button
                                                onclick="deleteRecord('${item.ORG_CODE}', '${item.ORG_NAME}')"
                                                class="inline-flex items-center px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-xs rounded transition"
                                                title="Delete">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                </svg>
                                            </button>
                                        </div>
                                    </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;

                            console.log('Pagination Info:', { currentPage, totalPages, totalRecords, pageSize }); // Debug log

                            // 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;

                            console.log('Button States:', {
                                prevDisabled: prevPageBtn.disabled,
                                nextDisabled: nextPageBtn.disabled
                            }); // Debug log

                            // 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="9" 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>
                            </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="9" 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
            loadData(1);

            // Event listeners for pagination buttons
            prevPageBtn.addEventListener('click', function(){
                console.log('Previous button clicked. Current page:', currentPage); // Debug log
                if(currentPage > 1) {
                    loadData(currentPage - 1);
                }
            });

            nextPageBtn.addEventListener('click', function(){
                console.log('Next button clicked. Current page:', currentPage, 'Total pages:', totalPages); // Debug log
                if(currentPage < totalPages) {
                    loadData(currentPage + 1);
                }
            });
        });
        // Edit function
        function editRecord(orgCode) {
            Swal.fire({
                title: 'Edit Organization',
                text: `Edit organization: ${orgCode}`,
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3b82f6',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Edit',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Redirect to edit page or open modal
                    window.location.href = `/make/mockorg/edit/${orgCode}`;

                    // OR you can call an API to update status
                    // updateStatus(orgCode, 'A'); // Active
                }
            });
        }
        // Delete function
        function deleteRecord(orgCode, orgName) {
            Swal.fire({
                title: 'Are you sure?',
                html: `Do you want to deactivate <strong>${orgName}</strong>?<br><small class="text-gray-500">(Org Code: ${orgCode})</small>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, deactivate it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Call API to update status to inactive
                    updateStatus(orgCode, 'I'); // Inactive
                }
            });
        }
        // Update status function
        function updateStatus(orgCode, status) {
            fetch("{{ route('update-org-status') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    org_code: orgCode,
                    status: status
                })
            }).then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Status updated successfully',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        document.dispatchEvent(new Event('DOMContentLoaded'));
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: data.message || 'Failed to update status',
                            icon: 'error'
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error!',
                        text: 'An error occurred while updating status',
                        icon: 'error'
                    });
                });
        }
    </script>
@endpush