@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "Role Assignment";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<p>
    @* <a asp-action="UserCreate">Create New</a> *@
</p>
<div id="app">
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Latest Posts</h4>
                    <div class="col-md-12 col-lg-12">
                        <div>
                            <table class="table table-bordered border-primary" id="userDatatable">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- MODAL -->
    <div class="modal fade" id="confirm-dialog" tabindex="-1" role="dialog" aria-labelledby="confirm-dialog-title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirm-dialog-title">Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="hideModal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div v-if="selectedModule">
                    <div class="modal-body">
                        <p>Are you sure you want to delete module {{ selectedModule.moduleName }}?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="hideModal">Cancel</button>
                        <input type="hidden" id="delete-id">
                        <a id="confirmButton" href="#" class="btn btn-danger" v-on:click="confirmDelete(selectedModule)">Confirm</a>
                    </div>
                </div>
                <div v-else><p>Loading...</p></div>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    userList: null,
                    selectedModule: null
                };
            },
            mounted() {
               this.fetchModule();
            },
            methods: {
                fetchModule() {
                    fetch('/AdminAPI/GetUserList', {
                        method: 'POST'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.length > 0) {
                            this.userList = data.length ? data : [];
                        }
                        this.initiateTable();
                    })
                    .catch(error => {
                        console.error('There was a problem with the fetch operation:', error);
                    });
                },
                editModule(module) {
                    // Check if the user ID exists
                    if (module.settingId) {
                        // Redirect the user to the edit user page
                        window.location.href = 'ModuleSetting/' + module.settingId;
                    } else {
                        console.error('Module ID not found');
                    }
                },
                deleteModule(module) {
                    this.selectedModule = module; // Set selected user
                    $('#confirm-dialog').modal('show'); // Show the modal

                    // console.log(this.selectedModule);
                },
                confirmDelete(module) {
                    fetch(`/ModuleAPI/DeleteModule/${module.settingId}`, {
                        method: 'POST'
                    })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Failed to delete module');
                            }
                            // Remove the deleted user from the userData array
                            const index = this.moduleData.findIndex(u => u.settingId === module.settingId);
                            if (index !== -1) {
                                alert("Module deleted successfully");
                                this.moduleData.splice(index, 1);
                            }
                            this.hideModal(); // Hide the modal after deletion
                        })
                        .catch(error => {
                            console.error('Failed to delete module with status:', error);
                        });
                },
                hideModal() {
                    $('#confirm-dialog').modal('hide');
                },
                initiateTable() {
                    self = this;
                    this.itemDatatable = $('#userDatatable').DataTable({
                        "data": this.userList,
                        "columns": [
                            {
                                "title": "UID",
                                "data": "id",
                                "createdCell": function (td, cellData, rowData, row, col) {
                                    // Assign a unique ID to the <td> element
                                    $(td).attr('id', `qr${cellData}`);
                                },
                            },
                            {
                                "title": "Email",
                                "data": "email",
                            },
                            {
                                "title": "Company Name",
                                "data": "company",
                            },
                            {
                                "title": "Department",
                                "data": "department",
                            },
                            {
                                "title": "Role",
                                "data": "role",
                            },
                            {
                                "title": "Delete",
                                "data": "id",
                                "render": function (data) {
                                    var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
                                    return deleteButton;
                                },
                            }
                        ],
                        responsive: true,
                        drawCallback: function (settings) {
                            // Generate QR codes after rows are rendered
                            const api = this.api();
                            api.rows().every(function () {
                                const data = this.data(); // Row data
                                const containerId = `qr${data.uniqueID}`;
                                const container = $(`#${containerId}`);
                                // console.log(container[0]);
                                if (container) {
                                    // Generate QR code only if not already generated
                                    new QRCode(container[0], {
                                        text: data.qrString,
                                        width: 150,
                                        height: 150,
                                        colorDark: "#000000",
                                        colorLight: "#ffffff",
                                        correctLevel: QRCode.CorrectLevel.H
                                    });
                                }
                            });
                        },
                    })

                    // Attach click event listener to the delete buttons
                    $('#itemDatatable tbody').on('click', '.delete-btn', function () {
                        const itemId = $(this).data('id');
                        self.deleteItem(itemId);
                    });

                    $('#itemDatatable tbody').on('click', '.print-btn', function () {
                        const itemId = $(this).data('id');
                        var $row = $(this).closest('tr'); // get the row containing the button
                        var imageSrc = $row.find('img').attr('src'); // find the img element in the row and get its src
                        // console.log(imageSrc);
                        self.printItem(itemId, imageSrc);
                    });

                    this.loading = false;
                },
            }
        })

        $(function () {
            app.mount('#app');
        });
    </script>
}