@extends('layout.mainlayout')

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

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

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

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

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

                {{-- 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="mb-3">
                    @can('leave-approve-manager')
                        <button type="submit" class="btn btn-success">
                            Approve Selected
                        </button>
                    @endcan

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

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

                    <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>Project</th>
                            <th>Location</th>
                            <th>Reason</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($records as $leave)
                            <tr>
                                <td>
                                    <input type="checkbox"
                                           name="leave_ids[]"
                                           value="{{ $leave->id }}"
                                           class="row-checkbox">
                                </td>
                                <td>{{ $leave->user->name }}</td>
                                <td>{{ $leave->start_date->format('d M Y') }}</td>
                                <td>{{ $leave->end_date->format('d M Y') }}</td>
                                <td>{{ $leave->total_days }}</td>
                                <td>{{ optional($leave->project)->name ?? '-' }}</td>
                                <td>{{ optional($leave->location)->name ?? '-' }}</td>
                                <td>{{ $leave->getForm('reason','-') }}</td>
                            </tr>
                        @endforeach
                    </tbody>

                </table>

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

    @include('leave.approval.partials.reject-modal')

</div>
</div>
@endsection

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

    const table = $('#OnsiteLeaveApprovalTable').DataTable({
        order: [[1, 'asc']],
        pageLength: 25
    });

    const userColumnIndex = 1;
    const userFilter = $('#userFilter');
    let users = new Set();

    table.column(userColumnIndex).data().each(val => users.add(val));

    [...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();
    });

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

});
</script>
@endpush