@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($module) ? route("admin.modules.update", $module) : route("admin.modules.store") }}" enctype="multipart/form-data">
                @csrf
                @if (isset($module))
                    @method("PUT")
                @endif
                <!-- Tier -->
                <div class="mb-6">
                    <label for="tier_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tier</label>
                    <select id="tier_id" name="tier_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 ($tiers as $tier)
                            <option value="{{ $tier->id }}" {{ old("tier_id", $module->tier_id ?? "") == $tier->id ? "selected" : "" }}>
                                {{ $tier->name }}
                            </option>
                        @endforeach
                    </select>
                    @error("tier_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", $module->name ?? "") }}" required autofocus />
                    @error("name")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <!-- Description (Short) -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description (Short)</label>
                    <input id="description" type="hidden" name="description" value="{{ old("description", $module->description ?? '') }}">
                    <div id="editor-description-module" 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: 150px;">{!! old("description", $module->description ?? '') !!}</div>
                    @error("description")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <!-- Content (Full) -->
                <div class="mb-6">
                    <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Content (Full)</label>
                    <input id="content" type="hidden" name="content" value="{{ old("content", $module->content ?? '') }}">
                    <div id="content-editor" 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: 300px;">{!! old("content", $module->content ?? '') !!}</div>
                    @error("content")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <!-- Key Takeaways -->
                <div class="mb-6">
                    <label for="key_takeaways" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Takeaways</label>
                    <input id="key_takeaways" type="hidden" name="key_takeaways" value="{{ old("key_takeaways", $module->key_takeaways ?? '') }}">
                    <div id="key-takeaways-editor" 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: 200px;">{!! old("key_takeaways", $module->key_takeaways ?? '') !!}</div>
                    @error("key_takeaways")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <!-- Image -->
                <div class="mb-6">
                    <label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Image</label>
                    <input id="image" 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="file" name="image" />
                    @if (isset($module) && $module->image)
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $module->image) }}" alt="{{ $module->name }}" class="h-32 w-auto object-cover rounded">
                        </div>
                    @endif
                    @error("image")
                        <p class="text-sm text-red-600 dark:text-red-400 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <!-- Submit Button -->
                <div class="flex items-center justify-end mt-6">
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        {{ isset($module) ? "Update Module" : "Create Module" }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push("scripts")
<!-- Load Quill from CDN to ensure latest version -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Load our enhanced Quill initialization script -->
<script src="{{ asset('js/quill-enhanced.js') }}"></script>
@endpush