{% extends "base.html" %}

{% block title %}Dashboard - Controle Financeiro{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Dashboard Financeiro</h1>
    {# Filtro de Mês #}
    <form method="GET" class="d-flex align-items-center gap-2">
        <label class="mb-0"><i class="bi bi-calendar3"></i> Mês:</label>
        <input type="month" name="mes" class="form-control form-control-sm" 
               value="{{ mes_filtro }}" onchange="this.form.submit()" style="width: 160px;">
    </form>
</div>

{# Cards Principais - Linha 1 #}
<div class="row mb-3">
    <div class="col-md-3">
        <div class="card text-white bg-success" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#modalSaldoTotal">
            <div class="card-body py-3">
                <h6 class="card-title mb-1">
                    <i class="bi bi-cash-stack"></i> Saldo Total
                </h6>
                <h2 class="mb-0">R$ {{ "%.2f"|format(saldo_total) }}</h2>
                <small>Contas + Caixas <i class="bi bi-box-arrow-up-right ms-1"></i></small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-info" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#modalReceitasMes">
            <div class="card-body py-3">
                <h6 class="card-title mb-1">
                    <i class="bi bi-arrow-down-circle"></i> Receitas do Mês
                </h6>
                <h2 class="mb-0">R$ {{ "%.2f"|format(receitas_mes) }}</h2>
                <small>Vendas + Contratos + Outras <i class="bi bi-box-arrow-up-right ms-1"></i></small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-danger" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#modalDespesasMes">
            <div class="card-body py-3">
                <h6 class="card-title mb-1">
                    <i class="bi bi-arrow-up-circle"></i> Despesas do Mês
                </h6>
                <h2 class="mb-0">R$ {{ "%.2f"|format(despesas_mes) }}</h2>
                <small>Contas Pagas + Sangrias <i class="bi bi-box-arrow-up-right ms-1"></i></small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-primary" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#modalResultado">
            <div class="card-body py-3">
                <h6 class="card-title mb-1">
                    <i class="bi bi-graph-up"></i> Resultado
                </h6>
                <h2 class="mb-0">R$ {{ "%.2f"|format(receitas_mes - despesas_mes) }}</h2>
                <small>Receitas - Despesas <i class="bi bi-box-arrow-up-right ms-1"></i></small>
            </div>
        </div>
    </div>
</div>

{# Cards Secundários - Linha 2: Contas a Receber e a Pagar #}
<div class="row mb-3">
    <div class="col-md-6">
        <div class="card border-warning">
            <div class="card-header bg-warning">
                <h6 class="mb-0"><i class="bi bi-inbox"></i> Contas a Receber (Em Aberto)</h6>
            </div>
            <div class="card-body">
                <h3 class="text-warning">R$ {{ "%.2f"|format(total_a_receber) }}</h3>
                <small class="text-muted">{{ contas_receber_abertas|length }} contas pendentes no mês</small>
                <a href="{{ url_for('contas_receber') }}" class="btn btn-sm btn-warning mt-2">
                    <i class="bi bi-eye"></i> Ver Detalhes
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card border-danger">
            <div class="card-header bg-danger text-white">
                <h6 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Contas a Pagar (Em Aberto)</h6>
            </div>
            <div class="card-body">
                <h3 class="text-danger">R$ {{ "%.2f"|format(total_a_pagar) }}</h3>
                <small class="text-muted">{{ contas_pagar_abertas|length }} contas pendentes no mês</small>
                <a href="{{ url_for('contas_pagar') }}?status=pendente" class="btn btn-sm btn-danger mt-2">
                    <i class="bi bi-eye"></i> Ver Detalhes
                </a>
            </div>
        </div>
    </div>
</div>

{# Card de Alertas de Certificados Digitais #}
{% if certificados_vencidos or certificados_criticos or certificados_atencao %}
<div class="row mb-3">
    <div class="col-md-12">
        <div class="card border-warning">
            <div class="card-header bg-warning">
                <h6 class="mb-0">
                    <i class="bi bi-shield-check"></i> Alertas de Certificados Digitais
                </h6>
            </div>
            <div class="card-body">
                {# Certificados Vencidos - Vermelho #}
                {% if certificados_vencidos %}
                <div class="alert alert-danger mb-3">
                    <strong><i class="bi bi-exclamation-triangle-fill"></i> VENCIDOS ({{ certificados_vencidos|length }})</strong>
                    <ul class="mb-0 mt-2">
                        {% for cert in certificados_vencidos %}
                        <li>
                            <strong>{{ cert.pessoa.nome }}</strong> - {{ cert.tipo }}
                            (venceu em {{ cert.data_vencimento.strftime('%d/%m/%Y') }})
                            - <span class="text-danger fw-bold">{{ cert.dias_para_vencer() * -1 }} dias atrás</span>
                            <a href="{{ url_for('ver_pessoa', id=cert.pessoa_id) }}" class="btn btn-sm btn-danger ms-2">
                                <i class="bi bi-eye-fill"></i> Ver Cliente
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                
                {# Certificados Críticos (30 dias) - Vermelho Claro #}
                {% if certificados_criticos %}
                <div class="alert alert-danger mb-3" style="background-color: #f8d7da;">
                    <strong><i class="bi bi-exclamation-circle-fill"></i> CRÍTICO - Vence em 30 dias ou menos ({{ certificados_criticos|length }})</strong>
                    <ul class="mb-0 mt-2">
                        {% for cert in certificados_criticos %}
                        <li>
                            <strong>{{ cert.pessoa.nome }}</strong> - {{ cert.tipo }}
                            (vence em {{ cert.data_vencimento.strftime('%d/%m/%Y') }})
                            - <span class="text-danger fw-bold">{{ cert.dias_para_vencer() }} dias restantes</span>
                            <a href="{{ url_for('ver_pessoa', id=cert.pessoa_id) }}" class="btn btn-sm btn-warning ms-2">
                                <i class="bi bi-eye-fill"></i> Ver Cliente
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                
                {# Certificados Atenção (60 dias) - Amarelo #}
                {% if certificados_atencao %}
                <div class="alert alert-warning mb-0">
                    <strong><i class="bi bi-exclamation-triangle"></i> ATENÇÃO - Vence em 60 dias ou menos ({{ certificados_atencao|length }})</strong>
                    <ul class="mb-0 mt-2">
                        {% for cert in certificados_atencao %}
                        <li>
                            <strong>{{ cert.pessoa.nome }}</strong> - {{ cert.tipo }}
                            (vence em {{ cert.data_vencimento.strftime('%d/%m/%Y') }})
                            - <span class="text-warning fw-bold">{{ cert.dias_para_vencer() }} dias restantes</span>
                            <a href="{{ url_for('ver_pessoa', id=cert.pessoa_id) }}" class="btn btn-sm btn-info ms-2">
                                <i class="bi bi-eye-fill"></i> Ver Cliente
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                
                <div class="mt-3">
                    <a href="{{ safe_url_for('certificados') }}"
                       class="btn btn-primary {% if not has_endpoint('certificados') %}disabled{% endif %}"
                       {% if not has_endpoint('certificados') %}onclick="return false;" aria-disabled="true"{% endif %}>
                        <i class="bi bi-shield-check"></i> Ver Todos os Certificados
                    </a>
                    <a href="{{ safe_url_for('relatorio_certificados') }}"
                       class="btn btn-success {% if not has_endpoint('relatorio_certificados') %}disabled{% endif %}"
                       {% if not has_endpoint('relatorio_certificados') %}onclick="return false;" aria-disabled="true"{% endif %}>
                        <i class="bi bi-file-earmark-text"></i> Relatório Completo
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5><i class="bi bi-bank"></i> Minhas Contas</h5>
            </div>
            <div class="card-body">
                {% if contas %}
                    <div class="list-group">
                        {% for conta in contas %}
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ conta.nome }}</strong>
                                    <br>
                                    <small class="text-muted">{{ conta.tipo }}</small>
                                </div>
                                <span class="badge bg-primary rounded-pill">
                                    R$ {{ "%.2f"|format(conta.saldo_atual()) }}
                                </span>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted">Nenhuma conta cadastrada.</p>
                    <a href="{{ url_for('contas') }}" class="btn btn-primary">Adicionar Conta</a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5><i class="bi bi-bullseye"></i> Metas Ativas</h5>
            </div>
            <div class="card-body">
                {% if metas %}
                    {% for meta in metas %}
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <strong>{{ meta.nome }}</strong>
                                <span>{{ "%.0f"|format(meta.progresso_percentual()) }}%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" 
                                     style="width: {{ meta.progresso_percentual() }}%;"
                                     aria-valuenow="{{ meta.progresso_percentual() }}" 
                                     aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                            <small class="text-muted">
                                R$ {{ "%.2f"|format(meta.valor_atual) }} de R$ {{ "%.2f"|format(meta.valor_objetivo) }}
                            </small>
                        </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted">Nenhuma meta cadastrada.</p>
                    <a href="{{ url_for('metas') }}" class="btn btn-warning">Criar Meta</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    {# Últimas Transações de Contas #}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5><i class="bi bi-wallet2"></i> Últimas Transações (Contas)</h5>
            </div>
            <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                {% if ultimas_transacoes %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Data</th>
                                    <th>Descrição</th>
                                    <th class="text-end">Valor</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for transacao in ultimas_transacoes %}
                                    <tr>
                                        <td><small>{{ transacao.data.strftime('%d/%m/%Y') }}</small></td>
                                        <td>
                                            <small>{{ transacao.descricao }}</small><br>
                                            <span class="badge badge-sm" style="background-color: {{ transacao.categoria.cor }}; font-size: 0.7rem;">
                                                {{ transacao.categoria.icone }} {{ transacao.categoria.nome }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <span class="{% if transacao.tipo == 'receita' %}text-success{% else %}text-danger{% endif %}">
                                                {% if transacao.tipo == 'receita' %}+{% else %}-{% endif %}
                                                R$ {{ "%.2f"|format(transacao.valor) }}
                                            </span>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <a href="{{ url_for('transacoes') }}" class="btn btn-sm btn-primary">Ver Todas</a>
                {% else %}
                    <p class="text-muted">Nenhuma transação registrada.</p>
                    <a href="{{ url_for('transacoes') }}" class="btn btn-primary">Adicionar Transação</a>
                {% endif %}
            </div>
        </div>
    </div>

    {# Últimos Movimentos de Caixa #}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5><i class="bi bi-cash-coin"></i> Últimos Movimentos (Caixa)</h5>
            </div>
            <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                {% if ultimos_movimentos_caixa %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Data/Hora</th>
                                    <th>Descrição</th>
                                    <th class="text-end">Valor</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for mov in ultimos_movimentos_caixa %}
                                    <tr>
                                        <td><small>{{ mov.data_hora.strftime('%d/%m %H:%M') }}</small></td>
                                        <td>
                                            <small>{{ mov.descricao }}</small><br>
                                            {% if mov.forma_pagamento %}
                                            <span class="badge bg-info" style="font-size: 0.7rem;">
                                                {{ mov.forma_pagamento.upper() }}
                                            </span>
                                            {% endif %}
                                        </td>
                                        <td class="text-end">
                                            <span class="{% if mov.tipo == 'entrada' %}text-success{% else %}text-danger{% endif %}">
                                                {% if mov.tipo == 'entrada' %}+{% else %}-{% endif %}
                                                R$ {{ "%.2f"|format(mov.valor) }}
                                            </span>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <a href="{{ url_for('caixa') }}" class="btn btn-sm btn-success">Ver Caixa</a>
                {% else %}
                    <p class="text-muted">Nenhum movimento de caixa registrado.</p>
                    <a href="{{ url_for('caixa') }}" class="btn btn-success">Abrir Caixa</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modais de Extrato -->

<!-- Modal: Saldo Total -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalSaldoTotal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="bi bi-cash-stack"></i> Extrato - Saldo Total</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h4 class="text-success mb-3">R$ {{ "%.2f"|format(saldo_total) }}</h4>
                <p class="text-muted">Composição do saldo total em contas e caixas:</p>
                <div class="alert alert-info">
                    <strong>Em desenvolvimento:</strong> Aqui será exibido o detalhamento por conta bancária e caixa.
                </div>
                <a href="{{ url_for('contas') }}" class="btn btn-success">
                    <i class="bi bi-wallet2"></i> Ver Todas as Contas
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Receitas do Mês -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalReceitasMes" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title"><i class="bi bi-arrow-down-circle"></i> Extrato - Receitas do Mês</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h4 class="text-info mb-3">R$ {{ "%.2f"|format(receitas_mes) }}</h4>
                <p class="text-muted">Origem das receitas deste mês:</p>
                
                {% if ultimos_movimentos_caixa %}
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Descrição</th>
                            <th>Forma</th>
                            <th class="text-end">Valor</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for mov in ultimos_movimentos_caixa %}
                        {% if mov.tipo == 'entrada' %}
                        <tr>
                            <td>{{ mov.data_hora.strftime('%d/%m') }}</td>
                            <td>{{ mov.descricao }}</td>
                            <td>
                                {% if mov.forma_pagamento %}
                                <span class="badge bg-secondary">{{ mov.forma_pagamento.upper() }}</span>
                                {% endif %}
                            </td>
                            <td class="text-end text-success">+ R$ {{ "%.2f"|format(mov.valor) }}</td>
                        </tr>
                        {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="alert alert-warning">Nenhuma receita registrada neste mês.</div>
                {% endif %}
                
                <a href="{{ url_for('caixa') }}" class="btn btn-info">
                    <i class="bi bi-cash-stack"></i> Ver Caixa Completo
                </a>
                <a href="{{ url_for('contas_receber') }}" class="btn btn-outline-info">
                    <i class="bi bi-inbox"></i> Contas a Receber
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Despesas do Mês -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalDespesasMes" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="bi bi-arrow-up-circle"></i> Extrato - Despesas do Mês</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h4 class="text-danger mb-3">R$ {{ "%.2f"|format(despesas_mes) }}</h4>
                <p class="text-muted">Despesas e saídas deste mês:</p>
                
                {% if ultimos_movimentos_caixa %}
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Descrição</th>
                            <th>Forma</th>
                            <th class="text-end">Valor</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for mov in ultimos_movimentos_caixa %}
                        {% if mov.tipo == 'saida' %}
                        <tr>
                            <td>{{ mov.data_hora.strftime('%d/%m') }}</td>
                            <td>{{ mov.descricao }}</td>
                            <td>
                                {% if mov.forma_pagamento %}
                                <span class="badge bg-secondary">{{ mov.forma_pagamento.upper() }}</span>
                                {% endif %}
                            </td>
                            <td class="text-end text-danger">- R$ {{ "%.2f"|format(mov.valor) }}</td>
                        </tr>
                        {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="alert alert-warning">Nenhuma despesa registrada neste mês.</div>
                {% endif %}
                
                <a href="{{ url_for('caixa') }}" class="btn btn-danger">
                    <i class="bi bi-cash-stack"></i> Ver Caixa Completo
                </a>
                <a href="{{ url_for('contas_pagar') }}" class="btn btn-outline-danger">
                    <i class="bi bi-receipt"></i> Contas a Pagar
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Resultado -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalResultado" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="bi bi-graph-up"></i> Extrato - Resultado do Mês</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {% set resultado = receitas_mes - despesas_mes %}
                <h4 class="{% if resultado >= 0 %}text-success{% else %}text-danger{% endif %} mb-3">
                    R$ {{ "%.2f"|format(resultado) }}
                </h4>
                <p class="text-muted">Análise do resultado financeiro:</p>
                
                <div class="row mb-3">
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body">
                                <small class="text-muted">Receitas</small>
                                <h5 class="text-success">+ R$ {{ "%.2f"|format(receitas_mes) }}</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body">
                                <small class="text-muted">Despesas</small>
                                <h5 class="text-danger">- R$ {{ "%.2f"|format(despesas_mes) }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="alert {% if resultado >= 0 %}alert-success{% else %}alert-danger{% endif %}">
                    <strong>
                        {% if resultado >= 0 %}
                        <i class="bi bi-check-circle"></i> Resultado Positivo
                        {% else %}
                        <i class="bi bi-exclamation-triangle"></i> Resultado Negativo
                        {% endif %}
                    </strong><br>
                    {% if resultado >= 0 %}
                    O mês está apresentando lucro de R$ {{ "%.2f"|format(resultado) }}.
                    {% else %}
                    O mês está apresentando prejuízo de R$ {{ "%.2f"|format(resultado|abs) }}.
                    {% endif %}
                </div>
                
                <a href="{{ url_for('relatorio_financeiro') }}" class="btn btn-primary">
                    <i class="bi bi-file-earmark-bar-graph"></i> Relatório Financeiro Completo
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock %}