@extends('admin/course-management/course-details/index')

@section('main-content-tab')
<form action="{{route('faculty.update', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug, 'id' => $faculty_item->id])}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form" enctype="multipart/form-data">
    @csrf
    <h1 class="fw-bolder text-dark mb-9">Update Course Faculty</h1>
    <!--begin::Input group-->
    <div class="row mb-3">
    <!--begin::Col-->
        <div class="col-md-6 pe-lg-10">
            <!--begin::Form-->
            <div class="d-flex flex-column mb-5 fv-row">
                <label class="required fs-6 fw-bold mb-2">Department</label>
                <select id="department_id" class="form-select form-select-solid" data-control="select2" data-placeholder="Select a Department" name="department_id">
                    <option selected disabled>Select Department</option>
                    @foreach($departments as $department)
                    <option {{$department->id == $faculty_item->department_id ? 'selected' : ''}} value="{{$department->id}}"> {{$department->title}}</option>
                    @endforeach
                </select>
                @if($errors->has('department_id'))
                <span class="text-danger">{{ $errors->first('department_id') }}</span>
                @endif
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <label class="required fs-6 fw-bold mb-2">Teacher</label>
                <select id="teacher_id" name="teacher_id" data-control="select2" data-placeholder="Select a Teacher ..." class="form-select form-select-solid">
                    <option selected disabled>Select Teacher</option>
                </select>
                @if($errors->has('teacher_id'))
                <span class="text-danger">{{ $errors->first('teacher_id') }}</span>
                @endif
            </div>
            <div class="row">
                <div class="col-6 d-flex mb-5 fv-row">
                    <label class="form-check form-switch form-check-custom form-check-solid">
                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Featured</span>
                        <input class="form-check-input radio-btn" name="featured" type="checkbox" value="1" {{$faculty_item->featured == 0 ? '' : 'checked'}} />
                    </label>
                    <!--end::Switch-->
                </div>
                <div class="col-6 d-flex mb-5 fv-row justify-content-end">
                    <label class="form-check form-switch form-check-custom form-check-solid">
                        <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                        <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" {{$faculty_item->status == 0 ? '' : 'checked'}} />
                    </label>
                    <!--end::Switch-->
                </div>
            </div>


            <div class="d-flex">
                <a style="margin-right:5px;" href="{{route('faculty.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug])}}" class="btn btn-secondary">Back</a>
                <button type="submit" class="btn btn-primary" id="kt_contact_submit_button">
                    <!--begin::Indicator-->
                    <span class="indicator-label">Update</span>
                </button>
            </div>
            <!--end::Form-->
        </div>
    </div>

    <!--end::Submit-->
</form>
@endsection

@section('extra-extra-css')
@endsection


@section('extra-extra-script')
    <script src="{{ asset('js/jquery.validate.js') }}"></script>\
    //validate form
    <script>
        $(function() {
            $("form[name='institute']").validate({
                rules: {
                    department_id:'required',
                    teacher_id:'required'
                },
                messages: {
                    department_id: "Department is required.",
                    teacher_id: "Teacher is required."
                },
                submitHandler: function(form) {
                form.submit();
                }
            });
        });
    </script>
    <script>
        $('#department_id').change(function() {
            var department_id = $(this).val();
            if (department_id) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-teacher-list')}}?department_id=" + department_id,
                    success: function(res) {
                        if (res) {
                            $("#teacher_id").empty();
                            $("#teacher_id").append('<option selected disabled>Select Teacher</option>');
                            $.each(res, function(key, value) {
                                $("#teacher_id").append('<option value="' + key + '">' + value + '</option>');
                            });
                        } else {
                            $("#teacher_id").empty();
                        }
                    }
                });
            } else {
                $("#teacher_id").empty();
            }
        });

        $(document).ready(function() {
            var editData = {!! json_encode($faculty_item) !!};
            if(editData.department_id)
            {
                $.ajax({
                    type:"GET",
                    url:"{{url('get-teacher-list')}}?department_id=" + editData.department_id,
                    success:function(res){
                        if(res){
                            console.log('res', res);
                            $("#teacher_id").empty();
                            $("#teacher_id").append('<option selected disabled>Select Teacher</option>');
                            $.each(res,function(key,value){
                                if(editData.teacher_id == Number(key))
                                {
                                    $("#teacher_id").append('<option selected value="'+key+'">'+value+'</option>');
                                }
                                else{
                                    $("#teacher_id").append('<option value="'+key+'">'+value+'</option>');
                                }
                            });
                        }else{
                            $("#teacher_id").empty();
                        }
                    }
                });
            }
        });
    </script>
@endsection