@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">Edit Tier</h1>
        <x-ui.button variant="back" href="{{ route('admin.tiers.index') }}">
            Back to Tiers
        </x-ui.button>
    </div>
    
    <x-ui.layout.card>
        <form method="POST" action="{{ route('admin.tiers.update', $tier) }}">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <x-ui.inputs.text 
                        name="name" 
                        label="Tier Name" 
                        :value="old('name', $tier->name)" 
                        required 
                        autofocus 
                        error="{{ $errors->first('name') }}"
                    />
                </div>
                
                <div>
                    <label for="is_active" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Status
                    </label>
                    <select 
                        id="is_active" 
                        name="is_active" 
                        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="1" {{ old('is_active', $tier->is_active) ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('is_active', $tier->is_active) ? '' : 'selected' }}>Inactive</option>
                    </select>
                    @error('is_active')
                        <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', $tier->order)" 
                    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', $tier->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.button variant="back" href="{{ route('admin.tiers.index') }}">
                    Cancel
                </x-ui.button>
                <x-ui.button variant="save" type="submit">
                    Save Changes
                </x-ui.button>
            </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
        quill.root.innerHTML = document.getElementById('description').value;
        
        // Update hidden input on text-change
        quill.on('text-change', function() {
            document.getElementById('description').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