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

<div>
    <div class="row mt-3">
        <div class="mb-3 col-4">
            <label>{{ __('From Date') }}</label>
            <input type="date" class="form-control" wire:model.live="from_date" />
        </div>

        <div class="mb-3 col-4">
            <label>{{ __('To Date') }}</label>
            <input type="date" class="form-control" wire:model.live="to_date" />
        </div>

        <div class="mb-3 col-4">
            <label>{{ __('Study Class') }}</label>
            <select class="form-control" wire:model="selectedStudyClassId" wire:change="selectStudyClass($event.target.value)">
                <option value="" selected>{{ __('Select') }}</option>
                @foreach($studyClasses as $studyClass)
                    <option value="{{ $studyClass->id }}">{{ $studyClass->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div wire:loading wire:target="selectStudyClass" 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 ($exists)
        <div class="alert alert-info text-center">
            <h5><i class="fa fa-info-circle"></i> {{ __('No Exams Found') }}</h5>
        </div>
    @elseif (!empty($studentsWithGrades))
        @livewire('admin.reports.print-pdf', ['title' => __('Exam Grades Report'), 'view' => 'admin.pages.reports.print.exame-grades', 'data' => $studentsWithGrades])
        <div class="table-responsive mt-3">
            <table class="table table-bordered mg-b-0 text-md-nowrap">
                <thead>
                    <tr>
                        <th>{{ __('Student Name') }}</th>
                        <th>{{ __('Total') }}</th>
                        <th>{{ __('Value') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($studentsWithGrades as $studentGrade)
                        <tr>
                            <td>{{ $studentGrade['student']->name }}</td>
                            <td>{{ $studentGrade['total_grade'] }}</td>
                            <td>
                                @if ($studentGrade['total_grade'] == 0)
                                    <span class="badge-dynamic" style="background-color: #ffffff;">
                                        {{ __('the student did not attend the exam') }}
                                    </span>
                                @else
                                    <span class="badge-dynamic" style="background-color: {{ $studentGrade['grade_color'] }};">
                                        {{ $studentGrade['grade_name'] }}
                                    </span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>