@push('css')
    <style type="text/css">
        .badge-dynamic {
            padding: 3px 8px;
            border-radius: 3px;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0;
            margin: 0;
        }
    </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>{{ __('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="mb-3 col-md-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="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="selectAcademicYear, selectGroup, selectedMonth, student_id, search" 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 ($groups)
        <div class="col-12 table-responsive">
            <table class="table table-bordered mg-b-0 text-md-nowrap">
                <tr>
                    <th width="15%">{{__('Teacher')}}</th><td>{{$groups->teacher->name}}</td>
                    <th width="15%">{{__('Subject')}}</th><td>{{$groups->subject->name}}</td>
                    <th width="15%">{{__('Study Class')}}</th><td>{{$groups->study_class->name}}</td>
                </tr>
                <tr>
                    <th width="15%">{{__('Classroom')}}</th><td>{{$groups->classroom->name}}</td>
                    <th width="15%">{{__('Student Number')}}</th><td>{{$groups->student_number-$groups->remain}}</td>
                    <th width="15%">{{__('Student Remain Number')}}</th><td>{{$groups->remain}}</td>
                </tr>
                <tr>
                    <th width="15%">{{__('Academic Year')}}</th><td>{{$groups->academic_year->name}}</td>
                </tr>
            </table>
        </div>
    @endif

    @if ($dailyFollowUpRecords)
        @if($this->selectedGroupId)
            <button class="no-print btn btn-primary mb-4" wire:click="generatePdf">
                <i class="fas fa-print ml-2"></i>{{__('Print PDF')}}
            </button>
        @endif
        <div class="col-12 table-responsive mt-4">
            <table class="table table-bordered mg-b-0 text-md-nowrap">
                <thead>
                    <tr>
                        <th>{{ __('Session Date Time') }}</th>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Teacher') }}</th>
                        <th>{{ __('Subject') }}</th>
                        <th>{{ __('Homework Status') }}</th>
                        <th>{{ __('Student Behavior') }}</th>
                        <th>{{ __('Daily Study') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($dailyFollowUpRecords as $record)
                        <tr>
                            <td>{{ $record->groupSession->session_date->format('Y-m-d H:i') }}</td>
                            <td>{{ $record->student->name }}</td>
                            <td>{{ $record->groupSession->teacher->name }}</td>
                            <td>{{ $record->groupSession->subject->name }}</td>
                            <td>
                                <span class="badge-dynamic" style="background-color: {{ $record->homeworkStatus->color }}">
                                    {{ $record->homeworkStatus->name }}
                                </span>
                            </td>
                            <td>
                                <span class="badge-dynamic" style="background-color: {{ $record->studentBehavior->color }}">
                                    {{ $record->studentBehavior->name }}
                                </span>
                            </td>
                            <td>
                                <span class="badge-dynamic" style="background-color: {{ $record->dailyStudy->color ?? '' }}">
                                    {{ $record->dailyStudy->name ?? '-' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">{{ __('No Daily Follow-Up Found') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            
            <div class="mt-3">
                {{ $dailyFollowUpRecords->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 && 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