@extends('layouts.app')
@section('content')
    <div class="login-one-container r-24 bg-white p-3 p-lg-5 mx-auto d-flex flex-column gap-5">
        <h3 class=" text-start form-tittle text-p">اضافة اشتراك للطالب  {{ $student->username }} - {{ $student->email }}</h3>
        <form id="form_submit" class="d-flex flex-column gap-4" action="{{ route('students.subscribes.store_subscribe') }}" method="post">
            @csrf


            <input type="hidden" name="student_id" value="{{ $student->id }}">


            <div class="">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="teacher_id"> المدرس </label>
                <select id="teacher_id" name="teacher_id" class="teacher_id form-select  form-select-lg mb-3"
                    aria-label=".form-select-lg example">
                    <option value="">-----</option>
                    @foreach ($teachers as $teacher)
                        <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="subject_id"> المادة </label>
                <select id="subject_id" name="subject_id" class="form-select form-select-lg mb-3"
                    aria-label=".form-select-lg example">
                    <option value="">-----</option>

                </select>
            </div>

            <div class="">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="course_id"> الدورة </label>
                <select id="course_id" name="course_id" class="form-select form-select-lg mb-3"
                    aria-label=".form-select-lg example">
                    <option value="">-----</option>

                </select>
            </div>

            <div class="">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="unit_id"> الشهر </label>
                <select id="unit_id" name="unit_id" class=" form-select form-select-lg mb-3"
                    aria-label=".form-select-lg example">
                    <option value="">-----</option>

                </select>
            </div>

            <div class="">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="lesson_id"> الحصة </label>
                <select id="lesson_id" name="lesson_id" class=" form-select form-select-lg mb-3"
                    aria-label=".form-select-lg example">
                    <option value="">-----</option>

                </select>
            </div>

            <button type="submit" class="submit py-3 r-10">اضافة</button>
        </form>
    </div>
@endsection

@section('js')
    <script>
        $(function() {

            // المواد بناء على المدرس




            $("#teacher_id").change(function() {
                if($(this).val()){
                    fetch_select("#subject_id" , "{{ route('students.subscribes.get_subject_by_teacher') }}?teacher_id="+$(this).val())
                }

            })


            $("#subject_id").change(function() {
                if($(this).val()){
                    fetch_select("#course_id" , "{{ route('students.subscribes.get_courses_by_teacher_and_subject') }}?subject_id="+$(this).val()+"&teacher_id="+ $("#teacher_id").val())
                }

            })


            $("#course_id").change(function() {
                if($(this).val()){
                    fetch_select("#unit_id" , "{{ route('students.subscribes.get_unit_by_course') }}?course_id="+$(this).val())
                }

            })


            $("#unit_id").change(function() {
                if($(this).val()){
                    fetch_select("#lesson_id" , "{{ route('students.subscribes.get_lesson_by_unit') }}?unit_id="+$(this).val())
                }

            })


            function fetch_select(el, url) {
                $.ajax({
                    url,
                    success: function(res) {
                        console.log(res)
                        $(el).html(res)
                    }
                })
            }









            $("#form_submit").submit(function(e) {
            e.preventDefault();
            var actionUrl = $(this).attr("action")

            $.ajax({
                url: actionUrl,
                method: 'POST',
                dataType: 'json',
                data: new FormData(this),
                cache: false,
                contentType: false,
                processData: false,
                success: function(res) {

                    toastr.success("تم اضافة  الاشتراك الى الطالب بنجاح")
                    setTimeout(() => {
                        window.location.href = window.location.href;
                    }, 3000);



                },
                error: function(res) {
                    $(".btn_with_load").attr('disabled', false)
                    if (res.status == 422) {
                        var is_alert = false;
                        $.each(res.responseJSON.errors, function(key, value) {
                            toastr.error(value)
                            // toastr["error"](value)
                        })


                    }else if(res.status == 400){
                        console.log(res)
                    }
                    else{
                        toastr.error('حدث خطأ ما')
                    }

                }
            })

        })
        })
    </script>
@endsection