@push('css')
    <style type="text/css">
        .badge-dynamic {
            padding: 3px 8px;
            border-radius: 3px;
        }
        .student-report-card {
            margin-bottom: 2rem;
        }
        .group {
            display: flex;
            line-height: 28px;
            align-items: center;
            position: relative;
            max-width: 190px;
        }

        .input {
            font-family: "Montserrat", sans-serif;
            width: 100%;
            height: 45px;
            padding-left: 2.5rem;
            box-shadow: 0 0 0 1.5px #000000FF, 0 0 25px -17px #000;
            border: 0;
            border-radius: 12px;
            background-color: #f9fafc;
            outline: none;
            color: #080808FF;
            transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: text;
            z-index: 0;
        }

        .input::placeholder {
            color: #000000FF;
        }

        .input:hover {
            box-shadow: 0 0 0 2.5px #2f303d, 0px 0px 25px -15px #000;
        }

        .input:active {
            transform: scale(0.95);
        }

        .input:focus {
            box-shadow: 0 0 0 2.5px #2f303d;
        }

        .search-icon {
            position: absolute;
            left: 1rem;
            fill: #bdbecb;
            width: 1rem;
            height: 1rem;
            pointer-events: none;
            z-index: 1;
        }

        body {
            font-family: 'Amiri', serif;

            background-color: white;
        }

        /* From Uiverse.io by akshat-patel28 */
        .card {
            width: auto;
            height: 150px;
            background: white;
            border-radius: 200px;
            box-shadow: white, white -5px 0px 250px;
            display: flex;
            color: white;
            justify-content: center;
            position: relative;
            flex-direction: column;
            background: linear-gradient(to right, white, white);
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            overflow: hidden;
        }

        .card:hover {
            box-shadow: rgb(0, 0, 0) 5px 10px 50px, rgb(0, 0, 0) -5px 0px 250px;
        }

        .time-text {
            font-size: 70px;
            margin-top: 0px;
            margin-left: 15px;
            font-weight: 600;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }

        .time-sub-text {
            font-size: 15px;
            margin-left: 5px;
        }

        .day-text {
            font-size: 25px;
            margin-top: 0px;
            margin-left: 15px;
            font-weight: 500;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }



        .moon {
            font-size: 30px;
            position: absolute;
            right: 10px;
            top: 10px;
            transition: all 0.3s ease-in-out;
        }

        .card:hover>.moon {
            font-size: 30px;
        }
    </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 Academic Year') }}</option>
                @foreach($academicYears as $academicYear)
                    <option value="{{ $academicYear->id }}">{{ $academicYear->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3 col-3">
            <label>{{ __('Month') }}</label>
            <select class="form-control" wire:model="selectedMonth" wire:change="monthChanged($event.target.value)">
                <option value="" selected>{{ __('Select') }}</option>
                @foreach($billingMonths as $key => $month)
                    <option value="{{ $key }}">{{ __($month) }}</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 Group') }}</option>
                @foreach($filteredGroups as $group)
                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                @endforeach
            </select>
        </div>

        <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>

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

        @foreach($fullRecords as $studentId => $record)
            @php
                $firstSession = $record['sessions']->first();
                $student = $firstSession['student'] ?? null;
                $group = $record['group'] ?? null;
                $studyClass = $group->study_class ?? null;
                $academicYear = $group->academic_year ?? null;
            @endphp

            <div class="w-full max-w-4xl mb-4 shadow-lg rounded-lg p-6 relative">
                <img alt="خلفية مزخرفة" class="absolute inset-0 w-full h-full object-cover  z-0" src="{{url('assets/bg.jpg')}}" />
                <div class="relative z-10">
                    {{-- <div
                        class="bg-white rounded-full border-4 border-blue-900 p-4 flex items-center space-x-6 rtl:space-x-reverse justify-center mx-auto">
                        <div class="text-center" style="padding-right: 20%">
                            <h1 class="text-4xl font-bold text-blue-900">
                                تقرير الطالب الشهري
                            </h1>
                            <p class="text-lg text-gray-700">
                                مجموعات التفوق ... الأستاذ قطب عبد الله
                            </p>
                        </div>
                        <img alt="شعار المجموعات" style="padding-right: 20%" class="rounded-full "
                            src="https://placehold.co/80x80" />
                    </div> --}}

                    <div class="card items-center mb-4 rounded-full">
                        <p class="time-text " style="color: rgb(47, 47, 97)"><span>تقرير الطالب الشهري</span></p>
                        <p class="day-text" style="color: rgb(47, 47, 97)">
                            مجموعات التفوق ... الأستاذ قطب عبد الله
                        </p>
                        <img src="{{url('assets/logo.jpg')}}" alt="صورة" class="moon rounded-full w-32 h-32" />
                    </div>

                    <div class="bg-yellow-200 p-4 rounded-lg mb-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-gray-700">
                                    اسم الطالب
                                </label>
                                <input class="w-full p-2 border border-gray-300 rounded input" 
                                    type="text" 
                                    value="{{ $student->name ?? '-' }}" 
                                    readonly />
                            </div>
                            <div>
                                <label class="block text-gray-700">
                                    التليفون
                                </label>
                                <input class="w-full p-2 border border-gray-300 rounded input" 
                                    type="text" 
                                    value="{{ $student->phone ?? '-' }}" 
                                    readonly />
                            </div>
                            <div>
                                <label class="block text-gray-700">
                                    الصف الدراسي
                                </label>
                                <input class="w-full p-2 border border-gray-300 rounded input" 
                                    type="text" 
                                    value="{{ $studyClass->name ?? '-' }}" 
                                    readonly />
                            </div>
                            <div>
                                <label class="block text-gray-700">
                                    الشهر
                                </label>
                                <input class="w-full p-2 border border-gray-300 rounded input" 
                                    type="text" 
                                    value="{{ $selectedMonth ? __($billingMonths[$selectedMonth] ?? '-') : '-' }}" 
                                    readonly />
                            </div>
                        </div>
                    </div>
                    <h3 class="text-center text-lg text-blue-700 mb-4">
                        درجات الامتحانات الشهرية
                    </h3>
                    <div class="bg-green-100 p-4 rounded-lg mb-4">
                        <div class="grid grid-cols-4 gap-4 text-center">
                            <div class="font-bold">
                                اسم الامتحان
                            </div>
                            <div class="font-bold">
                                درجة الطالب
                            </div>
                            <div class="font-bold">
                                الدرجة النهائية 
                            </div>
                            <div class="font-bold">
                                التقدير
                            </div>
                            
                            @foreach($gradesRecords->where('student.id', $studentId) as $gradeRecord)
                                <div>
                                    {{ $gradeRecord->exam_grade->exam_enrollment->name ?? '-' }}
                                </div>
                                <div>
                                    <input class="w-full p-2 border border-gray-300 rounded input" 
                                        type="text" 
                                        value="{{ $gradeRecord->grade_value == null ? '-' : ($gradeRecord->grade_value ?? '-') }}"
                                        readonly />
                                </div>
                                <div>
                                    <input class="w-full p-2 border border-gray-300 rounded input" 
                                        type="text" 
                                        value="{{ $gradeRecord->exam_grade->exam_enrollment->final_grade ?? '-' }}" 
                                        readonly />
                                </div>
                                <div>
                                    <input class="w-full p-2 border border-gray-300 rounded input" 
                                        type="text" 
                                        value="{{ $gradeRecord->grade_name ?? '-' }}" 
                                        readonly />
                                </div>
                            @endforeach
                            
                            <div class="border-4 border-green-500 border-opacity-20 p-4 col-span-4 flex items-center justify-between space-x-6 rtl:space-x-reverse">
                                <div class="text-center font-bold w-1/4 text-lg">
                                    المجموع الكلي
                                </div>
                                <div class="w-1/4">
                                    <input class="w-full p-4 border border-gray-300 rounded input text-lg" 
                                        type="text" 
                                        value="{{ $gradesRecords->where('student.id', $studentId)->sum('grade_value') ?? '-' }}" 
                                        placeholder="درجة الطالب" 
                                        readonly />
                                </div>
                                <div class="w-1/4">
                                    <input class="w-full p-4 border border-gray-300 rounded input text-lg" 
                                        type="text" 
                                        value="{{ $gradesRecords->where('student.id', $studentId)->sum('exam_grade.exam_enrollment.final_grade') ?? '-' }}" 
                                        placeholder="درجة الامتحان" 
                                        readonly />
                                </div>
                                <div class="w-1/4">
                                    <input class="w-full p-4 border border-gray-300 rounded input text-lg" 
                                        type="text" 
                                        value="{{ $this->getMostFrequentGrade($gradesRecords->where('student.id', $studentId)) }}" 
                                        placeholder="التقدير" 
                                        readonly />
                                </div>
                            </div>
                        </div>
                    </div>

                    <h3 class="text-center text-lg text-blue-700 mb-4" style="font-size: 20px">
                        المتابعة اليومية
                    </h3>
                    <div class="relative bg-red-500 p-4 rounded-lg shadow-lg w-full">
                        <div class="bg-white p-4 rounded-lg mb-4 pb-16">
                            <table class="w-full text-center">
                                <thead>
                                    <tr>
                                        <th class="p-2 border border-gray-300" style="font-size: 20px">
                                            البند
                                        </th>
                                        <th class="p-2 border border-gray-300" style="font-size: 20px">
                                            القيمة
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            عدد أيام الغياب
                                        </td>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            {{ $studentReports[$studentId]['absentDays'] ?? 0 }} أيام
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px"> 
                                            الواجبات اليومية خلال الشهر
                                        </td>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            {{ $studentReports[$studentId]['missingHomework'] ?? '-' }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            المذاكرة اليومية خلال الشهر
                                        </td>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            {{ $studentReports[$studentId]['homeworkRating'] ?? '-' }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            السلوك العام خلال الشهر
                                        </td>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            {{ $studentReports[$studentId]['behaviorRating'] ?? '-' }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            حالة دفع المصروفات
                                        </td>
                                        <td class="p-2 border border-gray-300" style="font-size: 20px">
                                            {{ $studentReports[$studentId]['paymentStatus'] }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <img alt="شعار" 
                            class="absolute bottom-4 left-4 w-24 h-24 rounded-full border-2 border-white z-10" 
                            src="{{url('assets/logo.jpg')}}" />
                        <img alt="أوراق درجات" class="absolute bottom-1 right-2 w-48 h-48"
                            style="border-radius: 20px;margin: 10px" src="{{url('assets/a.jpg')}}" />
                    </div>
                    
                    <div class="flex justify-center items-center mt-4">
                        <div class="flex flex-col items-center">
                            <p class="text-blue-900 font-bold" style="font-size: 20px">
                                الأستاذ قطب عبد الله
                            </p>
                            <p class="text-blue-900">
                                01098393633
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        @endforeach
        @if($this->shouldPaginate())
            <div class="mt-4">
                {{ $this->paginationLinks }}
            </div>
        @endif
    @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) {
                let studentIds = $(this).val();
                
                if (studentIds && studentIds.includes('all') && studentIds.length > 1) {
                    studentIds = ['all'];
                    $(this).val(['all']).trigger('change');
                }
                
                @this.set('student_id', studentIds || [], true);
                @this.call('fetchFullRecords', true);
            });
        }

        Livewire.on('updateSelect2Options', (options) => {
            const $select = $('.select2-multi');
            $select.empty();
            
            options.forEach((option) => {
                option.forEach((one) => {
                    const newOption = new Option(one.name, one.id, false, false);
                    $select.append(newOption);
                });
            });
            
            if (!@this.student_id || @this.student_id.includes('all')) {
                $select.val(['all']).trigger('change');
            } else {
                $select.val(@this.student_id).trigger('change');
            }
            
            $select.select2('destroy');
            $select.select2();
        });
    </script>
@endpush