@extends("admin.layouts.app")

@section("content")
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">{{ isset($question) ? "Edit Question" : "Create New Question" }} for Assessment: {{ $assessment->name }}</h1>

        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                <form method="POST" action="{{ isset($question) ? route("admin.questions.update", $question) : route("admin.assessments.questions.store", ["assessment" => $assessment->id]) }}">
                    @csrf
                    @if (isset($question))
                        @method("PUT")
                    @endif

                    {{-- Hidden assessment_id --}}
                    <input type="hidden" name="assessment_id" value="{{ $assessment->id }}">

                    <!-- Question Text (Quill Editor) -->
                    <div class="mb-4">
                        <label for="question_text-editor" class="block font-medium text-sm text-gray-700 dark:text-gray-300">Question Text</label>
                        <input id="question_text" type="hidden" name="question_text" value="{{ old("question_text", $question->text ?? "") }}">
                        <div id="question_text-editor" style="height: 200px;" class="mt-1 block w-full rounded-md shadow-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600">{!! old("question_text", $question->text ?? "") !!}</div>
                        @error("question_text")
                            <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Type -->
                    <div class="mb-4">
                        <label for="type" class="block font-medium text-sm text-gray-700 dark:text-gray-300">Question Type</label>
                        <select id="type" name="type" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600" required>
                            <option value="multiple_choice_single" {{ old("type", $question->type ?? "") == "multiple_choice_single" ? "selected" : "" }}>Multiple Choice (Single Answer)</option>
                            <option value="multiple_choice_multiple" {{ old("type", $question->type ?? "") == "multiple_choice_multiple" ? "selected" : "" }}>Multiple Choice (Multiple Answers)</option>
                            <option value="true_false" {{ old("type", $question->type ?? "") == "true_false" ? "selected" : "" }}>True/False</option>
                        </select>
                        @error("type")
                            <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Order -->
                    <div class="mb-4">
                        <label for="order" class="block font-medium text-sm text-gray-700 dark:text-gray-300">Order (within Assessment)</label>
                        <input id="order" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600" type="number" name="order" value="{{ old("order", $question->order ?? 0) }}" required />
                        @error("order")
                            <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Incorrect Answer Feedback (Quill Editor) -->
                    <div class="mb-4">
                        <label for="incorrect-answer-feedback-editor" class="block font-medium text-sm text-gray-700 dark:text-gray-300">Incorrect Answer Feedback (Optional)</label>
                        <input id="incorrect_answer_feedback" type="hidden" name="incorrect_answer_feedback" value="{{ old("incorrect_answer_feedback", $question->incorrect_answer_feedback ?? '') }}">
                        <div id="incorrect-answer-feedback-editor" style="height: 150px;" class="mt-1 block w-full rounded-md shadow-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600">{!! old("incorrect_answer_feedback", $question->incorrect_answer_feedback ?? '') !!}</div>
                        @error("incorrect_answer_feedback")
                            <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex items-center justify-end mt-4">
                        <a href="{{ route("admin.assessments.questions.index", ["assessment" => $assessment->id]) }}" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 mr-4">
                            Cancel
                        </a>

                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-500 active:bg-indigo-700 focus:outline-none focus:border-indigo-700 focus:ring ring-indigo-300 disabled:opacity-25 transition ease-in-out duration-150">
                            {{ isset($question) ? "Update Question" : "Create Question" }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push("scripts")
<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (document.getElementById("question_text-editor")) {
            var quillQuestionText = new Quill("#question_text-editor", {
                theme: "snow",
                modules: {
                    toolbar: [
                        [{ "header": [1, 2, false] }],
                        ["bold", "italic", "underline"],
                        [{ "list": "ordered"}, { "list": "bullet" }],
                        ["link"],
                        ["clean"]
                    ]
                }
            });
            var questionTextInput = document.getElementById("question_text");

            quillQuestionText.on("text-change", function(delta, oldDelta, source) {
                if (source === "user") {
                    questionTextInput.value = quillQuestionText.root.innerHTML;
                }
            });
            
            var form = document.querySelector("form");
            if (form) {
                form.addEventListener("submit", function() {
                    questionTextInput.value = quillQuestionText.root.innerHTML;
                });
            }
        }

        // Quill editor for Incorrect Answer Feedback
        if (document.getElementById("incorrect-answer-feedback-editor")) {
            var quillFeedback = new Quill("#incorrect-answer-feedback-editor", {
                theme: "snow",
                modules: {
                    toolbar: [
                        [{ "header": [1, 2, false] }],
                        ["bold", "italic", "underline"],
                        [{ "list": "ordered"}, { "list": "bullet" }],
                        ["link"],
                        ["clean"]
                    ]
                }
            });
            var feedbackInput = document.getElementById("incorrect_answer_feedback");
            if (feedbackInput.value) {
                quillFeedback.root.innerHTML = feedbackInput.value;
            }
            quillFeedback.on("text-change", function(delta, oldDelta, source) {
                if (source === "user") {
                    feedbackInput.value = quillFeedback.root.innerHTML;
                }
            });
            var formFeedback = feedbackInput.closest("form");
            if (formFeedback) {
                formFeedback.addEventListener("submit", function() {
                    feedbackInput.value = quillFeedback.root.innerHTML;
                });
            }
        }
    });
</script>
@endpush