@extends('backend.layouts.app')
@section('content')
<div class="row mx-auto">
    <div class="col-sm-9">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ translate('Exams Details') }}</h4>
            </div>
            <div class="card-body">
            <form action="{{ route('exam.update', encrypt($exam->id)) }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @method('PATCH')
                @csrf
                @if(\Auth::user()->user_type == 'admin')
                    <div class="row mb-3">
                        <div class="col-lg-3">
                            <label for="address" class="form-label">{{ translate('School') }}<span class="text-danger">*</span></label>
                        </div>
                        <div class="col-lg-9">
                            <select title="Select School" name="school_id" id="school_id" class="form-control rns-selectpicker  @error('school_id') is-invalid @enderror">
                                @if ($schools->isNotEmpty())
                                    @foreach ($schools as $school)
                                        <option value="{{$school->id}}" @if($school->id == $exam->school_id) selected @endif>{{$school->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                            @error('school_id')
                                <div class="invalid-feedback">{{ $message }}</div> 
                            @enderror
                        </div>
                    </div>
                @endif
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="grade_id" class="form-label">{{ translate('Grade') }}<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <select title="Select Grade" name="grade_id" id="grade_id" class="form-control rns-selectpicker  @error('grade_id') is-invalid @enderror">
                            @if (empty($grades) || $grades->isNotEmpty())
                                @foreach ($grades as $grade)
                                    <option value="{{$grade->id}}" @if($grade->id == $exam->grade_id) selected @endif>{{$grade->name}}</option>
                                @endforeach
                            @endif
                        </select>
                        @error('grade_id')
                            <div class="invalid-feedback">{{ $message }}</div> 
                        @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="section_id" class="form-label">{{ translate('Section') }}<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <select title="Select Section" name="section_id[]" multiple id="section_id" class="form-control rns-selectpicker  @error('section_id') is-invalid @enderror">
                        </select>
                        @error('section_id')
                            <div class="invalid-feedback">{{ $message }}</div> 
                        @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="address" class="form-label">{{ translate('Subject') }}<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <select title="Select Subject" name="subject_id" id="subject_id" class="form-control rns-selectpicker  @error('subject_id') is-invalid @enderror">
                            @if ($subjects->isNotEmpty())
                                @foreach ($subjects as $subject)
                                    <option value="{{$subject->id}}">{{$subject->name}}</option>
                                @endforeach
                            @endif
                        </select> 
                        @error('subject_id')
                            <div class="invalid-feedback">{{ $message }}</div> 
                        @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="date_and_time" class="form-label">{{ translate('Date & Time') }}<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <input type="text" name="date_and_time" data-enable-time="true" class="form-control border-1 flatpickr-input active" data-provider="flatpickr" data-date-format="Y-m-d" readonly="readonly" placeholder="Date & Time" value="{{$exam->date_and_time}}">
                    </div>
                </div>
                <x-input-component name="title" label="Exam Title" value="{{$exam->title}}" type="text" :required="1"/>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="joining_date" class="form-label"> Duration<span class="text-danger">*</span> <span class="text-muted fs-13">( in minutes )</span></label>
                    </div>
                    <div class="col-lg-9">
                        <input type="number" name="duration" class="form-control" placeholder="Duration" id="" value="{{$exam->duration}}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="description" class="form-label">{{ translate('Description') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <textarea name="Description" class="form-control" id="description" rows="3" placeholder="Description">{{$exam->description}}</textarea>
                    </div>
                </div>
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">Update Exam</button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        $('#school_id').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            $.post('{{ route('section.get-grade') }}', {_token:'{{ csrf_token() }}', id: $(this).val(), status: 1}, function(data){
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        options += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    
                    $('#grade_id').html(options);
                    $('#grade_id').selectpicker('refresh');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        });
        $(document).ready( function(){
            $.post('{{ route('section.get-grade') }}', {_token:'{{ csrf_token() }}', id: "{{$exam->school_id}}", status: 1}, function(data){
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        var grade_id = "{{$exam->grade_id}}";
                        var selected = '';
                        if(grade_id == value.id){
                            selected = 'selected';
                        }
                        options += '<option value="' + value.id + '"'+selected+'>' + value.name + '</option>';
                    });
                    
                    $('#grade_id').html(options);
                    $('#grade_id').selectpicker('destroy');
                    $('#grade_id').selectpicker('render');
                    // RNS.plugins.bootstrapSelect('refresh')

                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        });
        $('#grade_id').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            $.post('{{ route('student.get-section') }}', {_token:'{{ csrf_token() }}', id: $(this).val(), status: 1}, function(data){
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        options += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    
                    $('#section_id').html(options);
                    $('#section_id').selectpicker('refresh');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        });

        $(document).ready(function () {
            $.post('{{ route('student.get-section') }}', {_token:'{{ csrf_token() }}', id: "{{$exam->grade_id}}", status: 1}, function(data){
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        var grade_id = "{{$exam->section_id}}";
                        console.log(value.id);
                        var selected = '';
                        if(grade_id == value.id){
                            selected = 'selected';
                        }
                        options += '<option value="' + value.id + '"'+selected+'>' + value.name + '</option>';
                    });
                    $('#section_id').html(options);
                    $('#section_id').selectpicker('destroy');
                    $('#section_id').selectpicker('render');
                    // RNS.plugins.bootstrapSelect('refresh')
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        })
    </script>
@endsection