@extends('layouts.master')
@section('title', '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>
        <!-- Role Summary Cards -->
        <div id="roleCards" class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 mb-6">
            <!-- Total Users -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 hover:shadow-md transition">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-gray-500 uppercase">Total Users</p>
                        <h3 id="totalUsersCount" class="text-3xl font-bold text-amber-600 mt-2">
                            0
                        </h3>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
                        👥
                    </div>
                </div>
            </div>
            <!-- Dynamic Role Cards (populated by JS) -->
            <div id="dynamicRoleCards" class="contents"></div>
        </div>

        <div class="flex flex-wrap items-end gap-4 w-full">
            <div class="w-70">
                <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">
                <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-70">
                <select id="userRole"
                        class="w-full px-2 py-1 text-sm border border-amber-300 rounded">
                    <option value="">Select Role</option>
                    <option value="Bkash">Bkash</option>
                    <option value="Biller">Biller</option>
                    <option value="Team bKash Support">Team bKash Support</option>
                    <option value="Support Manager">Support Manager</option>
                    <option value="Team bKash Commercial">Team bKash Commercial</option>
                    <option value="Team bKash Mock">Team bKash Mock</option>
                    <option value="Team bKash Mock Manager">Team bKash Mock Manager</option>
                </select>
            </div>
            <div class="w-40">
                <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/Search Button -->
                <button id="filterBtn" class="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white 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 4h18M6 9h12M9 14h6M11 19h2" />
                    </svg>
                </button>
                <!-- Reset Button -->
                <button id="resetFilterBtn" class="inline-flex items-center gap-1 px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg shadow-sm hover:shadow-md text-sm transition">
                    Reset
                </button>
                <!-- 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">Role</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="7" class="text-center py-3 text-gray-500">Loading...</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:opacity-50 disabled:cursor-not-allowed" 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="userRoles"
                                class="w-full px-2 py-1 text-sm border border-amber-300 rounded">
                            <option value="">Select Role</option>
                            <option value="Bkash">Bkash</option>
                            <option value="Biller">Biller</option>
                            <option value="Team bKash Support">Team bKash Support</option>
                            <option value="Support Manager">Support Manager</option>
                            <option value="Team bKash Commercial">Team bKash Commercial</option>
                            <option value="Team bKash Mock">Team bKash Mock</option>
                            <option value="Team bKash Mock Manager">Team bKash Mock Manager</option>
                        </select>
                    </div>
                    <div>
                        <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 id="oldPassss">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">
                            Current Password
                        </label>

                        <input type="text"
                               id="oldpass"
                               class="w-full px-2 py-1 text-sm border border-amber-300 rounded"
                               readonly />

                        <div class="mt-2 flex items-center gap-2">
                            <input type="checkbox" id="showOldPassword" class="rounded">
                            <label for="showOldPassword" class="text-xs text-gray-600 cursor-pointer">
                                Show Password
                            </label>
                        </div>
                    </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');
            const filterBtn = document.getElementById('filterBtn');
            const resetFilterBtn = document.getElementById('resetFilterBtn');
            const prevPageBtn = document.getElementById('prevPageBtn');
            const nextPageBtn = document.getElementById('nextPageBtn');
            const nameInput = document.getElementById('txnId');
            const userNameInput = document.getElementById('acctNo');
            const userRoleInput = document.getElementById('userRole');
            const mobileInput = document.getElementById('mobileNo');
            let selectedOrgCode ="";
            /* =========================
                STATE
            ========================== */
            let currentPage = 1;
            let lastPage = 1;

            // Colour / icon cycles for the dynamic role cards
            const cardStyles = [
                { text: 'text-blue-600', bg: 'bg-blue-100', icon: '👤' },
                { text: 'text-green-600', bg: 'bg-green-100', icon: '⭐' },
                { text: 'text-purple-600', bg: 'bg-purple-100', icon: '🛡️' },
                { text: 'text-pink-600', bg: 'bg-pink-100', icon: '🎯' },
                { text: 'text-indigo-600', bg: 'bg-indigo-100', icon: '📋' },
                { text: 'text-teal-600', bg: 'bg-teal-100', icon: '🔧' },
            ];

            /* =========================
                LOAD TABLE DATA
            ========================== */
            window.loadData = function (page = 1) {
                currentPage = page;

                const params = new URLSearchParams({
                    page: page,
                    name: nameInput.value.trim(),
                    email: userNameInput.value.trim(),
                    role: userRoleInput.value.trim(),
                    phone: mobileInput.value.trim(),
                });

                const tableBody = document.getElementById('transactionsTable');
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="7" class="text-center py-6">
                            <div class="loader-spin mx-auto"></div>
                        </td>
                    </tr>`;

                fetch(`{{ route('usermanage.data') }}?${params.toString()}`, {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        renderRoleCards(data.role_counts, data.users?.total ?? 0);
                        renderTable(data.users);
                        renderPaginationBar(data.users);
                    })
                    .catch(err => {
                        console.error(err);
                        tableBody.innerHTML = `
                            <tr>
                                <td colspan="7" class="text-center py-4 text-red-500">
                                    Failed to load data
                                </td>
                            </tr>`;
                    });
            };

            /* =========================
                RENDER ROLE SUMMARY CARDS
            ========================== */
            function renderRoleCards(roleCounts, totalUsers) {
                document.getElementById('totalUsersCount').innerText = totalUsers ?? 0;

                const container = document.getElementById('dynamicRoleCards');
                container.innerHTML = '';

                if (!roleCounts || roleCounts.length === 0) return;

                roleCounts.forEach((role, index) => {
                    const style = cardStyles[index % cardStyles.length];
                    container.innerHTML += `
                        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 hover:shadow-md transition">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-xs font-semibold text-gray-500 uppercase">
                                        ${role.role}
                                    </p>
                                    <h3 class="text-3xl font-bold ${style.text} mt-2">
                                        ${role.count}
                                    </h3>
                                </div>
                                <div class="w-12 h-12 rounded-full ${style.bg} flex items-center justify-center">
                                    ${style.icon}
                                </div>
                            </div>
                        </div>`;
                });
            }

            /* =========================
                RENDER TABLE
            ========================== */
            function renderTable(users) {
                const tableBody = document.getElementById('transactionsTable');
                tableBody.innerHTML = '';

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

                users.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">
                                ${(users.current_page - 1) * users.per_page + 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">
                                <span class="inline-flex px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    ${user.role_name ?? '-'}
                                </span>
                            </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>`;
                });
            }

            /* =========================
                RENDER PAGINATION BAR
            ========================== */
            function renderPaginationBar(users) {
                if (!users) {
                    document.getElementById('currentItemsShowing').innerText = 0;
                    document.getElementById('totalItemsShowing').innerText = 0;
                    document.getElementById('totalItems').innerText = 0;
                    prevPageBtn.disabled = true;
                    nextPageBtn.disabled = true;
                    return;
                }

                lastPage = users.last_page ?? 1;
                currentPage = users.current_page ?? 1;

                document.getElementById('currentItemsShowing').innerText = users.from ?? 0;
                document.getElementById('totalItemsShowing').innerText = users.to ?? 0;
                document.getElementById('totalItems').innerText = users.total ?? 0;

                prevPageBtn.disabled = currentPage <= 1;
                nextPageBtn.disabled = currentPage >= lastPage;
            }

            prevPageBtn.addEventListener('click', function () {
                if (currentPage > 1) loadData(currentPage - 1);
            });

            nextPageBtn.addEventListener('click', function () {
                if (currentPage < lastPage) loadData(currentPage + 1);
            });

            /* =========================
                FILTER / SEARCH
            ========================== */
            filterBtn.addEventListener('click', function () {
                loadData(1);
            });

            resetFilterBtn.addEventListener('click', function () {
                nameInput.value = '';
                userNameInput.value = '';
                mobileInput.value = '';
                loadData(1);
            });

            // Allow pressing Enter inside any filter field to trigger search
            [nameInput, userNameInput, mobileInput].forEach(input => {
                input.addEventListener('keyup', function (e) {
                    if (e.key === 'Enter') loadData(1);
                });
            });

            // Initial load
            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 () {
                document.getElementById('oldPass').classList.remove('hidden');
                resetUserForm();
                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) {
                resetUserForm();
                fetch(`/user-manage/show/${uid}`)
                    .then(res => res.json())
                    .then(res => {
                        const user = res.user;
                        const orgMapping = res.orgMapping;
                        const password = user.password ?? '';
                        document.getElementById('uid').value = user.uid;
                        document.getElementById('newFullName').value = user.name ?? '';
                        document.getElementById('oldpass').value =
                            (password.startsWith('$') ||
                                password.startsWith('$2b$'))
                                ? 'Hashed Password'
                                : password;
                        document.getElementById('newUserName').value =
                            user?.email ? user.email.split('@')[0] : '';
                        document.getElementById('newMobile').value = user.phone ?? '';
                        document.getElementById('userRoles').value = user.roles?.[0]?.name ?? '';
                        if (orgMapping) {
                            $('#orgCode').val(orgMapping.org_code).trigger('change');
                        }

                        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('userRoles').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(),
                    org_code: selectedOrgCode,
                    role: role ? [role] : []
                };

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

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

                fetch('/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(currentPage);
                            });
                        } 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('/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(currentPage); // reload same page
                            } 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';
            });

            $.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) {
                selectedOrgCode = e.params.data.id;
            });

            document.getElementById('showOldPassword').addEventListener('change', function () {

                const input = document.getElementById('oldpass');
                const oldpass = document.getElementById('oldpass').value;
                if (this.checked) {

                    fetch(`/showPassword/${oldpass}`)
                        .then(res => res.json())
                        .then(res => {
                            input.type = 'text';
                            input.value = res.password;
                        });

                } else {
                    input.type = 'password';
                }
            });

            function resetUserForm() {

                // Reset normal form fields
                document.getElementById('addUserForm').reset();

                // Clear hidden fields
                document.getElementById('uid').value = '';

                // Clear password field
                document.getElementById('oldpass').value = '';
                document.getElementById('oldpass').removeAttribute('data-password');

                // Hide password
                document.getElementById('showOldPassword').checked = false;

                // Reset Select2
                $('#orgCode').val(null).trigger('change');
                $('#userRoles').val('').trigger('change'); // if userRoles is Select2
            }
        });
    </script>

@endpush