@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Associate Classes'])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form id="degree-form">
                        @csrf
                        <input type="hidden" name="cms_course_sid" value="{{ $course->cms_course_sid }}">

                        <div class="form-group col-lg-12">
                            <div class="card-header">
                                <div class="d-flex align-items-center justify-content-between">
                                        <p class="mb-0">Associate</p>
                                        <input name="course_name" id="course_name" class="form-control rounded-0 ms-2 flex-grow-1" value="{{ $course->course_name }}" readonly>
                                        <button type="submit" class="btn btn-primary btn-sm ms-2 mt-2" id="saveChangesBtn">Save</button>
                                        <a href="{{ route('course.index') }}" class="btn btn-secondary mt-2 btn-sm ms-2">Cancel</a>
                                    </div>
                                </div>
                                
                                
                            </div>
                           
                        </div>

                        <div class="form-group">
                            <div class="container mt-5">
                                <div class="row">
                                    <!-- Available Classes Heading and Source List -->
                                    <div class="col-lg-5">
                                        <h5 class="mb-3 mt-5">Available Classes</h5> <!-- Added margin-bottom to space the heading -->
                                        <select id="sourceList" name="sourceList[]" class="form-select" multiple>
                                            @foreach($availableClasses as $class)
                                                <option value="{{ $class->cms_class_sid }}">{{ $class->class_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                        
                                    <!-- Arrow Buttons (Center aligned) -->
                                    <div class="col-auto mt-5">
                                        <h5 class="mb-3 text-center"> - </h5> 
                                        <div class="d-flex flex-column justify-content-center">
                                            <button type="button" class="btn btn-primary mb-2" id="includeSelected">&rarr;</button>
                                            <button type="button" class="btn btn-primary" id="excludeSelected">&larr;</button>
                                            <button type="button" class="btn btn-primary mt-2" id="includeAll">&raquo;</button><br>
                                            <button type="button" class="btn btn-primary" id="excludeAll">&laquo;</button>
                                        </div>
                                    </div>
                        
                                    <!-- Selected Classes Heading and Target List -->
                                    <div class="col-lg-5 mt-5">
                                        <h5 class="mb-3">Selected Classes</h5> <!-- Added margin-bottom to space the heading -->
                                        <select id="targetList" name="targetList[]" class="form-select" multiple>
                                            @foreach($associatedClasses as $class)
                                                <option value="{{ $class->cms_class_sid }}" selected>{{ $class->class_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                        <input type="hidden" name="userId" value="{{ auth()->id() }}">
                    </form>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footers.auth.footer')
    @push('styles')
    <style>
     
        
        select {
            height: 250px;
            width: 350px;
        }

        img#cimg {
            height: 15vh;
            width: 15vh;
            object-fit: scale-down;
            object-position: center center;
        }
    </style>
@endpush
@push('scripts')
    <script>
$(document).ready(function () {
    // Handle form submission
    $('#saveChangesBtn').on('click', function (e) {
        e.preventDefault(); // Prevent normal form submission

        // Get the course ID
        var courseId = "{{ $course->cms_course_sid }}"; 

        // Prepare the form data
        var formData = new FormData($('#degree-form')[0]);

        // Perform the AJAX POST request
        $.ajax({
            url: "/course/" + courseId + "/associate_class",  // Correct URL with course ID
            type: 'POST',  // Ensure POST method is used
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    toastr.success("Associated Successfully.");
                } else {
                    toastr.error("An error occurred: " + response.msg);
                }
            },
            error: function(error) {
                console.error("Error:", error);
                toastr.error("An error occurred while processing the request.");
            }
        });
    });

    // Function to move selected items from source to target
    $('#includeSelected').on('click', function () {
        var sourceList = document.getElementById("sourceList");
        var targetList = document.getElementById("targetList");
        var selectedOptions = Array.from(sourceList.selectedOptions);  // Get selected options from source

        selectedOptions.forEach(function(option) {
            targetList.appendChild(option);  // Move the option to the target list
        });
    });

    // Function to move selected items from target to source
    $('#excludeSelected').on('click', function () {
        var sourceList = document.getElementById("sourceList");
        var targetList = document.getElementById("targetList");
        var selectedOptions = Array.from(targetList.selectedOptions);  // Get selected options from target

        selectedOptions.forEach(function(option) {
            sourceList.appendChild(option);  // Move the option to the source list
        });
    });

    // Function to move all items from source to target
    $('#includeAll').on('click', function () {
        var sourceList = document.getElementById("sourceList");
        var targetList = document.getElementById("targetList");
        var options = Array.from(sourceList.options);  // Get all options from source

        options.forEach(function(option) {
            targetList.appendChild(option);  // Move all options to the target list
        });
    });

    // Function to move all items from target to source
    $('#excludeAll').on('click', function () {
        var sourceList = document.getElementById("sourceList");
        var targetList = document.getElementById("targetList");
        var options = Array.from(targetList.options);  // Get all options from target

        options.forEach(function(option) {
            sourceList.appendChild(option);  // Move all options to the source list
        });
    });
});



    </script>

@endpush

@endsection