<div>
    <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('components.clean-header', ['title' => 'Crear tipo de entorno']);

$key = null;

$key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-1591423719-0', null);

$__html = app('livewire')->mount($__name, $__params, $key);

echo $__html;

unset($__html);
unset($__name);
unset($__params);
unset($__split);
if (isset($__slots)) unset($__slots);
?>

    <div class="w-full px-20 pt-16 pb-4">
        <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session()->has('success')): ?>
                <div class="mb-4 rounded bg-green-100 px-4 py-3 text-green-700">
                    <?php echo e(session('success')); ?>

                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <?php if(session()->has('error')): ?>
                <div class="mb-4 rounded bg-red-100 px-4 py-3 text-red-700">
                    <?php echo e(session('error')); ?>

                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <div
                class="w-full flex flex-wrap items-center justify-between mt-8 rounded-lg bg-white border border-gray-200 px-8 py-4">
                <div class="w-full flex items-center justify-center flex-col">
                    <h1 class="text-4xl font-bold">Crear tipo de entorno</h1>
                    <p class="text-gray-500 text-sm text-center">
                        Completa los datos para crear un nuevo tipo de entorno.
                    </p>
                </div>
                <form wire:submit="store" class="w-full flex flex-col gap-6 mt-8">
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Nombre</label>
                        <input type="text" wire:model="name"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent <?php $__errorArgs = ['name'];
$__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); ?>"
                            required>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-1 text-sm text-red-600"><?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">Shortname</label>
                        <input type="text" wire:model="shortname"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent <?php $__errorArgs = ['shortname'];
$__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); ?>"
                            required>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['shortname'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-1 text-sm text-red-600"><?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="4"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent <?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="mt-1 text-sm text-red-600"><?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">Imagen</label>

                        
                        <div class="w-full flex flex-wrap gap-4 mb-4" wire:ignore>
                            
                            <div id="image-preview-container" class="flex-1 min-w-[200px] flex flex-col items-center justify-center" style="display: none;">
                                <img id="image-preview" src="" alt="Vista previa"
                                    class="max-w-full max-h-64 rounded-lg border-2 border-blue-400 p-2 object-contain">
                                <p class="text-xs text-blue-600 mt-1 font-medium">Vista previa</p>
                            </div>
                        </div>

                        
                        <div>
                            <input type="file" wire:model="image" id="image-input"
                                accept="image/jpeg,image/jpg,image/png,image/webp,image/svg+xml"
                                class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent <?php $__errorArgs = ['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 = ['image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="mt-1 text-sm text-red-600"><?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(isset($image)): ?>
                                <p class="text-xs text-gray-500 mt-1">Archivo:
                                    <?php echo e($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, svg</p>
                        </div>
                    </div>

                    
                    <div class="w-full flex items-center justify-end mt-8">
                        <a href="<?php echo e(route('configurations.environments-types.index')); ?>"
                            class="bg-white hover:bg-gray-100 px-4 py-2">Cancelar</a>
                        <button type="submit" wire:loading.attr="disabled"
                            class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg ml-4">
                            <span wire:loading.remove wire:target="store">Crear tipo</span>
                            <span wire:loading wire:target="store">Guardando...</span>
                        </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Variable global para almacenar la preview
    let previewImageData = null;
    let imagePreviewHandler = null;

    function setupImagePreview() {
        const imageInput = document.getElementById('image-input');
        const imagePreview = document.getElementById('image-preview');
        const imagePreviewContainer = document.getElementById('image-preview-container');

        if (!imageInput) return;

        // Restaurar preview si existe
        if (previewImageData && imagePreview && imagePreviewContainer) {
            imagePreview.src = previewImageData;
            imagePreviewContainer.style.display = 'flex';
        }

        // Remover listener anterior si existe
        if (imagePreviewHandler) {
            imageInput.removeEventListener('change', imagePreviewHandler);
        }

        // Crear nuevo handler
        imagePreviewHandler = function(e) {
            const file = e.target.files[0];

            if (file) {
                // Verificar que sea una imagen
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        previewImageData = e.target.result;

                        if (imagePreview && imagePreviewContainer) {
                            imagePreview.src = previewImageData;
                            imagePreviewContainer.style.display = 'flex';
                        }
                    };

                    reader.readAsDataURL(file);
                } else {
                    alert('Por favor, selecciona un archivo de imagen válido.');
                    imageInput.value = '';
                    previewImageData = null;
                    if (imagePreviewContainer) {
                        imagePreviewContainer.style.display = 'none';
                    }
                }
            } else {
                previewImageData = null;
                if (imagePreviewContainer) {
                    imagePreviewContainer.style.display = 'none';
                }
            }
        };

        // Agregar nuevo listener
        imageInput.addEventListener('change', imagePreviewHandler);
    }

    // Inicializar cuando el DOM esté listo
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', setupImagePreview);
    } else {
        setupImagePreview();
    }

    // Reinicializar después de cada actualización de Livewire
    document.addEventListener('livewire:init', () => {
        Livewire.hook('morph.updated', () => {
            setTimeout(setupImagePreview, 50);
        });
    });
</script><?php /**PATH /var/www/html/resources/views/livewire/configurations/environments/create.blade.php ENDPATH**/ ?>