@extends('Admin.layout')

@section('content')

    {{-- PAGE HEADER --}}
    <div class="d-flex flex-row justify-content-between align-items-center mb-3 gap-2">

        <h3 class="mb-0 text-nowrap">
            Attendance Management
        </h3>

    </div>


    {{-- MAIN CARD --}}
    <div class="card gold-management-card p-3">

        {{-- FILTERS --}}
        <div class="row g-2 align-items-center mb-4">

            {{-- PAGE LENGTH --}}
            <div class="col-6 col-sm-4 col-md-3 col-lg-1">

                <select id="pageLength" class="form-select">

                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>

                </select>

            </div>


            {{-- SEARCH --}}
            <div class="col-12 col-sm-8 col-md-6 col-lg-4 ms-sm-auto">

                <input type="search"
                       id="attendanceSearch"
                       class="form-control"
                       placeholder="Search">

            </div>

        </div>


        {{-- TABLE --}}
        <div class="gold-table-wrapper table-responsive">

            <table id="attendanceManagementTable"
                   class="table mb-0 w-100 text-nowrap">

                <thead>

                    <tr>

                        <th>SNO</th>

                        <th>EMPLOYEE NAME</th>

                        <th>ATTENDANCE DATE</th>

                        <th>CHECK IN</th>

                        <th>CHECK OUT</th>

                        <th>WORKING HOURS</th>

                        <th>STATUS</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>


    {{-- DATATABLES CSS --}}
    <link rel="stylesheet"
          href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">


    {{-- JQUERY --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    {{-- DATATABLES JS --}}
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script>

        $(document).ready(function () {

            /* =========================
               ATTENDANCE DATA
            ========================== */

            const data = [

                {
                    id: 1,
                    employee_name: 'Arun Kumar',
                    attendance_date: '03-10-2026',
                    check_in: '09:05 AM',
                    check_out: '06:10 PM',
                    working_hours: '9h 05m',
                    status: 'Present'
                },

                {
                    id: 2,
                    employee_name: 'Priya S',
                    attendance_date: '03-10-2026',
                    check_in: '09:35 AM',
                    check_out: '06:00 PM',
                    working_hours: '8h 25m',
                    status: 'Late'
                },

                {
                    id: 3,
                    employee_name: 'Rahul M',
                    attendance_date: '03-10-2026',
                    check_in: '09:00 AM',
                    check_out: '01:00 PM',
                    working_hours: '4h 00m',
                    status: 'Half Day'
                },

                {
                    id: 4,
                    employee_name: 'Anitha R',
                    attendance_date: '03-10-2026',
                    check_in: '09:02 AM',
                    check_out: '06:05 PM',
                    working_hours: '9h 03m',
                    status: 'Present'
                },

                {
                    id: 5,
                    employee_name: 'Suresh Kumar',
                    attendance_date: '03-10-2026',
                    check_in: '-',
                    check_out: '-',
                    working_hours: '-',
                    status: 'Absent'
                },

                {
                    id: 6,
                    employee_name: 'Divya P',
                    attendance_date: '03-10-2026',
                    check_in: '08:55 AM',
                    check_out: '06:00 PM',
                    working_hours: '9h 05m',
                    status: 'Present'
                },

                {
                    id: 7,
                    employee_name: 'Vijay R',
                    attendance_date: '03-10-2026',
                    check_in: '09:20 AM',
                    check_out: '06:15 PM',
                    working_hours: '8h 55m',
                    status: 'Late'
                }

            ];


            /* =========================
               DATATABLE
            ========================== */

            const attendanceTable = $('#attendanceManagementTable').DataTable({

                data: data,

                pageLength: 10,

                lengthChange: false,

                searching: true,

                ordering: true,

                order: [],

                info: true,

                autoWidth: false,

                dom: 'rtip',

                columns: [

                    {
                        data: null,

                        orderable: false,

                        searchable: false,

                        render: function (data, type, row, meta) {

                            return meta.row + 1;

                        }
                    },

                    {
                        data: 'employee_name',

                        name: 'employee_name'
                    },

                    {
                        data: 'attendance_date',

                        name: 'attendance_date'
                    },

                    {
                        data: 'check_in',

                        name: 'check_in'
                    },

                    {
                        data: 'check_out',

                        name: 'check_out'
                    },

                    {
                        data: 'working_hours',

                        name: 'working_hours'
                    },

                    {
                        data: 'status',

                        name: 'status',

                        render: function (data) {

                            if (data === 'Present') {

                                return `
                                    <span class="badge bg-success">
                                        Present
                                    </span>
                                `;

                            }

                            if (data === 'Late') {

                                return `
                                    <span class="badge bg-warning text-dark">
                                        Late
                                    </span>
                                `;

                            }

                            if (data === 'Half Day') {

                                return `
                                    <span class="badge bg-info">
                                        Half Day
                                    </span>
                                `;

                            }

                            if (data === 'Absent') {

                                return `
                                    <span class="badge bg-danger">
                                        Absent
                                    </span>
                                `;

                            }

                            return data;

                        }

                    }

                ]

            });


            /* =========================
               CUSTOM SEARCH
            ========================== */

            $('#attendanceSearch').on('keyup', function () {

                attendanceTable
                    .search(this.value)
                    .draw();

            });


            /* =========================
               PAGE LENGTH
            ========================== */

            $('#pageLength').on('change', function () {

                attendanceTable
                    .page
                    .len(parseInt(this.value))
                    .draw();

            });

        });

    </script>

@endsection