{% extends "base.html" %}

{% block title %}Gestión de Eventos - 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;
    }
    
    .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;
    }
    
    .badge-secondary {
        background: #e5e7eb;
        color: #374151;
    }
    
    .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;
    }
    
    .evento-descripcion {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</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') }}">📦 Productos</a>
        <a href="{{ url_for('admin.manage_eventos') }}" class="active">📅 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 Eventos</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 eventos por título, empresa o ubicación..." 
                   onkeyup="filterTable()">
        </div>

        <!-- Tabla de Eventos -->
        <div class="table-responsive">
            <table class="table table-hover" id="eventosTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Título</th>
                        <th>Empresa</th>
                        <th>Descripción</th>
                        <th>Fecha Inicio</th>
                        <th>Fecha Fin</th>
                        <th>Ubicación</th>
                        <th>Estado</th>
                        <th>Fecha Creación</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% if eventos %}
                        {% for evento in eventos %}
                        <tr>
                            <td>{{ evento.EventoID }}</td>
                            <td><strong>{{ evento.Titulo }}</strong></td>
                            <td>{{ evento.EmpresaNombre or 'N/A' }}</td>
                            <td>
                                <div class="evento-descripcion" title="{{ evento.Descripcion or '' }}">
                                    {{ evento.Descripcion[:100] + '...' if evento.Descripcion and evento.Descripcion|length > 100 else evento.Descripcion or 'Sin descripción' }}
                                </div>
                            </td>
                            <td>
                                {% if evento.FechaInicio %}
                                    {{ evento.FechaInicio.strftime('%d/%m/%Y %H:%M') }}
                                    {% if evento.FechaInicio.date() < now.date() %}
                                        <span class="badge badge-secondary">Pasado</span>
                                    {% elif evento.FechaInicio.date() == now.date() %}
                                        <span class="badge badge-info">Hoy</span>
                                    {% else %}
                                        <span class="badge badge-success">Próximo</span>
                                    {% endif %}
                                {% else %}
                                    N/A
                                {% endif %}
                            </td>
                            <td>
                                {% if evento.FechaFin %}
                                    {{ evento.FechaFin.strftime('%d/%m/%Y %H:%M') }}
                                {% else %}
                                    N/A
                                {% endif %}
                            </td>
                            <td>{{ evento.Ubicacion or 'N/A' }}</td>
                            <td>
                                {% if evento.EsActivo %}
                                    <span class="badge badge-success">✓ Activo</span>
                                {% else %}
                                    <span class="badge badge-danger">✗ Inactivo</span>
                                {% endif %}
                            </td>
                            <td>{{ evento.FechaCreacion.strftime('%d/%m/%Y') if evento.FechaCreacion else 'N/A' }}</td>
                            <td>
                                <form method="POST" action="{{ url_for('admin.toggle_evento_status', evento_id=evento.EventoID) }}" 
                                      style="display: inline;">
                                    <button type="submit" class="btn btn-action btn-warning" 
                                            title="{{ 'Desactivar' if evento.EsActivo else 'Activar' }}">
                                        {{ '🔒' if evento.EsActivo else '🔓' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="10" class="text-center py-5">
                                <p class="text-muted mb-0">No hay eventos registrados</p>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

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

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