{% extends "base.html" %}
{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Fluxo de Caixa{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-arrow-left-right text-primary"></i> Fluxo de Caixa</h1>
    <div class="d-flex gap-2">
        <form class="d-flex gap-2" method="GET">
            <select name="empresa_id" class="form-select" style="width: 260px;">
                {% for emp in empresas_disponiveis %}
                <option value="{{ emp.id }}" {% if empresa_id_selecionada == emp.id %}selected{% endif %}>
                    {{ empresa_ui.nome(emp) }}
                </option>
                {% endfor %}
            </select>
            <input type="date" name="data_inicio" class="form-control" value="{{ data_inicio.strftime('%Y-%m-%d') }}" style="width: 150px;">
            <input type="date" name="data_fim" class="form-control" value="{{ data_fim.strftime('%Y-%m-%d') }}" style="width: 150px;">
            <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
        </form>
        <button class="btn btn-outline-success" onclick="exportarExcel()">
            <i class="bi bi-file-earmark-excel"></i> Exportar Excel
        </button>
        <button class="btn btn-outline-primary" onclick="window.print()">
            <i class="bi bi-printer"></i> Imprimir
        </button>
    </div>
</div>

<!-- Resumo -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-success text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Total de Entradas</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.total_entradas) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-danger text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Total de Saídas</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.total_saidas) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm {% if resumo.saldo >= 0 %}bg-primary{% else %}bg-warning{% endif %} text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Saldo do Período</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.saldo) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-info text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Saldo Acumulado</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.saldo_acumulado) }}</h3>
            </div>
        </div>
    </div>
</div>

<!-- Gráfico -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white">
        <h5 class="mb-0"><i class="bi bi-graph-up-arrow text-success"></i> Evolução do Fluxo de Caixa</h5>
    </div>
    <div class="card-body">
        <canvas id="graficoFluxo" height="100"></canvas>
    </div>
</div>

<div class="row">
    <!-- Entradas por Categoria -->
    <div class="col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="bi bi-arrow-down-circle"></i> Entradas por Categoria</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Categoria</th>
                                <th class="text-end">Valor</th>
                                <th class="text-end">%</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for cat in entradas_por_categoria %}
                            <tr>
                                <td>{{ cat.nome }}</td>
                                <td class="text-end text-success">R$ {{ "%.2f"|format(cat.total) }}</td>
                                <td class="text-end">{{ "%.1f"|format(cat.percentual) }}%</td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="3" class="text-center text-muted">Nenhuma Entrada no Período</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Saídas por Categoria -->
    <div class="col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-danger text-white">
                <h5 class="mb-0"><i class="bi bi-arrow-up-circle"></i> Saídas por Categoria</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Categoria</th>
                                <th class="text-end">Valor</th>
                                <th class="text-end">%</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for cat in saidas_por_categoria %}
                            <tr>
                                <td>{{ cat.nome }}</td>
                                <td class="text-end text-danger">R$ {{ "%.2f"|format(cat.total) }}</td>
                                <td class="text-end">{{ "%.1f"|format(cat.percentual) }}%</td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="3" class="text-center text-muted">Nenhuma Saída no Período</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Detalhamento Diário -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-calendar3"></i> Movimentação Diária</h5>
        <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#detalheDiario">
            <i class="bi bi-chevron-down"></i> Expandir/Recolher
        </button>
    </div>
    <div id="detalheDiario" class="collapse show">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped mb-0" id="tabelaFluxo">
                    <thead class="table-dark">
                        <tr>
                            <th>Data</th>
                            <th class="text-end">Entradas</th>
                            <th class="text-end">Saídas</th>
                            <th class="text-end">Saldo Dia</th>
                            <th class="text-end">Saldo Acumulado</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for dia in movimentacao_diaria %}
                        <tr>
                            <td>{{ dia.data.strftime('%d/%m/%Y') }} ({{ dia.dia_semana }})</td>
                            <td class="text-end text-success">
                                {% if dia.entradas > 0 %}R$ {{ "%.2f"|format(dia.entradas) }}{% else %}-{% endif %}
                            </td>
                            <td class="text-end text-danger">
                                {% if dia.saidas > 0 %}R$ {{ "%.2f"|format(dia.saidas) }}{% else %}-{% endif %}
                            </td>
                            <td class="text-end {% if dia.saldo >= 0 %}text-primary{% else %}text-warning{% endif %}">
                                R$ {{ "%.2f"|format(dia.saldo) }}
                            </td>
                            <td class="text-end fw-bold">R$ {{ "%.2f"|format(dia.saldo_acumulado) }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">
                                Nenhuma Movimentação no Período
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='vendor/chartjs/chart.umd.min.js') }}"></script>
<script>
const dadosGrafico = {{ dados_grafico|tojson|safe }};

const ctx = document.getElementById('graficoFluxo').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: dadosGrafico.labels,
        datasets: [
            {
                label: 'Entradas',
                data: dadosGrafico.entradas,
                backgroundColor: 'rgba(25, 135, 84, 0.7)',
                borderColor: '#198754',
                borderWidth: 1
            },
            {
                label: 'Saídas',
                data: dadosGrafico.saidas,
                backgroundColor: 'rgba(220, 53, 69, 0.7)',
                borderColor: '#dc3545',
                borderWidth: 1
            },
            {
                label: 'Saldo Acumulado',
                data: dadosGrafico.saldo_acumulado,
                type: 'line',
                borderColor: '#0d6efd',
                backgroundColor: 'transparent',
                borderWidth: 2,
                tension: 0.3,
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        responsive: true,
        interaction: {
            mode: 'index',
            intersect: false
        },
        scales: {
            y: {
                beginAtZero: true,
                position: 'left',
                ticks: {
                    callback: function(value) {
                        return 'R$ ' + value.toLocaleString('pt-BR');
                    }
                }
            },
            y1: {
                beginAtZero: false,
                position: 'right',
                grid: { drawOnChartArea: false },
                ticks: {
                    callback: function(value) {
                        return 'R$ ' + value.toLocaleString('pt-BR');
                    }
                }
            }
        }
    }
});

function exportarExcel() {
    const table = document.getElementById('tabelaFluxo');
    const wb = XLSX ? XLSX.utils.table_to_book(table) : null;
    if (wb) {
        XLSX.writeFile(wb, 'fluxo_caixa_{{ data_inicio.strftime("%Y%m%d") }}_{{ data_fim.strftime("%Y%m%d") }}.xlsx');
    } else {
        alert('Biblioteca XLSX não carregada');
    }
}
</script>
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>

<style>
@media print {
    .navbar, .sidebar, .btn, form, #detalheDiario button { display: none !important; }
    .card { break-inside: avoid; }
    #detalheDiario { display: block !important; }
}
</style>
{% endblock %}