@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.5/css/buttons.bootstrap5.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .link {
        text-decoration: underline;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #d9dee3;
        border-radius: 0.375rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
</style>
@section('content')

    <div class="row me-6">



        <div class="col-lg-11">

            <ul class="nav nav-pills flex-column flex-sm-row mb-4 gap-sm-0 gap-2 mt-4">

                <li class="nav-item">

                    <a class="nav-link active waves-effect waves-light" href="{{ route('attendance_history') }}">
                        Attendance</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link waves-effect waves-light" href="{{ route('leave_request_table') }}">Leave Request</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link waves-effect waves-light" href="{{ route('wfh_table') }}">Work From Home</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link waves-effect waves-light" href="{{ route('permission_table') }}">Permission</a>

                </li>


            </ul>

        </div>

    </div>

    <!-- Filters -->
    <div class="card mb-3 mt-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Staff Name</label>
                    <select id="filter_name" class="form-select">
                        <option value="">All Staff</option>
                        @foreach($staffs as $staff)
                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Role</label>
                    <select id="filter_role" class="form-select">
                        <option value="">All Roles</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->designation }}">{{ $role->designation }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 d-flex align-items-end">
                    <button class="btn btn-secondary" id="resetFilter">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card p-4 mt-4">

        <div class="card-datatable table-responsive pt-0">

            <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">

                <div class="justify-content-between dt-layout-table">

                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <div class="row mb-3">

                            <!-- COLUMN SELECT -->
                            <div class="col-md-8">
                                <label><b>Select Columns for Excel Export</b></label><br>

                                <label><input type="checkbox" class="col-export" value="created_at"> Date</label>
                                <label class="ms-2"><input type="checkbox" class="col-export" value="user_id"> Employee
                                    ID</label>
                                <label class="ms-2"><input type="checkbox" class="col-export" value="user_name">
                                    Name</label>
                                <label class="ms-2"><input type="checkbox" class="col-export" value="work_mode"> Work
                                    From</label>
                                <label class="ms-2"><input type="checkbox" class="col-export" value="check_in"> Check
                                    In</label>
                                <label class="ms-2"><input type="checkbox" class="col-export" value="type"> Type</label>
                                <label class="ms-2"><input type="checkbox" class="col-export" value="check_out"> Check
                                    Out</label>
                                <label class="ms-2"><input type="checkbox" class="col-export" value="late_reason"> Late
                                    Reason</label>
                            </div>

                            <!-- EXPORT BUTTON -->
                            <div class="col-md-4 d-flex align-items-end justify-content-end">
                                <button id="exportBtn" class="btn btn-success">
                                    Export Excel
                                </button>
                            </div>

                        </div>
                        <table id="dept" class="table">

                            <thead>

                                <tr>

                                    <th>SNO</th>

                                    <th class="text-nowrap">DATE</th>

                                    <th class="text-nowrap">Employee ID</th>

                                    <th class="text-nowrap">Name</th>
                                    <th class="text-nowrap">Work Mode</th>

                                    <th class="text-nowrap">Check In</th>

                                    <th class="text-nowrap">Type</th>

                                    <th class="text-nowrap">Check Out</th>

                                    <th class="text-nowrap">Late Reason</th>

                                </tr>

                            </thead>

                            <tbody>



                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>

    <script>
        var jq = jQuery.noConflict();

        jq(document).ready(function () {

            jq('#filter_name, #filter_role').select2({width: '100%'});

            var table = jq('#dept').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('attendance_history_data') }}",
                    data: function (d) {
                        d.staff_id = jq('#filter_name').val();
                        d.role = jq('#filter_role').val();
                    }
                },

                pageLength: 10,

                lengthMenu: [
                    [10, 100, 1000, -1],
                    ["10", "100", "1000", "All"]
                ],

                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'user_id', name: 'user_id'},
                    {data: 'user_name', name: 'user_name'},
                    {data: 'work_mode', name: 'work_mode'},
                    {data: 'check_in', name: 'check_in'},
                    {data: 'type', name: 'type'},
                    {data: 'check_out', name: 'check_out'},
                    {data: 'late_reason', name: 'late_reason'}
                ]
            });

            jq('#filter_name, #filter_role').on('change', function () {
                table.ajax.reload();
            });

            jq('#resetFilter').on('click', function () {
                jq('#filter_name').val('').trigger('change.select2');
                jq('#filter_role').val('').trigger('change.select2');
                table.ajax.reload();
            });

            // Excel export (sends the current filters too)
            jq('#exportBtn').on('click', function () {
                var selected = [];
                jq('.col-export:checked').each(function () {
                    selected.push(this.value);
                });

                if (selected.length === 0) {
                    alert("Please select at least one column");
                    return;
                }

                var params = new URLSearchParams({
                    columns: selected.join(','),
                    staff_id: jq('#filter_name').val() || '',
                    role: jq('#filter_role').val() || ''
                });

                window.location.href = "{{ route('attendance.export') }}?" + params.toString();
            });
        });
    </script>

    <script>
        document.getElementById('exportBtn').addEventListener('click', function () {

            let selected = [];

            document.querySelectorAll('.col-export:checked').forEach(function (el) {
                selected.push(el.value);
            });

            if (selected.length === 0) {
                alert("Please select at least one column");
                return;
            }

            let url = "{{ route('attendance.export') }}?columns=" + selected.join(",");

            window.location.href = url;
        });
    </script>
    <script>
        document.getElementById('exportBtn').addEventListener('click', function () {

            let selected = [];

            document.querySelectorAll('.col-export:checked').forEach(function (el) {
                selected.push(el.value);
            });

            if (selected.length === 0) {
                alert("Please select columns");
                return;
            }

            window.location.href = "{{ route('attendance.export') }}?columns=" + selected.join(',');
        });
    </script>
@endsection