@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">International Leave Approval</h3>
    </div>

    {{-- USER FILTER --}}
    <div class="row mb-3">
        <div class="col-md-3">
            <label class="form-label fw-bold">Filter User</label>
            <select id="userAccordionFilter" class="form-control select2">
                <option value="">All Users</option>
                @foreach($records as $resourceId => $rows)
                    <option value="user-{{ $resourceId }}">
                        {{ $rows->first()->user->name }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>

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

        <div class="accordion" id="leaveAccordion">

            @foreach($records as $resourceId => $rows)
                @php
                    $user = $rows->first()->user;
                    $totalDays = $rows->sum('total_days');
                @endphp

                <div class="card mb-2 accordion-user user-{{ $resourceId }}">
                    <div class="card-header">
                        <button type="button"
                                class="btn w-100 text-start fw-bold"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse{{ $resourceId }}">
                            {{ $user->name }}
                            <span class="badge bg-info ms-2">
                                Total Days: {{ $totalDays }}
                            </span>
                        </button>
                    </div>

                    <div id="collapse{{ $resourceId }}" class="collapse">
                        <div class="card-body table-responsive">

                            <table class="table table-bordered table-striped align-middle user-table">
                                <thead class="table-light">
                                    <tr>
                                        <th width="30">
                                            <input type="checkbox"
                                                   onclick="toggleUserRows(this,'{{ $resourceId }}')">
                                        </th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Days</th>
                                        <th>Project</th>
                                        <th>Reason</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach($rows as $leave)
                                        <tr>
                                            <td>
                                                <input type="checkbox"
                                                       class="row-checkbox check-{{ $resourceId }}"
                                                       name="leave_ids[]"
                                                       value="{{ $leave->id }}">
                                            </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>{{ $leave->getForm('reason','-') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ACTION BAR --}}
        <div class="mt-3">

            @can('leave-approve-lead')
                <button type="submit"
                        class="btn btn-success"
                        onclick="setRole('lead')">
                    Approve as Lead
                </button>
            @endcan

            @can('leave-approve-manager')
                <button type="submit"
                        class="btn btn-success"
                        onclick="setRole('manager')">
                    Approve as Manager
                </button>
            @endcan

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

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

        </div>

    </form>

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

</div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {

    $('.select2').select2();

    $('.user-table').each(function () {
        $(this).DataTable({
            paging: false,
            searching: true,
            ordering: true,
            info: false
        });
    });

    $('#userAccordionFilter').on('change', function () {
        let selected = $(this).val();
        $('.accordion-user').hide();
        selected === '' ? $('.accordion-user').show() : $('.' + selected).show();
    });
});

function toggleUserRows(source, resourceId) {
    document.querySelectorAll('.check-' + resourceId)
        .forEach(cb => cb.checked = source.checked);
}

function setRole(role) {
    document.getElementById('actionRole').value = role;
}
</script>
@endpush