<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">Crear setup</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="<?php echo e(route('products.setups.index', $product)); ?>"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            <button type="submit" form="setup-create-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>Crear setup</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>
                        <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>

                <form wire:submit="save" id="setup-create-form" class="space-y-6" enctype="multipart/form-data">
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Versión *</label>
                        <input type="text"
                               wire:model="version"
                               placeholder="YYYYMMDDXX (ej: 2025110401)"
                               class="w-full rounded-lg border border-gray-200 px-4 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 <?php $__errorArgs = ['version'];
$__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 = ['version'];
$__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">Formato: 10 dígitos (YYYYMMDDXX)</p>
                    </div>

                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Método de entrada YAML *</label>
                        <div class="flex gap-4 mb-3">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" wire:model.live="inputMethod" value="editor" class="mr-2">
                                <span>Editor YAML</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" wire:model.live="inputMethod" value="file" class="mr-2">
                                <span>Subir archivo</span>
                            </label>
                        </div>

                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($inputMethod === 'editor'): ?>
                            
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="block text-sm font-medium text-gray-700">Contenido YAML *</label>
                                    <button type="button"
                                            wire:click="validateYaml"
                                            class="text-sm px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 font-semibold">
                                        Validar YAML
                                    </button>
                                </div>

                                <div wire:ignore>
                                    <textarea id="yaml-editor-create"
                                              wire:model="yaml"
                                              class="w-full rounded-lg border border-gray-200 font-mono text-sm <?php $__errorArgs = ['yaml'];
$__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); ?>"
                                              rows="20"></textarea>
                                </div>

                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($yamlValidationError): ?>
                                    <p class="text-red-600 text-sm mt-1"><?php echo e($yamlValidationError); ?></p>
                                <?php elseif($yamlValid && !empty($yaml)): ?>
                                    <p class="text-green-600 text-sm mt-1">✓ YAML válido</p>
                                <?php endif; ?><?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 $__errorArgs = ['yaml'];
$__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>
                        <?php else: ?>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Archivo YAML *</label>
                                <input type="file"
                                       wire:model="yamlFile"
                                       accept=".yaml,.yml"
                                       class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 <?php $__errorArgs = ['yamlFile'];
$__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 = ['yamlFile'];
$__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($yamlFile): ?>
                                    <p class="text-xs text-gray-500 mt-1">Archivo seleccionado: <?php echo e($yamlFile->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">Solo archivos .yaml o .yml (máximo 10MB)</p>
                            </div>
                        <?php endif; ?><?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"
                                  placeholder="Comentarios o notas sobre este setup..."
                                  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>
                </form>
            </div>
        </div>
    </div>

    <script>
        let yamlEditorCreate = null;
        let updateTimeout = null;

        function initializeCreateEditor() {
            const textarea = document.getElementById('yaml-editor-create');
            if (!textarea) {
                return;
            }

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

            // Inicializar nuevo editor
            yamlEditorCreate = CodeMirror.fromTextArea(textarea, {
                theme: 'oneDark',
            });

            // Sincronizar con Livewire (con debounce)
            yamlEditorCreate.on('change', function(cm) {
                if (updateTimeout) {
                    clearTimeout(updateTimeout);
                }
                updateTimeout = setTimeout(function() {
                    window.Livewire.find('<?php echo e($_instance->getId()); ?>').set('yaml', cm.getValue(), false);
                }, 300);
            });
        }

        function destroyCreateEditor() {
            if (yamlEditorCreate) {
                try {
                    yamlEditorCreate.destroy();
                } catch (e) {
                    console.warn('Error al destruir editor:', e);
                }
                yamlEditorCreate = null;
            }
            if (updateTimeout) {
                clearTimeout(updateTimeout);
                updateTimeout = null;
            }
        }

        // Inicializar cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', function() {
            if (document.getElementById('yaml-editor-create')) {
                initializeCreateEditor();
            }
        });

        // Escuchar cambios de Livewire
        document.addEventListener('livewire:init', function() {
            // Escuchar cuando se actualiza el componente
            Livewire.hook('morph.updated', ({ el, component }) => {
                // Verificar si el textarea existe ahora
                const textarea = document.getElementById('yaml-editor-create');
                if (textarea) {
                    // Si no hay editor o el textarea no está siendo usado por el editor, inicializar
                    if (!yamlEditorCreate || !textarea.previousElementSibling || !textarea.previousElementSibling.classList.contains('cm-editor')) {
                        setTimeout(initializeCreateEditor, 150);
                    }
                } else {
                    // Si el textarea desapareció, destruir el editor
                    destroyCreateEditor();
                }
            });

            // Escuchar cambios en inputMethod desde el componente
            Livewire.on('inputMethodChanged', (value) => {
                if (value === 'editor') {
                    setTimeout(initializeCreateEditor, 200);
                } else {
                    destroyCreateEditor();
                }
            });
        });

        // También usar un observer para detectar cuando aparece el textarea
        if (typeof MutationObserver !== 'undefined') {
            const observer = new MutationObserver(function(mutations) {
                const textarea = document.getElementById('yaml-editor-create');
                if (textarea && !yamlEditorCreate) {
                    // Verificar que el textarea esté visible
                    if (textarea.offsetParent !== null) {
                        setTimeout(initializeCreateEditor, 100);
                    }
                }
            });

            // Observar cambios en el body
            document.addEventListener('DOMContentLoaded', function() {
                if (document.body) {
                    observer.observe(document.body, {
                        childList: true,
                        subtree: true,
                    });
                }
            });
        }
    </script>
</div><?php /**PATH /var/www/html/resources/views/livewire/setups/create.blade.php ENDPATH**/ ?>