@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 Tier</h1>
        <x-ui.buttons.secondary href="{{ route('admin.tiers.index') }}">
            Back to Tiers
        </x-ui.buttons.secondary>
    </div>
    
    <x-ui.layout.card>
        <form method="POST" action="{{ route('admin.tiers.store') }}">
            @csrf
            
            <div class="mb-6">
                <x-ui.inputs.text 
                    name="name" 
                    label="Tier Name" 
                    :value="old('name')" 
                    required 
                    autofocus 
                    error="{{ $errors->first('name') }}"
                />
            </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="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="flex justify-end space-x-3">
                <x-ui.buttons.secondary href="{{ route('admin.tiers.index') }}">
                    Cancel
                </x-ui.buttons.secondary>
                <x-ui.buttons.primary type="submit">
                    Create Tier
                </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 tier 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