{% extends "base.html" %}

{% block title %}Gestión de Productos - Admin - TallArt{% endblock %}

{% block extra_css %}
<style>
    .admin-nav {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 1rem;
        margin-bottom: 2rem;
    }
    
    .admin-nav a {
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        transition: all 0.3s ease;
        text-decoration: none;
        color: #4b5563;
        font-weight: 500;
    }
    
    .admin-nav a:hover, .admin-nav a.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .table-container {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow-x: auto;
    }
    
    .producto-img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .badge {
        padding: 0.35rem 0.75rem;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    .badge-success {
        background: #d1fae5;
        color: #047857;
    }
    
    .badge-danger {
        background: #fee2e2;
        color: #b91c1c;
    }
    
    .badge-warning {
        background: #fef3c7;
        color: #92400e;
    }
    
    .badge-info {
        background: #dbeafe;
        color: #1e40af;
    }
    
    .btn-action {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.875rem;
        margin: 0.25rem;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-primary {
        background: #3b82f6;
        color: white;
    }
    
    .btn-primary:hover {
        background: #2563eb;
    }
    
    .btn-danger {
        background: #ef4444;
        color: white;
    }
    
    .btn-danger:hover {
        background: #dc2626;
    }
    
    .btn-warning {
        background: #f59e0b;
        color: white;
    }
    
    .btn-warning:hover {
        background: #d97706;
    }
    
    .search-box {
        margin-bottom: 1.5rem;
    }
    
    .search-box input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 1rem;
    }
    
    .search-box input:focus {
        outline: none;
        border-color: #667eea;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <!-- Navegación Admin -->
    <div class="admin-nav d-flex flex-wrap gap-2 mb-4">
        <a href="{{ url_for('admin.dashboard') }}"> Dashboard</a>
        <a href="{{ url_for('admin.manage_empresas') }}">🏢 Empresas</a>
        <a href="{{ url_for('admin.manage_productos') }}" class="active">📦 Productos</a>
        <a href="{{ url_for('admin.manage_eventos') }}">📅 Eventos</a>
        <a href="{{ url_for('admin.manage_users') }}">👥 Usuarios</a>
        <a href="{{ url_for('admin.manage_categorias') }}">🏷️ Categorías</a>
        <a href="{{ url_for('admin.manage_comentarios') }}">💬 Comentarios</a>
        <a href="{{ url_for('admin.view_alertas') }}">🔔 Alertas</a>
        <a href="{{ url_for('admin.view_logins') }}">🔐 Logins</a>
        <a href="{{ url_for('admin.view_auditoria') }}">📋 Auditoría</a>
    </div>

    <div class="table-container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">📦 Gestión de Productos</h2>
            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">← Volver al Sitio</a>
        </div>

        <!-- Búsqueda -->
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="🔍 Buscar productos por nombre, empresa o categoría..." 
                   onkeyup="filterTable()">
        </div>

        <!-- Tabla de Productos -->
        <div class="table-responsive">
            <table class="table table-hover" id="productosTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Imagen</th>
                        <th>Nombre</th>
                        <th>Empresa</th>
                        <th>Categoría</th>
                        <th>Precio</th>
                        <th>Stock</th>
                        <th>Estado</th>
                        <th>Destacado</th>
                        <th>Fecha</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% if productos %}
                        {% for producto in productos %}
                        <tr>
                            <td>{{ producto.ProductoID }}</td>
                            <td>
                                {% if producto.ImagenURL %}
                                    <img src="{{ url_for('static', filename='uploads/' + producto.ImagenURL) }}" 
                                         alt="{{ producto.Nombre }}" class="producto-img">
                                {% else %}
                                    <div class="producto-img bg-secondary d-flex align-items-center justify-content-center">
                                        <i class="bi bi-box"></i>
                                    </div>
                                {% endif %}
                            </td>
                            <td><strong>{{ producto.Nombre }}</strong></td>
                            <td>{{ producto.EmpresaNombre or 'N/A' }}</td>
                            <td>{{ producto.CategoriaNombre or 'Sin categoría' }}</td>
                            <td><strong>${{ "%.2f"|format(producto.Precio) }}</strong></td>
                            <td>
                                {% if producto.Stock > 10 %}
                                    <span class="badge badge-success">{{ producto.Stock }}</span>
                                {% elif producto.Stock > 0 %}
                                    <span class="badge badge-warning">{{ producto.Stock }}</span>
                                {% else %}
                                    <span class="badge badge-danger">Agotado</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if producto.EsActivo %}
                                    <span class="badge badge-success">✓ Activo</span>
                                {% else %}
                                    <span class="badge badge-danger">✗ Inactivo</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if producto.EsDestacado %}
                                    <span class="badge badge-info">⭐ Destacado</span>
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>{{ producto.FechaCreacion.strftime('%d/%m/%Y') if producto.FechaCreacion else 'N/A' }}</td>
                            <td>
                                <form method="POST" action="{{ url_for('admin.toggle_producto_status', producto_id=producto.ProductoID) }}" 
                                      style="display: inline;">
                                    <button type="submit" class="btn btn-action btn-warning" 
                                            title="{{ 'Desactivar' if producto.EsActivo else 'Activar' }}">
                                        {{ '🔒' if producto.EsActivo else '🔓' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="11" class="text-center py-5">
                                <p class="text-muted mb-0">No hay productos registrados</p>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            <p class="text-muted">Total: <strong>{{ productos|length }}</strong> productos</p>
        </div>
    </div>
</div>

<script>
function filterTable() {
    const input = document.getElementById('searchInput');
    const filter = input.value.toUpperCase();
    const table = document.getElementById('productosTable');
    const tr = table.getElementsByTagName('tr');

    for (let i = 1; i < tr.length; i++) {
        let td = tr[i].getElementsByTagName('td');
        let txtValue = '';
        
        for (let j = 0; j < td.length; j++) {
            if (td[j]) {
                txtValue += td[j].textContent || td[j].innerText;
            }
        }
        
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = '';
        } else {
            tr[i].style.display = 'none';
        }
    }
}
</script>
{% endblock %}