{% extends "admin/layout.twig" %}

{% block title %}Administração - Painel Principal{% endblock %}

{% block header_title %}Painel Principal{% endblock %}

{% block extra_css %}
        .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
        .stat-card { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; border-top: 4px solid #3498db; }
        .stat-card.success { border-top-color: #27ae60; }
        .stat-card.warning { border-top-color: #f1c40f; }
        .stat-card.info { border-top-color: #9b59b6; }
        
        .stat-title { color: #666; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        .stat-value { font-size: 2.5em; font-weight: bold; color: #333; margin: 0; }
{% endblock %}

{% block content %}
        <div class="dashboard-grid">
            <div class="stat-card">
                <div class="stat-title">Usuários Registrados</div>
                <div class="stat-value">{{ stats.total_users }}</div>
            </div>
            
            <div class="stat-card info">
                <div class="stat-title">Eventos Ativos</div>
                <div class="stat-value">{{ stats.total_events }}</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-title">Ingressos Vendidos</div>
                <div class="stat-value">{{ stats.total_tickets_sold }}</div>
            </div>
            
            <div class="stat-card warning">
                <div class="stat-title">Pedidos Pendentes</div>
                <div class="stat-value">{{ stats.pending_orders }}</div>
            </div>
        </div>

        <h2 style="margin-top: 40px; color: #333; border-bottom: 2px solid #3498db; padding-bottom: 10px;">Eventos Ativos</h2>
        
        <div class="content-container" style="padding: 0; overflow: hidden;">
            {% if activeEvents is empty %}
                <p style="padding: 20px; color: #666;">Nenhum evento ativo no momento.</p>
            {% else %}
                <table style="margin-top: 0; border-bottom: none;">
                    <thead>
                        <tr>
                            <th>Evento</th>
                            <th>Data/Hora</th>
                            <th>Local</th>
                            <th>Ingressos (Vendidos / Disp.)</th>
                            <th class="actions">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for event in activeEvents %}
                            <tr>
                                <td><strong>{{ event.title }}</strong></td>
                                <td>
                                    {% if event.event_date %}
                                        {{ event.event_date|date('d/m/Y H:i') }}
                                    {% else %}
                                        <em>Não definida</em>
                                    {% endif %}
                                </td>
                                <td>{{ event.location ?: '<em>Não definido</em>' }}</td>
                                <td>
                                    {% set percentage = event.total_capacity > 0 ? (event.sold_tickets / event.total_capacity * 100) : 0 %}
                                    <div style="margin-bottom: 5px;">
                                        <strong>{{ event.sold_tickets }}</strong> / {{ event.total_capacity > 0 ? event.total_capacity : '∞' }}
                                    </div>
                                    {% if event.total_capacity > 0 %}
                                    <div style="background: #eee; height: 8px; border-radius: 4px; width: 100%; overflow: hidden;">
                                        <div style="background: {{ percentage >= 100 ? '#e74c3c' : (percentage > 75 ? '#f39c12' : '#2ecc71') }}; width: {{ percentage }}%; height: 100%;"></div>
                                    </div>
                                    {% endif %}
                                </td>
                                <td class="actions">
                                    <a href="/event/{{ event.slug }}" target="_blank" class="btn btn-secondary btn-sm">Ver Página do Evento</a>
                                    <a href="/admin/events/{{ event.id }}/tickets" class="btn btn-primary btn-sm">Gerenciar Ingressos</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
{% endblock %}