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

{% block title %}Administração - Relatório de Check-in{% endblock %}

{% block header_title %}Relatório de Frequência: {{ event.title }}{% endblock %}

{% block global_actions %}
    <a href="/admin/events" class="btn btn-secondary">&larr; Voltar</a>
    <a href="/admin/events/{{ event.id }}/report/export" class="btn btn-success">Exportar CSV</a>
{% endblock %}

{% block extra_css %}
    .stats-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    .stat-card {
        flex: 1;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 20px;
        text-align: center;
    }
    .stat-number {
        font-size: 2em;
        font-weight: bold;
        color: #2c3e50;
        margin-top: 5px;
    }
    .stat-label {
        color: #7f8c8d;
        font-size: 0.9em;
        text-transform: uppercase;
        font-weight: bold;
    }
    .filter-row {
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        display: flex;
        gap: 15px;
        align-items: center;
    }
    .filter-input {
        flex: 1;
    }
    .filter-select {
        width: 200px;
    }
    .badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8em;
        font-weight: bold;
    }
    .badge-success { background: #2ecc71; color: #fff; }
    .badge-danger { background: #e74c3c; color: #fff; }
{% endblock %}

{% block content %}
<div class="stats-row">
    <div class="stat-card">
        <div class="stat-label">Ingressos Confirmados</div>
        <div class="stat-number">{{ stats.total_registrations }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Check-ins Efetuados</div>
        <div class="stat-number">{{ stats.total_checkins }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Taxa de Presença</div>
        <div class="stat-number">{{ stats.rate }}%</div>
    </div>
</div>

<div class="filter-row">
    <div class="filter-input">
        <input type="text" id="search-input" placeholder="Buscar por Nome, E-mail, Documento ou Ingresso...">
    </div>
    <div class="filter-select">
        <select id="status-filter">
            <option value="all">Status: Todos</option>
            <option value="yes">Status: Realizado</option>
            <option value="no">Status: Pendente</option>
        </select>
    </div>
</div>

<div class="content-container">
    {% if tickets is empty %}
        <p style="text-align: center; color: #777; padding: 20px;">Nenhum participante confirmado para este evento ainda.</p>
    {% else %}
        <table id="attendance-table">
            <thead>
                <tr>
                    <th>Participante</th>
                    <th>E-mail</th>
                    <th>Documento</th>
                    <th>Categoria / Lote</th>
                    <th>Ingresso</th>
                    <th>Presença</th>
                    <th>Data/Hora</th>
                </tr>
            </thead>
            <tbody>
                {% for t in tickets %}
                    <tr class="attendance-row" data-status="{% if t.checked_in_at %}yes{% else %}no{% endif %}">
                        <td class="col-name" style="font-weight: bold;">{{ t.attendee_name }}</td>
                        <td class="col-email">{{ t.attendee_email }}</td>
                        <td class="col-document">{{ t.attendee_document ?: 'N/A' }}</td>
                        <td>{{ t.category_name }} - {{ t.batch_name }}</td>
                        <td class="col-code"><code>{{ t.ticket_code }}</code></td>
                        <td>
                            {% if t.checked_in_at %}
                                <span class="badge badge-success">✓ Sim</span>
                            {% else %}
                                <span class="badge badge-danger">Não</span>
                            {% endif %}
                        </td>
                        <td>{{ t.checked_in_at ? t.checked_in_at|date('d/m/Y H:i:s') : '-' }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search-input');
    const statusFilter = document.getElementById('status-filter');
    const rows = document.querySelectorAll('.attendance-row');

    if (searchInput && statusFilter) {
        searchInput.addEventListener('input', filterTable);
        statusFilter.addEventListener('change', filterTable);
    }

    function filterTable() {
        const query = searchInput.value.toLowerCase().trim();
        const statusValue = statusFilter.value;

        rows.forEach(row => {
            const name = row.querySelector('.col-name').textContent.toLowerCase();
            const email = row.querySelector('.col-email').textContent.toLowerCase();
            const doc = row.querySelector('.col-document').textContent.toLowerCase();
            const code = row.querySelector('.col-code').textContent.toLowerCase();
            const rowStatus = row.getAttribute('data-status');

            const matchesQuery = name.includes(query) || email.includes(query) || doc.includes(query) || code.includes(query);
            const matchesStatus = (statusValue === 'all') || (statusValue === rowStatus);

            if (matchesQuery && matchesStatus) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }
});
</script>
{% endblock %}