@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('Student Details') }}</h4>
            </div>
            <div class="card-body">
            <form action="{{ route('student.update', encrypt($student->id)) }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                @method('PATCH')
                <input type="hidden" name="guardian_id" value="{{$student->guardian_id}}">
                @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 == $student->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 == $student->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" 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="subject_ids" class="form-label">{{ translate('Subjects') }}<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <select title="Select Subjects" name="subject_ids[]" multiple id="subject_ids" class="form-control rns-selectpicker @error('subject_ids') is-invalid @enderror">
                            @if ($subjects->isNotEmpty())
                                @foreach ($subjects as $subject)
                                    <option value="{{$subject->id}}" {{in_array($subject->id, json_decode($student->subject_ids, true)) == true ? 'selected' : ''}}>{{$subject->name}}</option>
                                @endforeach
                            @endif
                        </select>
                        @error('subject_ids')
                        <div class="invalid-feedback">{{ $message }}</div> 
                        @enderror
                    </div>
                </div>
                <x-input-component name="name" label="Name" value="{{$student->name}}" type="text" :required="1"/>
                <x-input-component name="email" label="Email" value="{{$student->email}}" type="email" :required="0"/>
                <x-input-component name="phone" label="Phone" value="{{$student->phone}}" type="text" :required="0"/>
                <x-uploader-component name="image" label="Profile Image" value="{{$student->image}}" type="image"/>
               
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="dob" class="form-label">{{ translate('Date of birth') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <input type="text" name="dob" class="form-control border-1 flatpickr-input active" data-provider="flatpickr" data-date-format="Y-m-d" readonly="readonly" placeholder="Date of Birth" value="{{$student->dob}}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="dob" class="form-label">{{ translate('Gender') }}</label>
                    </div>
                    <div class="col-lg-1">
                        <label for="dob" class="form-label">{{ translate('Male') }}</label>
                    </div>
                    <div class="col-lg-2">
                        <label class="rns-switch rns-switch-primary">
                            <input type="radio" name="gender" class="form-control demo-sw" value="male" @if($student->gender == 'male') checked @endif>
                            <span class="slider round"></span>
                        </label>                    </div>
                    <div class="col-lg-1">
                        <label for="dob" class="form-label">{{ translate('Female') }}</label>
                    </div>
                    <div class="col-lg-1">
                        <label class="rns-switch rns-switch-primary">
                            <input type="radio" name="gender" class="form-control demo-sw" value="female" @if($student->gender == 'female') checked @endif>
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="joining_date" class="form-label">{{ translate('Joining Date') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <input type="text" name="joining_date" class="form-control border-1 flatpickr-input active" data-provider="flatpickr" data-date-format="Y-m-d" readonly="readonly" placeholder="Joining Date" value="{{$student->joining_date}}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="address" class="form-label">{{ translate('Address') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <textarea name="address" class="form-control" id="address" rows="3" placeholder="Address">{{$student->address}}</textarea>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="about" class="form-label">{{ translate('About') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <textarea name="about" class="form-control" id="about" rows="3" placeholder="About">{{$student->about}}</textarea>
                    </div>
                </div>
                <div class="col-lg-9 mb-3">
                    <span class="text-muted fs-15 fw-700 mb-5">Guardian Details</span>
                </div>
                    <x-input-component name="guardian_name" label="Guardian Name" value="{{$student->guardian != null ? $student->guardian->name : '0'}}" type="text" :required="0"/>
                    <x-input-component name="guardian_email" label="Guardian Email" value="{{$student->guardian != null ? $student->guardian->email : '0'}}" type="email" :required="0"/>
                    <x-input-component name="guardian_phone" label="Guardian Phone" value="{{$student->guardian != null ? $student->guardian->phone : '0'}}" type="text" :required="0"/>
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">Update Student</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: "{{$student->school_id}}", status: 1}, function(data){
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        var grade_id = "{{$student->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: "{{$student->grade_id}}", status: 1}, function(data){
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        var grade_id = "{{$student->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