<div class="container-jcph">
    <div class="card-header text-center"><h4><%= title %></h4></div>
    <div id="alert-container" class="text-center" style="text-transform: uppercase;" ></div>
    <div class="table-responsive mt-2">
        <table class="table table-bordered table-striped table-hover">
            <thead class="thead-dark text-center" style="text-transform: uppercase;">
                <tr>
                    <th>Username</th>
                    <th>Given Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Enabled</th>
                </tr>
            </thead>
            <tbody>
                <% users.forEach(user => { %>
                    <tr class="nowrap">
                        <td><%= user.username %></td>
                        <td><%= user.GivenName %></td>
                        <td><%= user.LastName %></td>
                        <td><%= user.emailAddress %></td>
                        <td>
                            <select class="form-control" onchange="updateUserRole('<%= user.username %>', this.value)">
                                <option value="member" <%= user.userRole === 'member' ? 'selected' : '' %>>Member</option>
                                <option value="partner" <%= user.userRole === 'partner' ? 'selected' : '' %>>Partner</option>
                                <option value="reviewer" <%= user.userRole === 'reviewer' ? 'selected' : '' %>>Reviewer</option>
                                <option value="manager" <%= user.userRole === 'manager' ? 'selected' : '' %>>Manager</option>
                                <option value="admin" <%= user.userRole === 'admin' ? 'selected' : '' %>>Admin</option>
                            </select>
                        </td>
                        <td class="text-center">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="enabledUser-<%= user.username %>" <%= user.enabledUser ? 'checked' : '' %> onchange="toggleUserStatus('<%= user.username %>')">
                                <label class="custom-control-label" for="enabledUser-<%= user.username %>"></label>
                            </div>
                        </td>
                    </tr>
                <% }) %>
            </tbody>
        </table>
        <div class="card-footer text-center">
            <a href="/admin" class="btn btn-secondary">BACK</a>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function toggleUserStatus(username) {
        const checkbox = document.getElementById(`enabledUser-${username}`);
        const enabled = checkbox.checked;

        $.ajax({
            url: '/admin/users/toggle-status',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ username, enabled }),
            success: function(response) {
                showAlert('User status updated successfully', 'success');
            },
            error: function(error) {
                console.error('Error updating user status:', error);
                showAlert('Error updating user status', 'danger');
            }
        });
    }

    function updateUserRole(username, role) {
        $.ajax({
            url: '/admin/users/update-role',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ username, role }),
            success: function(response) {
                showAlert('User role updated successfully', 'success');
            },
            error: function(error) {
                console.error('Error updating user role:', error);
                showAlert('Error updating user role', 'danger');
            }
        });
    }

    function showAlert(message, type) {
        const alertContainer = document.getElementById('alert-container');
        const alert = document.createElement('div');
        alert.className = `alert alert-${type} alert-dismissible fade show`;
        alert.role = 'alert';
        alert.innerHTML = `
            ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        `;
        alertContainer.appendChild(alert);

        // Automatically remove the alert after 5 seconds
        setTimeout(() => {
            $(alert).alert('close');
        }, 2000);
    }
</script>