<div class="container mt-4">

    <div class="card border-0 shadow-sm rounded-4">

        <div class="card-body p-4">

            <div class="d-flex justify-content-between align-items-center mb-3">

                <h5 class="mb-0">
                    Monitoring Absensi
                </h5>

                <input type="date"
                       id="filterDate"
                       class="form-control"
                       style="max-width:220px"
                       value="<?= date('Y-m-d') ?>">

            </div>

            <div class="table-responsive">

                <table id="tableAttendance"
                       class="table modern-table align-middle w-100">

                    <thead class="table-light">
                        <tr>
                            <th>No</th>
                            <th>Kode</th>
                            <th>Nama</th>
                            <th>Shift</th>
                            <th>Checkin</th>
                            <th>Checkout</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                </table>

            </div>

        </div>

    </div>

</div>

<script>
$(function(){

    let table = $('#tableAttendance').DataTable({
        ajax:{
            url:`<?= base_url(); ?>attendancemonitoring/get_data`,
            data:function(d){
                d.date = $('#filterDate').val();
            },
            dataSrc:'data'
        },
        columns:[
            {data:0},
            {data:1},
            {data:2},
            {data:3},
            {data:4},
            {data:5},
            {data:6}
        ]
    });

    $('#filterDate').change(function(){
        table.ajax.reload();
    });

});
</script>