{% extends 'dashboard_layout.html' %}
{% load static %}
{% block content %}
<style>
    #usersLoader {
        z-index: 1050;
    }
</style>

<!-- Table Loader (Global loader for fetching users) -->
<div class="loader" id="usersLoader" style="display: none;">
    <img src="{% static 'loaders/ajax-loader.gif' %}" />
</div>

<div class="content" id="modal-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {% include 'common/messages.html' %}
                <div class="card">
                    <div class="card-header card-header-primary">
                        <div class="row">
                            <div class="col-md-6">
                                <h4 class="card-title pt-2">Front-End Users</h4>
                            </div>
                            <div class="col-md-6 text-right">
                                <button class="btn btn-success" id="add-user-btn">Add User</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="frontend_users_table" class="table" style="width:100%; display: none;">
                                <thead class="text-primary">
                                    <tr>
                                        <th>Rec ID</th>
                                        <th>Email</th>
                                        <th>Course Name</th>
                                        <th>Created At</th>
                                        <th>Updated At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Modal -->
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalLabel">Add/Edit User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" onclick="closeModal()">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Modal loader only visible during form data fetch -->
                <div class="loader" id="usersFormLoader" style="display: none;">
                    <img src="{% static 'loaders/ajax-loader.gif' %}" />
                </div>

                <form id="user-form">
                    <input type="hidden" id="user-id">
                    <div class="form-group">
                        <label for="recid">Rec ID</label>
                        <input type="number" class="form-control" id="recid" required>
                    </div>
                    <div class="form-group">
                        <label for="username">Email</label>
                        <input type="email" class="form-control" id="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password">
                    </div>
                    <div class="form-group">
                        <label for="coursename">Course Name</label>
                        <input type="text" class="form-control" id="coursename" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function closeModal(){
        $('#userModal').modal('hide');
    }

$(document).ready(function () {
    let table;

    // Load the users into the table
    function loadUsers() {
        $('#usersLoader').show();
        $.ajax({
            url: "{% url 'get-frontend-users' %}",
            method: "GET",
            success: function (data) {
                $('#usersLoader').hide();
                if (data.success) {
                    if (table) table.destroy();
                    table = $('#frontend_users_table').DataTable({
                        data: data.users,
                        columns: [
                            { data: 'recid' },
                            { data: 'username' },
                            { data: 'coursename' },
                            { data: 'created_at' },
                            { data: 'updated_at' },
                            {
                                data: 'id',
                                render: function (data) {
                                    return `
                                        <button class="btn btn-info edit-user-btn" data-id="${data}">Edit</button>
                                        <button class="btn btn-danger delete-user-btn" data-id="${data}">Delete</button>
                                    `;
                                }
                            }
                        ],
                        destroy: true,
                        order: [[0, 'desc']],
                    });
                    $('#frontend_users_table').show();
                } else {
                    toastr.error(data.message);
                }
            },
            error: function () {
                $('#usersLoader').hide();
                toastr.error("Failed to load data.");
            }
        });
    }

    loadUsers();

    // Open modal for adding a new user
    $('#add-user-btn').click(function () {
        $('#user-form')[0].reset();
        $('#user-id').val('');
        $('#userModalLabel').text('Add User');
        $('#password').prop('placeholder', '');  // Don't show the placeholder for new users
        $('#userModal').modal('show');
    });

    // Handle form submission for adding/editing a user
    $('#user-form').submit(function (e) {
        e.preventDefault();
        $('#usersFormLoader').show();  // Show loader when form is being submitted

        const id = $('#user-id').val();
        const url = id ? `/edit-frontend-user/${id}/` : "{% url 'create-frontend-user' %}";
        const data = {
            recid: $('#recid').val(),
            username: $('#username').val(),
            password: $('#password').val(),
            coursename: $('#coursename').val(),
            csrfmiddlewaretoken: '{{ csrf_token }}',
        };

        if (!data.password) {
            delete data.password;  // Don't send empty password
        }

        $.ajax({
            url: url,
            method: "POST",
            data: data,
            success: function (data) {
                $('#usersFormLoader').hide();  // Hide loader after submission
                if (data.success) {
                    $('#userModal').modal('hide');
                    toastr.success(data.message);
                    loadUsers();
                } else {
                    toastr.error(data.message);
                }
            },
            error: function () {
                $('#usersFormLoader').hide();  // Hide loader on error
                toastr.error("Failed to save data.");
            }
        });
    });

    // Show modal for editing the user
    $('body').on('click', '.edit-user-btn', function () {
        const id = $(this).data('id');
        $('#usersFormLoader').show();  // Show loader when fetching user data
        const url = `/edit-frontend-user/${id}/`;

        $.ajax({
            url: url,
            method: "GET",
            success: function (data) {
                $('#usersFormLoader').hide();  // Hide loader after fetching user data
                if (data.success) {
                    const user = data.user;
                    $('#user-id').val(user.id);
                    $('#recid').val(user.recid);
                    $('#username').val(user.username);
                    $('#password').val(''); // Leave password blank for security
                    $('#password').prop('placeholder', 'Leave blank to keep the same password');
                    $('#coursename').val(user.coursename);
                    $('#userModalLabel').text('Edit User');
                    $('#userModal').modal('show');
                } else {
                    toastr.error(data.message);
                }
            },
            error: function () {
                $('#usersFormLoader').hide();  // Hide loader on error
                toastr.error("Failed to fetch user data.");
            }
        });
    });

    // Delete user functionality
    $('body').on('click', '.delete-user-btn', function () {
        const id = $(this).data('id');
        if (confirm("Are you sure you want to delete this user?")) {
            $.ajax({
                url: "{% url 'delete-frontend-user' %}",
                method: "POST",
                data: {
                    id: id,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function (data) {
                    if (data.success) {
                        toastr.success(data.message);
                        loadUsers();
                    } else {
                        toastr.error(data.message);
                    }
                },
                error: function () {
                    toastr.error("Failed to delete user.");
                }
            });
        }
    });
});
</script>

{% endblock %}