@extends('layout.mainlayout')

@section('content')
@include('attendance.approval._reject-js')

<div class="page-wrapper">
    <div class="content">

        <div class="page-header">
            <h3 class="page-title">Onsite Attendance Approval</h3>
        </div>

        <form method="POST" action="{{ route('attendance.approve') }}" id="approveForm">
            @csrf
            <input type="hidden" name="role" id="actionRole" value="manager">

            <div class="card">
                <div class="card-body table-responsive">

                    {{-- USER FILTER --}}
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label fw-bold">Filter by User</label>
                            <select id="userFilter" class="form-control select2">
                                <option value="">All Users</option>
                            </select>
                        </div>
                    </div>

                    {{-- ACTION BAR --}}
                    <div class="d-flex justify-content-between mb-3">
                        <div>
                            <button type="submit" class="btn btn-success">
                                Approve Selected
                            </button>

                            @can('attendance-reject-manager')
                                <button type="button"
                                        class="btn btn-danger"
                                        onclick="openReject('manager')">
                                    Reject Selected
                                </button>
                            @endcan
                        </div>
                    </div>

                    {{-- TABLE --}}
                    <table class="table table-bordered table-striped align-middle"
                           id="OnsiteApprovalTable">

                        <thead class="table-light">
                            <tr>
                                <th width="30">
                                    <input type="checkbox" id="selectAll">
                                </th>
                                <th>Name</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Days</th>
                                <th>Location</th>
                                <th>Travelling</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($records as $r)
                                <tr>
                                    <td>
                                        <input type="checkbox"
                                               name="attendance_ids[]"
                                               value="{{ $r->id }}"
                                               class="row-checkbox">
                                    </td>

                                    <td>{{ $r->user->name }}</td>

                                    <td>{{ $r->start_date->format('d M Y') }}</td>

                                    <td>{{ $r->end_date->format('d M Y') }}</td>

                                    <td>{{ $r->total_days }}</td>

                                    <td>{{ optional($r->location)->name ?? '-' }}</td>

                                    <td>
                                        {{ $r->getForm('is_travelling') == 1 ? 'Yes' : 'No' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>

                </div>
            </div>

        </form>

        {{-- REJECT MODAL --}}
        @include('attendance.approval.partials.reject-modal')

    </div>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const table = $('#OnsiteApprovalTable').DataTable({
        order: [[1, 'asc']], // sort by Name
        pageLength: 25
    });

    // Populate User Filter
    const userColumnIndex = 1;
    const userFilter = $('#userFilter');
    let users = new Set();

    table.column(userColumnIndex).data().each(function (value) {
        users.add(value);
    });

    [...users].sort().forEach(name => {
        userFilter.append(`<option value="${name}">${name}</option>`);
    });

    userFilter.on('change', function () {
        const val = $.fn.dataTable.util.escapeRegex($(this).val());
        table.column(userColumnIndex)
            .search(val ? '^' + val + '$' : '', true, false)
            .draw();
    });

    // Select all
    document.getElementById('selectAll').addEventListener('change', function () {
        document.querySelectorAll('.row-checkbox')
            .forEach(cb => cb.checked = this.checked);
    });

});
</script>
@endpush