@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Add New Module</h1>
        <x-ui.buttons.secondary href="{{ route('admin.modules.index') }}">
            Back to Modules
        </x-ui.buttons.secondary>
    </div>
    
    <x-ui.layout.card>
        <form method="POST" action="{{ route('admin.modules.store') }}">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <x-ui.inputs.text 
                        name="name" 
                        label="Module Name" 
                        :value="old('name')" 
                        required 
                        autofocus 
                        error="{{ $errors->first('name') }}"
                    />
                </div>
                
                <div>
                    <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 rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300"
                    >
                        <option value="">Select a tier</option>
                        @foreach ($tiers as $tier)
                            <option value="{{ $tier->id }}" {{ old('tier_id') == $tier->id ? 'selected' : '' }}>
                                {{ $tier->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('tier_id')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <div class="mb-6">
                <x-ui.inputs.text 
                    name="order" 
                    label="Display Order" 
                    type="number" 
                    :value="old('order', 0)" 
                    required 
                    min="0" 
                    error="{{ $errors->first('order') }}"
                />
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Lower numbers appear first in lists.</p>
            </div>
            
            <div class="mb-6">
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Description
                </label>
                <div class="mt-1">
                    <div id="description-editor" class="h-64 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md"></div>
                    <input type="hidden" id="description" name="description" value="{{ old('description') }}">
                </div>
                @error('description')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="flex justify-end space-x-3">
                <x-ui.buttons.secondary href="{{ route('admin.modules.index') }}">
                    Cancel
                </x-ui.buttons.secondary>
                <x-ui.buttons.primary type="submit">
                    Create Module
                </x-ui.buttons.primary>
            </div>
        </form>
    </x-ui.layout.card>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const quill = new Quill('#description-editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'image'],
                    ['clean']
                ]
            },
            placeholder: 'Enter module description...',
        });
        
        // Set initial content
        const descriptionInput = document.getElementById('description');
        if (descriptionInput.value) {
            quill.root.innerHTML = descriptionInput.value;
        }
        
        // Update hidden input on text-change
        quill.on('text-change', function() {
            descriptionInput.value = quill.root.innerHTML;
        });
        
        // Apply dark mode styling to Quill if needed
        if (document.documentElement.classList.contains('dark')) {
            document.querySelectorAll('.ql-toolbar, .ql-container').forEach(el => {
                el.classList.add('dark-quill');
            });
        }
    });
</script>
@endpush