@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_scheme', $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-12">
                                                <div class="form-group row">
                                                    <label for="program" class="col-sm-3 col-form-label">Class</label>
                                                    <div class="col-sm-6">
                                                        {{ Form::select('class_id', $schemeClasses, '', ['placeholder' => '- Select -', 'id' => 'class_id', 'class' => 'form-control class_id', 'required' => 'required']) }}
                                                    </div>
                                                </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="studentsTable" class="table table-bordered"
                                                    style="display: none;">
                                                    <thead>
                                                        <tr>
                                                            <th>Student</th>
                                                            <th>Student</th>
                                                            <th>Student</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                                <div id="noStudentsMessage" style="display: none; color: red;">All students
                                                    already assigned to this scheme.</div>
                                            </div>
                                        </div>
                                        <div class="row field-group" id="submitButtonRow" style="display: none;">
                                            <div class="col-lg-12">
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </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() {
            var studentsTable;

            $(document).on('change', '#class_id', function() {
                var classId = $(this).val();
                if (classId) {
                    if ($.fn.dataTable.isDataTable('#studentsTable')) {
                        studentsTable.destroy();
                    }
                    $.ajax({
                        url: '{{ route('scheme.get_students', [$scheme->id, '']) }}/' + classId,
                        type: 'GET',
                        success: function(data) {
                            var $studentsTableBody = $('#studentsTable tbody');
                            $studentsTableBody.empty();

                            if (data.students.length > 0) {
                                var row;
                                data.students.forEach(function(student, index) {
                                    if (index % 3 === 0) {
                                        row = $('<tr></tr>');
                                        $studentsTableBody.append(row);
                                    }

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

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

                                $('#studentsTable').show();
                                $('#submitButtonRow').show();
                                $('#noStudentsMessage').hide();

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

                                studentsTable = $('#studentsTable').DataTable({
                                    searching: true,
                                    paging: false,
                                    info: false
                                });
                            } else {
                                $('#studentsTable').hide();
                                $('#noStudentsMessage').show();
                                $('#submitButtonRow').hide();
                            }
                        }
                    });
                } else {
                    if ($.fn.dataTable.isDataTable('#studentsTable')) {
                        studentsTable.destroy();
                    }
                    $('#studentsTable tbody').empty();
                    $('#studentsTable').hide();
                    $('#noStudentsMessage').hide();
                    $('#submitButtonRow').hide();
                }
            });

            $('#selectAll').click(function() {
                var checked = $(this).prop('checked');
                $('input[name="student_ids[]"]').prop('checked', checked);
            });



        });
    </script>
@stop