@extends('backend.layouts.app')
@section('content')
<div class="row mx-auto">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ ucfirst('Section Details') }}</h4>
            </div>
            <div class="card-body">
            <form action="{{ route('section.store') }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                @if(\Auth::user()->user_type == 'admin')
                    <div class="row mb-3">
                        <div class="col-lg-3">
                            <label for="school_id" class="form-label">Select 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" id="school_id">
                                @if($schools->isNotEmpty())
                                    @foreach ($schools as $value)
                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                @endif
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="grade_id" class="form-label">{{ translate('Select Grade') }}<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-lg-9">
                        <select title="Select Grade" name="grade_id" class="form-control grades rns-selectpicker" id="grade_id">
                            @if(empty($grades) || $grades->isNotEmpty())
                                @foreach ($grades as $value)
                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <x-input-component name="name" label="Section Name" value="" type="text" :required="1"/>
                <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">{{old('description')}}</textarea>
                    </div>
                </div>
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">Add Section</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') }}');
                }
            });
        });
    </script>
@endsection