@extends('layouts.admin')
@section('content')
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>Students</x-page.header>
           {{-- Create Student --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Add New Student</h3>
                        </div>

                        <div class="card-body">
                            <p>Create new student</p>
                            <form method="POST" action="{{route('admin.students.store')}}" class="form-horizontal">
                                @csrf
                                <div id="wizard2">
                                    @include('auth.register.inc.wizard-reg-form')
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('admin-js')

<!-- Register form validation -->
<script>

$('.only_english').bind('keyup blur',function() {
        $(this).val($(this).val().replace(/[^A-Za-z0-9]/g,''))
    });

</script>
<script>
    $(document).ready(function() {
        $('#grade_level').change(function() {
            var grade = $(this).val();
            console.log(grade);

            if (grade) {
                $('#edu_system').empty(); 
                $('#edu_system').append('<option value="">Please wait...</option>');
                $.ajax({
                    url: '{{ route("admin.students.getEducationSystem") }}', 
                    type: 'GET',
                    data: { grade_id: grade },
                    success: function(data) {
                        $('#edu_system').empty(); 
                        // $('#edu_system').append('<option value="">Select Education System</option>');
                        
                        $.each(data, function(key, value) {
                            $('#edu_system').append('<option value="'+ value.esid +'">'+ value.esname +'</option>'); 
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log(error); 
                        $('#edu_system').empty();
                        $('#edu_system').append('<option value="">Error loading data</option>');
                    }
                });
            } else {
                $('#edu_system').empty(); 
                $('#edu_system').append('<option value="">Select Education System</option>'); 
            }
        });
    });
</script>

@endsection