@extends('components.dashboard.layouts.master')
@section('title')
    {{__('Edit 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="{{__('Edit Exam')}}">
                <li class="breadcrumb-item"><a href="{{route('teacher.exams.index')}}">
                        {{__('Exams List')}}
                    </a></li>
            </x-dashboard.layouts.breadcrumb>

            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{__('Edit Exam')}}</h4>
                    </div>


                    <div class="card-content">
                        <div class="card-body">
                            <!-- ✅ Start of form -->
                            <form action="{{ route('teacher.exams.update',$exam->id) }}" method="POST">
                                @method('PUT')
                                @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"
                                            :value="old('title', $exam->title)"
                                            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" readonly 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',$exam->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',$exam->end_time)"
                                            required
                                        />
                                    </div>
                                    <div class="col-md-6 col-12 mb-2">
                                        <x-form.input
                                            name="duration"
                                            label="{{ __('Duration') }}"
                                            type="number"
                                            :value="old('duration', $exam->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', $exam->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', $exam->status)"
                                            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 }}"
                                                    {{ $exam->groups?->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', $exam->is_question_shuffle)"
                                            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', $exam->is_answer_shuffle)"
                                            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="1" {{ $exam->see_result == 1 ? 'selected' : '' }} >{{ __('Active') }}</option>
                                            <option value="0" {{ $exam->see_result == 0 ? 'selected' : '' }}>{{ __('Inactive') }}</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"
                                            :value="old('description', $exam->description)"
                                        />
                                    </div>

{{--                                    <div class="col-md-12 col-12 mb-2 mt-2" id="lessons_selected" style="display: none">--}}
{{--                                        <label for="selected_lessons_ids">{{ __('Select Lessons') }}</label>--}}
{{--                                        <select--}}
{{--                                            name="selected_lessons_ids[]"--}}
{{--                                            id="selected_lessons_ids"--}}
{{--                                            multiple--}}
{{--                                            class="form-control @error('selected_lessons_ids') is-invalid @enderror">--}}
{{--                                            @foreach($lessons as $lesson)--}}
{{--                                                <option--}}
{{--                                                    value="{{ $lesson->id }}"--}}
{{--                                                    {{ $exam->lessons?->contains($lesson->id) ? 'selected' : '' }}>--}}
{{--                                                    {{ $lesson->title }}--}}
{{--                                                </option>--}}
{{--                                            @endforeach--}}
{{--                                        </select>--}}
{{--                                        @error('selected_lessons_ids')--}}
{{--                                        <div class="invalid-feedback">{{ $message }}</div>--}}
{{--                                        @enderror--}}
{{--                                    </div>--}}

                                </div>

                                <!-- Manual Question Section -->
                                <div class="row" v-show="selected_lessons_with_questions.length > 0">

                                <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 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'))
        };
    </script>

    <script>
        new Vue({
            el: '#add-exam',
            data: {
                selected_lesson_id: null,
                creation_type: '{{ old('creation_type', $exam->creation_type) }}',
                questions: [],
                total_pages: 0,
                per_page: 0,
                last_page: 0,
                current_page: 1,
                selected_questions_in_storage: @json($exam->questions?->pluck('id')->toArray()),
                selected_lessons_with_questions: @json($exam->lessons?->pluck('id')->toArray()),
            },
            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);
                        }
                    }
                }
            },
            mounted() {
                this.loadFirstLesson();

            }
        });
    </script>
@endsection