<div>
    
    <div class="w-full flex items-center mb-8">
        <a href="<?php echo e(route('products.show', $product)); ?>"
            class="flex rounded-lg bg-white border border-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-100 font-bold">
            <img src="<?php echo e(asset('vendor/blade-untitledui-icons/arrow-narrow-left.svg')); ?>" alt="Volver" class="w-6 h-6">
            <span class="ml-2">Volver</span>
        </a>
        <div class="ml-4 flex items-center text-sm text-gray-500">
            <a href="<?php echo e(route('products.setups.index', $product)); ?>"
               class="text-orange-600 hover:text-orange-800">
                Setups
            </a>
            <span class="mx-2">/</span>
            <span class="text-gray-700 font-semibold">Setup v<?php echo e($setup->version); ?></span>
        </div>
    </div>

    
    <?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-2 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-2 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 rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
            <div>
                <label class="text-xs text-gray-500 mb-1">Producto</label>
                <p class="font-semibold text-gray-900"><?php echo e($setup->product->name); ?></p>
                <p class="text-xs text-gray-600 font-mono"><?php echo e($setup->product->slug); ?></p>
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1">Versión</label>
                <p class="font-mono font-semibold text-gray-900"><?php echo e($setup->version); ?></p>
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1">Estado</label>
                <p>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($setup->status === 'active'): ?>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Activo</span>
                    <?php else: ?>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">Deprecado</span>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </p>
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1">Creado</label>
                <p class="text-sm font-semibold text-gray-900"><?php echo e($setup->created_at->format('Y-m-d H:i')); ?></p>
                <p class="text-xs text-gray-600">por <?php echo e($setup->creator?->name ?? 'N/A'); ?></p>
            </div>
        </div>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($setup->updated_by): ?>
            <div class="pt-4 border-t border-gray-200">
                <label class="text-xs text-gray-500 mb-1">Última actualización</label>
                <p class="text-sm font-semibold text-gray-900"><?php echo e($setup->updated_at->format('Y-m-d H:i')); ?></p>
                <p class="text-xs text-gray-600">por <?php echo e($setup->updater?->name ?? 'N/A'); ?></p>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($setup->change_log): ?>
                    <p class="text-sm text-gray-700 mt-2 italic">"<?php echo e($setup->change_log); ?>"</p>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
        <?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 if($setup->description): ?>
            <div class="pt-4 border-t border-gray-200">
                <label class="text-xs text-gray-500 mb-1">Descripción</label>
                <p class="text-sm text-gray-900"><?php echo e($setup->description); ?></p>
            </div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        
        <div class="pt-4 border-t border-gray-200 mt-4 flex gap-2">
            <a href="<?php echo e(route('products.setups.edit', [$product, $setup])); ?>"
               class="flex items-center rounded-lg bg-orange-600 px-4 py-2 text-white hover:bg-orange-700 font-semibold">
                <img src="<?php echo e(asset('vendor/blade-untitledui-icons/pencil.svg')); ?>" alt="Editar" class="w-5 h-5 mr-2 svg-fill-white">
                Editar
            </a>

            <button wire:click="duplicate"
                    wire:confirm="¿Seguro que deseas duplicar este setup? Se creará una nueva versión automáticamente."
                    class="flex items-center rounded-lg bg-green-600 px-4 py-2 text-white hover:bg-green-700 font-semibold">
                <img src="<?php echo e(asset('vendor/blade-untitledui-icons/copy.svg')); ?>" alt="Duplicar" class="w-5 h-5 mr-2 svg-fill-white">
                Duplicar
            </button>

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($setup->status === 'active'): ?>
                <button wire:click="toggleStatus"
                        wire:confirm="¿Seguro que deseas marcar este setup como deprecado?"
                        class="flex items-center rounded-lg bg-orange-600 px-4 py-2 text-white hover:bg-orange-700 font-semibold">
                    <img src="<?php echo e(asset('vendor/blade-untitledui-icons/alert-circle.svg')); ?>" alt="Deprecar" class="w-5 h-5 mr-2 svg-fill-white">
                    Marcar como deprecado
                </button>
            <?php else: ?>
                <button wire:click="toggleStatus"
                        wire:confirm="¿Seguro que deseas reactivar este setup?"
                        class="flex items-center rounded-lg bg-green-600 px-4 py-2 text-white hover:bg-green-700 font-semibold">
                    <img src="<?php echo e(asset('vendor/blade-untitledui-icons/check-circle.svg')); ?>" alt="Activar" class="w-5 h-5 mr-2 svg-fill-white">
                    Reactivar
                </button>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>
    </div>

    
    <div class="rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
        <h3 class="font-semibold text-lg mb-4 text-gray-900">Contenido YAML</h3>
        <div wire:ignore>
            <textarea id="yaml-viewer" readonly class="w-full rounded-lg border border-gray-200 font-mono text-sm" rows="20"><?php echo e($setup->yaml); ?></textarea>
        </div>
    </div>

    
    <div class="rounded-lg bg-white border border-gray-200 px-8 py-6">
        <h3 class="font-semibold text-lg mb-4 text-gray-900">Historial de cambios</h3>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($setup->history->isEmpty()): ?>
            <p class="text-gray-500 text-sm">No hay historial de cambios.</p>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-gray-100 text-xs uppercase text-gray-600">
                    <tr>
                        <th class="px-4 py-3 text-left">Fecha</th>
                        <th class="px-4 py-3 text-left">Usuario</th>
                        <th class="px-4 py-3 text-left">Cambio</th>
                        <th class="px-4 py-3 text-right">Acciones</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $setup->history; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $historyEntry): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-gray-700"><?php echo e($historyEntry->created_at->format('Y-m-d H:i')); ?></td>
                            <td class="px-4 py-3 text-gray-700"><?php echo e($historyEntry->changer?->name ?? 'N/A'); ?></td>
                            <td class="px-4 py-3 text-gray-700">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($historyEntry->change_log): ?>
                                    <span class="italic"><?php echo e(Str::limit($historyEntry->change_log, 50)); ?></span>
                                <?php else: ?>
                                    <span class="text-gray-400">Sin comentario</span>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <button wire:click="viewHistoryYaml(<?php echo e($historyEntry->id); ?>)"
                                        class="text-indigo-600 hover:text-indigo-800 text-xs font-semibold">
                                    Ver YAML
                                </button>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($historyIdToView): ?>
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
             wire:click="closeHistoryModal">
            <div class="bg-white rounded-lg p-6 max-w-4xl w-full mx-4 max-h-[90vh] overflow-auto"
                 wire:click.stop>
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">YAML histórico</h3>
                    <button wire:click="closeHistoryModal"
                            class="text-gray-500 hover:text-gray-700 font-bold text-xl">
                        ✕
                    </button>
                </div>
                <div wire:ignore>
                    <textarea id="history-yaml-viewer" readonly class="w-full rounded-lg border border-gray-200 font-mono text-sm" rows="25"><?php echo e($historyYaml); ?></textarea>
                </div>
                <div class="mt-4 text-right">
                    <button wire:click="closeHistoryModal"
                            class="rounded-lg bg-gray-600 text-white px-4 py-2 hover:bg-gray-700 font-semibold">
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <script>
        let mainViewer = null;
        let historyViewer = null;

        document.addEventListener('DOMContentLoaded', function() {
            // Viewer principal (read-only)
            const viewer = document.getElementById('yaml-viewer');
            if (viewer && !mainViewer) {
                mainViewer = CodeMirror.fromTextArea(viewer, {
                    theme: 'oneDark',
                    readOnly: true,
                });
            }
        });

        // Inicializar viewer histórico cuando se muestra el modal
        document.addEventListener('livewire:init', function() {
            Livewire.hook('morph.updated', ({ el, component }) => {
                setTimeout(function() {
                    const historyViewerEl = document.getElementById('history-yaml-viewer');
                    if (historyViewerEl && !historyViewer) {
                        historyViewer = CodeMirror.fromTextArea(historyViewerEl, {
                            theme: 'oneDark',
                            readOnly: true,
                        });
                    } else if (historyViewerEl && historyViewer) {
                        historyViewer.setValue(historyViewerEl.value);
                    }
                }, 200);
            });
        });

        // Limpiar viewer histórico cuando se cierra el modal
        Livewire.on('history-modal-closed', function() {
            if (historyViewer) {
                historyViewer.toTextArea();
                historyViewer = null;
            }
        });
    </script>
</div><?php /**PATH /var/www/html/resources/views/livewire/setups/show.blade.php ENDPATH**/ ?>