<?php include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php"); ?>
<style>
    #tab-container {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #tab-container .tab-content {
        display: none;
        padding: 20px 0 0;
    }

    #tab-container input[type="radio"] {
        display: none;
    }

    #tab-container input:checked+label {
        color: #bd235d;
    }

    #tab-container label {
        display: inline-block;
        padding: 0 25px;
        font-weight: 600;
    }

    #tab-container label:not(:first-of-type) {
        border-left: 2px solid #991a48;
    }

    @media screen and (max-width: 480px) {
        #tab-container label:not(:first-of-type) {
            border-left: none;
        }
    }

    @media screen and (max-width: 480px) {
        #tab-container label {
            display: block;
        }
    }

    #tab-container label:hover {
        color: #bd235d;
        cursor: pointer;
    }

    #tab-container #tab1:checked~#content1 {
        display: block;
    }

    #tab-container #tab2:checked~#content2 {
        display: block;
    }

    #tab-container #tab3:checked~#content3 {
        display: block;
    }

    #tab-container #tab4:checked~#content4 {
        display: block;
    }

    #tab-container #tab5:checked~#content5 {
        display: block;
    }

    #tab-container #tab6:checked~#content6 {
        display: block;
    }

    #tab-container #tab7:checked~#content7 {
        display: block;
    }

    #tab-container #tab8:checked~#content8 {
        display: block;
    }

    #tab-container #tab9:checked~#content9 {
        display: block;
    }

    #tab-container #tab10:checked~#content10 {
        display: block;
    }


    #tab-container .card-body {
        width: 100%;
        background: #fff;
        -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

    #tab-container .card-body .card-title {
        padding-top: 20px;
        text-transform: uppercase;
        font-weight: 700;
    }

    #tab-container .card-body .card-description {
        padding-bottom: 20px;
    }

    #tab-container .card-body .card-link {
        padding-bottom: 20px;
        text-transform: uppercase;
        color: #bd235d;
        display: block;
    }



























    .tabset>input[type="radio"] {
        position: absolute;
        left: -200vw;
    }

    .tabset .tab-panel {
        display: none;
    }

    .tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
    .tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
    .tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
    .tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
    .tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
    .tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6),
    .tabset>input:nth-child(13):checked~.tab-panels>.tab-panel:nth-child(7),
    .tabset>input:nth-child(15):checked~.tab-panels>.tab-panel:nth-child(8),
    .tabset>input:nth-child(17):checked~.tab-panels>.tab-panel:nth-child(9),
    .tabset>input:nth-child(19):checked~.tab-panels>.tab-panel:nth-child(10),
    .tabset>input:nth-child(21):checked~.tab-panels>.tab-panel:nth-child(11),
    .tabset>input:nth-child(23):checked~.tab-panels>.tab-panel:nth-child(12),
    .tabset>input:nth-child(25):checked~.tab-panels>.tab-panel:nth-child(13),
    .tabset>input:nth-child(27):checked~.tab-panels>.tab-panel:nth-child(14),
    .tabset>input:nth-child(29):checked~.tab-panels>.tab-panel:nth-child(15),
    .tabset>input:nth-child(31):checked~.tab-panels>.tab-panel:nth-child(16),
    .tabset>input:nth-child(33):checked~.tab-panels>.tab-panel:nth-child(17),
    .tabset>input:nth-child(35):checked~.tab-panels>.tab-panel:nth-child(18),
    .tabset>input:nth-child(37):checked~.tab-panels>.tab-panel:nth-child(19),
    .tabset>input:nth-child(39):checked~.tab-panels>.tab-panel:nth-child(20),
    .tabset>input:nth-child(41):checked~.tab-panels>.tab-panel:nth-child(21),
    .tabset>input:nth-child(43):checked~.tab-panels>.tab-panel:nth-child(22) {
        display: block;
    }

    .tabset>label {
        position: relative;
        display: inline-block;
        padding: 15px 15px 25px;
        border: 1px solid transparent;
        border-bottom: 0;
        cursor: pointer;
        font-weight: 500;
    }

    .tabset>label::after {
        content: "";
        position: absolute;
        left: 15px;
        bottom: 10px;
        width: 22px;
        height: 4px;
        background: #8d8d8d;
    }

    .tabset>label:hover,
    .tabset>input:focus+label {
        color: #bd235d;
    }

    .tabset>label:hover::after,
    .tabset>input:focus+label::after,
    .tabset>input:checked+label::after {
        background: #bd235d;
    }

    .tabset>input:checked+label {
        border-color: #bd235d;
        border-bottom: 1px solid #fff;
        margin-bottom: -1px;
        color: #bd235d;
    }

    .tab-panel {
        padding: 30px 0;
        border-top: 1px solid #ccc;
    }




















    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;
    }

    .modal-lg {
        max-width: 80%;
    }

    .card {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.082), 0 6px 6px rgba(0, 0, 0, 0.082);
    }

    .ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    .ul:before {
        content: "";
        display: inline-block;
        width: 2px;
        background: red;
        position: absolute;
        left: 3px;
        top: 5px;
        height: calc(100% - 10px);
    }

    .ul .li {
        position: relative;
        padding-left: 15px;
        margin-bottom: 15px;
    }

    .ul .li:before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background: red;
        position: absolute;
        left: 0;
        top: 5px;
        border-radius: 10px;
    }

    /*# sourceMappingURL=a.css.map */

    /*# sourceMappingURL=a.css.map */
</style>


<div class="card">
    <div class="card-body">
        <h1 style='font-size:18px; text-align:center; color:black;' class="configHeading"></h1>

        <div class="row">

            <div class="col-md-4">
                <div class="form-group secondInput">
                    <label for="name" class="Description">Select Staff</label>
                    <select class="form-control staffName" name="staffName">
                        <?php
                        echo "<option value='' selected>All Staff</option>";
                        $query = mysqli_query($conn, "SELECT * FROM staff ");
                        while ($spec = mysqli_fetch_assoc($query)) {
                            echo "<option value='" . $spec["unique_user_id"] . "'>" . $spec["first_name"] . " " . $spec["middle_name"] . " " . $spec["last_name"] . "</option>";
                        }

                        ?>
                    </select>
                </div>
            </div>

            <div class="col-md-3">

                <div class="form-group inventoryCategory">
                    <label for="iCategory" class="inventoryCategoryLabel">From</label>
                    <input type="date" class="form-control dateFrom" name="dateFrom">
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group secondInput">
                    <label for="name" class="Description">To</label>
                    <input type="date" class="form-control dateTo" name="dateTo" readonly>
                </div>
            </div>

            <div class="col-md-2">
                <div class="form-group text-center">
                    <button type="button" class="btn btn-rounded btn-primary searchAttendanceDate" style="width:100%; margin-top:25px;"><span class='submitLoader'>Search</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" style="margin-top:-40px; margin-bottom:-40px;">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Staff Attendance</h4>
                <h6 class="card-subtitle"></h6>
                <div class="table-responsive table-lets-go">
                    <table id="example" style='Width:100%'>
                        <thead class="bg-info">
                            <tr>
                                <th scope="col" style="width:50px;">Date</th>
                                <th scope="col">Staff Id</th>
                                <th scope="col">Name</th>
                                <th scope="col">Role</th>
                                <th scope="col">Temperature</th>
                                <th scope="col">Time In</th>
                                <th scope="col">Time Out</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- under-construction -->


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

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

<script>
    $(".modals").load(domain + "/COMPONENTS/sub-pages/modals.php");
    var rowCount = 1;
    var table = $('#example').DataTable({
        responsive: true,
        "ajax": {
            "url": domain_api + "/staff/attendance.php?role=" + encodeURIComponent(role) + "",
            "dataSrc": "staff_attendance"
        },
        "columns": [{
                "data": "Date",
            },
            {
                "data": "idd"
            },
            {
                "data": null,
                render: function(data, type, row) {
                    return data.fullname;
                }
            },
            {
                "data": "role"
            },
            {
                "data": "Temperature"
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (data.StatusIndicating == "Present") {
                        return "<span style='color:green; font-weight:500;'>" + data.TimeIn + "</span>";
                    } else {
                        return "<span style='color:red; font-weight:500;'>" + data.TimeIn + "</span>";
                    }
                }
            },
            {
                "data": "TimeOut"
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (data.StatusIndicating == "Present") {
                        return "<span style='color:green; font-weight:500;'>" + data.StatusIndicating + "</span>";
                    } else {
                        return "<span style='color:red; font-weight:500;'>" + data.StatusIndicating + "</span>";
                    }
                }
            }

        ],
        "ordering": true,
        order: [
            ["0", 'desc']
        ]
    });

    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).off().on("click", ".searchAttendanceDate", function() {
        var staff = $(".staffName").val();
        var dateFrom = $(".dateFrom").val();
        var dateTo = $(".dateTo").val();
        sessionStorage.setItem("staff", staff);
        sessionStorage.setItem("dateFrom", dateFrom);
        sessionStorage.setItem("dateTo", dateTo);
        if (staff != "" || dateFrom != "") {
            $(".table-lets-go").load(domain + "/COMPONENTS/sub-pages/attendance-list.php");
        } else {
            alert("Please select date from and date to")
        }
    });

    $(".dateFrom").off().on("change", function() {
        var dateFrom = $(this).val();
        if (dateFrom != "") {
            $(".dateTo").attr("readonly", false);
        }
    });
</script>
<script src="cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js">
    < script src = "<?php echo $website_name; ?>/dist/js/pages/dashboards/dashboard1.min.js" >