<?php include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php"); ?>


<style>
    table {
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
    }



    table tr {
        border: 1px solid #ddd;
        padding: .35em;
    }

    table tr:nth-child(even) {
        background: #f8f8f8;
    }

    table th,
    table td {
        padding: .625em;
        text-align: center;

    }

    table th {
        /* background: #999; */
        color: #fff;
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btnn {
        /* width:50px !important;
        height:30px !important; */
        border-radius: 8px;
        cursor: pointer;

    }

    .ii {
        font-size: 13px;
        width: 100%;
        float: right;
        text-align: right;
    }
</style>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Active Staff List</h4>
                <h6 class="card-subtitle"></h6>
                <div class="table-responsive">
                    <table id="example" style='Width:100%'>
                        <thead class="bg-info">
                            <tr>
                                <!-- <th scope="col" style="width:50px;"></th> -->
                                <th scope="col">Name</th>
                                <th scope="col">Phone</th>
                                <th scope="col">Whatsapp No.</th>
                                <th scope="col">Email</th>
                                <th scope="col">Country</th>
                                <th scope="col">Role</th>
                                <th scope="col">Status</th>
                                <th scope="col">Created</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modals"></div>

<script>
    $(".modals").load(domain + "/COMPONENTS/sub-pages/modals.php");
    var table = $('#example').DataTable({
        responsive: true,
        "ajax": {
            "url": domain_api + "/staff/active-staff-portal.php?role=" + encodeURIComponent(role) + "",
            "dataSrc": "staff_information"
        },
        "columns": [
            // {
            //     "data": null,
            //     render: function(data, type, row) {
            //         return '<img src=' + domain_api + '/uploads/profile-photos/' + encodeURIComponent(data.profile_photo) + ' class="cropped-image"  width="50px" height="50px" style="border-radius: 20px;">';
            //     }
            // },
            {
                "data": null,
                render: function(data, type, row) {
                    return data.title + ' ' + data.first_name + ' ' + data.middle_name + ' ' + data.last_name;
                }
            },
            {
                "data": "whatsapp_no"
            },

            {
                "data": "phone"
            },
            {
                "data": "email"
            },
            {
                "data": "nationality"
            },
            {
                "data": "role"
            },

            {
                "data": "status"
            },
            {
                "data": null,
                render: function(data, type, row) {
                    var dateObj = new Date(data.date_of_application);
                    var myDate = (dateObj.getUTCDate() + "/" + (dateObj.getMonth() + 1) + "/" + (dateObj.getUTCFullYear()));
                    return myDate
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    return '<div class="btn btnn btn-primary profile" data-id="' + data.unique_user_id + '" title="Profile"><i class="ii far fa-eye"></i></div>' +
                        '<div class="btn btnn btn-success action" data-id="' + data.unique_user_id + '" data-edit-full-user="Yes" data-url="/COMPONENTS/sub-pages/edit-user-details-full.php" title="Edit" style="margin-left:5px; margin-right:5px;"><i class="ii fas fa-edit"></i></div>' +
                        '<div class="btn btnn btn-danger action" data-id="' + data.unique_user_id + '" data-url="/COMPONENTS/sub-pages/delete-user.php" title="Delete"><i class="ii fa fa-trash"></i></div>'
                }
            }

        ]
    });

    new $.fn.dataTable.FixedHeader(table);

    $(document).unbind().on("click", ".profile", function() {
        var id = $(this).attr("data-id");
        $(".profileView").load(domain + "/COMPONENTS/sub-pages/staff-profile.php?userId=" + encodeURIComponent(id) + "", function() {
            $("#myModal_profile").modal("show");
        });
        $(this).off();
    });

    $(document).on("click", ".action", function() {
        var id = $(this).attr("data-id");
        var edit = $(this).attr("data-edit-full-user");
        var url = $(this).attr("data-url");
        var url = url + "?userId=" + encodeURIComponent(id) + "";
        $(".actionBody").load(domain + url, function() {
            $("#myModal_actions").modal("show");
            if (edit == "Yes") {
                $(".modal-dialog").addClass("modal-lg");
            } 
            $(".closeModal").on("click", function() {
                $("#myModal_actions").modal("hide");
            });
        })
    });
</script>

<script src="<?php echo $website_name; ?>/dist/js/pages/dashboards/dashboard1.min.js"></script>