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

{% block title %}CMV - Custo da Mercadoria Vendida - CapeSystem{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-calculator text-primary"></i> CMV - Custo da Mercadoria Vendida</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> Excel
        </button>
        <button class="btn btn-outline-primary" onclick="window.print()">
            <i class="bi bi-printer"></i> Imprimir
        </button>
    </div>
</div>

<!-- Fórmula CMV -->
<div class="alert alert-info mb-4">
    <div class="d-flex align-items-center">
        <i class="bi bi-info-circle fs-4 me-3"></i>
        <div>
            <strong>Fórmula do CMV:</strong> 
            <code>CMV = Estoque Inicial + Compras - Estoque Final</code>
            <br>
            <small class="text-muted">O CMV representa o custo direto das mercadorias vendidas no período.</small>
        </div>
    </div>
</div>

<!-- Demonstrativo CMV -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-calculator-fill"></i> Demonstrativo do CMV</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td><strong>( + ) Estoque Inicial</strong></td>
                            <td class="text-end fs-5">R$ {{ "%.2f"|format(cmv.estoque_inicial) }}</td>
                        </tr>
                        <tr class="table-light">
                            <td><strong>( + ) Compras no Período</strong></td>
                            <td class="text-end fs-5 text-primary">R$ {{ "%.2f"|format(cmv.compras) }}</td>
                        </tr>
                        <tr>
                            <td><strong>( - ) Estoque Final</strong></td>
                            <td class="text-end fs-5">R$ {{ "%.2f"|format(cmv.estoque_final) }}</td>
                        </tr>
                        <tr class="table-dark">
                            <td><strong>( = ) CMV</strong></td>
                            <td class="text-end fs-4 fw-bold text-warning">R$ {{ "%.2f"|format(cmv.total) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <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-graph-up-arrow"></i> Análise de Rentabilidade</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td><strong>Receita Bruta (Vendas)</strong></td>
                            <td class="text-end fs-5 text-success">R$ {{ "%.2f"|format(analise.receita_bruta) }}</td>
                        </tr>
                        <tr class="table-light">
                            <td><strong>( - ) CMV</strong></td>
                            <td class="text-end fs-5 text-danger">R$ {{ "%.2f"|format(cmv.total) }}</td>
                        </tr>
                        <tr class="table-success">
                            <td><strong>( = ) Lucro Bruto</strong></td>
                            <td class="text-end fs-4 fw-bold">R$ {{ "%.2f"|format(analise.lucro_bruto) }}</td>
                        </tr>
                        <tr>
                            <td><strong>Margem Bruta</strong></td>
                            <td class="text-end">
                                <span class="badge fs-5 {% if analise.margem_bruta >= 30 %}bg-success{% elif analise.margem_bruta >= 15 %}bg-warning text-dark{% else %}bg-danger{% endif %}">
                                    {{ "%.1f"|format(analise.margem_bruta) }}%
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Indicadores -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h6 class="text-muted">Giro de Estoque</h6>
                <h3 class="text-primary mb-0">{{ "%.2f"|format(indicadores.giro_estoque) }}x</h3>
                <small class="text-muted">vezes no período</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h6 class="text-muted">Prazo Médio Estoque</h6>
                <h3 class="text-info mb-0">{{ indicadores.prazo_medio_estoque }}</h3>
                <small class="text-muted">dias</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h6 class="text-muted">% CMV s/ Receita</h6>
                <h3 class="{% if indicadores.percentual_cmv <= 70 %}text-success{% else %}text-danger{% endif %} mb-0">
                    {{ "%.1f"|format(indicadores.percentual_cmv) }}%
                </h3>
                <small class="text-muted">ideal: até 70%</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <h6 class="text-muted">Cobertura Estoque</h6>
                <h3 class="text-warning mb-0">{{ indicadores.cobertura_estoque }}</h3>
                <small class="text-muted">dias de vendas</small>
            </div>
        </div>
    </div>
</div>

<!-- Gráfico Evolução -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white">
        <h5 class="mb-0"><i class="bi bi-bar-chart-line text-primary"></i> Evolução CMV x Receita</h5>
    </div>
    <div class="card-body">
        <canvas id="graficoEvolucao" height="100"></canvas>
    </div>
</div>

<!-- CMV por Grupo -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white">
        <h5 class="mb-0"><i class="bi bi-pie-chart text-success"></i> CMV por Grupo de Produto</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tabelaCMV">
                <thead class="table-dark">
                    <tr>
                        <th>Grupo</th>
                        <th class="text-end">Qtd Vendida</th>
                        <th class="text-end">Custo Total</th>
                        <th class="text-end">Receita</th>
                        <th class="text-end">Lucro</th>
                        <th class="text-end">Margem</th>
                        <th class="text-end">% do CMV</th>
                    </tr>
                </thead>
                <tbody>
                    {% for g in cmv_por_grupo %}
                    <tr>
                        <td><strong>{{ g.nome }}</strong></td>
                        <td class="text-end">{{ "%.2f"|format(g.quantidade) }}</td>
                        <td class="text-end text-danger">R$ {{ "%.2f"|format(g.custo) }}</td>
                        <td class="text-end text-success">R$ {{ "%.2f"|format(g.receita) }}</td>
                        <td class="text-end {% if g.lucro >= 0 %}text-primary{% else %}text-danger{% endif %}">
                            R$ {{ "%.2f"|format(g.lucro) }}
                        </td>
                        <td class="text-end">
                            <span class="badge {% if g.margem >= 30 %}bg-success{% elif g.margem >= 15 %}bg-warning text-dark{% else %}bg-danger{% endif %}">
                                {{ "%.1f"|format(g.margem) }}%
                            </span>
                        </td>
                        <td class="text-end">
                            <div class="progress" style="height: 20px; width: 100px;">
                                <div class="progress-bar bg-info" style="width: {{ g.percentual_cmv }}%">
                                    {{ "%.1f"|format(g.percentual_cmv) }}%
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            Nenhum dado no período
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light fw-bold">
                    <tr>
                        <td>TOTAL</td>
                        <td class="text-end">{{ "%.2f"|format(totais.quantidade) }}</td>
                        <td class="text-end text-danger">R$ {{ "%.2f"|format(cmv.total) }}</td>
                        <td class="text-end text-success">R$ {{ "%.2f"|format(analise.receita_bruta) }}</td>
                        <td class="text-end">R$ {{ "%.2f"|format(analise.lucro_bruto) }}</td>
                        <td class="text-end">{{ "%.1f"|format(analise.margem_bruta) }}%</td>
                        <td class="text-end">100%</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

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

new Chart(document.getElementById('graficoEvolucao').getContext('2d'), {
    type: 'bar',
    data: {
        labels: dadosEvolucao.labels,
        datasets: [
            {
                label: 'Receita',
                data: dadosEvolucao.receita,
                backgroundColor: 'rgba(25, 135, 84, 0.7)',
                borderColor: '#198754',
                borderWidth: 1
            },
            {
                label: 'CMV',
                data: dadosEvolucao.cmv,
                backgroundColor: 'rgba(220, 53, 69, 0.7)',
                borderColor: '#dc3545',
                borderWidth: 1
            },
            {
                label: 'Lucro Bruto',
                data: dadosEvolucao.lucro,
                type: 'line',
                borderColor: '#0d6efd',
                backgroundColor: 'transparent',
                borderWidth: 2,
                tension: 0.3
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'R$ ' + value.toLocaleString('pt-BR');
                    }
                }
            }
        }
    }
});

function exportarExcel() {
    const table = document.getElementById('tabelaCMV');
    const wb = XLSX.utils.table_to_book(table);
    XLSX.writeFile(wb, 'cmv_{{ data_inicio.strftime("%Y%m%d") }}_{{ data_fim.strftime("%Y%m%d") }}.xlsx');
}
</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 { display: none !important; }
    .card { break-inside: avoid; }
}
</style>
{% endblock %}