@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">
                            {{ Form::open(['url' => route('scheme.save_student_courses', $scheme->id), '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">
                                                <label for="program" class="col-sm-3 col-form-label">Class</label>
                                                <div class="col-sm-9">
                                                    {{ Form::select('class_id', $schemeClasses, '', ['placeholder' => '- Select -', 'id' => 'class_id', 'class' => 'form-control class_id select2', 'required' => 'required']) }}
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <label for="start_date" class="col-sm-3 col-form-label">Student</label>
                                                <div class="col-sm-9">
                                                    {{ Form::select('student', [], '', ['placeholder' => '- Select -', 'id' => 'student', 'class' => 'form-control student select2', 'required' => 'required']) }}
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <label for="start_date" class="col-sm-3 col-form-label">Semester</label>
                                                <div class="col-sm-9">
                                                    {{ Form::select('semester', $semesters, '', ['placeholder' => '- Select -', 'id' => 'semester', 'class' => 'form-control semester select2', 'required' => 'required']) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row field-group">
                                            <div class="col-lg-12">
                                                &nbsp;
                                            </div>
                                        </div>
                                        <div class="row field-group">
                                            <div class="col-lg-12">
                                                <table id="coursesTable" class="table table-bordered"
                                                    style="display: none;">
                                                    <thead>
                                                        <tr>
                                                            <th>Course</th>
                                                            <th>Course</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                                <div id="noCourseMessage" style="display: none; color: red;">Course not
                                                    assigned to this student.</div>
                                            </div>
                                        </div>
                                        <div class="row field-group">
                                            <div class="col-lg-12">
                                                &nbsp;
                                            </div>
                                        </div>
                                        <div class="row" id="addNewButtonRow" style="display: none;">
                                            <div class="col-lg-12">
                                                <div class="row field-group">
                                                    <div class="col-lg-6">
                                                        <label for="department"
                                                            class="col-sm-3 col-form-label">Department</label>
                                                        <div class="col-sm-9">
                                                            {{ Form::select('department', $dept_list, '', ['placeholder' => '- Select -', 'id' => 'department', 'class' => 'form-control department select2']) }}
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <label for="department"
                                                            class="col-sm-3 col-form-label">Courses</label>
                                                        <div class="col-sm-9">
                                                            {{ Form::select('new_courses[]', [], '', ['placeholder' => '- Select -', 'id' => 'new_courses', 'class' => 'form-control department',]) }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row field-group">
                                                    <div class="col-lg-12">
                                                        &nbsp;
                                                    </div>
                                                </div>
                                                <div class="row field-group">
                                                    <div class="col-lg-12">
                                                        <button type="submit" class="btn btn-primary">Submit</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row field-group">
                                            <div class="col-lg-12">
                                                &nbsp;
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $(document).on('change', '#class_id', function() {
                var classId = $(this).val();
                if (classId) {
                    $.ajax({
                        url: '{{ route('scheme.get_assign_students', [$scheme->id, '']) }}/' +
                            classId,
                        type: 'GET',
                        success: function(data) {
                            $('#student').empty();
                            $('#student').append('<option value="">- Select -</option>');
                            $.each(data.students, function(key, value) {
                                $('#student').append('<option value="' + value
                                    .id + '">' + value.name +
                                    '</option>');
                            });
                        }
                    });
                }
            });

            $(document).on('change', '#department', function() {
                var departmentId = $(this).val();
                var semester = $("#semester").val();
                var studentId = $("#student").val();
                if (departmentId) {
                    $.ajax({
                        url: '{{ route('scheme.get_department_courses', [$scheme->id, '', '', '']) }}/' +
                            departmentId + '/' +
                            studentId + '/' + semester,
                        type: 'GET',
                        success: function(data) {
                            $('#new_courses').empty(); // Clear any existing options
                            $('#new_courses').select2({
                                placeholder: '- Select Courses -',
                                allowClear: true
                            });
                            $.each(data.courses, function(key, value) {
                                console.log(value.id, '-', value
                                    .name
                                ); // Debugging: Log the id and name to the console
                                $('#new_courses').append(
                                    '<option value="' + value.id + '">' + value
                                    .name + '</option>'
                                );
                            });
                            $('#new_courses').prop('multiple', true);
                            //$('#new_courses').select2().trigger('change');
                        },
                        error: function(xhr, status, error) {
                            console.log("Error:", error); // Handle any errors
                        }
                    });
                }
            });

            var coursesTable;
            $(document).on('change', '#semester', function() {
                var semester = $(this).val();
                var studentId = $("#student").val();
                if (studentId) {
                    if ($.fn.dataTable.isDataTable('#coursesTable')) {
                        coursesTable.destroy();
                    }
                    $.ajax({
                        url: '{{ route('scheme.get_student_courses', [$scheme->id, '', '']) }}/' +
                            studentId + '/' + semester,
                        type: 'GET',
                        success: function(data) {
                            var $coursesTableBody = $('#coursesTable tbody');
                            $coursesTableBody.empty();
                            if (data.courses.length > 0) {
                                var row;
                                data.courses.forEach(function(course, index) {
                                    if (index % 2 === 0) {
                                        row = $('<tr></tr>');
                                        $coursesTableBody.append(row);
                                    }

                                    var col = $('<td></td>').html(
                                        '<input type="checkbox" name="course_ids[]" value="' +
                                        course.id + '" checked> ' + course.name
                                    );
                                    row.append(col);
                                });

                                // Fill remaining columns in the last row if necessary
                                var remainingCols = 2 - (data.courses.length % 2);
                                if (remainingCols < 2) {
                                    for (var i = 0; i < remainingCols; i++) {
                                        row.append('<td></td>');
                                    }
                                }

                                $('#coursesTable').show();
                                $('#addNewButtonRow').show();
                                $('#noCourseMessage').hide();

                                // Reinitialize DataTables
                                if ($.fn.dataTable.isDataTable('#coursesTable')) {
                                    coursesTable.destroy();
                                }

                                coursesTable = $('#coursesTable').DataTable({
                                    searching: true,
                                    paging: false,
                                    info: false
                                });
                            } else {
                                $('#coursesTable').hide();
                                $('#addNewButtonRow').hide();
                                $('#noCourseMessage').show();
                            }
                        }
                    });
                }
            });
            $('#selectAll').click(function() {
                var checked = $(this).prop('checked');
                $('input[name="student_ids[]"]').prop('checked', checked);
            });

            $('.select2').select2();

        });
    </script>
@stop