{% extends "base.html" %}

{% block title %}Comissão por Item (Balança){% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="bi bi-percent"></i> Comissão por Item
        <small class="text-muted fs-6 ms-2">Vendedor + Operador de Balança</small>
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0 gap-2">
        <a href="/relatorio/operador-balanca" class="btn btn-outline-secondary">
            <i class="bi bi-upc-scan"></i> Por Operador
        </a>
        <a href="/relatorio/comissao-vendedor" class="btn btn-outline-primary">
            <i class="bi bi-person-fill"></i> Por Venda
        </a>
        <button class="btn btn-outline-secondary" onclick="imprimirPdf()">
            <i class="bi bi-printer"></i> Imprimir / PDF
        </button>
        <button class="btn btn-success" onclick="exportarExcel()">
            <i class="bi bi-file-earmark-excel"></i> Exportar Excel
        </button>
    </div>
</div>

<!-- Aviso de configuração -->
<div id="avisoConfig" class="alert alert-warning d-none mb-3">
    <i class="bi bi-exclamation-triangle"></i>
    <strong>Operador como vendedor desativado:</strong> os itens de balança ainda aparecem atribuídos ao vendedor da venda.
    Ative a opção <em>"Operador como vendedor"</em> em
    <a href="/configuracoes/sistema#balanca" target="_blank">Configurações → Balança</a> para separar as comissões por operador.
</div>

<!-- Filtros -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Empresa</label>
                <select class="form-select" id="empresaId">
                    {% for empresa in empresas_disponiveis %}
                    <option value="{{ empresa.id }}" {% if empresa_id_selecionada == empresa.id %}selected{% endif %}>
                        {{ empresa.nome or ('Empresa ' ~ empresa.id) }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Data Inicial</label>
                <div class="input-group">
                    <input type="text" class="form-control flatpickr-input" id="dataInicio" value="{{ data_inicio }}" placeholder="dd/mm/aaaa" readonly>
                    <span class="input-group-text" style="cursor:pointer;" onclick="document.getElementById('dataInicio')._flatpickr.open()"><i class="bi bi-calendar3"></i></span>
                </div>
            </div>
            <div class="col-md-3">
                <label class="form-label">Data Final</label>
                <div class="input-group">
                    <input type="text" class="form-control flatpickr-input" id="dataFim" value="{{ data_fim }}" placeholder="dd/mm/aaaa" readonly>
                    <span class="input-group-text" style="cursor:pointer;" onclick="document.getElementById('dataFim')._flatpickr.open()"><i class="bi bi-calendar3"></i></span>
                </div>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button class="btn btn-primary w-100" onclick="filtrar()">
                    <i class="bi bi-filter"></i> Filtrar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Cards resumo -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-primary">
            <div class="card-body">
                <h6 class="text-muted mb-2">Total de Itens</h6>
                <h3 id="totalItens" class="mb-0 text-primary">-</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-success">
            <div class="card-body">
                <h6 class="text-muted mb-2">Valor Total (Itens)</h6>
                <h3 id="totalValor" class="mb-0 text-success">-</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-warning">
            <div class="card-body">
                <h6 class="text-muted mb-2">Comissão Total</h6>
                <h3 id="totalComissao" class="mb-0 text-warning">-</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-info">
            <div class="card-body">
                <h6 class="text-muted mb-2">Pessoas comissionadas</h6>
                <h3 id="totalPessoas" class="mb-0 text-info">-</h3>
            </div>
        </div>
    </div>
</div>

<!-- Legenda de tipos -->
<div class="d-flex gap-3 mb-3 align-items-center">
    <small class="text-muted">Legenda:</small>
    <span class="badge bg-primary"><i class="bi bi-person-fill"></i> Vendedor (venda)</span>
    <span class="badge bg-secondary"><i class="bi bi-upc-scan"></i> Operador de Balança (item)</span>
</div>

<!-- Tabela -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" id="tabelaComissao">
                <thead class="table-light">
                    <tr>
                        <th>Tipo</th>
                        <th>Nome</th>
                        <th class="text-center">Qtd. Itens</th>
                        <th class="text-end">Valor Total</th>
                        <th class="text-center">% Comissão</th>
                        <th class="text-end bg-warning-subtle">Comissão Total</th>
                    </tr>
                </thead>
                <tbody id="tabelaBody">
                    <tr>
                        <td colspan="6" class="text-center text-muted">
                            <div class="spinner-border spinner-border-sm me-2"></div>
                            Carregando...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="alert alert-info mt-4">
    <i class="bi bi-info-circle"></i>
    <strong>Como funciona este relatório:</strong>
    <ul class="mb-0 mt-1">
        <li>Cada <em>item de venda</em> é atribuído ao <strong>operador de balança</strong> (se a etiqueta Code128 continha código de operador e a opção "Operador como vendedor" está ativa)</li>
        <li>Itens sem operador de balança são atribuídos ao <strong>vendedor da venda</strong></li>
        <li>A comissão é calculada sobre o valor de cada item individualmente</li>
        <li>Compare com o <a href="/relatorio/comissao-vendedor">Relatório por Venda</a> para verificar divergências</li>
    </ul>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    carregarDados();
});

async function carregarDados() {
    const empresaId = document.getElementById('empresaId').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;

    const params = new URLSearchParams({ empresa_id: empresaId, data_inicio: dataInicio, data_fim: dataFim });

    const tbody = document.getElementById('tabelaBody');
    tbody.innerHTML = '<tr><td colspan="6" class="text-center"><div class="spinner-border spinner-border-sm"></div> Carregando...</td></tr>';

    try {
        const resp = await fetch(`/api/relatorio/comissao-por-item?${params}`);
        const data = await resp.json();

        if (!data.success) {
            tbody.innerHTML = `<tr><td colspan="6" class="text-center text-danger">${data.message || 'Erro'}</td></tr>`;
            return;
        }

        // Aviso se operador_como_vendedor desligado
        const aviso = document.getElementById('avisoConfig');
        if (!data.operador_como_vendedor) {
            aviso.classList.remove('d-none');
        } else {
            aviso.classList.add('d-none');
        }

        renderizar(data);
    } catch (e) {
        console.error(e);
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-danger">Erro de conexão</td></tr>';
    }
}

function renderizar(data) {
    document.getElementById('totalItens').textContent = data.total_itens;
    document.getElementById('totalValor').textContent = formatarMoeda(data.total_valor);
    document.getElementById('totalComissao').textContent = formatarMoeda(data.total_comissao);
    document.getElementById('totalPessoas').textContent = data.dados.length;

    const tbody = document.getElementById('tabelaBody');

    if (data.dados.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Nenhum dado encontrado</td></tr>';
        return;
    }

    tbody.innerHTML = data.dados.map(d => {
        const ehOperador = d.tipo === 'operador_balanca';
        const badgeClasse = ehOperador ? 'bg-secondary' : 'bg-primary';
        const badgeIcone = ehOperador ? 'bi-upc-scan' : 'bi-person-fill';
        const badgeLabel = ehOperador ? 'Op. Balança' : 'Vendedor';
        const rowClass = ehOperador ? 'table-secondary' : '';

        return `
        <tr class="${rowClass}">
            <td><span class="badge ${badgeClasse}"><i class="bi ${badgeIcone}"></i> ${badgeLabel}</span></td>
            <td><strong>${d.nome}</strong></td>
            <td class="text-center">${d.qtd_itens}</td>
            <td class="text-end">${formatarMoeda(d.valor_total)}</td>
            <td class="text-center">${parseFloat(d.comissao_percentual || 0).toFixed(2)}%</td>
            <td class="text-end bg-warning-subtle"><strong>${formatarMoeda(d.comissao_total)}</strong></td>
        </tr>`;
    }).join('');
}

function filtrar() { carregarDados(); }

function exportarExcel() {
    const empresaId = document.getElementById('empresaId').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    window.location.href = `/api/relatorio/comissao-por-item/exportar?empresa_id=${empresaId}&data_inicio=${dataInicio}&data_fim=${dataFim}`;
}

function formatarMoeda(v) {
    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(v || 0);
}

function imprimirPdf() {
    const empresaId = document.getElementById('empresaId').value;
    const di = document.getElementById('dataInicio').value;
    const df = document.getElementById('dataFim').value;
    window.open(`/relatorio/comissao-por-item/imprimir?empresa_id=${empresaId}&data_inicio=${di}&data_fim=${df}`, '_blank');
}

document.addEventListener('DOMContentLoaded', () => {
    if (window.flatpickr) {
        const opcoesData = {
            locale: 'pt',
            dateFormat: 'Y-m-d',
            altInput: true,
            altFormat: 'd/m/Y',
            allowInput: true,
        };
        flatpickr('#dataInicio', opcoesData);
        flatpickr('#dataFim', opcoesData);
    }
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
{% endblock %}