<div>
    
    <div
        class="fixed top-0 left-0 right-0 w-full bg-white flex items-center justify-between p-4 z-50 border-b border-gray-200">
        <div class="flex items-center">
            <img src="<?php echo e(Storage::url('images_static/tresipunt-square.svg')); ?>" alt="Logo" class="w-10 h-10 mr-3">
            <h1 class="text-2xl font-bold">Editar feature</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="<?php echo e(route('products.features.version.show', [$product, $featureVersion])); ?>"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            <button type="submit" form="feature-edit-form" wire:loading.attr="disabled"
                class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
                <span wire:loading.remove>Guardar cambios</span>
                <span wire:loading>Guardando...</span>
            </button>
        </div>
    </div>

    
    <div class="w-full px-20 pt-24 pb-8">
        <div class="mx-auto max-w-5xl">
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6">

                
                <div class="mb-6 pb-6 border-b border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Producto</label>
                            <p class="font-semibold text-gray-900"><?php echo e($product->name); ?></p>
                            <p class="text-xs text-gray-600 font-mono"><?php echo e($product->slug); ?></p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Versión</label>
                            <p class="font-mono font-semibold text-gray-900"><?php echo e($featureVersion->version); ?></p>
                        </div>
                    </div>
                </div>

                <form wire:submit="save" id="feature-edit-form" class="space-y-6" enctype="multipart/form-data">
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Título *</label>
                        <input type="text" wire:model="title"
                            class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 <?php $__errorArgs = ['title'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['title'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="text-red-600 text-sm mt-1"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>

                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Descripción</label>
                        <textarea wire:model="description" rows="3"
                            class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 <?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"></textarea>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="text-red-600 text-sm mt-1"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>

                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Contenido HTML</label>
                        <div wire:ignore>
                            <textarea id="content-html-editor-edit" wire:model="content_html"
                                class="w-full rounded-lg border border-gray-200 <?php $__errorArgs = ['content_html'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"></textarea>
                        </div>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['content_html'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="text-red-600 text-sm mt-1"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>

                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Imagen Miniatura</label>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($feature->thumbnail_image): ?>
                                <div class="mb-2">
                                    <img src="<?php echo e($feature->thumbnail_url); ?>" alt="Thumbnail actual"
                                        class="max-w-xs rounded-lg border border-gray-200">
                                    <p class="text-xs text-gray-500 mt-1">Imagen actual</p>
                                </div>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <input type="file" wire:model="thumbnail_image"
                                accept="image/jpeg,image/jpg,image/png,image/webp"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 <?php $__errorArgs = ['thumbnail_image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['thumbnail_image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-600 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($thumbnail_image): ?>
                                <p class="text-xs text-gray-500 mt-1">Nuevo archivo:
                                    <?php echo e($thumbnail_image->getClientOriginalName()); ?></p>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <p class="text-xs text-gray-500 mt-1">Máximo 5MB, formatos: jpg, png, webp</p>
                        </div>

                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Imagen de Cabecera</label>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($feature->header_image): ?>
                                <div class="mb-2">
                                    <img src="<?php echo e($feature->header_url); ?>" alt="Header actual"
                                        class="max-w-xs rounded-lg border border-gray-200">
                                    <p class="text-xs text-gray-500 mt-1">Imagen actual</p>
                                </div>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <input type="file" wire:model="header_image"
                                accept="image/jpeg,image/jpg,image/png,image/webp"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 <?php $__errorArgs = ['header_image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['header_image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-600 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($header_image): ?>
                                <p class="text-xs text-gray-500 mt-1">Nuevo archivo:
                                    <?php echo e($header_image->getClientOriginalName()); ?></p>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <p class="text-xs text-gray-500 mt-1">Máximo 5MB, formatos: jpg, png, webp</p>
                        </div>
                    </div>

                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Estado *</label>
                            <select wire:model="status"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 <?php $__errorArgs = ['status'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                <option value="draft">Borrador</option>
                                <option value="published">Publicado</option>
                                <option value="archived">Archivado</option>
                            </select>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['status'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-600 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Orden</label>
                            <input type="number" wire:model="sort_order" min="0"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 <?php $__errorArgs = ['sort_order'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['sort_order'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-600 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <p class="text-xs text-gray-500 mt-1">Número para ordenar (opcional)</p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        let joditEditorEdit = null;

        function initializeJoditEdit() {
            const textarea = document.getElementById('content-html-editor-edit');
            if (!textarea || !window.Jodit) {
                return;
            }

            // Si ya existe un editor, destruirlo primero
            if (joditEditorEdit) {
                try {
                    joditEditorEdit.destroy();
                } catch (e) {
                    console.warn('Error al destruir editor anterior:', e);
                }
                joditEditorEdit = null;
            }

            // Inicializar Jodit
            joditEditorEdit = new window.Jodit(textarea, {
                height: 400,
                defaultMode: window.Jodit.MODE_WYSIWYG,
                enter: 'P',
                enterBlock: 'div',
                toolbarInline: true,
                toolbarInlineForSelection: true,
                uploader: {
                    url: '<?php echo e(url('/api/features/upload-image')); ?>',
                    format: 'json',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    filesVariableName: function(i) {
                        return 'image';
                    },
                    data: {
                        product_id: <?php echo \Illuminate\Support\Js::from($product->id)->toHtml() ?>,
                        feature_version_id: <?php echo \Illuminate\Support\Js::from($featureVersion->id)->toHtml() ?>,
                        feature_id: <?php echo \Illuminate\Support\Js::from($feature->id)->toHtml() ?>
                    },
                    isSuccess: function(resp) {
                        return resp && resp.error === 0;
                    },
                    getMessage: function(resp) {
                        return resp && resp.msg ? resp.msg : '';
                    },
                    process: function(resp) {
                        return {
                            files: resp && resp.files ? resp.files : [],
                            path: resp && resp.path ? resp.path : '',
                            baseurl: resp && resp.baseurl ? resp.baseurl : '',
                            error: resp && typeof resp.error !== 'undefined' ? resp.error : 1,
                            msg: resp && resp.msg ? resp.msg : ''
                        };
                    },
                    defaultHandlerSuccess: function(data, resp) {
                        var field = 'files';
                        if (data && data[field] && data[field].length) {
                            for (var i = 0; i < data[field].length; i++) {
                                var url = (data.baseurl || '') + data[field][i];
                                this.s.insertImage(url, null, this.options.imageDefaultWidth || null);
                            }
                        }
                    }
                },
                buttons: 'bold,italic,underline,strikethrough,|,ul,ol,|,outdent,indent,|,align,font,fontsize,brush,paragraph,|,table,link,image,|,undo,redo,|,source',
                removeEmptyBlocks: true,
                cleanHTML: {
                    removeEmptyElements: false,
                    fillEmptyParagraph: false
                }
            });

            // Cargar contenido inicial
            joditEditorEdit.value = <?php echo \Illuminate\Support\Js::from($content_html)->toHtml() ?>;

            // Sincronizar con Livewire
            joditEditorEdit.events.on('change', function() {
                window.Livewire.find('<?php echo e($_instance->getId()); ?>').set('content_html', joditEditorEdit.value, false);
            });
        }

        function destroyJoditEdit() {
            if (joditEditorEdit) {
                try {
                    joditEditorEdit.destroy();
                } catch (e) {
                    console.warn('Error al destruir editor:', e);
                }
                joditEditorEdit = null;
            }
        }

        // Inicializar cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(initializeJoditEdit, 100);
        });

        // Escuchar cambios de Livewire
        document.addEventListener('livewire:init', function() {
            Livewire.hook('morph.updated', ({
                el,
                component
            }) => {
                const textarea = document.getElementById('content-html-editor-edit');
                if (textarea && !joditEditorEdit) {
                    setTimeout(initializeJoditEdit, 150);
                }
            });
        });
    </script>
</div><?php /**PATH /var/www/html/resources/views/livewire/features/edit.blade.php ENDPATH**/ ?>