@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">
                    {{ Form::open(['url' => route('scheme.save_course', $scheme->id), 'method' => 'post', 'name' => 'feedbackF']) }}
                    {{ csrf_field() }}
                    <input type="hidden" value="{{ $scheme->program_id }}" name="program_id" />
                    <input type="hidden" value="{{ $scheme->session }}" name="academic_session" />
                    <input type="hidden" value="{{ $semester }}" name="total_semesters" />
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    @for ($i = 1; $i <= $semester; $i++)
                        @if (($i - 1) % 2 == 0)
                            <div class="form-group row">
                        @endif
                        <div class="col-sm-4">
                            <label class="col-form-label">Semester {{ $i }}</label>
                            {{ Form::select('classes_' . $i, $courses, isset($scheme_courses_detailsArr[$i]) ? $scheme_courses_detailsArr[$i] : '', ['class' => 'form-control semester-select', 'id' => 'semester-' . $i, 'multiple' => 'multiple']) }}
                        </div>
                        @if (($i - 1) % 2 == 1)
                            </div>
                        @endif
                @endfor
                <div class="row">
                    <div class="col-lg-12">
                        &nbsp;
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-3">
                        <button type="submit" class="btn btn-primary align-content-center">Submit</button>
                    </div>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>
    </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            const allOptions = {};

            // Store all options for each select
            $('.semester-select').each(function() {
                const id = $(this).attr('id');
                allOptions[id] = $(this).html();
            });
            $('.semester-select').on('change', function() {
                // updateOptions();
            });

            function updateOptions() {
                let selectedOptions = [];

                // Collect all selected options
                $('.semester-select').each(function() {
                    $(this).find('option:selected').each(function() {
                        selectedOptions.push($(this).val());
                    });
                });

                // Reset options for all selects
                $('.semester-select').each(function() {
                    const id = $(this).attr('id');
                    $(this).html(allOptions[id]); // Reset to original options

                    const currentSelected = $(this).val() || [];

                    // Disable options that are selected in other selects
                    selectedOptions.forEach(function(value) {
                        if (!currentSelected.includes(value)) {
                            $(this).find('option[value="' + value + '"]').remove();
                        }
                    }.bind(this));
                });
            }

            updateOptions();
        });
    </script>
@stop