@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Attendance</h5>
        </div>
    </div>
    <div class="card p-0 m-2">
        <h6 class="p-4 pb-0">Filters</h6>
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="row mb-3 p-3 g-3 d-flex justify-content-start">
                <div class="col-lg-2 col-md-12">
                    <input type="date" id="fromDate" class="form-control">
                </div>
                <div class="col-lg-2 col-md-12">
                    <input type="date" id="toDateFilter" class="form-control">
                </div>
                <div class="col-lg-1 col-md-12">
                    <button class="btn btn-primary w-100" id="filterBtn">
                        Search
                    </button>
                </div>
                <hr>
                <div class="row mb-3 align-items-center g-2">
                    <!-- Left: Page Length -->
                    <div class="col-auto ms-2">
                        <select id="pageLength" class="form-select">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                    <div class="col-auto ms-auto d-flex align-items-center gap-2">
                        <input type="text" id="toDate" class="form-control" placeholder="Search"
                            style="width: 220px;">
                        <button class="btn btn-label-secondary me-2">
                            <i class="ti tabler-upload"></i>&nbsp;Export
                        </button>
                    </div>
                </div>
                <div class="table-responsive pt-0 pb-2">
                    <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                        <div class="justify-content-between dt-layout-table">
                            <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                                <table class="table" id="usersTable">
                                    <thead>
                                        <tr>
                                            <th>Sno</th>
                                            <th>Date</th>
                                            <th>Customer&nbsp;ID</th>
                                            <th>Name</th>
                                            <th>Number</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            </div>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
            <script>
                $(document).ready(function() {
                    let table = $('#usersTable').DataTable({
                        processing: true,
                        serverSide: true,
                        searching: true,
                        paging: true,
                        ajax: {
                            url: "{{ route('data_attendance') }}",
                            data: function(d) {
                                d.from_date = $('#fromDate').val();
                                d.to_date = $('#toDateFilter').val();
                            }
                        },
                        order: [],
                        // dom: 'tpr',
                        columns: [
                            {
                                data: 'DT_RowIndex',
                                orderable: false,
                                searchable: false
                            },
                            {
                                data: 'date',
                                name: 'attendance_date'
                            },
                            {
                                data: 'id_number',
                                name: 'user.id_number'
                            },
                            {
                                data: 'name',
                                name: 'user.name'
                            },
                            {
                                data: 'phone_number',
                                name: 'user.phone_number'
                            },
                            {
                                data: 'action',
                                orderable: false,
                                searchable: false
                            }
                        ]
                    });
                    // DATE FILTER
                    $('#filterBtn').on('click', function() {
                        table.ajax.reload();
                    });
                    // GLOBAL SEARCH
                    $('#toDate').on('keyup change', function() {
                        table.search(this.value).draw();
                    });
                    // PAGE LENGTH
                    $('#pageLength').on('change', function() {
                        table.page.len(this.value).draw();
                    });
                });
            </script>
        @endsection