@extends('Admin.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- Move CSS to a push stack if your layout supports it, otherwise keep it here --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Pending List</h5>
        </div>
        {{-- <div class="col-auto">
            <a href="{{ route('add_attendance') }}"><button class="btn btn-primary">Add Attendance</button> </a>
        </div> --}}
    </div>

    <div class="card p-0 m-2">
        {{-- Filters --}}
        <div class="row m-2 mt-1 g-3">
            <div class="col-lg-3">
                <label class="form-label">From Date</label>
                <input type="date" id="fromDate" class="form-control">
            </div>
            <div class="col-lg-3">
                <label class="form-label">To Date</label>
                <input type="date" id="toDate" class="form-control">
            </div>
            {{-- <div class="col-lg-3">
                <label class="form-label">Select Department</label>
                <select id="department" class="form-select">
                    <option value="">Select Department</option>
                    <option value="Sales">Sales</option>
                    <option value="Support">Support</option>
                    <option value="Accounts">Accounts</option>
                </select>
            </div> --}}
            <div class="col-lg-3">
                <label class="form-label">Select Branch</label>
                <select id="branch" class="form-select">
                    <option value="">Select Branch</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" {{ old('branch') == $branch->id ? 'selected' : '' }}>
                            {{ $branch->branch_name }} - {{ $branch->place }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Table Controls --}}
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-1">
                <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-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search">
            </div>
        </div>

        <div class="table-responsive p-3">
            <table class="table" id="usersTable">
                <thead>

                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>ID</th>
                        <th>name</th>
                        <th>perday salary</th>
                        <th>branch</th>
                        <th>Checkin</th>
                        <th>Checkout</th>
                        <th>working Hours</th>
                        <th>status</th>
                        {{-- <th>remark</th> --}}

                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </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 () {

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

                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('pendingListData') }}",
                    type: "GET",

                    data: function (d) {

                        d.fromDate = $('#fromDate').val();
                        d.toDate = $('#toDate').val();
                        d.branch = $('#branch').val();

                    }
                },

                searching: false,
                paging: true,
                info: true,
                ordering: false,
                lengthChange: false,
                pageLength: 10,
                dom: 'lrtip',

                columns: [

                    // SNO
                    {
                        data: null,
                        orderable: false,
                        searchable: false,

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

                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },

                    // DATE
                    {
                        data: 'attendance_date',
                        name: 'attendance_date',

                        render: function (data) {

                            return `<span class="text-nowrap">${data ?? '-'}</span>`;
                        }
                    },

                    // STAFF ID
                    {
                        data: 'staff_id',
                        name: 'staff_id',

                        render: function (data) {

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

                    // NAME
                    {
                        data: 'name',
                        name: 'name',

                        render: function (data) {

                            return `<span>${data ?? '-'}</span>`;
                        }
                    },

                    // PER DAY SALARY
                    {
                        data: 'per_day_salary',
                        name: 'per_day_salary',

                        render: function (data) {

                            return `<span>${data ?? '-'}</span>`;
                        }
                    },

                    // BRANCH
                    {
                        data: 'branch',
                        name: 'branch',

                        render: function (data) {

                            return `<span>${data ?? '-'}</span>`;
                        }
                    },

                    // CHECKIN
                    {
                        data: 'checkin',
                        name: 'checkin',

                        render: function (data) {

                            return `<span>${data ?? '-'}</span>`;
                        }
                    },

                    // CHECKOUT
                    {
                        data: 'checkout',
                        name: 'checkout',

                        render: function (data) {

                            return `<span>${data ?? '-'}</span>`;
                        }
                    },

                    // WORKING HOURS
                    {
                        data: 'working_hours',
                        name: 'working_hours',

                        render: function (data) {

                            return `<span>${data ?? '-'}</span>`;
                        }
                    },

                    // STATUS
                    {
                        data: 'status',
                        name: 'status',

                        render: function (data) {

                            if (data === 'pending') {

                                return `<span class="badge bg-secondary">Pending</span>`;
                            }

                            return '-';
                        }
                    }
                ]
            });

            // SEARCH
            $('#customSearch').on('keyup', function () {

                table.search(this.value).draw();
            });

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

                table.page.len(this.value).draw();
            });

            // DATE FILTER
            $('#fromDate, #toDate,#branch').on('change', function () {

                table.ajax.reload();
            });

        });
    </script>
@endsection