{% extends "base.html" %}

{% block title %}Relatório de Operadores de 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-upc-scan"></i> Relatório — Operadores de Balança
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0 gap-2">
        <a href="/relatorio/comissao-por-item" class="btn btn-outline-success">
            <i class="bi bi-percent"></i> Comissão por Item
        </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>

<!-- 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-3">
                <label class="form-label">Operador</label>
                <select class="form-select" id="operadorId">
                    <option value="">Todos os operadores</option>
                </select>
            </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 de resumo -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card border-primary">
            <div class="card-body">
                <h6 class="text-muted mb-2"><i class="bi bi-box-seam"></i> Total de Itens</h6>
                <h3 id="totalItens" class="mb-0 text-primary">-</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-success">
            <div class="card-body">
                <h6 class="text-muted mb-2"><i class="bi bi-currency-dollar"></i> Valor Total dos Itens</h6>
                <h3 id="totalValor" class="mb-0 text-success">-</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-secondary">
            <div class="card-body">
                <h6 class="text-muted mb-2"><i class="bi bi-people"></i> Operadores Ativos</h6>
                <h3 id="totalOperadores" class="mb-0 text-secondary">-</h3>
            </div>
        </div>
    </div>
</div>

<!-- Tabela principal -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" id="tabelaOperadores">
                <thead class="table-light">
                    <tr>
                        <th>Operador</th>
                        <th class="text-center">Código</th>
                        <th class="text-center">Qtd. Itens</th>
                        <th class="text-center">Vendas Distintas</th>
                        <th class="text-end bg-success-subtle">Valor Total Itens</th>
                        <th class="text-center">Detalhes</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>

<!-- Modal de Detalhes -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalDetalhes" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-upc-scan me-2"></i><span id="modalTitulo">Itens do Operador</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm table-striped">
                        <thead class="table-secondary">
                            <tr>
                                <th>Venda #</th>
                                <th>Data</th>
                                <th>Produto</th>
                                <th class="text-end">Qtd.</th>
                                <th class="text-end">Unit. (R$)</th>
                                <th class="text-end bg-success-subtle">Total (R$)</th>
                            </tr>
                        </thead>
                        <tbody id="detalhesBody"></tbody>
                        <tfoot id="detalhesFoot"></tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let dadosCompletos = [];

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 operadorId = document.getElementById('operadorId').value;

    const params = new URLSearchParams({ empresa_id: empresaId, data_inicio: dataInicio, data_fim: dataFim });
    if (operadorId) params.append('operador_id', operadorId);

    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/operador-balanca?${params}`);
        const data = await resp.json();

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

        // Preencher select de operadores
        const sel = document.getElementById('operadorId');
        const currentVal = sel.value;
        sel.innerHTML = '<option value="">Todos os operadores</option>';
        (data.operadores_cadastrados || []).forEach(op => {
            const opt = document.createElement('option');
            opt.value = op.id;
            opt.textContent = `${op.nome}${op.codigo ? ' (' + op.codigo + ')' : ''}`;
            if (String(op.id) === currentVal) opt.selected = true;
            sel.appendChild(opt);
        });

        dadosCompletos = data.dados;
        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_itens);
    document.getElementById('totalOperadores').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 item de balança encontrado no período</td></tr>';
        return;
    }

    tbody.innerHTML = data.dados.map(op => `
        <tr>
            <td><i class="bi bi-person-fill text-secondary"></i> <strong>${op.operador_nome}</strong></td>
            <td class="text-center"><span class="badge bg-secondary">${op.operador_codigo || '-'}</span></td>
            <td class="text-center">${op.qtd_itens}</td>
            <td class="text-center">${op.qtd_vendas_distintas}</td>
            <td class="text-end bg-success-subtle"><strong>${formatarMoeda(op.valor_total)}</strong></td>
            <td class="text-center">
                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes(${op.operador_id}, '${op.operador_nome.replace(/'/g, "\\'")}')">
                    <i class="bi bi-eye"></i>
                </button>
            </td>
        </tr>
    `).join('');
}

async function verDetalhes(operadorId, operadorNome) {
    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, operador_id: operadorId });

    document.getElementById('modalTitulo').textContent = `Itens de: ${operadorNome}`;
    document.getElementById('detalhesBody').innerHTML = '<tr><td colspan="6" class="text-center"><div class="spinner-border spinner-border-sm"></div></td></tr>';
    document.getElementById('detalhesFoot').innerHTML = '';
    new bootstrap.Modal(document.getElementById('modalDetalhes')).show();

    try {
        const resp = await fetch(`/api/relatorio/operador-balanca/detalhes?${params}`);
        const data = await resp.json();

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

        let totalItens = 0, totalValor = 0;
        document.getElementById('detalhesBody').innerHTML = data.itens.map(it => {
            totalItens += it.quantidade;
            totalValor += it.valor_item;
            return `
            <tr>
                <td>${it.numero_pedido}</td>
                <td>${it.data_venda}</td>
                <td>${it.produto_nome}</td>
                <td class="text-end">${formatarNumero(it.quantidade)}</td>
                <td class="text-end">${formatarMoeda(it.valor_unitario)}</td>
                <td class="text-end bg-success-subtle"><strong>${formatarMoeda(it.valor_item)}</strong></td>
            </tr>`;
        }).join('');

        document.getElementById('detalhesFoot').innerHTML = `
            <tr class="table-success fw-bold">
                <td colspan="3">Total</td>
                <td class="text-end">${formatarNumero(totalItens)}</td>
                <td></td>
                <td class="text-end">${formatarMoeda(totalValor)}</td>
            </tr>`;
    } catch (e) {
        console.error(e);
    }
}

function filtrar() { carregarDados(); }

function exportarExcel() {
    const empresaId = document.getElementById('empresaId').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    const operadorId = document.getElementById('operadorId').value;

    const params = new URLSearchParams({ empresa_id: empresaId, data_inicio: dataInicio, data_fim: dataFim });
    if (operadorId) params.append('operador_id', operadorId);
    window.location.href = `/api/relatorio/operador-balanca/exportar?${params}`;
}

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

function imprimirPdf() {
    const empresaId = document.getElementById('empresaId').value;
    const dataInicio = document.getElementById('dataInicio')._flatpickr
        ? document.getElementById('dataInicio')._flatpickr.selectedDates[0]
        : null;
    const dataFim = document.getElementById('dataFim')._flatpickr
        ? document.getElementById('dataFim')._flatpickr.selectedDates[0]
        : null;
    const fmt = d => d ? d.toISOString().slice(0, 10) : document.getElementById(d < dataInicio ? 'dataFim' : 'dataInicio').value;
    const di = dataInicio ? dataInicio.toISOString().slice(0, 10) : document.getElementById('dataInicio').value;
    const df = dataFim ? dataFim.toISOString().slice(0, 10) : document.getElementById('dataFim').value;
    const operadorId = document.getElementById('operadorId').value;
    const params = new URLSearchParams({ empresa_id: empresaId, data_inicio: di, data_fim: df });
    if (operadorId) params.append('operador_id', operadorId);
    window.open(`/relatorio/operador-balanca/imprimir?${params}`, '_blank');
}

// Datepicker Flatpickr
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 %}