@push('css')
    <style type="text/css">
		.badge-dynamic {
            padding: 3px 8px;
            border-radius: 3px;
        }
	</style>
@endpush

<div x-data x-init="$nextTick(() => initSelect2Drop());">
    <div class="row mt-3">
        <div class="mb-3 col-3">
            <label>{{ __('Academic Years') }}</label>
            <select class="form-control" wire:model="selectedAcademicYearId" wire:change="selectAcademicYear($event.target.value)">
                <option value="" selected>{{ __('Select') }}</option>
                @foreach($academicYears as $academicYear)
                    <option value="{{ $academicYear->id }}">{{ $academicYear->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3 col-3">
            <label>{{ __('Groups') }}</label>
            <select class="form-control select2" wire:model="selectedGroupId" wire:change="selectGroup($event.target.value)">
                <option value="" selected>{{ __('Select') }}</option>
                @foreach($filteredGroups as $group)
                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3 col-3">
            <label>{{ __('Month') }}</label>
            <select class="form-control" wire:model="selectedMonth" wire:change="selectMonth($event.target.value)">
                <option value="">{{__('Select')}}</option>
                @foreach ($billingMonths as $key => $monthName)
                    <option value="{{ $key }}">{{ __($monthName) }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3 col-3">
            <label>{{ __('Exams') }}</label>
            <select class="form-control" wire:model="selectedExamId" wire:change="selectExam($event.target.value)">
                <option value="" selected>{{ __('Select') }}</option>
                @foreach($filteredExams as $exam)
                    <option value="{{ $exam->id }}">{{ $exam->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 mg-t-20 mg-lg-t-0">
            <div class="form-group w-100" wire:ignore>
                <label class="form-label mb-2">{{__('Students')}}</label>
                <select class="form-control select2-multi" wire:model="student_id" multiple="multiple">
                    <option value="all" selected>{{ __('All') }}</option>
                    @foreach($filteredStudents as $student)
                        <option value="{{ $student->id }}">{{ $student->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="mb-3 col-3">
            <label>{{ __('Max Grade') }}</label>
            <input type="number" class="form-control" wire:model.live="maxGrade" />
        </div>

        <div class="mb-3 col-3">
            <label>{{ __('Min Grade') }}</label>
            <input type="number" class="form-control" wire:model.live="minGrade" />
        </div>
    </div>

    <div wire:loading wire:target="selectAcademicYear, selectGroup, selectExam, selectMonth, fetchGrades, maxGrade, minGrade" class="text-center mg-b-20 mb-4 mt-2 w-100 no-print">
        <div class="spinner-border" role="status">
            <span class="sr-only">{{__('Loading...')}}</span>
        </div>
    </div>

    @if (count($gradesRecords) > 0)
        @livewire('admin.reports.print-pdf', ['title' => __('Students Grades Report'), 'view' => 'admin.pages.reports.print.students-grades', 'data' => $gradesRecords->toArray()])
        <div class="col-12 table-responsive mt-4">
            <table class="table table-bordered mg-b-0 text-md-nowrap">
                <thead>
                    <tr>
                        <th>{{ __('Exam Name') }}</th>
                        <th>{{ __('Date') }}</th>
                        <th>{{ __('Teacher') }}</th>
                        <th>{{ __('Subject') }}</th>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Grade') }}</th>
                        <th>{{ __('Value') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($paginatedGradesRecords as $record)
                        <tr>
                            <td>{{ $record->exam_grade->exam_enrollment->name ?? '-' }}</td>
                            <td>{{ $record->exam_date ?? '-' }}</td>
                            <td>{{ $record->exam_grade->exam_enrollment->teacher->name ?? '-' }}</td>
                            <td>{{ $record->exam_grade->exam_enrollment->subject->name ?? '-' }}</td>
                            <td>{{ $record->student->name ?? '-' }}</td>
                            <td>{{ $record->grade_value ?? '-' }}</td>
                            <td>
                                <span class="badge-dynamic" style="background-color: {{ $record->grade_color ?? '#ffffff' }}">
                                    {{ $record->grade_name ?? '-' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" style="text-align: center;">{{ __('No Grades Found') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="mt-3">
                {{ $paginatedGradesRecords->links() }}
            </div>
        </div>
    @endif
</div>

@push('js')
    <script type="text/javascript">
        function initSelect2Drop() {
            $('.select2-multi').select2({
                language: "{{ app()->getLocale() }}",
                dir: "{{ session()->get('rtl', 1)?'rtl':'ltr' }}",
                placeholder: "{{ __('Search...') }}",
            });

            $('.select2-multi').on('change', function (e) {
                const studentIds = $(this).val();
                if (studentIds.includes('all')) {
                    @this.set('student_id', ['all']);
                } else {
                    @this.set('student_id', studentIds);
                }
            });
        }

        Livewire.on('updateSelect2Options', (options) => {
            const $select = $('.select2-multi');
            $select.empty();
            options.forEach((option) => {
                option.forEach((one) => {
                    const newOption = new Option(one.name+' ('+one.code+')', one.id, false, false);
                    $select.append(newOption).trigger('change');
                });
            });
            $select.select2('destroy');
            $select.select2();
        });
    </script>
@endpush