@extends('Admin.layout')

@section('content')
<div class="page-view w-100">

    <!-- PAGE HEADER -->
    <div class="d-flex align-items-center gap-2 mb-3">
      
        <h3 class="mb-0 text-white fw-bold">Attendance</h3>
    </div>

    <!-- TABLE CARD -->
    <div class="card bank-card p-3 p-md-4 w-100">

        <!-- FILTER CONTROLS -->
        <div class="row g-3 align-items-center mb-3">
            <div class="col-12 col-md-6">
                <h5 class="text-white mb-0">Attendance Report</h5>
            </div>

            <div class="col-12 col-md-6">
                <div class="d-flex flex-column flex-sm-row justify-content-md-end gap-2">
                    <select id="pageLength"
                            class="form-select form-select-sm"
                            style="width: 100%; max-width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="all">All</option>
                    </select>

                    <input type="search"
                           id="principalSearch"
                           class="form-control form-control-sm"
                           placeholder="Search Attendance..."
                           style="width: 100%; max-width: 300px;">
                </div>
            </div>
        </div>

      {{-- TABLE --}}
<div class="table-responsive bank-table-wrapper w-100">

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

        <thead>
            <tr>
                <th>#</th>
                <th>DATE</th>
                <th>NAME</th>
                <th>CHECK-IN</th>
                <th>LATE REASON</th>
                <th>BREAK HISTORY</th>
                <th>CHECK-OUT</th>
                <th>WORKING HOURS</th>
                <th>STATUS</th>
            </tr>
        </thead>

        <tbody></tbody>

    </table>

</div>
    </div>
</div>


{{-- =========================================================
     DATATABLE 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>


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


{{-- =========================================================
     ATTENDANCE DATATABLE
========================================================= --}}
<script>

    $(document).ready(function () {

        /*
        |--------------------------------------------------------------------------
        | ATTENDANCE DATA
        |--------------------------------------------------------------------------
        */

        const data = [


            {
                date: '05 Oct 2026',
                name: 'Arun',
                checkin: '08:55 AM',
                late_reason: '-',
                break_history: [
                    {
                        start: '01:05 PM',
                        end: '01:35 PM',
                        duration: '30 mins',
                        reason: 'Lunch'
                    }
                ],
                checkout: '06:00 PM',
                working_hours: '8h 35m',
                status: 'Present'
            },

            {
                date: '04 Oct 2026',
                name: 'Kumar',
                checkin: '09:35 AM',
                late_reason: 'Vehicle problem',
                break_history: [],
                checkout: '06:15 PM',
                working_hours: '8h 40m',
                status: 'Late'
            },

            {
                date: '03 Oct 2026',
                name: 'Priya',
                checkin: '-',
                late_reason: '-',
                break_history: [],
                checkout: '-',
                working_hours: '0h 00m',
                status: 'Absent'
            }

        ];


        /*
        |--------------------------------------------------------------------------
        | DATATABLE
        |--------------------------------------------------------------------------
        */

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

            data: data,

            pageLength: 10,

            lengthChange: false,

            searching: true,

            ordering: true,

            order: [],

            info: true,

            autoWidth: false,

            dom: 'rtip',

            columns: [

                /*
                |--------------------------------------------------------------------------
                | SNO
                |--------------------------------------------------------------------------
                */

                {
                    data: null,

                    orderable: false,

                    searchable: false,

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

                        return meta.row + 1;

                    }
                },


                /*
                |--------------------------------------------------------------------------
                | DATE
                |--------------------------------------------------------------------------
                */

                {
                    data: 'date'
                },


                /*
                |--------------------------------------------------------------------------
                | NAME
                |--------------------------------------------------------------------------
                */

                {
                    data: 'name'
                },


                /*
                |--------------------------------------------------------------------------
                | CHECK-IN
                |--------------------------------------------------------------------------
                */

                {
                    data: 'checkin',

                    render: function (data) {

                        if (data === '-') {

                            return `
                                <span class="text-muted">-</span>
                            `;

                        }

                        return `
                            <span class="fw-semibold">
                                <i class="ti ti-login me-1 text-success"></i>
                                ${data}
                            </span>
                        `;

                    }
                },


                /*
                |--------------------------------------------------------------------------
                | LATE REASON
                |--------------------------------------------------------------------------
                */

                {
                    data: 'late_reason',

                    render: function (data) {

                        if (!data || data === '-') {

                            return `
                                <span class="text-muted">-</span>
                            `;

                        }

                        return `
                            <span class="text-warning">
                                <i class="ti ti-alert-triangle me-1"></i>
                                ${data}
                            </span>
                        `;

                    }
                },


                /*
                |--------------------------------------------------------------------------
                | BREAK HISTORY
                |--------------------------------------------------------------------------
                */

                {
                    data: 'break_history',

                    orderable: false,

                    searchable: false,

                    render: function (breaks) {

                        if (!breaks || breaks.length === 0) {

                            return `
                                <span class="text-muted">
                                    No Break
                                </span>
                            `;

                        }

                        let html = '';

                        breaks.forEach(function (item) {

                            html += `
                                <div class="mb-1">

                                    <span class="badge bg-warning-subtle text-warning">
                                        ${item.start}
                                        -
                                        ${item.end}
                                    </span>

                                    <small class="text-muted ms-1">
                                        (${item.duration})
                                    </small>

                                </div>
                            `;

                        });

                        return html;

                    }
                },


                /*
                |--------------------------------------------------------------------------
                | CHECK-OUT
                |--------------------------------------------------------------------------
                */

                {
                    data: 'checkout',

                    render: function (data) {

                        if (data === '-') {

                            return `
                                <span class="text-muted">-</span>
                            `;

                        }

                        return `
                            <span class="fw-semibold">
                                <i class="ti ti-logout me-1 text-danger"></i>
                                ${data}
                            </span>
                        `;

                    }
                },


                /*
                |--------------------------------------------------------------------------
                | WORKING HOURS
                |--------------------------------------------------------------------------
                */

                {
                    data: 'working_hours',

                    render: function (data) {

                        return `
                            <span class="fw-semibold">
                                ${data}
                            </span>
                        `;

                    }
                },


                /*
                |--------------------------------------------------------------------------
                | STATUS
                |--------------------------------------------------------------------------
                */

                {
                    data: 'status',

                    render: function (data) {

                        let badge = 'bg-secondary';

                        if (data === 'Present') {

                            badge = 'bg-success';

                        } else if (data === 'Late') {

                            badge = 'bg-warning text-dark';

                        } else if (data === 'Absent') {

                            badge = 'bg-danger';

                        }

                        return `
                            <span class="badge ${badge}">
                                ${data}
                            </span>
                        `;

                    }
                },


              
            ]

        });


        /*
        |--------------------------------------------------------------------------
        | CUSTOM SEARCH
        |--------------------------------------------------------------------------
        */

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

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

        });


        /*
        |--------------------------------------------------------------------------
        | PAGE LENGTH
        |--------------------------------------------------------------------------
        */

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

            const value = this.value;

            if (value === 'all') {

                attendanceTable
                    .page.len(-1)
                    .draw();

            } else {

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

            }

        });


    });

</script>
@endsection