{% extends "base.html" %}

{% block title %}Relatórios - Controle Financeiro{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="mb-0">Relatórios e Gráficos</h1>
    <form method="GET" class="d-flex gap-2">
        <select name="empresa_id" class="form-select" style="width: 280px;">
            {% for emp in empresas_disponiveis %}
            <option value="{{ emp.id }}" {% if empresa_id_selecionada == emp.id %}selected{% endif %}>
                {{ emp.nome or ('Empresa ' ~ emp.id) }}
            </option>
            {% endfor %}
        </select>
        <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
    </form>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5><i class="bi bi-bar-chart"></i> Receitas vs Despesas (Últimos 6 Meses)</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoReceitasDespesas" height="100"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h5><i class="bi bi-pie-chart"></i> Despesas por Categoria (Mês Atual)</h5>
            </div>
            <div class="card-body">
                {% if categorias_despesas %}
                    <canvas id="graficoDespesasCategorias"></canvas>
                {% else %}
                    <div class="text-center py-4">
                        <p class="text-muted">Nenhuma despesa registrada este mês.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5><i class="bi bi-list-ul"></i> Resumo por Categoria</h5>
            </div>
            <div class="card-body">
                {% if resumo_categorias %}
                    <div class="list-group">
                        {% for item in resumo_categorias %}
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <span>
                                    {% if item.tipo == 'receita' %}
                                        <i class="bi bi-arrow-up-circle text-success"></i>
                                    {% else %}
                                        <i class="bi bi-arrow-down-circle text-danger"></i>
                                    {% endif %}
                                    {{ item.nome }}
                                </span>
                                <span class="{% if item.tipo == 'receita' %}text-success{% else %}text-danger{% endif %}">
                                    <strong>R$ {{ "%.2f"|format(item.total) }}</strong>
                                </span>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted text-center py-4">Nenhuma movimentação este mês.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Relatórios Contábeis -->
<div class="row mt-4">
    <div class="col-12">
        <h4 class="mb-3"><i class="bi bi-journal-text text-primary"></i> Relatórios Contábeis</h4>
    </div>
    <div class="col-md-3">
        <div class="card border-success h-100">
            <div class="card-body text-center">
                <i class="bi bi-graph-up-arrow text-success" style="font-size: 3rem;"></i>
                <h5 class="card-title mt-3">DRE</h5>
                <p class="card-text text-muted">Demonstração do Resultado do Exercício</p>
                <a href="{{ url_for('relatorio_dre') }}" class="btn btn-success">
                    <i class="bi bi-eye"></i> Visualizar
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-dark h-100">
            <div class="card-body text-center">
                <i class="bi bi-diagram-3 text-dark" style="font-size: 3rem;"></i>
                <h5 class="card-title mt-3">Financeiro Gerencial</h5>
                <p class="card-text text-muted">Grupo de contas, categoria financeira e centro de custo</p>
                <a href="{{ safe_url_for('relatorio_financeiro_gerencial', fallback=safe_url_for('relatorio_financeiro', fallback='#')) }}" class="btn btn-dark">
                    <i class="bi bi-eye"></i> Visualizar
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-primary h-100">
            <div class="card-body text-center">
                <i class="bi bi-journal-check text-primary" style="font-size: 3rem;"></i>
                <h5 class="card-title mt-3">Balancete</h5>
                <p class="card-text text-muted">Balancete de Verificação</p>
                <a href="{{ url_for('relatorio_balancete') }}" class="btn btn-primary">
                    <i class="bi bi-eye"></i> Visualizar
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-info h-100">
            <div class="card-body text-center">
                <i class="bi bi-credit-card-2-front text-info" style="font-size: 3rem;"></i>
                <h5 class="card-title mt-3">Conciliação de Cartões</h5>
                <p class="card-text text-muted">Taxas e previsão de recebimentos</p>
                <a href="{{ url_for('relatorio_conciliacao_cartoes') }}" class="btn btn-info">
                    <i class="bi bi-eye"></i> Visualizar
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Dados para o gráfico de receitas vs despesas
const meses = {{ meses|tojson }};
const receitas = {{ receitas_por_mes|tojson }};
const despesas = {{ despesas_por_mes|tojson }};

// Gráfico de Receitas vs Despesas
const ctxReceitasDespesas = document.getElementById('graficoReceitasDespesas').getContext('2d');
new Chart(ctxReceitasDespesas, {
    type: 'bar',
    data: {
        labels: meses,
        datasets: [{
            label: 'Receitas',
            data: receitas,
            backgroundColor: 'rgba(40, 167, 69, 0.6)',
            borderColor: 'rgba(40, 167, 69, 1)',
            borderWidth: 2
        }, {
            label: 'Despesas',
            data: despesas,
            backgroundColor: 'rgba(220, 53, 69, 0.6)',
            borderColor: 'rgba(220, 53, 69, 1)',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'R$ ' + value.toFixed(2);
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': R$ ' + context.parsed.y.toFixed(2);
                    }
                }
            }
        }
    }
});

// Gráfico de Despesas por Categoria
{% if categorias_despesas %}
const categorias = {{ categorias_despesas|map(attribute=0)|list|tojson }};
const valores = {{ categorias_despesas|map(attribute=2)|list|tojson }};
const cores = {{ categorias_despesas|map(attribute=1)|list|tojson }};

const ctxDespesasCategorias = document.getElementById('graficoDespesasCategorias').getContext('2d');
new Chart(ctxDespesasCategorias, {
    type: 'doughnut',
    data: {
        labels: categorias,
        datasets: [{
            data: valores,
            backgroundColor: cores,
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: {
                position: 'bottom'
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = ((context.parsed / total) * 100).toFixed(1);
                        return context.label + ': R$ ' + context.parsed.toFixed(2) + ' (' + percentage + '%)';
                    }
                }
            }
        }
    }
});
{% endif %}
</script>
{% endblock %}