@extends("layouts.admin")

@section("content")
<div class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
        <div class="p-6 text-gray-900 dark:text-gray-100">
            <form method="POST" action="{{ isset($assessment) ? route("admin.assessments.update", $assessment) : route("admin.assessments.store") }}">
                @csrf
                @if (isset($assessment))
                    @method("PUT")
                @endif

                <!-- Module -->
                <div class="mb-6">
                    <label for="module_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Module</label>
                    <select id="module_id" name="module_id" class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:text-gray-200" required>
                        @foreach ($modules as $module)
                            <option value="{{ $module->id }}" {{ old("module_id", $assessment->module_id ?? "") == $module->id ? "selected" : "" }}>
                                {{ $module->name }}
                            </option>
                        @endforeach
                    </select>
                    @error("module_id")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Name -->
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
                    <input id="name" class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:text-gray-200" type="text" name="name" value="{{ old("name", $assessment->name ?? "") }}" required />
                    @error("name")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
                    <input id="description" type="hidden" name="description" value="{{ old("description", $assessment->description ?? '') }}">
                    <div id="editor-description" class="mt-1 block w-full rounded-md shadow-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200" style="height: 250px;"></div>
                    @error("description")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Passing Score Percent -->
                <div class="mb-6">
                    <label for="passing_score_percent" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Passing Score (%)</label>
                    <input id="passing_score_percent" class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:text-gray-200" type="number" name="passing_score_percent" value="{{ old("passing_score_percent", $assessment->passing_score_percent ?? 70) }}" required min="0" max="100" />
                    @error("passing_score_percent")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-end pt-6 border-t border-gray-200 dark:border-gray-700">
                    <a href="{{ route("admin.assessments.index") }}" class="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-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                        {{ isset($assessment) ? "Update Assessment" : "Create Assessment" }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push("scripts")
<script>
document.addEventListener("DOMContentLoaded", function() {
    const editorElement = document.getElementById("editor-description");
    if (editorElement) {
        console.log("Quill editor container found.");
        var quill_description = new Quill(editorElement, {
            theme: "snow",
            modules: {
                toolbar: [
                    [{ "header": [1, 2, 3, 4, 5, 6, false] }],
                    ["bold", "italic", "underline", "strike"],
                    [{ "list": "ordered"}, { "list": "bullet" }],
                    ["link"],
                    ["clean"]
                ]
            }
        });
        console.log("Quill instance created.");

        var hiddenInput_description = document.getElementById("description");
        if (hiddenInput_description) {
            console.log("Hidden input for description found. Initial value:", hiddenInput_description.value);
            // Use setContents to populate editor, converting HTML to Delta
            if (hiddenInput_description.value) {
                try {
                    const delta = quill_description.clipboard.convert(hiddenInput_description.value);
                    quill_description.setContents(delta, "silent");
                    console.log("Quill content set from hidden input.");
                } catch (e) {
                    console.error("Error converting or setting Quill contents:", e);
                    // Fallback to pasting HTML directly if conversion fails, though this can be less reliable
                    // quill_description.root.innerHTML = hiddenInput_description.value;
                }
            }
        } else {
            console.log("Hidden input for description NOT found.");
        }

        quill_description.on("text-change", function(delta, oldDelta, source) {
            if (source === "user") {
                if(hiddenInput_description) {
                    hiddenInput_description.value = quill_description.root.innerHTML;
                    console.log("Quill content updated in hidden input.");
                }
            }
        });

        var form = editorElement.closest("form");
        if (form) {
            console.log("Form found for Quill editor.");
            form.addEventListener("submit", function() {
                if(hiddenInput_description) {
                    hiddenInput_description.value = quill_description.root.innerHTML;
                    console.log("Quill content updated in hidden input on form submit.");
                }
            });
        } else {
            console.log("Form NOT found for Quill editor.");
        }
    } else {
        console.log("Quill editor container NOT found.");
    }
});
</script>
@endpush