@extends('admin::layouts.plane')
@section('page_heading') {{ $title }} @endsection
@section('content')
    <div class="col-lg-12">
        <div class="panel panel-default filterable">
            <div class="panel-heading">
                <div class="panel-title font-weight-bold">{{ $title }}</div>
            </div>
            <div class="container-fluid">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            {{ Form::open(['url' => route('save_teacher'), 'method' => 'post', 'name' => 'feedbackF']) }}
                            {{ csrf_field() }}
                            <div class="row">
                                <div class="col-lg-12">
                                    <div id="field-container">
                                        <div class="row field-group">
                                            <div class="col-lg-4">
                                                <div class="form-group row">
                                                    <label for="program" class="col-sm-2 col-form-label">Scheme</label>
                                                    <div class="col-sm-10">
                                                        {{ Form::select('scheme', $schemeArr, '', ['placeholder' => '- Select -', 'id' => 'scheme', 'class' => 'form-control scheme select2', 'required' => 'required']) }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group row">
                                                    <label for="start_date" class="col-sm-3 col-form-label">Semester</label>
                                                    <div class="col-sm-8">
                                                        {{ Form::select('semester', [], '', ['placeholder' => '- Select -', 'id' => 'semester', 'class' => 'form-control semester select2', 'required' => 'required']) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="courses-container"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    &nbsp;
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 text-right">
                                    {{ Form::submit('Submit', ['class' => 'btn btn-info']) }}
                                </div>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $(document).on('change', '#scheme', function() {
                var schemeId = $(this).val();
                 $('#courses-container').empty();
                if (schemeId) {
                    $.ajax({
                        url: '{{ route('get_semester') }}',
                        type: 'GET',
                        data: {
                            scheme_id: schemeId
                        },
                        success: function(data) {
                            $('#semester').empty();
                            $('#course').empty();
                            $('#teacher').empty();
                            $('#semester').append('<option value="">- Select -</option>');
                            $.each(data.semesters, function(key, value) {
                                $('#semester').append('<option value="' + value
                                    .semester + '">Semeter ' + value.semester +
                                    '</option>');
                            });
                        }
                    });
                } else {
                    $('#semester').empty();
                    $('#course').empty();
                    $('#teacher').empty();
                    $('#semester').append('<option value="">- Select -</option>');
                }
            });
            $(document).on('change', '#semester', function() {
                var semester = $(this).val();
                var schemeId = $('#scheme').val();
                if (semester) {
                    $.ajax({
                        url: '{{ route('get_courses') }}',
                        type: 'GET',
                        data: {
                            scheme_id: schemeId,
                            semester: semester
                        },
                        success: function(data) {
                            {{-- $('#course').empty();
                            $('#teacher').empty();
                            $('#course').append('<option value="">- Select -</option>');
                            $.each(data.courses, function(key, value) {
                                $('#course').append('<option value="' + key + '">' +
                                    value + '</option>');
                            }); --}}

                            $('#courses-container').empty();
                            $.each(data.courses, function(index, course) {
                                if (index % 3 === 0) {
                                    $('#courses-container').append(
                                        '<div class="row courses-row"></div>');
                                }
                                $('.courses-row:last').append(
                                    '<div class="col-sm-4">' +
                                    // Use col-sm-4 to fit 3 in a row (3*4=12)
                                    '<div class="form-group">' +
                                    '<label class="col-form-label">' + course.name +
                                    '</label>' +
                                    '<input type="hidden" name="courses[' + course
                                    .id + '][id]['+course.type+']" value="' + course.id + '">' +
                                    '<select name="courses[' + course.id +
                                    '][teacher]['+course.type+']" class="form-control teacher select2">' +
                                    // Add select2 class here
                                    '<option value="">- Select -</option>' +
                                    $.map(course.teachers, function(teacherName,
                                        teacherId) {
                                        return '<option value="' + teacherId +
                                            '">' + teacherName + '</option>';
                                    }).join('') +
                                    '</select>' +
                                    '</div>' +
                                    '</div>'
                                );
                            });
                            $('.select2').select2();
                        }
                    });
                } else {
                    $('#course').empty();
                    $('#teacher').empty();
                    $('#course').append('<option value="">- Select -</option>');
                }
            });
            $(document).on('change', '#course', function() {
                var course = $(this).val();
                var semester = $('#semester').val();
                var schemeId = $('#scheme').val();
                if (course) {
                    $.ajax({
                        url: '{{ route('get_teachers') }}',
                        type: 'GET',
                        data: {
                            scheme_id: schemeId,
                            semester: semester,
                            course: course,
                        },
                        success: function(data) {
                            $('#teacher').empty();
                            $('#teacher').append('<option value="">- Select -</option>');
                            $.each(data.employees, function(key, value) {
                                $('#teacher').append('<option value="' + key + '">' +
                                    value + '</option>');
                            });
                        }
                    });
                } else {
                    $('#teacher').empty();
                    $('#teacher').append('<option value="">- Select -</option>');
                }
            });
            $('.select2').select2();
        });
    </script>
@stop