@extends('components.dashboard.layouts.master')
@section('title')
    {{__('Add Exam')}}
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@endsection


@section('content')
    <div class="app-content content" id="add-exam">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <x-dashboard.layouts.breadcrumb now="{{__('Add Exam')}}">
                <li class="breadcrumb-item"><a href="{{route('teacher.exams.index')}}">
                        {{__('Exams List')}}
                    </a></li>
            </x-dashboard.layouts.breadcrumb>
            @if(session('errors'))
                <div class="alert alert-danger">
                    <ul>
                        @foreach(session('errors')->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{__('Add Exam')}}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <!-- ✅ Start of form -->
                            <form id="examForm" action="{{ route('teacher.exams.store') }}" method="POST">
                                @csrf
                                <div class="row mb-2">
                                    <div class="col-md-12 col-12 mb-2">
                                        <x-form.input
                                            name="title"
                                            label="{{__('Exam Title')}}"
                                            type="text"
                                            required="true"
                                        />
                                    </div>


                                    <div class="col-md-6 col-12 mb-2">
                                        <label for="creation_type">{{ __('Creation Type') }}</label>
                                        <select id="creation_type" name="creation_type" class="form-control" v-model="creation_type" required>
                                            @foreach($creationTypes as $value => $label)
                                                <option value="{{ $value }}">{{ __($label) }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-6 col-12 mb-2">
                                        <x-form.input
                                            name="start_time"
                                            label="{{ __('Start Time') }}"
                                            type="datetime-local"
                                            :value="old('start_time')"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12 mb-2">
                                        <x-form.input
                                            name="end_time"
                                            label="{{ __('End Time') }}"
                                            type="datetime-local"
                                            :value="old('end_time')"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12 mb-2">
                                        <x-form.input
                                            name="duration"
                                            label="{{ __('Duration In Minutes') }}"
                                            type="number"
                                            :value="old('duration')"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12 mb-2">
                                        <x-form.input
                                            name="number_of_questions"
                                            label="{{ __('Number Of Questions') }}"
                                            type="number"
                                            :value="old('number_of_questions')"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <x-form.select
                                            name="status"
                                            label="{{ __('Status') }}"
                                            :options="[1 => __('Active'), 0 => __('Inactive')]"
                                            :selected="old('status', 1)"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <label for="group_ids">{{ __('Select Groups') }}</label>
                                        <select
                                            name="group_ids[]"
                                            id="group_ids"
                                            multiple
                                            required
                                            class="form-control @error('group_ids') is-invalid @enderror">
                                            @foreach($groups as $group)
                                                <option value="{{ $group->id }}" {{ collect(old('group_ids'))->contains($group->id) ? 'selected' : '' }}>
                                                    {{ $group->title }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('group_ids')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 col-12 mt-2">
                                        <x-form.select
                                            name="is_question_shuffle"
                                            label="{{ __('Is Question Shuffle') }}"
                                            :options="[1 => __('Yes'), 0 => __('No')]"
                                            :selected="old('is_question_shuffle', 1)"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12 mt-2">
                                        <x-form.select
                                            name="is_answer_shuffle"
                                            label="{{ __('Is Answers Shuffle') }}"
                                            :options="[1 => __('Yes'), 0 => __('No')]"
                                            :selected="old('is_answer_shuffle', 1)"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12  mt-2">
                                        <label for="see_result">{{ __('See Result') }}</label>
                                        <select name="see_result" class="form-control">
                                            <option value="0" {{ old('see_result') == 0 ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                                            <option value="1" {{ old('see_result') == 1 ? 'selected' : '' }} >{{ __('Active') }}</option>
                                        </select>
                                        @error('see_result')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 col-12 mt-2">
                                        <x-form.textarea
                                            name="description"
                                            label="{{__('Exam Description')}}"
                                            type="text"
                                        />
                                    </div>

                                    <div class="col-md-12 col-12 mb-2 mt-2" v-if="creation_type === 'auto'">
                                        <label for="lesson_select">{{ __('Select Lesson') }}</label>
                                        <select id="lesson_select" class="form-control" @change="addLesson($event)">
                                            <option value="">{{ __('Choose a lesson') }}</option>
                                            @foreach($lessons as $lesson)
                                                <option value="{{ $lesson->id }}">{{ $lesson->title }}</option>
                                            @endforeach
                                        </select>
                                        @error('distribution')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>


                                    <div class="col-12 mt-2" v-if="creation_type === 'auto' && selected_lessons.length">
                                        <div class="card shadow border p-3">
                                            <h5 class="mb-3">{{ __('Distribute Questions by Difficulty') }}</h5>

                                            <div class="row mb-3" v-for="lesson in selected_lessons" :key="lesson.id">
                                                <div class="col-12 mb-1 d-flex justify-content-between align-items-center">
                                                    <strong>@{{ lesson.title }}</strong>
                                                    <button type="button" class="btn btn-sm btn-danger" @click="removeLesson(lesson.id)">
                                                        {{ __('Remove') }}
                                                    </button>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>{{ __('Easy') }}</label>
                                                    <input type="number" min="0" class="form-control" :name="`distribution[${lesson.id}][easy]`" v-model="difficulty_distribution[lesson.id].easy">
                                                </div>
                                                <div class="col-md-4">
                                                    <label>{{ __('Medium') }}</label>
                                                    <input type="number" min="0" class="form-control" :name="`distribution[${lesson.id}][medium]`" v-model="difficulty_distribution[lesson.id].medium">
                                                </div>
                                                <div class="col-md-4">
                                                    <label>{{ __('Hard') }}</label>
                                                    <input type="number" min="0" class="form-control" :name="`distribution[${lesson.id}][hard]`" v-model="difficulty_distribution[lesson.id].hard">
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                                <!-- Manual Question Section -->
                                <div class="row" v-if="creation_type === 'manual'">
                                    <div class="col-4">
                                        <input type="hidden" v-model="selected_lesson_id" name="selected_lesson_id">
                                        <div id="lesson-inputs">
                                            <input v-for="id in selected_lessons_with_questions" type="hidden" name="lesson_ids[]" :value="id">
                                        </div>
                                        <div class="list-group" id="list-tab" role="tablist">
                                            @foreach($lessons as $lesson)
                                                <div class="list-group-item list-group-item-action @if($loop->first) active @endif"
                                                     id="list-questions-list"
                                                     data-toggle="list"
                                                     href="#list-questions"
                                                     role="tab"
                                                     @click='setLessonId("{{$lesson->id}}")'
                                                     aria-controls="home">
                                                    {{$lesson->title}}
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-8">
                                        <div class="tab-content" id="nav-tabContent">
                                            <div class="tab-pane fade show active" id="list-questions" role="tabpanel" aria-labelledby="list-questions-list">
                                                <div class="overflow-x-auto border rounded shadow-sm">
                                                    <table class="min-w-full w-100 divide-y divide-gray-200 bg-white text-sm text-left">
                                                        <thead style="background-color: rgb(248 248 248)">
                                                        <tr>
                                                            <th class="px-4 py-2 w-full" colspan="3">
                                                                <span>{{ __('Selected questions') }} (@{{ selected_questions_in_storage.length }})</span>
                                                            </th>
                                                        </tr>
                                                        </thead>
                                                        <tbody class="divide-y divide-gray-100" id="question-table">
                                                        <tr v-for="q in questions" :key="q.id" class="question-row">
                                                            <td style="padding: 6px;text-align: center">
                                                                <input
                                                                    :checked="selected_questions_in_storage.includes(q.id)"
                                                                    :value="q.id"
                                                                    type="checkbox"
                                                                    @change="selectQuestion($event, q.id)">
                                                            </td>
                                                            <td class="align-top px-4 py-3">
                                                                <div style="display: flex; gap: 6px; justify-content: space-between;">
                                                                    <div>
                                                                        <p class="font-semibold mb-2" style="max-width:200px;">@{{ q.question_text }}</p>
                                                                        <img v-if="q.image" :src="q.image" class="w-[150px] h-[120px] rounded shadow object-contain">
                                                                    </div>
                                                                    <!-- MCQ options -->
                                                                    <div v-if="q.question_type === 'mcq'" class="flex-1">
                                                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-2">
                                                                            <div v-for="opt in q.options" :key="opt.id"
                                                                                 class="relative p-3 rounded-md border"
                                                                                 :class="opt.is_correct ? 'bg-green-100 border-green-400 text-green-900 font-semibold' : 'bg-gray-50'">
                                                                                <span v-if="opt.is_correct"
                                                                                      class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-0.5 rounded shadow">
                                                                                    {{ __('Correct Answer') }}
                                                                                </span>
                                                                                <div class="flex items-center gap-2">
                                                                                    <i class="fa fa-circle"
                                                                                       :class="opt.is_correct ? 'text-green-600' : 'text-gray-400'"></i>
                                                                                    @{{ opt.answer }}
                                                                                </div>
                                                                                <img v-if="opt.image" :src="opt.image" class="mt-2 w-20 h-20 rounded-full border object-cover mx-auto">
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <!-- Meta info -->
                                                                    <div class="text-sm flex flex-col gap-2">
                                                                        <div class="px-3 py-1 rounded-xl bg-green-100 text-green-800 font-semibold">
                                                                            @{{ q.question_type.toUpperCase() }}
                                                                        </div>
                                                                        <div class="px-3 py-1 rounded-xl bg-blue-100 text-blue-800">
                                                                            {{ __('Difficulty:') }} @{{ capitalize(q.difficulty_level) }}
                                                                        </div>
                                                                        <div class="px-3 py-1 rounded-xl bg-yellow-100 text-yellow-800">
                                                                            {{ __('Score:') }} @{{ q.score }}
                                                                        </div>
                                                                        <div v-if="q.question_type !== 'mcq' && q.answer"
                                                                             class="px-3 py-1 rounded-xl bg-purple-100 text-purple-800">
                                                                            {{ __('Expected:') }} @{{ q.answer }}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>

                                                    <nav aria-label="Pagination" class="p-2">
                                                        <ul class="pagination pagination-sm">
                                                            <li class="page-item" :class="{ disabled: current_page === 1 }">
                                                                <a class="page-link" href="#" @click.prevent="changePage(current_page - 1)">«</a>
                                                            </li>
                                                            <li v-for="page in pages" :key="page" class="page-item" :class="{ active: page === current_page }">
                                                                <a class="page-link" href="#" @click.prevent="changePage(page)">@{{ page }}</a>
                                                            </li>
                                                            <li class="page-item" :class="{ disabled: current_page === last_page }">
                                                                <a class="page-link" href="#" @click.prevent="changePage(current_page + 1)">»</a>
                                                            </li>
                                                        </ul>
                                                    </nav>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 🔒 HIDDEN INPUTS TO SUBMIT SELECTED QUESTIONS -->
                                <div id="hidden-question-inputs">
                                    <input v-for="id in selected_questions_in_storage" type="hidden" name="questions[]" :value="id">
                                </div>

                                <div class="col-12 mt-3">
                                    <button id="submitExamForm" class="btn btn-primary" type="submit">{{ __('Save Exam') }}</button>
                                </div>
                            </form>
                            <!-- ✅ End of form -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function () {
            $('#group_ids').select2({
                placeholder: "{{ __('Select Groups') }}",
                width: '100%',
                allowClear: true
            });
            $('#selected_lessons_ids').select2({
                placeholder: "{{ __('Select Lessons') }}",
                width: '100%',
                allowClear: true
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            const creationTypeSelect = document.querySelector('#creation_type');
            const lessonsSelected = document.getElementById('lessons_selected');

            function toggleLessonSelect() {
                if (creationTypeSelect.value === 'auto') {
                    lessonsSelected.style.display = 'block';
                } else {
                    lessonsSelected.style.display = 'none';
                }
            }

            toggleLessonSelect();

            creationTypeSelect.addEventListener('change', toggleLessonSelect);
        });

        window.translations = {
            max_question_limit: @json(__('You have reached the maximum number of questions you can select for this exam. Max: :count'))
        };
        document.getElementById('examForm').addEventListener('submit', function (e) {
            let btn = document.getElementById('submitExamForm');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
        });

    </script>

    <script>
        new Vue({
            el: '#add-exam',
            data: {
                selected_lesson_id: null,
                creation_type: '{{ old('creation_type', 'manual') }}',
                questions: [],
                total_pages: 0,
                per_page: 0,
                last_page: 0,
                current_page: 1,
                selected_questions_in_storage: @json(old('questions', [])),
                selected_lessons_with_questions: @json(old('lesson_ids', [])),
                lessons_map: @json($lessons->keyBy('id')),
                selected_lessons: [],
                difficulty_distribution: {},
            },
            computed: {
                pages() {
                    return Array.from({ length: this.last_page }, (_, i) => i + 1);
                }
            },
            methods: {
                capitalize(str) {
                    return str.charAt(0).toUpperCase() + str.slice(1);
                },
                changePage(page) {
                    if (page < 1 || page > this.last_page) return;
                    this.loadQuestions(page);
                },
                setLessonId(lessonId) {
                    this.selected_lesson_id = lessonId;
                    this.loadQuestions();
                },
                loadFirstLesson() {
                    this.selected_lesson_id = @json($lessons->first()->id ?? null);
                    if (this.selected_lesson_id) this.loadQuestions();
                },
                loadQuestions(page = 1) {
                    axios.get(`/teacher/lesson-question/${this.selected_lesson_id}?page=${page}`)
                        .then(response => {
                            const questions = response.data.data.data;
                            this.questions = questions;
                            this.total_pages = response.data.data.total;
                            this.per_page = response.data.data.per_page;
                            this.last_page = response.data.data.last_page;
                            this.current_page = page;
                        })
                        .catch(console.error);
                },
                selectQuestion(event, questionId) {
                    const isChecked = event.target.checked;
                    const maxQuestions = parseInt(document.querySelector('[name="number_of_questions"]').value);
                    const lessonId = this.selected_lesson_id;

                    if (isChecked) {
                        if (this.selected_questions_in_storage.includes(questionId)) return;
                        if (this.selected_questions_in_storage.length >= maxQuestions) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'خطأ',
                                text: window.translations.max_question_limit.replace(':count', maxQuestions),
                            });
                            event.preventDefault();
                            event.target.checked = false;
                            return;
                        }
                        this.selected_questions_in_storage.push(questionId);
                        if (!this.selected_lessons_with_questions.includes(lessonId)) {
                            this.selected_lessons_with_questions.push(lessonId);
                        }
                    } else {
                        const index = this.selected_questions_in_storage.indexOf(questionId);
                        if (index > -1) this.selected_questions_in_storage.splice(index, 1);

                        const stillHasQuestions = this.questions.some(q =>
                            this.selected_questions_in_storage.includes(q.id)
                        );
                        if (!stillHasQuestions) {
                            const lessonIndex = this.selected_lessons_with_questions.indexOf(lessonId);
                            if (lessonIndex > -1) this.selected_lessons_with_questions.splice(lessonIndex, 1);
                        }
                    }
                },
                addLesson(event) {
                    const lessonId = parseInt(event.target.value);
                    if (!lessonId || this.selected_lessons.find(l => l.id === lessonId)) return;

                    const lesson = this.lessons_map[lessonId];
                    if (lesson) {
                        this.selected_lessons.push({ id: lesson.id, title: lesson.title });
                        this.$set(this.difficulty_distribution, lesson.id, { easy: 0, medium: 0, hard: 0 });
                    }

                    event.target.value = '';
                },

                removeLesson(id) {
                    this.selected_lessons = this.selected_lessons.filter(l => l.id !== id);
                    this.$delete(this.difficulty_distribution, id);
                }
            },
            mounted() {
                this.loadFirstLesson();
            }
        });
    </script>
@endsection