@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-4">
            <label>{{ __('Academic Years') }}</label>
            <select class="form-control" wire:model="selectedAcademicYearId" wire:change="selectAcademicYear($event.target.value)">
                <option value="" selected>{{ __('Select Academic Year') }}</option>
                @foreach($academicYears as $academicYear)
                    <option value="{{ $academicYear->id }}">{{ $academicYear->name }}</option>
                @endforeach
            </select>
        </div>

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

        <div class="col-lg-4 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>

    <div wire:loading wire:target="selectAcademicYear, selectGroup, student_id" 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 ($paginatedRecords->isNotEmpty())
        <button class="no-print btn btn-primary" wire:click="generatePdf">
            <i class="fas fa-print ml-2"></i>{{__('Print PDF')}}
        </button>

        <div class="col-12 table-responsive mt-4">
            <h4>{{ __('Group Sessions') }}</h4>
            <table class="table table-bordered mg-b-0 text-md-nowrap">
                <thead>
                    <tr>
                        <th>{{ __('Session Date Time') }}</th>
                        <th>{{ __('Teacher') }}</th>
                        <th>{{ __('Subject') }}</th>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Attendance') }}</th>
                        <th>{{ __('Homework Status') }}</th>
                        <th>{{ __('Student Behavior') }}</th>
                        <th>{{ __('Notes') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($paginatedRecords as $record)
                        <tr>
                            <td>{{ $record['session_date']->format('Y-m-d H:i') }}</td>
                            <td>{{ $record['teacher']->name }}</td>
                            <td>{{ $record['subject']->name }}</td>
                            <td>{{ $record['student']->name ?? '-' }}</td>
                            <td>
                                @if ($record['attendance']?->active == 1)
                                    <span class="text-success">&#10004;</span>
                                @else
                                    <span class="text-danger">&#10006;</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge-dynamic" style="background-color: {{ $record['daily_follow_up']?->homeworkStatus->color ?? '' }}">
                                    {{ $record['daily_follow_up']?->homeworkStatus->name ?? '-' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge-dynamic" style="background-color: {{ $record['daily_follow_up']?->studentBehavior->color ?? '' }}">
                                    {{ $record['daily_follow_up']?->studentBehavior->name ?? '-' }}
                                </span>
                            </td>
                            <td>
                                {{ $record['daily_follow_up']?->note ?? '-' }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-3">
                {{ $paginatedRecords->links() }}
            </div>
        </div>
    @endif

    @if ($gradesRecords->isNotEmpty())
        <div class="col-12 table-responsive mt-4">
            <h4>{{ __('Exam Grades') }}</h4>
            <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>{{ __('Final Grade') }}</th>
                        <th>{{ __('Grade') }}</th>
                        <th>{{ __('Value') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($gradesRecords 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->exam_grade->exam_enrollment->final_grade}}</td>
                            <td>{{ $record->exam_grade->grade ?? '-' }}</td>
                            <td>
                                <span class="badge-dynamic" style="background-color: {{ $record->grade_color }}">
                                    {{ $record->grade_name }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                    @if ($gradesRecords->isNotEmpty())
                        <tr>
                            <td colspan="5" style="font-weight: bold; text-align: right;">{{__('Total')}}:</td>
                            <td style="font-weight: bold;">
                                {{ $gradesRecords->sum(function ($record) {
                                    return is_numeric($record->exam_grade->exam_enrollment->final_grade) ? $record->exam_grade->exam_enrollment->final_grade : 0;
                                }) }}
                            </td>
                            <td style="font-weight: bold;">
                                {{ $gradesRecords->sum('grade_value') }}
                            </td>
                            <td></td>
                        </tr>
                    @endif
                </tbody>
            </table>
            <div class="mt-3">
                {{ $gradesRecords->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