@extends('layouts.app')

@section('content')
    @include('layouts.toolbar')

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="container-xxl" id="kt_content_container">
            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <h3 class="card-label">Assign Teachers to Classes</h3>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3" id="teachers-table">
                            <thead>
                                <tr class="fw-bold text-muted">
                                    <th class="w-25px">
                                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" value="1" data-kt-check="true" data-kt-check-target=".widget-9-check" />
                                        </div>
                                    </th>
                                    <th class="min-w-150px">Teacher Name</th>
                                    <th class="min-w-200px">Email</th>
                                    <th class="min-w-300px">Assigned Classes</th>
                                    <th class="min-w-100px text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Assign Classes Modal -->
    <div class="modal fade" id="assignClassesModal" tabindex="-1" aria-labelledby="assignClassesModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignClassesModalLabel">Assign Classes to Teacher</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="assignClassesForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="teacher_name" class="form-label">Teacher Name</label>
                            <input type="text" class="form-control" id="teacher_name" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="class_ids" class="form-label">Select Classes</label>
                            <select class="form-select" id="class_ids" name="class_ids[]" multiple="multiple" data-control="select2" data-placeholder="Select classes to assign">
                            </select>
                            <div class="form-text">You can select multiple classes to assign to this teacher. Deselecting classes will unassign them from this teacher.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <span class="indicator-label">Assign Classes</span>
                            <span class="indicator-progress">Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('css')
<style>
    .assign-teacher-btn {
        transition: all 0.3s ease;
    }
    
    .assign-teacher-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .list-unstyled li {
        margin-bottom: 4px;
    }
    
    .list-unstyled li:last-child {
        margin-bottom: 0;
    }
    
    .select2-container--default .select2-selection--multiple {
        min-height: 38px;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #e1f0ff;
        border: 1px solid #b3d9ff;
        border-radius: 4px;
        padding: 2px 8px;
        margin: 2px;
    }
</style>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        // Initialize DataTable
        var table = $('#teachers-table').DataTable({
            processing: true,
            serverSide: false,
            ajax: {
                url: '{{ route("after-school.assign-teacher.get-teachers") }}',
                type: 'GET'
            },
            columns: [
                {data: 'id', orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'assigned_classes', name: 'assigned_classes', orderable: false, searchable: false},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ],
            order: [[1, 'asc']],
            pageLength: 25,
            responsive: true,
            language: {
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>'
            }
        });

        // Handle assign teacher button click
        $(document).on('click', '.assign-teacher-btn', function() {
            var teacherId = $(this).data('teacher-id');
            var teacherName = $(this).data('teacher-name');
            
            $('#teacher_name').val(teacherName);
            $('#assignClassesForm').data('teacher-id', teacherId);
            
            // Load available classes with pre-selected ones
            loadAvailableClasses(teacherId);
            
            // Show modal
            $('#assignClassesModal').modal('show');
        });

        // Load available classes for the dropdown
        function loadAvailableClasses(teacherId) {
            $.ajax({
                url: '{{ route("after-school.assign-teacher.get-available-classes") }}',
                type: 'GET',
                data: {
                    teacher_id: teacherId
                },
                success: function(response) {
                    var select = $('#class_ids');
                    select.empty();
                    
                    var selectedValues = [];
                    response.forEach(function(classItem) {
                        select.append(new Option(classItem.text, classItem.id, false, false));
                        if (classItem.selected) {
                            selectedValues.push(classItem.id);
                        }
                    });
                    
                    // Set the selected values
                    select.val(selectedValues);
                    select.trigger('change');
                },
                error: function(xhr) {
                    console.error('Error loading classes:', xhr);
                    toastr.error('Error loading available classes.');
                }
            });
        }

        // Handle form submission
        $('#assignClassesForm').on('submit', function(e) {
            e.preventDefault();
            
            var teacherId = $(this).data('teacher-id');
            var classIds = $('#class_ids').val();
            
            // Allow empty selection (to unassign all classes)
            if (classIds === null) {
                classIds = [];
            }
            
            // Show loading state
            var submitBtn = $(this).find('button[type="submit"]');
            submitBtn.attr('data-kt-indicator', 'on');
            submitBtn.prop('disabled', true);
            
            $.ajax({
                url: '{{ route("after-school.assign-teacher.assign-classes") }}',
                type: 'POST',
                data: {
                    teacher_id: teacherId,
                    class_ids: classIds,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $('#assignClassesModal').modal('hide');
                        
                        // Refresh the DataTable
                        table.ajax.reload();
                        
                        // Reset form
                        $('#assignClassesForm')[0].reset();
                        $('#class_ids').val(null).trigger('change');
                    } else {
                        toastr.error(response.message || 'An error occurred while assigning classes.');
                    }
                },
                error: function(xhr) {
                    console.error('Error assigning classes:', xhr);
                    var message = 'An error occurred while assigning classes.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    toastr.error(message);
                },
                complete: function() {
                    // Hide loading state
                    submitBtn.removeAttr('data-kt-indicator');
                    submitBtn.prop('disabled', false);
                }
            });
        });

        // Initialize Select2 for class selection
        $('#class_ids').select2({
            dropdownParent: $('#assignClassesModal'),
            width: '100%',
            allowClear: true,
            placeholder: 'Select classes to assign'
        });

        // Handle modal close
        $('#assignClassesModal').on('hidden.bs.modal', function() {
            $('#assignClassesForm')[0].reset();
            $('#class_ids').val(null).trigger('change');
        });
    });
</script>
@endsection