{% extends "base.html" %}

{% block title %}Curva ABC de Produtos - CapeSystem{% endblock %}

{% block content %}
{% set criterio_label = 'Faturamento' if criterio == 'faturamento' else 'Quantidade' %}
{% set criterio_unidade = 'R$' if criterio == 'faturamento' else '' %}
{% set base_total_abc = resumo.valor_base_abc or 0 %}
{% set percentual_curva_a = ((resumo_curva['A']['valor'] / base_total_abc) * 100) if base_total_abc else 0 %}
{% set percentual_curva_b = ((resumo_curva['B']['valor'] / base_total_abc) * 100) if base_total_abc else 0 %}
{% set percentual_curva_c = ((resumo_curva['C']['valor'] / base_total_abc) * 100) if base_total_abc else 0 %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-graph-up-arrow text-success me-2"></i>Curva ABC de Produtos</h4>
    <div class="d-flex gap-2">
        <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>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
        <form method="GET">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label form-label-sm text-muted mb-1">Empresa</label>
                    <select name="empresa_id" class="form-select form-select-sm">
                        {% 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>
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm text-muted mb-1">Data inicial</label>
                    <input type="date" name="data_inicio" class="form-control form-control-sm" value="{{ data_inicio.strftime('%Y-%m-%d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm text-muted mb-1">Data final</label>
                    <input type="date" name="data_fim" class="form-control form-control-sm" value="{{ data_fim.strftime('%Y-%m-%d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm text-muted mb-1">Grupo</label>
                    <select name="grupo" class="form-select form-select-sm">
                        <option value="">Todos os grupos</option>
                        {% for g in grupos %}
                        <option value="{{ g.id }}" {% if grupo_id == g.id %}selected{% endif %}>{{ g.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm text-muted mb-1">Critério ABC</label>
                    <select name="criterio" class="form-select form-select-sm">
                        <option value="faturamento" {% if criterio == 'faturamento' %}selected{% endif %}>Faturamento</option>
                        <option value="quantidade" {% if criterio == 'quantidade' %}selected{% endif %}>Quantidade</option>
                    </select>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary btn-sm w-100">
                        <i class="bi bi-search"></i> Filtrar
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-primary text-white">
            <div class="card-body text-center">
                <h6 class="mb-1">Produtos analisados</h6>
                <h3 class="mb-0">{{ resumo.total_produtos }}</h3>
                <small>itens com venda no período</small>
            </div>
        </div>
    </div>
    <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">Quantidade total</h6>
                <h3 class="mb-0">{{ "%.2f"|format(resumo.quantidade_total) }}</h3>
                <small>unidades vendidas</small>
            </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">Faturamento total</h6>
                <h3 class="mb-0">R$ {{ "%.2f"|format(resumo.faturamento_total) }}</h3>
                <small>receita dos produtos</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-warning text-dark">
            <div class="card-body text-center">
                <h6 class="mb-1">Base do ABC</h6>
                <h3 class="mb-0">
                    {% if criterio == 'faturamento' %}
                    R$ {{ "%.2f"|format(resumo.valor_base_abc) }}
                    {% else %}
                    {{ "%.2f"|format(resumo.valor_base_abc) }}
                    {% endif %}
                </h3>
                <small>{{ criterio_label }}</small>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card border-0 shadow-sm border-start border-4 border-success h-100">
            <div class="card-body text-center">
                <h6 class="text-success mb-1">Curva A</h6>
                <h3 class="mb-0">{{ resumo_curva['A']['qtd'] }}</h3>
                <small>
                    {% if criterio == 'faturamento' %}
                    R$ {{ "%.2f"|format(resumo_curva['A']['valor']) }}
                    {% else %}
                    {{ "%.2f"|format(resumo_curva['A']['valor']) }}
                    {% endif %}
                </small>
                <div class="small fw-semibold text-success mt-1">{{ "%.2f"|format(percentual_curva_a) }}% da base ABC</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm border-start border-4 border-warning h-100">
            <div class="card-body text-center">
                <h6 class="text-warning mb-1">Curva B</h6>
                <h3 class="mb-0">{{ resumo_curva['B']['qtd'] }}</h3>
                <small>
                    {% if criterio == 'faturamento' %}
                    R$ {{ "%.2f"|format(resumo_curva['B']['valor']) }}
                    {% else %}
                    {{ "%.2f"|format(resumo_curva['B']['valor']) }}
                    {% endif %}
                </small>
                <div class="small fw-semibold text-warning mt-1">{{ "%.2f"|format(percentual_curva_b) }}% da base ABC</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm border-start border-4 border-danger h-100">
            <div class="card-body text-center">
                <h6 class="text-danger mb-1">Curva C</h6>
                <h3 class="mb-0">{{ resumo_curva['C']['qtd'] }}</h3>
                <small>
                    {% if criterio == 'faturamento' %}
                    R$ {{ "%.2f"|format(resumo_curva['C']['valor']) }}
                    {% else %}
                    {{ "%.2f"|format(resumo_curva['C']['valor']) }}
                    {% endif %}
                </small>
                <div class="small fw-semibold text-danger mt-1">{{ "%.2f"|format(percentual_curva_c) }}% da base ABC</div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-bar-chart text-primary"></i> Top 10 produtos pela base ABC</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoTop10" style="max-height: 250px;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-pie-chart text-success"></i> Distribuição da curva</h5>
            </div>
            <div class="card-body">
                <canvas id="graficoCurva" style="max-height: 250px;"></canvas>
            </div>
        </div>
    </div>
</div>

<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-list-ul"></i> Detalhamento da curva ABC</h5>
        <span class="badge bg-primary">{{ produtos|length }} produtos</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tabelaCurvaABC">
                <thead class="table-light cabecalho-colunas-preto">
                    <tr>
                        <th class="text-center">#</th>
                        <th>Código</th>
                        <th>Produto</th>
                        <th>Grupo</th>
                        <th class="text-end">Quantidade</th>
                        <th class="text-end">Faturamento</th>
                        <th class="text-end">Base ABC</th>
                        <th class="text-end">Participação</th>
                        <th class="text-end">Acumulado</th>
                        <th class="text-center">Curva</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in produtos %}
                    <tr>
                        <td class="text-center">{{ loop.index }}</td>
                        <td><code>{{ item.codigo or '-' }}</code></td>
                        <td>
                            <strong>{{ item.nome[:45] }}</strong>
                            {% if item.nome|length > 45 %}...{% endif %}
                        </td>
                        <td>{{ item.grupo or '-' }}</td>
                        <td class="text-end">{{ "%.2f"|format(item.quantidade) }}</td>
                        <td class="text-end text-success fw-bold">R$ {{ "%.2f"|format(item.faturamento) }}</td>
                        <td class="text-end">
                            {% if criterio == 'faturamento' %}
                            R$ {{ "%.2f"|format(item.valor_base_abc) }}
                            {% else %}
                            {{ "%.2f"|format(item.valor_base_abc) }}
                            {% endif %}
                        </td>
                        <td class="text-end">{{ "%.2f"|format(item.participacao) }}%</td>
                        <td class="text-end">{{ "%.2f"|format(item.acumulado) }}%</td>
                        <td class="text-center">
                            <span class="badge {% if item.curva == 'A' %}bg-success{% elif item.curva == 'B' %}bg-warning text-dark{% else %}bg-danger{% endif %}">{{ item.curva }}</span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="10" class="text-center text-muted py-4">Nenhuma venda encontrada para os filtros informados</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
<script src="{{ url_for('static', filename='vendor/chartjs/chart.umd.min.js') }}"></script>
<script>
const top10 = {{ dados_top10|tojson|safe }};
const curva = {{ dados_curva|tojson|safe }};
const criterio = {{ criterio|tojson }};

function formatarValorCurva(valor) {
    const numero = Number(valor || 0);
    return criterio === 'faturamento'
        ? 'R$ ' + numero.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
        : numero.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function formatarPercentualCurva(valor, total) {
    const numero = Number(valor || 0);
    const base = Number(total || 0);
    const percentual = base > 0 ? (numero / base) * 100 : 0;
    return percentual.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '%';
}

if (top10 && top10.labels && top10.labels.length > 0) {
    new Chart(document.getElementById('graficoTop10').getContext('2d'), {
        type: 'bar',
        data: {
            labels: top10.labels,
            datasets: [{
                label: criterio === 'faturamento' ? 'Base ABC (R$)' : 'Base ABC (Qtd)',
                data: top10.valores,
                backgroundColor: 'rgba(25, 135, 84, 0.75)',
                borderColor: '#198754',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { legend: { display: false } },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return criterio === 'faturamento'
                                ? 'R$ ' + value.toLocaleString('pt-BR')
                                : value.toLocaleString('pt-BR');
                        }
                    }
                },
                x: {
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            }
        }
    });
} else {
    document.getElementById('graficoTop10').parentElement.innerHTML = '<p class="text-center text-muted py-5">Sem dados para exibir</p>';
}

if (curva && curva.labels && curva.labels.length > 0) {
    const totalCurva = (curva.valores || []).reduce((total, valor) => total + Number(valor || 0), 0);
    new Chart(document.getElementById('graficoCurva').getContext('2d'), {
        type: 'doughnut',
        data: {
            labels: curva.labels,
            datasets: [{
                data: curva.valores,
                backgroundColor: ['#198754', '#ffc107', '#dc3545']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        generateLabels(chart) {
                            const labelsOriginais = Chart.defaults.plugins.legend.labels.generateLabels(chart);
                            return labelsOriginais.map((label, index) => ({
                                ...label,
                                text: `${chart.data.labels[index]} (${formatarPercentualCurva(chart.data.datasets[0].data[index], totalCurva)})`
                            }));
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label(context) {
                            const valor = context.parsed || 0;
                            const percentual = formatarPercentualCurva(valor, totalCurva);
                            return `${context.label}: ${formatarValorCurva(valor)} (${percentual})`;
                        }
                    }
                }
            }
        }
    });
} else {
    document.getElementById('graficoCurva').parentElement.innerHTML = '<p class="text-center text-muted py-5">Sem dados para exibir</p>';
}

function exportarExcel() {
    const tabela = document.getElementById('tabelaCurvaABC');
    const wb = XLSX.utils.table_to_book(tabela);
    XLSX.writeFile(wb, 'curva_abc_produtos_{{ data_inicio.strftime("%Y%m%d") }}_{{ data_fim.strftime("%Y%m%d") }}.xlsx');
}
</script>

<style>
.cabecalho-colunas-preto th {
    color: #000 !important;
}

@media print {
    .navbar, .sidebar, .btn, form { display: none !important; }
    .card { break-inside: avoid; }
    table { font-size: 10px; }
}
</style>
{% endblock %}