{% extends "base.html" %}

{% block title %}Relatório de Comissão por Vendedor{% 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> Relatório de Comissão por Vendedor
    </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> Por Item
        </a>
        <a href="/relatorio/operador-balanca" class="btn btn-outline-secondary">
            <i class="bi bi-upc-scan"></i> Op. Balança
        </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" name="empresa_id">
                    {% 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-4">
                <label class="form-label">Vendedor</label>
                <select class="form-select" id="vendedorId">
                    <option value="">Todos os vendedores</option>
                    {% for vendedor in vendedores %}
                    <option value="{{ vendedor.id }}">{{ vendedor.username }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Classificar</label>
                <select class="form-select" id="classificar">
                    <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Código</option>
                    <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</option>
                    <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Descrição</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Ordem</label>
                <select class="form-select" id="ordem">
                    <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Crescente</option>
                    <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Decrescente</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>

<!-- Resumo -->
<div class="row mb-4" id="resumoCards">
    <div class="col-md-3">
        <div class="card border-primary">
            <div class="card-body">
                <h6 class="text-muted mb-2">Total Vendas</h6>
                <h3 id="totalVendas" class="mb-0">-</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 Vendido</h6>
                <h3 id="valorTotal" class="mb-0">-</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="comissaoTotal" 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">Ticket Médio</h6>
                <h3 id="ticketMedio" class="mb-0 text-info">-</h3>
            </div>
        </div>
    </div>
</div>

<!-- Tabela de Vendedores -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" id="tabelaVendedores">
                <thead class="table-light">
                    <tr>
                        <th>Vendedor</th>
                        <th class="text-center">Qtd. Vendas</th>
                        <th class="text-end">Valor Total</th>
                        <th class="text-center">% Comissão</th>
                        <th class="text-end">R$ Fixo</th>
                        <th class="text-end bg-warning-subtle">Comissão Total</th>
                        <th class="text-end">Ticket Médio</th>
                    </tr>
                </thead>
                <tbody id="tabelaBody">
                    <tr>
                        <td colspan="7" 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">Vendas do Vendedor</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">
                        <thead>
                            <tr>
                                <th>Venda #</th>
                                <th>Data</th>
                                <th>Cliente</th>
                                <th class="text-end">Valor</th>
                                <th class="text-end">Comissão</th>
                            </tr>
                        </thead>
                        <tbody id="detalhesBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let dadosCompletos = [];

async function carregarDados() {
    const empresaId = document.getElementById('empresaId').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    const vendedorId = document.getElementById('vendedorId').value;
    const classificar = document.getElementById('classificar').value;
    const ordem = document.getElementById('ordem').value;
    
    const params = new URLSearchParams({
        empresa_id: empresaId,
        data_inicio: dataInicio,
        data_fim: dataFim,
        classificar,
        ordem
    });
    
    if (vendedorId) params.append('vendedor_id', vendedorId);
    
    try {
        const resp = await fetch(`/api/relatorio/comissao-vendedor?${params}`);
        const data = await resp.json();
        
        if (data.success) {
            dadosCompletos = data.dados;
            renderizar(data);
        } else {
            alert(data.message || 'Erro ao carregar dados');
        }
    } catch (e) {
        console.error(e);
        alert('Erro ao carregar relatório');
    }
}

function renderizar(data) {
    // Resumo
    document.getElementById('totalVendas').textContent = data.total_vendas;
    document.getElementById('valorTotal').textContent = formatarMoeda(data.valor_total);
    document.getElementById('comissaoTotal').textContent = formatarMoeda(data.comissao_total);
    document.getElementById('ticketMedio').textContent = formatarMoeda(data.ticket_medio);
    
    // Tabela
    const tbody = document.getElementById('tabelaBody');
    
    if (data.dados.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">Nenhum dado encontrado</td></tr>';
        return;
    }
    
    tbody.innerHTML = data.dados.map(v => `
        <tr style="cursor: pointer;" onclick="verDetalhes(${v.vendedor_id})">
            <td>
                <i class="bi bi-person-fill text-primary"></i> 
                <strong>${v.vendedor_nome}</strong>
            </td>
            <td class="text-center">${v.qtd_vendas}</td>
            <td class="text-end">${formatarMoeda(v.valor_total)}</td>
            <td class="text-center">${v.comissao_percentual.toFixed(2)}%</td>
            <td class="text-end">${formatarMoeda(v.comissao_fixa)}</td>
            <td class="text-end bg-warning-subtle"><strong>${formatarMoeda(v.comissao_total)}</strong></td>
            <td class="text-end">${formatarMoeda(v.ticket_medio)}</td>
        </tr>
    `).join('');
}

async function verDetalhes(vendedorId) {
    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,
        vendedor_id: vendedorId
    });
    
    try {
        const resp = await fetch(`/api/relatorio/comissao-vendedor/detalhes?${params}`);
        const data = await resp.json();
        
        if (data.success) {
            const tbody = document.getElementById('detalhesBody');
            tbody.innerHTML = data.vendas.map(v => `
                <tr>
                    <td>${v.numero_pedido}</td>
                    <td>${v.data_venda}</td>
                    <td>${v.cliente_nome || 'Consumidor'}</td>
                    <td class="text-end">${formatarMoeda(v.valor_total)}</td>
                    <td class="text-end text-success">${formatarMoeda(v.comissao)}</td>
                </tr>
            `).join('');
            
            new bootstrap.Modal(document.getElementById('modalDetalhes')).show();
        }
    } catch (e) {
        console.error(e);
        alert('Erro ao carregar detalhes');
    }
}

function filtrar() {
    carregarDados();
}

function exportarExcel() {
    if (dadosCompletos.length === 0) {
        alert('Nenhum dado para exportar');
        return;
    }
    
    const empresaId = document.getElementById('empresaId').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    const vendedorId = document.getElementById('vendedorId').value;
    
    const params = new URLSearchParams({
        empresa_id: empresaId,
        data_inicio: dataInicio,
        data_fim: dataFim,
        formato: 'excel'
    });
    
    if (vendedorId) params.append('vendedor_id', vendedorId);
    
    window.location.href = `/api/relatorio/comissao-vendedor/exportar?${params}`;
}

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

function imprimirPdf() {
    const empresaId = document.getElementById('empresaId').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    const vendedorId = document.getElementById('vendedorId').value;
    const params = new URLSearchParams({ empresa_id: empresaId, data_inicio: dataInicio, data_fim: dataFim });
    if (vendedorId) params.append('vendedor_id', vendedorId);
    window.open(`/relatorio/comissao-vendedor/imprimir?${params}`, '_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);
    }
    carregarDados();
});
</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>

<style>
.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#tabelaVendedores tbody tr:hover {
    background-color: rgba(0,123,255,0.05);
}
</style>

{% endblock %}