@extends('components.dashboard.layouts.master')

@section('title', __('Reassign Exam'))

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--multiple {
            min-height: 44px;
            padding: 6px;
        }
    </style>
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row"></div>
            <div class="content-body">
                <x-dashboard.layouts.breadcrumb now="{{ __('Reassign Exam') }}">
                    <li class="breadcrumb-item"><a href="{{ route('teacher.exams.index') }}">{{ __('Exams List') }}</a></li>
                </x-dashboard.layouts.breadcrumb>

                <div class="row mt-2">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('Reassign Exam') }} - {{ $exam->title }}</h4>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('teacher.exams.reassign', $exam->id) }}" method="POST">
                                    @csrf
                                    <div class="mb-3">
                                        <label for="start_time">{{ __('Start Time') }}</label>
                                        <input type="datetime-local" class="form-control" id="start_time" name="start_time" required>
                                    </div>

                                    <!-- End Time -->
                                    <div class="mb-3">
                                        <label for="end_time">{{ __('End Time') }}</label>
                                        <input type="datetime-local" class="form-control" id="end_time" name="end_time" required>
                                    </div>
                                    <!-- Group multi-select -->
                                    <div class="mb-3">
                                        <label for="group-select">{{ __('Select Groups') }}</label>
                                        <select id="group-select" class="form-control" name="group_ids[]" multiple>
                                            @foreach($groups as $group)
                                                <option value="{{ $group->id }}">{{ $group->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <input type="hidden" name="toggle" value="0">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" name="toggle" type="checkbox" id="toggle-students" value="1">
                                        <label class="form-check-label" for="toggle-students">
                                            {{ __('Reassign only to specific students') }}
                                        </label>
                                    </div>



                                    <!-- Student select -->
                                    <div id="student-select-wrapper" class="mb-3 d-none">
                                        <label for="student-select">{{ __('Select Students') }}</label>
                                        <select id="student-select" class="form-control" name="student_ids[]" multiple></select>
                                    </div>

                                    <div class="mt-4">
                                        <button type="submit" class="btn btn-primary">{{ __('Reassign Exam') }}</button>
                                        <a href="{{ route('teacher.exams.index') }}" class="btn btn-secondary">{{ __('Cancel') }}</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- end row -->
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        // Prepare students grouped by group ID
        const allStudentsByGroup = @json(
            $groups->mapWithKeys(fn($group) => [
                $group->id => $group->studentProfiles->map(fn($student) => [
                    'id' => $student->user_id,
                    'name' => $student->user->name,
                    'group' => $group->title
                ])
            ])
        );

        $(document).ready(function () {
            const groupSelect = $('#group-select');
            const studentSelect = $('#student-select');
            const studentWrapper = $('#student-select-wrapper');
            const toggleStudents = $('#toggle-students');

            // Initialize Select2
            groupSelect.select2({
                placeholder: "{{ __('Select Groups') }}",
                width: '100%'
            });

            studentSelect.select2({
                placeholder: "{{ __('Select Students') }}",
                width: '100%'
            });

            // Show/hide student dropdown
            toggleStudents.on('change', function () {
                if ($(this).is(':checked')) {
                    studentWrapper.removeClass('d-none');
                    updateStudents();
                } else {
                    studentWrapper.addClass('d-none');
                }
            });

            // Update students on group change
            groupSelect.on('change', function () {
                if (toggleStudents.is(':checked')) {
                    updateStudents();
                }
            });

            function updateStudents() {
                const selectedGroupIds = groupSelect.val() || [];
                const uniqueStudents = {};

                selectedGroupIds.forEach(groupId => {
                    const students = allStudentsByGroup[groupId] || [];
                    students.forEach(student => {
                        uniqueStudents[student.id] = `${student.name} (${student.group})`;
                    });
                });

                // Clear and repopulate student select
                studentSelect.empty();
                for (const [id, name] of Object.entries(uniqueStudents)) {
                    studentSelect.append(new Option(name, id));
                }
                studentSelect.trigger('change.select2');
            }
        });
    </script>
@endsection