{% extends "base.html" %}

{% block title %}Relatórios e Indicadores — {{ app_name }}{% endblock %}

{% block content %}
<div class="content-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <div>
            <h2 style="color: #123B6D; font-weight: 800;">📄 Relatórios e Indicadores da Operação</h2>
            <p style="color: #5A6E85; font-size: 0.9rem;">Resumo consolidado e exportações da base territorial</p>
        </div>
        <a href="{{ url_for('relatorios.exportar_csv') }}" class="btn-primary-orange">
            📥 Exportar Base Completa (CSV)
        </a>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
        <!-- Tabela por Bairro -->
        <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
            <h3 style="font-size: 1rem; color: #1976D2; font-weight: 700; margin-bottom: 1rem;">📍 Cobertura por Bairro</h3>
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Bairro</th>
                        <th>Zona</th>
                        <th style="text-align: right;">Total Cadastrados</th>
                    </tr>
                </thead>
                <tbody>
                    {% for b in bairros_resumo %}
                    <tr>
                        <td style="font-weight: 600;">{{ b.bairro }}</td>
                        <td>{{ b.zona }}</td>
                        <td style="text-align: right; font-weight: 700;">{{ b.total }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" style="text-align: center;">Nenhum dado acumulado.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Tabela por Cadastrador -->
        <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
            <h3 style="font-size: 1rem; color: #1976D2; font-weight: 700; margin-bottom: 1rem;">🧑‍💼 Produtividade por Cadastrador</h3>
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Cadastrador</th>
                        <th style="text-align: right;">Total Cadastrados</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in cadastradores_resumo %}
                    <tr>
                        <td style="font-weight: 600;">{{ c.nome }}</td>
                        <td style="text-align: right; font-weight: 700;">{{ c.total }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="2" style="text-align: center;">Nenhum dado acumulado.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}