<link href="<?= TEMPLATE ?>vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
<!-- Page level plugins -->
<script src="<?= TEMPLATE ?>vendor/datatables/jquery.dataTables.min.js"></script>
<script src="<?= TEMPLATE ?>vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="<?= TEMPLATE ?>vendor/datatables/dataTables.buttons.min.js"></script>
<script src="<?= TEMPLATE ?>vendor/datatables/jszip.min.js"></script>
<script src="<?= TEMPLATE ?>vendor/datatables/pdfmake.min.js"></script>
<script src="<?= TEMPLATE ?>vendor/datatables/vfs_fonts.js"></script>
<script src="<?= TEMPLATE ?>vendor/datatables/buttons.html5.min.js"></script>

<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">

    <!-- Main Content -->
    <div id="content">

        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
            <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                <i class="fa fa-bars"></i>
            </button>
            <img src="https://errandsservices.com/wp-content/uploads/2018/03/errands-services-logo-02.png"
                 style="height: 45px;">
        </nav>
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">
            <!-- Page Heading -->
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 mb-0 text-gray-800">System Users</h1>
                <button onclick="Adduser();" class="d-none d-sm-inline-block btn btn-sm btn-outline-primary shadow-sm">
                    Add New
                </button>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">All Records</h6>
                </div>
                <div class="card-body">
                    <div id="AjaxResponse"></div>
                    <div class="table-responsive text-nowrap" style="overflow:auto">
                        <table class="table table-bordered dataTable" width="100%" cellspacing="0">
                            <thead>
                            <tr>
                                <th>Action</th>
                                <th>Full Name</th>
                                <th>User Name</th>
                                <th>Account Type</th>
                                <th>Last Login</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>Action</th>
                                <th>Full Name</th>
                                <th>User Name</th>
                                <th>Account Type</th>
                                <th>Last Login</th>
                            </tr>
                            </tfoot>
                            <tbody>
                            <?php
                            if (count($records) > 0) {
                                foreach ($records as $record) { ?>
                                    <tr>
                                    <td>
                                        <button onclick="Updateuser(<?= $record['id'] ?>)"
                                                class="btn btn-outline-success btn-sm">Update
                                        </button>
                                        <button onclick="Loaduser(<?= $record['id'] ?>)"
                                                class="btn btn-outline-warning btn-sm">View
                                        </button>
                                        <button onclick="Deleteuser(<?= $record['id'] ?>, '<?= $record['username'] ?>')"
                                                class="btn btn-outline-danger btn-sm <?= (($record['username'] == 'admin') ? 'hide d-none' : '') ?>">
                                            Delete
                                        </button>
                                    </td>
                                    <td><?= ucwords($record['full_name']) ?></td>
                                    <td><?= $record['username'] ?></td>
                                    <td><?= ucwords(str_replace("_", ' ', $record['type'])) ?></td>
                                    <td><?= (($record['lastlogin_at'] == null) ? '-' : date("d M, Y - h:i A", strtotime($record['lastlogin_at']))) ?></td>
                                    </tr><?php
                                }
                            } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container-fluid -->

    </div>
    <!-- End of Main Content -->

    <!-- Footer -->
    <footer class="sticky-footer bg-white">
        <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; Errands Services</span>
            </div>
        </div>
    </footer>
    <!-- End of Footer -->

</div>
<!-- End of Content Wrapper -->
<?php echo view("load_user"); ?>
<?php echo view("user_form"); ?>


<script>
    // Call the dataTables jQuery plugin
    $(document).ready(function () {
        $('table.dataTable').DataTable({
            dom: 'Bfrtip',
            pageLength: 50,
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]
        });
    });

    function Loaduser(uid) {
        AjaxRequest("html_load_user", "uid=" + uid, 'LoadUserModal .modal-content');
        $('#LoadUserModal').modal({
            show: true,
            backdrop: false,
            keyboard: false
        });
    }

    function Adduser() {
        $("#UserFormModel form")[0].reset();
        $("#UserFormModel #UID").val(0);
        $("#UserFormModel .modal-title").html('Add New System User');
        $('#UserFormModel').modal({
            show: true,
            backdrop: false,
            keyboard: false
        });
    }

    function Updateuser(id) {
        response = AjaxResponse("html_user_data", "id=" + id);
        $("#UserFormModel .modal-title").html('Update System User');
        $("#UserFormModel #UID").val(response.record.id);
        $("#UserFormModel #full_name").val(response.record.full_name);
        $("#UserFormModel #username").val(response.record.username);
        $("#UserFormModel #password").val(response.record.password);
        $("#UserFormModel #type").val(response.record.type);

        $('#UserFormModel').modal({
            show: true,
            backdrop: false,
            keyboard: false
        });
    }

    function Deleteuser(id, username) {
        if (confirm("Are your sure to remove (" + username + ") user from system?")) {
            response = AjaxResponse("html_delete_user", "id=" + id);
            $("#AjaxResponse").html(response.message);
            if (response.status == 'success') {
                location.reload();
            }
        }

    }

    function UserFormSubmit(form) {
        var phpdata = $('#UserFormModel form#' + form).serialize();
        var response = AjaxResponse('html_submit_user_form', phpdata);
        $("#UserFormModel form #AjaxResponceUserFormSubmit").html(response.message);
        if (response.status == 'success') {
            location.reload();
        }
    }


</script>