{% extends "base.html" %}

{% block title %}Gestión de Empresas - 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;
    }
    
    .empresa-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;
    }
    
    .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') }}" class="active">🏢 Empresas</a>
        <a href="{{ url_for('admin.manage_productos') }}">📦 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 Empresas</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 empresas por nombre, ubicación o especialidad..." 
                   onkeyup="filterTable()">
        </div>

        <!-- Tabla de Empresas -->
        <div class="table-responsive">
            <table class="table table-hover" id="empresasTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Logo</th>
                        <th>Nombre</th>
                        <th>Categoría</th>
                        <th>Ubicación</th>
                        <th>Especialidad</th>
                        <th>Estado</th>
                        <th>Calificación</th>
                        <th>Fecha Registro</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% if empresas %}
                        {% for empresa in empresas %}
                        <tr>
                            <td>{{ empresa.EmpresaID }}</td>
                            <td>
                                {% if empresa.Logo %}
                                    <img src="{{ url_for('static', filename='uploads/' + empresa.Logo) }}" 
                                         alt="{{ empresa.Nombre }}" class="empresa-img">
                                {% else %}
                                    <div class="empresa-img bg-secondary d-flex align-items-center justify-content-center">
                                        <i class="bi bi-building"></i>
                                    </div>
                                {% endif %}
                            </td>
                            <td><strong>{{ empresa.Nombre }}</strong></td>
                            <td>{{ empresa.CategoriaNombre or 'Sin categoría' }}</td>
                            <td>{{ empresa.Ubicacion or 'N/A' }}</td>
                            <td>{{ empresa.Especialidad or 'N/A' }}</td>
                            <td>
                                {% if empresa.EsActiva %}
                                    <span class="badge badge-success">✓ Activa</span>
                                {% else %}
                                    <span class="badge badge-danger">✗ Inactiva</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if empresa.CalificacionPromedio %}
                                    ⭐ {{ "%.1f"|format(empresa.CalificacionPromedio) }}
                                {% else %}
                                    Sin calificaciones
                                {% endif %}
                            </td>
                            <td>{{ empresa.FechaCreacion.strftime('%d/%m/%Y') if empresa.FechaCreacion else 'N/A' }}</td>
                            <td>
                                <a href="{{ url_for('main.empresa', slug=empresa.Slug) }}" 
                                   class="btn btn-action btn-primary" target="_blank" title="Ver">
                                    👁️
                                </a>
                                <form method="POST" action="{{ url_for('admin.toggle_empresa_status', empresa_id=empresa.EmpresaID) }}" 
                                      style="display: inline;">
                                    <button type="submit" class="btn btn-action btn-warning" 
                                            title="{{ 'Desactivar' if empresa.EsActiva else 'Activar' }}">
                                        {{ '🔒' if empresa.EsActiva else '🔓' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="10" class="text-center py-5">
                                <p class="text-muted mb-0">No hay empresas registradas</p>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

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

<script>
function filterTable() {
    const input = document.getElementById('searchInput');
    const filter = input.value.toUpperCase();
    const table = document.getElementById('empresasTable');
    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 %}