{% extends 'base.html' %}
{% load static %}

{% block title %}Relatórios - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.rel-card { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; margin-bottom: 1rem; }
.rel-card .card-header { font-weight: 700; font-size: .95rem; color: #fff; padding: .8rem 1.1rem; display: flex; align-items: center; gap: .55rem; }
.rel-card .card-header .badge-float { margin-left: auto; background: rgba(255,255,255,.25); color: #fff; font-size: .7rem; }
.rel-card .card-body { padding: 1rem 1.1rem; }
.rel-azul       .card-header { background: linear-gradient(135deg, #256ab1, #1e4976); }
.rel-azul       { border-left: 5px solid #1e4976; }
.rel-verde      .card-header { background: linear-gradient(135deg, #2e8b57, #1e7e34); }
.rel-verde      { border-left: 5px solid #1e7e34; }
.rel-amarelo    .card-header { background: linear-gradient(135deg, #e0a800, #cf9a08); }
.rel-amarelo    { border-left: 5px solid #cf9a08; }
.rel-roxo       .card-header { background: linear-gradient(135deg, #7b52ab, #5e3a8c); }
.rel-roxo       { border-left: 5px solid #5e3a8c; }
.rel-teal       .card-header { background: linear-gradient(135deg, #138d82, #0d6e63); }
.rel-teal       { border-left: 5px solid #0d6e63; }
.rel-amarelo    .card-header,
.rel-card .card-header.amarelo { }

/* Cards de resumo (topo) */
.rel-stat-card {
    display: flex; align-items: center; gap: .8rem;
    background: #fff; border-radius: 14px;
    padding: .85rem 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    height: 100%;
    transition: transform .15s, box-shadow .15s;
}
.rel-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.09); }
.rel-stat-card .icon {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 2.6rem; height: 2.6rem; border-radius: .8rem; font-size: 1.2rem;
}
.rel-stat-card .label { font-size: .78rem; font-weight: 600; color: #66788c; line-height: 1.15; }
.rel-stat-card .value { font-size: 1.18rem; font-weight: 800; line-height: 1.1; }
.rel-stat-card .sub   { font-size: .7rem; color: #8a97a8; }
.tint-azul     { border-top: 4px solid #256ab1; } .tint-azul .icon     { background: #e3f2fd; color: #1565c0; }
.tint-verde    { border-top: 4px solid #1e7e34; } .tint-verde .icon    { background: #e8f5e9; color: #1e7e34; }
.tint-vermelho { border-top: 4px solid #b02a37; } .tint-vermelho .icon { background: #fdecee; color: #b02a37; }
.tint-roxo     { border-top: 4px solid #5e3a8c; } .tint-roxo .icon     { background: #f3e5f5; color: #5e3a8c; }
@media (max-width: 575.98px) {
    .rel-stat-card .value { font-size: 1rem; }
}
</style>
{% endblock %}

{% block content %}
<div class="mb-4">
    <h2><i class="bi bi-graph-up"></i> Relatórios e Estatísticas</h2>
    <div class="mt-3">
        <a href="{% url 'imprimir_relatorios' %}?data_inicio={{ data_inicio|date:'Y-m-d' }}&data_fim={{ data_fim|date:'Y-m-d' }}&periodo={{ periodo }}&forma_pagamento={{ forma_pagamento_id }}" class="btn btn-secondary me-2">
            <i class="bi bi-printer"></i> Imprimir
        </a>
        <a href="{% url 'exportar_relatorios_pdf' %}?data_inicio={{ data_inicio|date:'Y-m-d' }}&data_fim={{ data_fim|date:'Y-m-d' }}&periodo={{ periodo }}&forma_pagamento={{ forma_pagamento_id }}" class="btn btn-success">
            <i class="bi bi-file-earmark-pdf"></i> Exportar PDF
        </a>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card rel-card rel-amarelo">
            <div class="card-header"><i class="bi bi-funnel"></i> Filtros</div>
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Data Início</label>
                        <input type="date" name="data_inicio" class="form-control" value="{{ data_inicio|date:'Y-m-d' }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Data Fim</label>
                        <input type="date" name="data_fim" class="form-control" value="{{ data_fim|date:'Y-m-d' }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Período</label>
                        <select name="periodo" class="form-select">
                            <option value="">Selecione...</option>
                            <option value="hoje" {% if periodo == 'hoje' %}selected{% endif %}>Hoje</option>
                            <option value="semana" {% if periodo == 'semana' %}selected{% endif %}>Esta Semana</option>
                            <option value="mes" {% if periodo == 'mes' %}selected{% endif %}>Este Mês</option>
                            <option value="ano" {% if periodo == 'ano' %}selected{% endif %}>Este Ano</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Tipo de Pagamento</label>
                        <select name="forma_pagamento" class="form-select">
                            <option value="">Todos</option>
                            {% for forma in formas_pagamento %}
                                <option value="{{ forma.id }}" {% if forma_pagamento_id == forma.id|stringformat:"s" %}selected{% endif %}>{{ forma.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary w-100"><i class="bi bi-search"></i> Filtrar</button>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <a href="{% url 'relatorios' %}" class="btn btn-secondary w-100"><i class="bi bi-eraser"></i> Limpar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4 rel-cards-topo">
    <div class="col-md-3 col-6 rel-stat">
        <div class="rel-stat-card tint-azul">
            <span class="icon"><i class="bi bi-cart-check"></i></span>
            <div>
                <div class="label">Total Vendas</div>
                <div class="value" style="color:#1565c0;">R$ {{ total_vendas|floatformat:2 }}</div>
                <div class="sub">{{ quantidade_vendas }} venda(s)</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 rel-stat">
        <div class="rel-stat-card tint-verde">
            <span class="icon"><i class="bi bi-cash-coin"></i></span>
            <div>
                <div class="label">Entradas de Caixa</div>
                <div class="value" style="color:#1e7e34;">R$ {{ recebido_caixa_fisico|floatformat:2 }}</div>
                <div class="sub">À vista + parcelas recebidas</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 rel-stat">
        <div class="rel-stat-card tint-vermelho">
            <span class="icon"><i class="bi bi-wallet2"></i></span>
            <div>
                <div class="label">Total Gastos</div>
                <div class="value" style="color:#b02a37;">R$ {{ total_gastos|floatformat:2 }}</div>
                <div class="sub">Despesas do período</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 rel-stat">
        <div class="rel-stat-card tint-roxo">
            <span class="icon"><i class="bi bi-graph-up"></i></span>
            <div>
                <div class="label">Resultado Real</div>
                <div class="value" style="color:{% if resultado_real >= 0 %}#5e3a8c{% else %}#b02a37{% endif %};">R$ {{ resultado_real|floatformat:2 }}</div>
                <div class="sub">Entradas reais - Gastos</div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-3"><div class="col-md-12"><div class="alert alert-light border"><div class="d-flex justify-content-between flex-wrap gap-2"><span><strong>Recebível de cartão:</strong> R$ {{ recebivel_cartao|floatformat:2 }}</span><span><strong>Total a receber (clientes):</strong> R$ {{ total_a_receber_clientes|floatformat:2 }}</span></div></div></div></div>

<div class="row mb-3"><div class="col-md-12"><div class="alert alert-success border"><div class="d-flex justify-content-between flex-wrap gap-2"><span><strong>Custo das mercadorias:</strong> R$ {{ custo_mercadorias|floatformat:2 }}</span><span><strong>Lucro bruto:</strong> R$ {{ lucro_bruto|floatformat:2 }}</span><span><strong>Taxas da maquininha:</strong> R$ {{ total_taxas_maquininha|floatformat:2 }}</span><span><strong>Cartão líquido:</strong> R$ {{ cartao_liquido|floatformat:2 }}</span><span><strong>Lucro estimado real:</strong> R$ {{ lucro|floatformat:2 }}</span></div></div></div></div>

<div class="row mb-4"><div class="col-md-12"><div class="card rel-card rel-verde"><div class="card-header"><i class="bi bi-calendar-check"></i> Resumo Diário de Vendas<span class="badge badge-float">{{ resumo_diario|length }} dia(s)</span></div><div class="card-body"><div class="table-responsive"><table class="table table-sm table-hover align-middle"><thead><tr><th>Data</th><th class="text-end">Quantidade</th><th class="text-end">Total Vendido</th></tr></thead><tbody>{% for dia in resumo_diario %}<tr><td>{{ dia.data_venda__date|date:"d/m/Y" }}</td><td class="text-end">{{ dia.quantidade }}</td><td class="text-end"><strong>R$ {{ dia.total|floatformat:2 }}</strong></td></tr>{% empty %}<tr><td colspan="3" class="text-center text-muted py-3">Sem vendas no período selecionado.</td></tr>{% endfor %}</tbody></table></div></div></div></div></div>

<div class="row mb-4"><div class="col-md-12"><div class="card rel-card rel-azul"><div class="card-header"><i class="bi bi-credit-card-2-front"></i> Recebimentos por Forma de Pagamento<span class="badge badge-float">{{ resumo_pagamentos|length }} forma(s)</span></div><div class="card-body"><div class="table-responsive"><table class="table table-sm table-hover align-middle"><thead><tr><th>Forma</th><th class="text-end">Quantidade</th><th class="text-end">Total Bruto</th><th class="text-end">Taxas</th><th class="text-end">Líquido</th></tr></thead><tbody>{% for item in resumo_pagamentos %}<tr><td>{{ item.forma_pagamento__nome }}</td><td class="text-end">{{ item.quantidade }}</td><td class="text-end"><strong>R$ {{ item.total|floatformat:2 }}</strong></td><td class="text-end text-danger">R$ {{ item.taxa|default:0|floatformat:2 }}</td><td class="text-end text-success">R$ {{ item.liquido|default:item.total|floatformat:2 }}</td></tr>{% empty %}<tr><td colspan="5" class="text-center text-muted py-3">Sem pagamentos no período selecionado.</td></tr>{% endfor %}</tbody></table></div></div></div></div></div>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card rel-card rel-roxo">
            <div class="card-header"><i class="bi bi-people"></i> Clientes que Compraram no Período<span class="badge badge-float">{{ clientes_compraram|length }}</span></div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-hover align-middle">
                        <thead>
                            <tr>
                                <th>Cliente</th>
                                <th>Formas de Pagamento</th>
                                <th class="text-end">Compras</th>
                                <th class="text-end">Valor Total</th>
                                <th class="text-center">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in clientes_compraram %}
                            <tr>
                                <td><i class="bi bi-person"></i> <strong>{{ item.cliente__nome }}</strong></td>
                                <td>
                                    {% if item.formas %}
                                    <div class="d-flex flex-wrap gap-1">
                                        {% for forma in item.formas %}
                                        <span class="badge {% if forma.tipo == 'credito' %}bg-primary-subtle text-primary-emphasis{% elif forma.tipo == 'debito' %}bg-success-subtle text-success-emphasis{% elif forma.tipo == 'crediario' %}bg-warning-subtle text-warning-emphasis{% else %}bg-secondary-subtle text-secondary-emphasis{% endif %}"
                                              title="{{ forma.qtd_vendas }} venda(s) · total R$ {{ forma.total|floatformat:2 }}" style="font-size:.75rem;">
                                            {{ forma.nome }}{% if forma.tipo == 'credito' and forma.max_parcelas > 1 %} até {{ forma.max_parcelas }}x{% elif forma.tipo == 'crediario' %} {{ forma.desc_parcelas }}{% elif forma.tipo == 'debito' %} (à vista){% endif %}{% if forma.bandeiras %} · {{ forma.bandeiras }}{% endif %}
                                        </span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    <span class="text-muted small">—</span>
                                    {% endif %}
                                </td>
                                <td class="text-end">{{ item.total_compras }}</td>
                                <td class="text-end"><strong class="text-success">R$ {{ item.valor_total|floatformat:2 }}</strong></td>
                                <td class="text-center">
                                    <a href="{% url 'historico_cliente' item.cliente__id %}" class="btn btn-sm btn-outline-primary" title="Ver histórico do cliente">
                                        <i class="bi bi-clock-history"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="5" class="text-center text-muted py-3">Nenhum cliente identificado nas vendas do período selecionado.</td></tr>
                            {% endfor %}
                            {% if quantidade_sem_cliente > 0 %}
                            <tr class="table-light">
                                <td><i class="bi bi-person-x"></i> Vendas sem cliente (avulsas)</td>
                                <td>
                                    {% if formas_sem_cliente %}
                                    <div class="d-flex flex-wrap gap-1">
                                        {% for forma in formas_sem_cliente %}
                                        <span class="badge bg-secondary-subtle text-secondary-emphasis" style="font-size:.75rem;">
                                            {{ forma.nome }}{% if forma.tipo == 'credito' and forma.max_parcelas > 1 %} até {{ forma.max_parcelas }}x{% elif forma.tipo == 'crediario' %} {{ forma.desc_parcelas }}{% endif %}
                                        </span>
                                        {% endfor %}
                                    </div>
                                    {% else %}<span class="text-muted small">—</span>{% endif %}
                                </td>
                                <td class="text-end">{{ quantidade_sem_cliente }}</td>
                                <td class="text-end"><strong>R$ {{ valor_sem_cliente|floatformat:2 }}</strong></td>
                                <td></td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card rel-card rel-teal">
            <div class="card-header"><i class="bi bi-wallet2"></i> Recebimentos de Parcelas<span class="badge badge-float">{{ recebimentos_parcelas_detalhados|length }}</span></div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-hover align-middle">
                        <thead>
                            <tr>
                                <th>Data</th>
                                <th>Cliente</th>
                                <th>Venda</th>
                                <th>Parcela</th>
                                <th>Tipo</th>
                                <th>Forma</th>
                                <th class="text-end">Valor</th>
                                <th class="text-end">Taxa</th>
                                <th class="text-end">Líquido</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for recebimento in recebimentos_parcelas_detalhados %}
                            <tr>
                                <td>{{ recebimento.data_recebimento|date:"d/m/Y H:i" }}</td>
                                <td>
                                    {% if recebimento.parcela.venda.cliente %}
                                        {{ recebimento.parcela.venda.cliente.nome }}
                                    {% else %}
                                        <span class="text-muted">Sem cliente</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{% url 'detalhe_venda' recebimento.parcela.venda.id %}">
                                        {{ recebimento.parcela.venda.numero_venda }}
                                    </a>
                                </td>
                                <td>{{ recebimento.parcela.numero_parcela }}/{{ recebimento.parcela.pagamento.parcelas }}</td>
                                <td>
                                    <span class="badge {% if recebimento.tipo_recebimento == 'Total' %}bg-success{% else %}bg-info text-dark{% endif %}">
                                        {{ recebimento.tipo_recebimento }}
                                    </span>
                                    {% if recebimento.tipo_recebimento == 'Parcial' %}
                                        <br><small class="text-muted">Saldo: R$ {{ recebimento.saldo_apos_recebimento|floatformat:2 }}</small>
                                    {% endif %}
                                </td>
                                <td>{{ recebimento.forma_pagamento.nome }}</td>
                                <td class="text-end"><strong>R$ {{ recebimento.valor|floatformat:2 }}</strong></td>
                                <td class="text-end text-danger">R$ {{ recebimento.valor_taxa|floatformat:2 }}</td>
                                <td class="text-end text-success">R$ {{ recebimento.valor_liquido|floatformat:2 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="9" class="text-center text-muted py-3">Nenhuma parcela recebida no período selecionado.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}