@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($option) ? "Edit Option" : "Create New Option" }} for Question: {{ $question->text }}</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($option) ? route("admin.options.update", $option) : route("admin.questions.options.store", ["question" => $question->id]) }}">
                    @csrf
                    @if (isset($option))
                        @method("PUT")
                    @endif

                    {{-- Hidden question_id --}}
                    <input type="hidden" name="question_id" value="{{ $question->id }}">

                    <!-- Option Text (Quill Editor) -->
                    <div class="mb-4">
                        <label for="option_text-editor" class="block font-medium text-sm text-gray-700 dark:text-gray-300">Option Text</label>
                        <input id="option_text" type="hidden" name="option_text" value="{{ old("option_text", $option->text ?? "") }}">
                        <div id="option_text-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("option_text", $option->text ?? "") !!}</div>
                        @error("option_text")
                            <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Is Correct -->
                    <div class="block mt-4 mb-4">
                        <label for="is_correct" class="inline-flex items-center">
                            <input id="is_correct" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="is_correct" value="1" {{ old("is_correct", $option->is_correct ?? false) ? "checked" : "" }}>
                            <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Is this the correct option?</span>
                        </label>
                        @error("is_correct")
                            <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.questions.options.index", ["question" => $question->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($option) ? "Update Option" : "Create Option" }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

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

            quillOptionText.on("text-change", function(delta, oldDelta, source) {
                if (source === "user") {
                    optionTextInput.value = quillOptionText.root.innerHTML;
                }
            });

            var form = document.querySelector("form");
            if (form) {
                form.addEventListener("submit", function() {
                    optionTextInput.value = quillOptionText.root.innerHTML;
                });
            }
        }
    });
</script>
@endpush