{{define "content"}}
<div class="">
    <main class="page active">
        <div class="card card-app">
            <div class="card-body">
                <h1 class="h3 mb-3 font-weight-normal">List Users</h1>
                <table id="tbUsers" class="table table-striped table-responsive">
                    <thead>
                        <tr>
                            <th scope="col">Username</th>
                            <th scope="col">First Name</th>
                            <th scope="col">Last Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Role</th>
                            <th scope="col">Status</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
    </main>
</div>


<!-- Payment captured modal (Undo) -->
<div class="modal fade" id="ResetPasswordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-body p-4">
                <div class="d-flex align-items-start justify-content-between gap-3">
                    <div class="form-group">
                        <input type="hidden" name="id" id="id">
                        <label for="name" class="form-label">Password</label>
                        <input type="text" class="form-control" id="password" name="password"
                            placeholder="Enter password" required>
                    </div>
                    <div class="form-group">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="password2" name="password2"
                            placeholder="Repeat password" required>
                    </div>
                    <button type="button" class="btn-close" id="btnReset">Reset Password</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var btnReset = document.getElementById('btnReset');
    var ResetPasswordModal = new bootstrap.Modal(document.getElementById('ResetPasswordModal'));
    btnReset.addEventListener('click', function () {
        // Perform user creation logic here (e.g., form submission, AJAX request, etc.)
        fetch("/admin/add-user", {
            method: "POST",
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ name: document.getElementById("id").value, password: document.getElementById("password").value, password2: document.getElementById("password2").value }),
        })
            .then(response => response.text())
            .then(data => {
                successModal.show();
            })
            .catch((error) => {
                console.error("Error sending notification:", error);
            });
    });


    document.addEventListener("DOMContentLoaded", function (e) {
        new DataTable("#tbUsers", {
            ajax: {
                url: "/admin/get-all-user",
                fetch: (url, options) => fetch(url, {
                    ...options,
                    credentials: "same-origin",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRF-Token": "{{.CSRF}}"
                    },
                })
            },

            columns: [
                { data: "username" },
                { data: "firstname" },
                { data: "lastname" },
                { data: "email" },
                { data: "role" },
                { data: "status" },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `
                        <a href="/admin/update-user?id=${row.id}" class="btn btn-sm btn-warning">Edit</a>
                        <a href="javascript:Invite('${row.id}', '${row.username}')" class="btn btn-sm btn-warning">Invite</a>
                        <button class="btn btn-sm btn-danger" onclick="deleteUser('${row.id}', '${row.username}')">Delete</button>
                        `;
                    }
                }
            ],
            columnDefs: [
                {
                    target: 3, orderable: false, searchable: false
                }
            ]
        });


    });

    function Invite(id, name) {
        if (confirm(`Continue invite ${name}`)) {
            console.log(id);
            fetch("/admin/invite-user", {
                method: "POST",
                credentials: "same-origin",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": "{{.CSRF}}"
                },
                body: JSON.stringify({ id: id }),
            })
                .then(response => response.json())
                .then(data => {

                    if (data.code == "fail") {
                        console.error("Error : ", data.errors);
                        return;
                    }
                    else if (data.code == "success") {
                        window.location.reload();
                    }
                })
                .catch((error) => {
                    console.error("Error sending notification:", error);
                });
        }
    }
    function deleteUser(id, name) {
        if (confirm(`Continue delete ${name}`)) {
            console.log(id);
            fetch("/admin/delete-user", {
                method: "DELETE",
                credentials: "same-origin",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": "{{.CSRF}}"
                },
                body: JSON.stringify({ Id: id }),
            })
                .then(response => response.json())
                .then(data => {

                    if (data.code == "fail") {
                        pError.innerHTML = data.errors;
                        return;
                    }
                    else if (data.code == "success") {
                        window.location.reload();
                    }
                })
                .catch((error) => {
                    console.error("Error sending notification:", error);
                });
        }
    }

</script>
{{end}}