@extends('layouts.master')
@section('title', 'Mock User Manage')
@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', '') }} User Manage</h2>
        </div>

        <div class="flex flex-wrap items-end gap-4 w-full">
            <div class="w-70">
                <label for="txnId" class="block text-xs font-semibold text-gray-600 mb-1">Full Name</label>
                <input type="text" id="txnId" placeholder="Enter Full Name"
                       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">User Name</label>
                <input type="text" id="acctNo" placeholder="Enter User Name" 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">
                <!-- Add New User Button -->
                <button id="addUserBtn" 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">
                    Add New User
                    <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="M12 4v16m8-8H4" />
                    </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">Full Name</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">User Name</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Mobile Phone</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Last Login</th>
                <th class="px-4 py-3 font-semibold border border-gray-300">Status</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="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>
    <!-- Add User Modal -->
    <div id="addUserModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">

            <!-- Modal Header -->
            <div class="bg-gradient-to-r from-amber-50 to-white px-6 py-4 border-b border-gray-200 flex items-center justify-between sticky top-0">
                <h3 class="text-xl font-semibold text-gray-800">Add New User</h3>
                <button id="closeModal" class="text-gray-400 hover:text-gray-600 transition">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <!-- Modal Body -->
            <form id="addUserForm" class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <!-- Full Name -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Full Name *</label>
                        <input type="text" id="newFullName"
                               class="w-full px-2 py-1 text-sm border border-amber-300 rounded" />
                        <input type="hidden" id="uid" />
                    </div>

                    <!-- User Name -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">User Name *</label>
                        <input type="text" id="newUserName"
                               class="w-full px-2 py-1 text-sm border border-amber-300 rounded" />
                    </div>

                    <!-- Mobile -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Mobile</label>
                        <input type="tel" id="newMobile"
                               class="w-full px-2 py-1 text-sm border border-amber-300 rounded" />
                    </div>

                    <!-- Password -->
                    <div id="passwordField">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Password *</label>
                        <input type="password" id="newPassword"
                               class="w-full px-2 py-1 text-sm border border-amber-300 rounded" />
                    </div>

                    <!-- Confirm Password -->
                    <div id="confirmPasswordField">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Confirm Password *</label>
                        <input type="password" id="confirmPassword"
                               class="w-full px-2 py-1 text-sm border border-amber-300 rounded" />
                    </div>

                    <!-- Role -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Role *</label>
                        <select id="userRole"
                                class="w-full px-2 py-1 text-sm border border-amber-300 rounded">
                            <option value="">Select Role</option>
                            <option value="Team bKash Mock">Team bKash Mock</option>
                            <option value="Team bKash Mock Manager">Team bKash Mock Manager</option>
                        </select>
                    </div>
                </div>
                <!-- Footer -->
                <div class="mt-6 flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
                    <button type="button" id="cancelBtn"
                            class="px-3 py-1.5 bg-gray-200 rounded-lg text-sm">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-3 py-1.5 bg-amber-400 rounded-lg text-sm">
                        Add User
                    </button>
                </div>
            </form>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            /* =========================
                ELEMENTS
            ========================== */
            const modal = document.getElementById('addUserModal');
            const addUserForm = document.getElementById('addUserForm');
            const closeModalBtn = document.getElementById('closeModal');
            const cancelBtn = document.getElementById('cancelBtn');

            /* =========================
                LOAD TABLE DATA
            ========================== */
            window.loadData = function (page = 1) {
                fetch("{{ route('Mockuser.data') }}", {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        const tableBody = document.getElementById('transactionsTable');
                        tableBody.innerHTML = '';

                        if (!data || data.length === 0) {
                            tableBody.innerHTML = `<tr>
                    <td colspan="7" class="text-center py-4 text-gray-500">No users found</td>
                </tr>`;
                            return;
                        }

                        data.forEach((user, index) => {
                            const statusClass = user.status === 'Active'
                                ? 'bg-green-100 text-green-800'
                                : 'bg-red-100 text-red-800';

                            tableBody.innerHTML += `
                <tr>
                    <td class="border px-3 py-2">${index + 1}</td>
                    <td class="border px-3 py-2">${user.name}</td>
                    <td class="border px-3 py-2 font-semibold text-red-800"> ${user.email ? user.email.split('@')[0] : ''}</td>
                    <td class="border px-3 py-2">${user.phone}</td>
                    <td class="border px-3 py-2">${user.last_login ?? 'Never'}</td>
                    <td class="border px-3 py-2">
                        <button onclick="toggleStatus('${user.uid}', '${user.status}')"
                            class="px-2 py-1 rounded text-xs ${statusClass}">
                            ${user.status}
                        </button>
                    </td>
                    <td class="border px-3 py-2">
                        <button onclick="editUser('${user.uid}')"
                            class="px-3 py-1 bg-blue-500 text-white rounded text-sm">
                            Edit
                        </button>
                    </td>
                </tr>`;
                        });
                    });
            };

            loadData();

            /* =========================
                MODAL CONTROL
            ========================== */
            function closeModal() {
                modal.classList.add('hidden');
                document.body.style.overflow = 'auto';
                addUserForm.reset();
                document.getElementById('uid').value = '';
            }

            closeModalBtn.onclick = closeModal;
            cancelBtn.onclick = closeModal;

            /* =========================
                ADD USER
            ========================== */
            window.addUser = function () {
                addUserForm.reset();
                document.getElementById('uid').value = '';

                document.querySelector('#addUserModal h3').innerText = 'Add New User';
                document.querySelector('#addUserForm button[type="submit"]').innerText = 'Add User';

                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            };

            /* =========================
                EDIT USER
            ========================== */
            window.editUser = function (uid) {
                fetch(`/bkash/mock/user-manage/show/${uid}`)
                    .then(res => res.json())
                    .then(res => {
                        const user = res.user;

                        document.getElementById('uid').value = user.uid;
                        document.getElementById('newFullName').value = user.name ?? '';
                        document.getElementById('newUserName').value =
                            user?.email ? user.email.split('@')[0] : '';
                        document.getElementById('newMobile').value = user.phone ?? '';
                        document.getElementById('userRole').value = user.roles?.[0]?.name ?? '';

                        document.querySelector('#addUserModal h3').innerText = 'Edit User';
                        document.querySelector('#addUserForm button[type="submit"]').innerText = 'Update User';

                        modal.classList.remove('hidden');
                        document.body.style.overflow = 'hidden';
                    });
            };

            /* =========================
                SAVE / UPDATE USER
            ========================== */
            addUserForm.addEventListener('submit', function (e) {
                e.preventDefault();

                const uid = document.getElementById('uid').value.trim();
                const isEdit = uid !== '';

                const role = document.getElementById('userRole').value;
                const password = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;

                if (!isEdit && (!password || !confirmPassword)) {
                    Swal.fire('Error', 'Password is required for new user', 'error');
                    return;
                }

                const payload = {
                    id: isEdit ? uid : null,
                    full_name: document.getElementById('newFullName').value.trim(),
                    email: document.getElementById('newUserName').value.trim(),
                    phone: document.getElementById('newMobile').value.trim(),
                    role: role ? [role] : []
                };

                if (password) {
                    payload.password = password;
                    payload.confirm_password = confirmPassword;
                }

                Swal.fire({
                    title: 'Saving...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                fetch('/bkash/mock/user-manage/save', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document
                            .querySelector('meta[name="csrf-token"]')
                            .getAttribute('content')
                    },
                    body: JSON.stringify(payload)
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.statusCode === 200) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: res.statusMsg,
                                timer: 1500,
                                showConfirmButton: false
                            }).then(() => {
                                closeModal();
                                loadData();
                            });
                        } else {
                            let msg = Object.values(res.errors ?? {})
                                .map(e => e[0])
                                .join('<br>');
                            Swal.fire('Error', msg || res.statusMsg, 'error');
                        }
                    })
                    .catch(() => {
                        Swal.fire('Error', 'Server error occurred', 'error');
                    });
            });

            /* =========================
                TOGGLE STATUS
            ========================== */
            window.toggleStatus = function (uid, status) {
                const newStatus = status === 'Active' ? 'Inactive' : 'Active';

                Swal.fire({
                    title: 'Are you sure?',
                    text: `Change status to ${newStatus}?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, update'
                }).then((result) => {

                    if (!result.isConfirmed) return;

                    fetch('/bkash/mock/user-manage/save', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document
                                .querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        },
                        body: JSON.stringify({
                            id: uid,
                            status: newStatus
                        })
                    })
                        .then(res => res.json())
                        .then(res => {
                            if (res.statusCode === 200) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Updated',
                                    text: res.statusMsg,
                                    timer: 1200,
                                    showConfirmButton: false
                                });
                                loadData(); // reload table
                            } else {
                                Swal.fire('Error', res.statusMsg, 'error');
                            }
                        })
                        .catch(() => {
                            Swal.fire('Error', 'Server error', 'error');
                        });
                });
            };

            const addUserBtn = document.getElementById('addUserBtn');

            addUserBtn.addEventListener('click', function () {
                document.getElementById('addUserForm').reset();
                document.getElementById('uid').value = '';

                document.querySelector('#addUserModal h3').textContent = 'Add New User';
                document.querySelector('#addUserForm button[type="submit"]').textContent = 'Add User';

                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            });

        });
    </script>

@endpush