{% extends 'layouts/base.html' %}

{% block title %}Catálogo y Categorías{% endblock %}

{% block content %}
<div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Catálogo de Productos y Categorías</h1>
        <p class="text-gray-500">Gestiona tus servicios de streaming e IA, definiendo cómo la IA debe responder a tus clientes.</p>
    </div>
    <div class="flex gap-2">
        <button onclick="toggleModal('modalCategoria')" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg font-medium shadow-sm flex items-center transition-colors text-sm">
            <i class="ph ph-folder-plus mr-2 text-lg"></i> Nueva Categoría
        </button>
        <button onclick="toggleModal('modalProducto')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium shadow-sm flex items-center transition-colors text-sm">
            <i class="ph ph-plus-circle mr-2 text-lg"></i> Nuevo Producto
        </button>
    </div>
</div>

<!-- Tabla de Productos Organizados -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
        <h2 class="text-lg font-semibold text-gray-800">Productos Registrados</h2>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-white border-b border-gray-100 text-xs text-gray-500 uppercase tracking-wider">
                    <th class="px-6 py-4 font-semibold">Producto</th>
                    <th class="px-6 py-4 font-semibold">Categoría</th>
                    <th class="px-6 py-4 font-semibold">Mecánica / Tipo</th>
                    <th class="px-6 py-4 font-semibold">Precios (Cli / Rev)</th>
                    <th class="px-6 py-4 font-semibold text-center">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% if productos %}
                    {% for prod in productos %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 font-bold text-gray-900">{{ prod.nombre }}</td>
                        <td class="px-6 py-4">
                            <span class="bg-gray-100 text-gray-700 px-2.5 py-1 rounded-md text-xs font-semibold">
                                {{ prod.categoria.nombre if prod.categoria else 'Sin Categoría' }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 uppercase">
                                {{ prod.tipo_entrega | replace('_', ' ') }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <!-- NUEVA VISTA DE 4 PRECIOS -->
                            <div class="text-xs mb-1">
                                <span class="text-gray-500 font-semibold mr-1">Cta:</span>
                                <span class="text-green-600 font-bold">S/ {{ "%.2f"|format(prod.precio_cuenta_cliente or 0) }}</span> 
                                <span class="text-gray-400 mx-1">|</span> 
                                <span class="text-blue-600 font-bold">S/ {{ "%.2f"|format(prod.precio_cuenta_revendedor or 0) }}</span>
                            </div>
                            <div class="text-xs">
                                <span class="text-gray-500 font-semibold mr-1">Perf:</span>
                                <span class="text-green-600 font-bold">S/ {{ "%.2f"|format(prod.precio_perfil_cliente or 0) }}</span> 
                                <span class="text-gray-400 mx-1">|</span> 
                                <span class="text-blue-600 font-bold">S/ {{ "%.2f"|format(prod.precio_perfil_revendedor or 0) }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <!-- BOTÓN DE EDITAR ACTUALIZADO -->
                            <button type="button" onclick="abrirEditarProducto(this)" 
                                    data-id="{{ prod.id }}" 
                                    data-nombre="{{ prod.nombre }}" 
                                    data-categoria="{{ prod.categoria_id }}" 
                                    data-tipo="{{ prod.tipo_entrega }}" 
                                    data-pcc="{{ prod.precio_cuenta_cliente or '0.00' }}" 
                                    data-pcr="{{ prod.precio_cuenta_revendedor or '0.00' }}" 
                                    data-ppc="{{ prod.precio_perfil_cliente or '0.00' }}" 
                                    data-ppr="{{ prod.precio_perfil_revendedor or '0.00' }}" 
                                    data-descc="{{ prod.descripcion_cuenta or '' }}" 
                                    data-descp="{{ prod.descripcion_perfil or '' }}" 
                                    class="text-blue-500 hover:text-blue-700 mr-2" title="Editar Producto">
                                <i class="ph ph-pencil-simple text-lg"></i>
                            </button>
                            <button class="text-red-500 hover:text-red-700"><i class="ph ph-trash text-lg"></i></button>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" class="px-6 py-10 text-center text-gray-500">
                            <i class="ph ph-package text-4xl mb-2 text-gray-300"></i>
                            <p>No hay productos registrados en el catálogo.</p>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal: Nueva Categoría -->
<div id="modalCategoria" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="text-lg font-bold text-gray-900">Registrar Categoría</h3>
            <button onclick="toggleModal('modalCategoria')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        <form action="{{ url_for('inventario.catalogo') }}" method="POST" class="p-6">
            <input type="hidden" name="tipo_form" value="categoria">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre (Ej. Streaming, Herramientas IA)</label>
                <input type="text" name="nombre_categoria" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div class="flex justify-end gap-3 border-t border-gray-100 pt-4">
                <button type="button" onclick="toggleModal('modalCategoria')" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md text-sm">Cancelar</button>
                <button type="submit" class="px-4 py-2 text-white bg-gray-900 hover:bg-black rounded-md text-sm font-medium">Guardar Categoría</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Nuevo Producto -->
<div id="modalProducto" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl overflow-hidden max-h-[90vh] flex flex-col">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center shrink-0">
            <h3 class="text-lg font-bold text-gray-900">Registrar Producto</h3>
            <button onclick="toggleModal('modalProducto')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        
        <form action="{{ url_for('inventario.catalogo') }}" method="POST" class="overflow-y-auto p-6 flex-grow">
            <input type="hidden" name="tipo_form" value="producto">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nombre del Producto</label>
                    <input type="text" name="nombre_producto" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="Ej. Netflix, ChatGPT Plus">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Categoría</label>
                    <select name="categoria_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="" disabled selected>Selecciona categoría...</option>
                        {% for cat in categorias %}
                            <option value="{{ cat.id }}">{{ cat.nombre }}</option>
                        {% endfor %}
                    </select>
                    {% if not categorias %}
                        <p class="text-xs text-red-500 mt-1">Crea primero una categoría.</p>
                    {% endif %}
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Mecánica de Entrega del Bot</label>
                <select name="tipo_entrega" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="perfil">Perfil con PIN (Streaming)</option>
                    <option value="cuenta_completa">Cuenta Completa (Acceso total)</option>
                    <option value="invitacion_correo">Invitación por Correo (Canva, Gemini)</option>
                    <option value="activacion_codigo">Activación por Código (ChatGPT u otros)</option>
                </select>
            </div>

            <!-- === ESTRUCTURA DE 4 PRECIOS (NUEVO) === -->
            <div class="mb-4 bg-gray-50 p-4 rounded-lg border border-gray-100">
                <h4 class="text-sm font-bold text-gray-800 mb-3"><i class="ph ph-tag"></i> Precios de Venta (S/)</h4>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Cuenta Completa (Cliente Final)</label>
                        <input type="number" step="0.01" name="precio_cuenta_cliente" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm" placeholder="Ej. 30.00" value="0.00">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Cuenta Completa (Revendedor)</label>
                        <input type="number" step="0.01" name="precio_cuenta_revendedor" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm" placeholder="Ej. 22.00" value="0.00">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Perfil Individual (Cliente Final)</label>
                        <input type="number" step="0.01" name="precio_perfil_cliente" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm" placeholder="Ej. 9.00" value="0.00">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Perfil Individual (Revendedor)</label>
                        <input type="number" step="0.01" name="precio_perfil_revendedor" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm" placeholder="Ej. 7.00" value="0.00">
                    </div>
                </div>
                <p class="text-xs text-gray-500 mt-2">Pon 0.00 si no ofreces alguna modalidad para este producto.</p>
            </div>

            <!-- === DESCRIPCIÓN IA === -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 bg-indigo-50 p-4 rounded-lg border border-indigo-100">
                <div class="md:col-span-2">
                    <h4 class="text-sm font-bold text-indigo-900 mb-1"><i class="ph ph-robot"></i> Instrucciones para el Bot (IA)</h4>
                    <p class="text-xs text-indigo-700 mb-3">Define cómo la IA debe explicar y vender este producto según lo que el cliente solicite.</p>
                </div>
                <div>
                    <label class="block text-xs font-bold text-indigo-800 mb-1">Prompt: Venta de Cuenta Completa</label>
                    <textarea name="descripcion_cuenta" rows="3" class="w-full px-3 py-2 border border-indigo-200 rounded-md focus:ring-indigo-500 text-xs shadow-sm" placeholder="Ej. Es una cuenta completa..."></textarea>
                </div>
                <div>
                    <label class="block text-xs font-bold text-indigo-800 mb-1">Prompt: Venta de Perfil Individual</label>
                    <textarea name="descripcion_perfil" rows="3" class="w-full px-3 py-2 border border-indigo-200 rounded-md focus:ring-indigo-500 text-xs shadow-sm" placeholder="Ej. Es un perfil individual dentro de una cuenta compartida..."></textarea>
                </div>
            </div>

            <div class="flex justify-end gap-3 border-t border-gray-100 pt-4 shrink-0">
                <button type="button" onclick="toggleModal('modalProducto')" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md text-sm">Cancelar</button>
                <button type="submit" class="px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium">Guardar Producto</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Editar Producto -->
<div id="modalEditarProducto" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl overflow-hidden max-h-[90vh] flex flex-col">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center shrink-0">
            <h3 class="text-lg font-bold text-gray-900">Editar Producto</h3>
            <button onclick="toggleModal('modalEditarProducto')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        
        <form action="{{ url_for('inventario.catalogo') }}" method="POST" class="overflow-y-auto p-6 flex-grow">
            <input type="hidden" name="tipo_form" value="editar_producto">
            <input type="hidden" name="producto_id" id="edit_producto_id">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nombre del Producto</label>
                    <input type="text" name="nombre_producto" id="edit_nombre_producto" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Categoría</label>
                    <select name="categoria_id" id="edit_categoria_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                        {% for cat in categorias %}
                            <option value="{{ cat.id }}">{{ cat.nombre }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Mecánica de Entrega del Bot</label>
                <select name="tipo_entrega" id="edit_tipo_entrega" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                    <option value="perfil">Perfil con PIN (Streaming)</option>
                    <option value="cuenta_completa">Cuenta Completa (Acceso total)</option>
                    <option value="invitacion_correo">Invitación por Correo (Canva, Gemini)</option>
                    <option value="activacion_codigo">Activación por Código (ChatGPT u otros)</option>
                </select>
            </div>

            <!-- === ESTRUCTURA DE 4 PRECIOS (EDITAR) === -->
            <div class="mb-4 bg-gray-50 p-4 rounded-lg border border-gray-100">
                <h4 class="text-sm font-bold text-gray-800 mb-3"><i class="ph ph-tag"></i> Precios de Venta (S/)</h4>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Cuenta Completa (Cliente Final)</label>
                        <input type="number" step="0.01" name="precio_cuenta_cliente" id="edit_precio_cuenta_cliente" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Cuenta Completa (Revendedor)</label>
                        <input type="number" step="0.01" name="precio_cuenta_revendedor" id="edit_precio_cuenta_revendedor" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Perfil Individual (Cliente Final)</label>
                        <input type="number" step="0.01" name="precio_perfil_cliente" id="edit_precio_perfil_cliente" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Perfil Individual (Revendedor)</label>
                        <input type="number" step="0.01" name="precio_perfil_revendedor" id="edit_precio_perfil_revendedor" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                    </div>
                </div>
                <p class="text-xs text-gray-500 mt-2">Pon 0.00 si no ofreces alguna modalidad para este producto.</p>
            </div>

            <!-- === DESCRIPCIÓN IA (EDITAR) === -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 bg-indigo-50 p-4 rounded-lg border border-indigo-100">
                <div>
                    <label class="block text-xs font-bold text-indigo-800 mb-1">Prompt: Venta de Cuenta Completa</label>
                    <textarea name="descripcion_cuenta" id="edit_descripcion_cuenta" rows="3" class="w-full px-3 py-2 border border-indigo-200 rounded-md focus:ring-indigo-500 text-xs"></textarea>
                </div>
                <div>
                    <label class="block text-xs font-bold text-indigo-800 mb-1">Prompt: Venta de Perfil Individual</label>
                    <textarea name="descripcion_perfil" id="edit_descripcion_perfil" rows="3" class="w-full px-3 py-2 border border-indigo-200 rounded-md focus:ring-indigo-500 text-xs"></textarea>
                </div>
            </div>

            <div class="flex justify-end gap-3 border-t border-gray-100 pt-4">
                <button type="button" onclick="toggleModal('modalEditarProducto')" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md text-sm">Cancelar</button>
                <button type="submit" class="px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium">Actualizar Producto</button>
            </div>
        </form>
    </div>
</div>

<script>
    function toggleModal(modalID) {
        document.getElementById(modalID).classList.toggle('hidden');
    }

    function abrirEditarProducto(btn) {
        document.getElementById('edit_producto_id').value = btn.dataset.id;
        document.getElementById('edit_nombre_producto').value = btn.dataset.nombre;
        document.getElementById('edit_categoria_id').value = btn.dataset.categoria;
        document.getElementById('edit_tipo_entrega').value = btn.dataset.tipo;
        
        // 4 Campos de Precios
        document.getElementById('edit_precio_cuenta_cliente').value = btn.dataset.pcc;
        document.getElementById('edit_precio_cuenta_revendedor').value = btn.dataset.pcr;
        document.getElementById('edit_precio_perfil_cliente').value = btn.dataset.ppc;
        document.getElementById('edit_precio_perfil_revendedor').value = btn.dataset.ppr;
        
        // Descripciones IA
        document.getElementById('edit_descripcion_cuenta').value = btn.dataset.descc;
        document.getElementById('edit_descripcion_perfil').value = btn.dataset.descp;
        
        toggleModal('modalEditarProducto');
    }
</script>
{% endblock %}