


<?php $__env->startSection('title', 'Productos de ' . $proveedor->nombre_empresa); ?>

<?php $__env->startSection('content'); ?>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#fef7ec',
                            100: '#fdecd3',
                            200: '#fbd6a5',
                            300: '#f9ba6d',
                            400: '#F2A922',
                            500: '#F28705',
                            600: '#d96d04',
                            700: '#b45107',
                            800: '#92400d',
                            900: '#78350f',
                        },
                        accent: {
                            50: '#f0f9e8',
                            100: '#ddf2c7',
                            200: '#bfe592',
                            300: '#9dd458',
                            400: '#6fb82f',
                            500: '#3B7312',
                            600: '#2f5d0d',
                            700: '#254809',
                            800: '#1d3607',
                            900: '#162d05',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .product-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px -10px rgba(242, 135, 5, 0.2);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #F28705 0%, #F2A922 100%);
        }
        
        .accent-gradient {
            background: linear-gradient(135deg, #3B7312 0%, #6fb82f 100%);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50 min-h-screen">

<div class="min-h-screen p-4 sm:p-6 md:p-8">
    <div class="max-w-7xl mx-auto space-y-6">

        
        <nav class="flex items-center space-x-2 text-sm">
            <a href="<?php echo e(route('proveedores')); ?>" class="text-gray-500 hover:text-primary-600 transition-colors">
                <i class="fas fa-truck mr-1"></i> Proveedores
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium"><?php echo e($proveedor->nombre_empresa); ?></span>
        </nav>

        
        <div class="mb-8">
            <div class="flex items-center gap-4 mb-2">
                <div class="w-12 h-12 bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-building text-white text-xl"></i>
                </div>
                <div>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900"><?php echo e($proveedor->nombre_empresa); ?></h1>
                    <p class="text-gray-500 text-sm">Gestiona los ingresos y lotes de este proveedor</p>
                </div>
            </div>
            
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mt-4">
                <div class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-br from-accent-50 to-accent-100 rounded-full border-2 border-accent-300">
                    <span class="w-2 h-2 bg-accent-500 rounded-full animate-pulse"></span>
                    <span class="text-sm font-bold text-accent-700"><?php echo e($ingresos->count()); ?> <?php echo e($ingresos->count() === 1 ? 'Producto' : 'Productos'); ?></span>
                </div>
                
                <a href="<?php echo e(route('ingresos.create')); ?>?proveedor_id=<?php echo e($proveedor->id); ?>" 
                   class="inline-flex items-center gap-2 px-6 py-3 gradient-bg text-white font-bold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all">
                    <i class="fas fa-plus"></i>
                    Registrar nuevo lote
                </a>
            </div>
        </div>

        
        <?php if(session('success')): ?>
            <div class="flex items-center gap-3 p-4 bg-accent-50 border-l-4 border-accent-500 rounded-xl shadow-sm">
                <i class="fas fa-check-circle text-accent-600 text-xl"></i>
                <p class="text-accent-800 font-medium"><?php echo e(session('success')); ?></p>
            </div>
        <?php endif; ?>

        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
            
            <a href="<?php echo e(route('proveedores.productos.index', ['proveedor' => $proveedor->id, 'filtro_estado' => 'todos'])); ?>" 
               class="glass-effect rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all <?php echo e(request('filtro_estado') == 'todos' || !request('filtro_estado') ? 'ring-2 ring-primary-500' : ''); ?>">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-cubes text-primary-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">Total Productos</p>
                        <h4 class="text-2xl font-bold text-gray-900"><?php echo e($stats['total_productos']); ?></h4>
                    </div>
                </div>
            </a>

            
            <a href="<?php echo e(route('proveedores.productos.index', ['proveedor' => $proveedor->id, 'filtro_estado' => 'proximos_vencer'])); ?>" 
               class="glass-effect rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all <?php echo e(request('filtro_estado') == 'proximos_vencer' ? 'ring-2 ring-yellow-500' : ''); ?>">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-yellow-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-clock text-yellow-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">Próximos a Vencer</p>
                        <h4 class="text-2xl font-bold text-gray-900"><?php echo e($stats['proximos_vencer']); ?></h4>
                    </div>
                </div>
            </a>

            
            <a href="<?php echo e(route('proveedores.productos.index', ['proveedor' => $proveedor->id, 'filtro_estado' => 'vencidos'])); ?>" 
               class="glass-effect rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all <?php echo e(request('filtro_estado') == 'vencidos' ? 'ring-2 ring-purple-500' : ''); ?>">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-purple-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">Vencidos</p>
                        <h4 class="text-2xl font-bold text-gray-900"><?php echo e($stats['vencidos'] ?? 0); ?></h4>
                    </div>
                </div>
            </a>

            
            <a href="<?php echo e(route('proveedores.productos.index', ['proveedor' => $proveedor->id, 'filtro_estado' => 'bajo_stock'])); ?>" 
               class="glass-effect rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all <?php echo e(request('filtro_estado') == 'bajo_stock' ? 'ring-2 ring-red-500' : ''); ?>">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-red-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-arrow-down text-red-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">Bajo Stock</p>
                        <h4 class="text-2xl font-bold text-gray-900"><?php echo e($stats['bajo_stock']); ?></h4>
                    </div>
                </div>
            </a>

            
            <a href="<?php echo e(route('ingresos.deleted', $proveedor->id)); ?>" 
               class="glass-effect rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all">
                <div class="flex items-center gap-3">
                    <div class="w-14 h-14 bg-gray-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-trash text-gray-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">Eliminados</p>
                        <h4 class="text-2xl font-bold text-gray-900"><?php echo e($stats['eliminados'] ?? 0); ?></h4>
                    </div>
                </div>
            </a>
        </div>

        
        <div class="glass-effect rounded-2xl p-6 shadow-lg">
            <form method="GET" action="<?php echo e(route('proveedores.productos.index', $proveedor->id)); ?>" class="space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pb-4 border-b border-gray-200">
                    <h3 class="text-xl font-bold text-gray-900"><i class="fas fa-filter mr-2"></i>Filtrar lotes</h3>
                    <a href="<?php echo e(route('proveedores.productos.index', $proveedor->id)); ?>" 
                       class="inline-flex items-center gap-2 px-4 py-2 bg-red-50 text-red-600 font-bold rounded-xl border-2 border-red-200 hover:bg-red-100 transition-all">
                        <i class="fas fa-redo"></i>
                        Limpiar Filtros
                    </a>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    <?php if(request('filtro_estado')): ?>
                        <input type="hidden" name="filtro_estado" value="<?php echo e(request('filtro_estado')); ?>">
                    <?php endif; ?>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Nombre del lote</label>
                        <input type="text" 
                               name="nombre_producto" 
                               value="<?php echo e(request('nombre_producto')); ?>"
                               placeholder="Buscar por nombre..."
                               class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all outline-none">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Código de Lote</label>
                        <input type="text" 
                               name="codigo_lote" 
                               value="<?php echo e(request('codigo_lote')); ?>"
                               placeholder="Ej: LOTE-001"
                               class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all outline-none">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Período</label>
                        <select name="filtro_periodo" class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all outline-none">
                            <option value="">Todos los períodos</option>
                            <option value="esta_semana" <?php echo e(request('filtro_periodo') === 'esta_semana' ? 'selected' : ''); ?>>Esta Semana</option>
                            <option value="este_mes" <?php echo e(request('filtro_periodo') === 'este_mes' ? 'selected' : ''); ?>>Este Mes</option>
                            <option value="hace_2_meses" <?php echo e(request('filtro_periodo') === 'hace_2_meses' ? 'selected' : ''); ?>>Últimos 2 Meses</option>
                            <option value="hace_3_meses" <?php echo e(request('filtro_periodo') === 'hace_3_meses' ? 'selected' : ''); ?>>Últimos 3 Meses</option>
                            <option value="hace_1_año" <?php echo e(request('filtro_periodo') === 'hace_1_año' ? 'selected' : ''); ?>>Último Año</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Fecha Inicio</label>
                        <input type="date" 
                               name="fecha_inicio" 
                               value="<?php echo e(request('fecha_inicio')); ?>"
                               class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all outline-none">
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Fecha Fin</label>
                        <input type="date" 
                               name="fecha_fin" 
                               value="<?php echo e(request('fecha_fin')); ?>"
                               class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all outline-none">
                    </div>

                    <div class="flex items-end">
                        <button type="submit" class="w-full py-3 px-4 accent-gradient text-white font-bold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all">
                            <i class="fas fa-search mr-2"></i>Filtrar
                        </button>
                    </div>
                </div>
            </form>
        </div>

        
        <div class="space-y-4">
            <?php $__empty_1 = true; $__currentLoopData = $ingresos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ingreso): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="product-card glass-effect rounded-2xl p-6 shadow-lg border border-primary-100">
                    <div class="flex flex-col lg:flex-row gap-6">
                        
                        
                        <div class="flex-1">
                            <div class="flex items-center gap-3 pb-4 border-b border-gray-200 mb-4">
                                <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center">
                                    <i class="fas fa-box text-primary-600 text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-bold text-gray-900"><?php echo e($ingreso->nombre_producto); ?></h3>
                                    <div class="flex flex-wrap gap-2 mt-1">
                                        <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded-lg">
                                            <i class="fas fa-layer-group mr-1"></i><?php echo e($ingreso->total_lotes); ?> <?php echo e($ingreso->total_lotes === 1 ? 'Lote' : 'Lotes'); ?>

                                        </span>
                                        <?php if($ingreso->reabastecido): ?>
                                            <span class="text-xs font-bold bg-accent-100 text-accent-700 px-2 py-1 rounded-lg">
                                                <i class="fas fa-sync-alt mr-1"></i>Reabastecido
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                                <div>
                                    <p class="text-xs font-bold text-gray-500 uppercase mb-1">Stock Inicial</p>
                                    <p class="text-base font-semibold text-gray-900"><?php echo e(number_format($ingreso->cantidad_inicial, 0, ',', '.')); ?> <?php echo e($ingreso->unidad_medida); ?></p>
                                </div>

                                <div>
                                    <p class="text-xs font-bold text-gray-500 uppercase mb-1">Stock Total</p>
                                    <p class="text-base font-semibold <?php echo e($ingreso->tiene_bajo_stock ? 'text-red-600' : 'text-accent-600'); ?>">
                                        <?php echo e(number_format($ingreso->cantidad_restante, 0, ',', '.')); ?> <?php echo e($ingreso->unidad_medida); ?>

                                        <?php if($ingreso->tiene_bajo_stock): ?>
                                            <span class="ml-2 px-2 py-0.5 text-[10px] bg-red-100 text-red-600 rounded-full font-bold uppercase animate-pulse">Atención</span>
                                        <?php endif; ?>
                                    </p>
                                </div>

                                <div>
                                    <p class="text-xs font-bold text-gray-500 uppercase mb-1">Costo Total</p>
                                    <p class="text-base font-semibold text-gray-900">Bs <?php echo e(number_format($ingreso->costo_total, 2, ',', '.')); ?></p>
                                </div>

                                <div>
                                    <p class="text-xs font-bold text-gray-500 uppercase mb-1">Stock Mínimo</p>
                                    <p class="text-base font-semibold text-yellow-600"><?php echo e(number_format($ingreso->stock_minimo, 0, ',', '.')); ?> <?php echo e($ingreso->unidad_medida); ?></p>
                                </div>

                                <div>
                                    <p class="text-xs font-bold text-gray-500 uppercase mb-1">Fecha Ingreso</p>
                                    <p class="text-base font-semibold text-gray-900"><?php echo e($ingreso->fecha_ingreso->format('d/m/Y')); ?></p>
                                </div>

                                <div>
                                    <p class="text-xs font-bold text-gray-500 uppercase mb-1">Fecha Vencimiento</p>
                                    <p class="text-base font-semibold text-gray-900">
                                        <?php if($ingreso->fecha_vencimiento_lote): ?>
                                            <?php echo e($ingreso->fecha_vencimiento_lote->format('d/m/Y')); ?>

                                        <?php else: ?>
                                            <span class="text-gray-400">Sin especificar</span>
                                        <?php endif; ?>
                                    </p>
                                </div>
                            </div>

                            <?php if($ingreso->tiene_bajo_stock): ?>
                                <div class="mt-4 flex flex-col sm:flex-row items-center justify-between p-4 bg-red-50 rounded-2xl border border-red-100 gap-4">
                                    <div class="flex items-center gap-3 text-red-700">
                                        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                                            <i class="fas fa-exclamation-triangle text-2xl animate-pulse"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-bold">íAtención! Este producto necesita reabastecimiento</p>
                                            <p class="text-xs opacity-80">El stock actual ha alcanzado o superado el límite mínimo.</p>
                                        </div>
                                    </div>
                                    <a href="<?php echo e(route('ingresos.create', ['proveedor_id' => $proveedor->id, 'nombre_producto' => $ingreso->nombre_producto])); ?>" 
                                       class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white font-bold rounded-xl shadow-lg hover:bg-red-700 hover:shadow-xl transition-all">
                                        <i class="fas fa-plus"></i>
                                        Agregar nuevo stock
                                    </a>
                                </div>
                            <?php endif; ?>

                            <?php if($ingreso->recomendar_cambio_precio): ?>
                                <div class="mt-4 p-4 bg-amber-50 rounded-2xl border border-amber-100 flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
                                        <i class="fas fa-lightbulb text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold text-amber-800">Recomendación de Precio</p>
                                        <p class="text-xs text-amber-700">Se recomienda modificar el precio de venta (Costo del último stock: Bs <?php echo e(number_format($ingreso->costo_reabastecimiento, 2)); ?>)</p>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>

                        
                        <div class="flex flex-col gap-3 lg:w-48 lg:border-l lg:border-gray-200 lg:pl-6">
                            <a href="<?php echo e(route('ingresos.edit', $ingreso->id)); ?>" 
                               class="w-full py-3 px-4 gradient-bg text-white font-bold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all text-center">
                                <i class="fas fa-edit mr-2"></i>Editar
                            </a>

                            <a href="<?php echo e(route('ingresos.show', $ingreso->id)); ?>" 
                               class="w-full py-3 px-4 bg-blue-500 text-white font-bold rounded-xl shadow-lg hover:bg-blue-600 hover:shadow-xl transform hover:-translate-y-1 transition-all text-center">
                                <i class="fas fa-layer-group mr-2"></i>Ver Lotes
                            </a>

                            <?php if($ingreso->productoDetalle): ?>
                                <button type="button" 
                                        class="w-full py-3 px-4 accent-gradient text-white font-bold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all"
                                        onclick="openProductModal('<?php echo e($ingreso->productoDetalle->id); ?>',
                                                                '<?php echo e($ingreso->productoDetalle->nombre); ?>', 
                                                                '<?php echo e($ingreso->productoDetalle->codigo ?? 'Sin código'); ?>',
                                                                '<?php echo e($ingreso->productoDetalle->categoria->nombre ?? 'N/A'); ?>',
                                                                '<?php echo e($ingreso->productoDetalle->subcategoria->nombre ?? 'N/A'); ?>',
                                                                '<?php echo e(number_format($ingreso->productoDetalle->precio_venta_unitario, 2)); ?>',
                                                                '<?php echo e($ingreso->productoDetalle->imagen_url); ?>')">
                                    <i class="fas fa-eye mr-2"></i>Ver Producto
                                </button>
                            <?php else: ?>
                                <a href="<?php echo e(route('productos.create', ['ingreso_id' => $ingreso->id])); ?>" 
                                   class="w-full py-3 px-4 accent-gradient text-white font-bold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all text-center">
                                    <i class="fas fa-plus mr-2"></i>Crear producto
                                </a>
                            <?php endif; ?>
                        
                            <a href="<?php echo e(route('ingresos.create', ['proveedor_id' => $proveedor->id, 'nombre_producto' => $ingreso->nombre_producto])); ?>" 
                               class="w-full py-3 px-4 bg-purple-600 text-white font-bold rounded-xl shadow-lg hover:bg-purple-700 hover:shadow-xl transform hover:-translate-y-1 transition-all text-center">
                                <i class="fas fa-plus mr-2"></i>Reestock
                            </a>

                            <form action="<?php echo e(route('ingresos.destroy', $ingreso->id)); ?>" method="POST" class="w-full" 
                                  onsubmit="return confirm('¿Estás seguro de que quieres eliminar este ingreso?');">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('DELETE'); ?>
                                <button type="submit" class="w-full py-3 px-4 bg-red-500 text-white font-bold rounded-xl shadow-lg hover:bg-red-600 hover:shadow-xl transform hover:-translate-y-1 transition-all">
                                    <i class="fas fa-trash mr-2"></i>Eliminar
                                </button>
                            </form>
                        </div>

                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="glass-effect rounded-2xl p-16 text-center shadow-lg">
                    <div class="w-24 h-24 bg-gradient-to-br from-primary-100 to-primary-200 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-inbox text-primary-500 text-4xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-2">No hay productos registrados</h3>
                    <p class="text-gray-500 mb-6">Este proveedor aún no tiene ingresos de productos</p>
                    <a href="<?php echo e(route('ingresos.create')); ?>?proveedor_id=<?php echo e($proveedor->id); ?>" 
                       class="inline-flex items-center gap-2 px-6 py-3 gradient-bg text-white font-bold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all">
                        <i class="fas fa-plus"></i>
                        Registrar Primer Producto
                    </a>
                </div>
            <?php endif; ?>
        </div>

    </div>
</div>


<div id="productModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeProductModal()"></div>

        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                Detalle del Producto
                            </h3>
                            <button type="button" onclick="closeProductModal()" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                                <i class="fas fa-times text-xl"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="flex justify-center mb-6">
                                <div id="modal-image-container" class="relative w-48 h-48 rounded-lg overflow-hidden bg-gray-100 border border-gray-200">
                                    <img id="modal-image" src="" alt="Producto" class="w-full h-full object-cover">
                                    <div id="modal-no-image" class="absolute inset-0 flex items-center justify-center text-gray-400">
                                        <i class="fas fa-image text-6xl"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Nombre</p>
                                    <p id="modal-nombre" class="mt-1 text-sm text-gray-900 font-semibold"></p>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Código</p>
                                    <p id="modal-codigo" class="mt-1 text-sm text-gray-900 font-mono"></p>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Categoría</p>
                                    <p id="modal-categoria" class="mt-1 text-sm text-gray-900"></p>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Subcategoría</p>
                                    <p id="modal-subcategoria" class="mt-1 text-sm text-gray-900"></p>
                                </div>
                                <div class="col-span-2">
                                    <p class="text-sm font-medium text-gray-500">Precio de Venta</p>
                                    <p id="modal-precio" class="mt-1 text-xl text-accent-600 font-bold"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
                <button type="button" 
                        class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none sm:w-auto sm:text-sm"
                        onclick="closeProductModal()">
                    Cerrar
                </button>
                <a id="modal-edit-btn" href="#"
                   class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none sm:w-auto sm:text-sm">
                   <i class="fas fa-edit mr-2"></i>Editar
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    function openProductModal(id, nombre, codigo, categoria, subcategoria, precio, imageUrl) {
        const editBtn = document.getElementById('modal-edit-btn');
        editBtn.href = "<?php echo e(url('/productos')); ?>/" + id + "/editar";
        document.getElementById('modal-nombre').textContent = nombre;
        document.getElementById('modal-codigo').textContent = codigo;
        document.getElementById('modal-categoria').textContent = categoria;
        document.getElementById('modal-subcategoria').textContent = subcategoria;
        document.getElementById('modal-precio').textContent = 'Bs ' + precio;
        
        const imgElement = document.getElementById('modal-image');
        const noImageElement = document.getElementById('modal-no-image');
        
        if (imageUrl) {
            imgElement.src = imageUrl;
            imgElement.classList.remove('hidden');
            noImageElement.classList.add('hidden');
        } else {
            imgElement.classList.add('hidden');
            noImageElement.classList.remove('hidden');
        }
        
        const modal = document.getElementById('productModal');
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeProductModal() {
        const modal = document.getElementById('productModal');
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeProductModal();
        }
    });
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/donjavie/public_html/minimarket/resources/views/administrador/proveedores/productos/index.blade.php ENDPATH**/ ?>