@extends('layouts.default')

    @section('content')


    <div class="container-fluid">
        

        <div class="row g-3 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-success">
            <div class="card-body">
                <p class="mb-1">Present</p>
                <h2 class="fs-30 font-w600 text-white mb-0">26</h2>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-danger">
            <div class="card-body">
                <p class="mb-1">Absent</p>
                <h2 class="fs-30 font-w600 text-white mb-0">2</h2>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-warning">
            <div class="card-body">
                <p class="mb-1">Late</p>
                <h2 class="fs-30 font-w600 text-white mb-0">1</h2>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card gradient-bx text-white bg-info">
            <div class="card-body">
                <p class="mb-1">Missing Clock-Out</p>
                <h2 class="fs-30 font-w600 text-white mb-0">0</h2>
            </div>
        </div>
    </div>
</div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card">
    <div class="card-header bg-white border-bottom">
        <h4 class="card-title mb-0">Attendance · {{ now()->format('d M Y') }}</h4>
    </div>
    <div class="card-body p-0">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="example5" class="table table-striped patient-list mb-4 dataTablesCard fs-14">
                                <thead>
                                    <tr>
                                        <th>Guard</th>
                                        <th>Site</th>
                                        <th>Shift</th>
                                        <th>Clock In</th>
                                        <th>Clock Out</th>
                                        <th>Duration</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                        
                                        <td>Hassan bin Osman</td>
                                        <td>Emerald Residence</td>
                                        <td>07:00–19:00</td>
                                        <td>07:02 AM</td>
                                        <td>-</td>
                                        <td>3h 55m</td>
                                        <td><span class="badge badge-success">PRESENT</span>

                                    </tr>
                                    <tr>
                                        </td>
                                        <td>Ravi Kumar</td>
                                        <td>Emerald Residence</td>
                                        <td>07:00–19:00</td>
                                        <td>07:00 AM</td>
                                        <td>-</td>
                                        <td>3h 57m</td>
                                        <td><span class="badge badge-success">PRESENT</span>
                                    </tr>

                                    <tr>
                                        <td>Tan Wei Ming</td>
                                        <td>Emerald Residence</td>
                                        <td>07:00–19:00</td>
                                        <td>07:18 AM</td>
                                        <td>-</td>
                                        <td>3h 39m</td>
                                        <td><span class="badge badge-danger">LATE</span>
                                        
                                    </tr>
                                    <tr>
                                        <td>Ahmad Zulkefli</td>
                                        <td>Emerald Residence</td>
                                        <td>07:00–07:00</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td><span class="badge badge-dark">SCHEDULED</span>
                                    </td>

                                    </tr>
                                    <tr>
                                        <td>Officer Chai</td>
                                        <td>Lakeside Commercial</td>
                                        <td>07:00–19:00</td>
                                        <td>07:00 AM</td>
                                        <td>-</td>
                                        <td>3h 57m</td>
                                        <td><span class="badge badge-success">PRESENT</span>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

    @endsection
    @push('scripts')
        <script>
            (function($) {

                var table = $('#example5').DataTable({
                    searching: false,
                    paging:true,
                    select: false,
                    //info: false,
                    lengthChange:false

                });
                $('#example tbody').on('click', 'tr', function () {
                    var data = table.row( this ).data();

                });

            })(jQuery);
        </script>
    @endpush