{{-- Quill Editor Implementation for Tiers Form --}}
<div class="mb-4">
    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
    <input type="text" name="name" id="name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded-md" value="{{ old('name', $tier->name ?? '') }}" required>
</div>

<div class="mb-4">
    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
    <div id="editor-container" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 shadow-sm"></div>
    <input type="hidden" name="description" id="description" value="{{ old('description', $tier->description ?? '') }}">
</div>

<div class="mb-4">
    <label for="order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order</label>
    <input type="number" name="order" id="order" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded-md" value="{{ old('order', $tier->order ?? '') }}" required>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var quill = new Quill('#editor-container', {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'clean']
                ]
            }
        });

        // Set initial content
        var 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;
        });

        // Handle form submission
        var form = document.querySelector('form');
        form.addEventListener('submit', function() {
            descriptionInput.value = quill.root.innerHTML;
        });
    });
</script>
@endpush