@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title title="Courses"
                    description="Review program courses, filter by date and retention ownership, and open each course quickly." />

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        @php
                            $filteredCoursesCount = method_exists($staffScheduleds, 'total')
                                ? $staffScheduleds->total()
                                : $staffScheduleds->count();
                            $visibleCoursesCount = method_exists($staffScheduleds, 'count')
                                ? $staffScheduleds->count()
                                : 0;
                        @endphp
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <div class="d-flex align-items-center gap-2 flex-wrap" style="margin-right: auto;">
                                {{-- <h6 class="mb-0 ui-title">Filters</h6> --}}
                                {{-- <span class="ui-pill ui-pill--info">
                                    {{ number_format($filteredCoursesCount) }} {{ \Illuminate\Support\Str::plural('course', $filteredCoursesCount) }}
                                </span>
                                @if (method_exists($staffScheduleds, 'total') && $staffScheduleds->lastPage() > 1)
                                    <span class="ui-muted small">
                                        Showing {{ number_format($visibleCoursesCount) }} on this page
                                    </span>
                                @endif --}}
                            </div>

                            <x-table-controls :action="route('courses.index')" searchName="name" searchPlaceholder="Program Name"
                                :export="true" :exportRoute="route('courses.export')" :saveRoute="route('courses.saveFilteredTable')" :date="true"
                                startDateName="start_date" endDateName="end_date" formId="courses-table-controls"
                                :filters="array_filter([
                                    'leader_id' =>
                                        $is_manager && $staff_under_me->isNotEmpty()
                                            ? $staff_under_me
                                                ->mapWithKeys(
                                                    fn($s) => [
                                                        $s->id => trim(
                                                            ($s->first_name ?? '') . ' ' . ($s->last_name ?? ''),
                                                        ),
                                                    ],
                                                )
                                                ->toArray()
                                            : null,

                                    'retention_admin_id' =>
                                        $staff_under_me->isNotEmpty() && ($is_manager || $is_retention_leader)
                                            ? $retention_admins
                                                ->mapWithKeys(
                                                    fn($admin) => [
                                                        $admin->user_id =>
                                                            $admin->full_name ?:
                                                            trim(
                                                                ($admin->first_name ?? '') .
                                                                    ' ' .
                                                                    ($admin->last_name ?? ''),
                                                            ),
                                                    ],
                                                )
                                                ->toArray()
                                            : null,
                                    'whiteboard_status' => [
                                        'delayed' => 'Delayed',
                                        'not_delayed' => 'Not Delayed',
                                    ],
                                ])" :filterLabels="[
                                    'leader_id' => 'Leader',
                                    'retention_admin_id' => 'Retention Admin',
                                    'whiteboard_status' => 'whiteboard status',
                                ]" :preserveQuery="[
                                    'staff_id' => auth()->user()->staff->id,
                                ]" />
                        </div>
                    </div>

                    <div id="global-loader">
                        <div class="loader"></div>
                    </div>

                    @include('dashboard.academics.courses.table')
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        #global-loader {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(2px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .loader {
            border: 6px solid #e3e3e3;
            border-top: 6px solid #0d6efd;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 0.9s linear infinite;
        }

        .select2-container--default .select2-selection--single {
            width: 100% !important;
        }

        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        function showLoader() {
            $("#global-loader").fadeIn(150);
        }

        function hideLoader() {
            $("#global-loader").fadeOut(150);
        }


        $(document).ready(function() {

            // Show loader on DOM load for 1 second (optional)
            showLoader();
            setTimeout(hideLoader, 800);

            // Auto bind loader for all ajax requests
            $(document).ajaxStart(function() {
                showLoader();
            });

            $(document).ajaxStop(function() {
                hideLoader();
            });

        });

        $(document).ready(function() {

            const selectedRetentionAdmin = '{{ request()->get('retention_admin_id') }}';
            const retentionAdminSelect = $('select[name="retention_admin_id"]');
            const defaultRetentionAdminOptions = retentionAdminSelect.html();

            function loadRetentionAdmins(leaderId) {
                if (!retentionAdminSelect.length) {
                    return;
                }

                if (!leaderId) {
                    retentionAdminSelect.prop('disabled', false).html(defaultRetentionAdminOptions);
                    if (selectedRetentionAdmin) {
                        retentionAdminSelect.val(selectedRetentionAdmin);
                    }
                    return;
                }

                retentionAdminSelect.prop('disabled', true).html('<option>Loading...</option>');

                $.ajax({
                    url: '{{ route('retention.admins', ':id') }}'.replace(':id', leaderId),
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        retentionAdminSelect.empty().append('<option value="">select admin</option>');
                        var list = Array.isArray(res) ? res : (res.data || []);

                        list.forEach(function(item) {
                            retentionAdminSelect.append(
                                '<option value="' + item.user_id + '">' +
                                (item.first_name || '') + ' ' + (item.last_name || '') +
                                '</option>'
                            );
                        });

                        if (selectedRetentionAdmin) {
                            retentionAdminSelect.val(selectedRetentionAdmin).trigger('change');
                        }

                        retentionAdminSelect.prop('disabled', false);
                    },
                    error: function() {
                        retentionAdminSelect.empty()
                            .append('<option value="">select admin</option>')
                            .prop('disabled', false);
                    }
                });
            }


            $('select[name="leader_id"]').on('change', function() {
                loadRetentionAdmins($(this).val());
            });

            let initialLeader = $('select[name="leader_id"]').val();
            loadRetentionAdmins(initialLeader);

        });
    </script>
@endpush