{% extends "base.html" %}

{% block title %}Relatório de Comissão - Garçom/Atendente{% endblock %}

{% block extra_css %}
<style>
    .card-garcom {
        border: none;
        border-radius: 12px;
        transition: all 0.2s;
        margin-bottom: 1rem;
    }
    
    .card-garcom:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .rank-medal {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-right: 10px;
    }
    
    .rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); }
    .rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); }
    .rank-3 { background: linear-gradient(135deg, #cd7f32, #a06320); }
    .rank-other { background: #e5e7eb; }
    
    .origem-mini {
        font-size: 0.75rem;
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        margin-right: 5px;
    }
    
    .origem-mesas { background: #dbeafe; color: #1e40af; }
    .origem-pdvweb { background: #fef3c7; color: #92400e; }
    .origem-delivery { background: #dcfce7; color: #166534; }
    
    .resumo-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 16px;
        padding: 1.5rem;
    }
    
    .resumo-item {
        text-align: center;
        padding: 0.5rem;
    }
    
    .resumo-valor {
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .resumo-label {
        font-size: 0.85rem;
        opacity: 0.9;
    }
    
    .comissao-destaque {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: bold;
    }
    
    .tabela-detalhes {
        font-size: 0.9rem;
    }
    
    .tabela-detalhes th {
        font-weight: 600;
        background: #f8fafc;
    }

    .data-helper-label {
        font-size: 0.78rem;
    }
    
    @media print {
        .no-print { display: none !important; }
        .card { break-inside: avoid; }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4 no-print">
        <div>
            <h2><i class="fas fa-user-tie me-2"></i>Relatório de Comissão</h2>
            <p class="text-muted mb-0">Garçons e Atendentes - Módulo Food</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary" onclick="window.print()">
                <i class="fas fa-print me-2"></i>Imprimir
            </button>
            <a href="{{ url_for('food.dashboard_food') }}" class="btn btn-primary">
                <i class="fas fa-arrow-left me-2"></i>Dashboard
            </a>
        </div>
    </div>
    
    <!-- Filtros -->
    <div class="card mb-4 no-print">
        <div class="card-body">
            <form id="form-filtros" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Data Início</label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="data_inicio" name="data_inicio" lang="pt-BR">
                    </div>
                    <small class="text-muted data-helper-label d-block mt-1">Formato desejado: DD/MM/AAAA <span id="data_inicio_formatada" class="fw-semibold"></span></small>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Data Fim</label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="data_fim" name="data_fim" lang="pt-BR">
                    </div>
                    <small class="text-muted data-helper-label d-block mt-1">Formato desejado: DD/MM/AAAA <span id="data_fim_formatada" class="fw-semibold"></span></small>
                </div>
                <div class="col-md-2">
                    <label class="form-label">% Comissão</label>
                          <input type="number" class="form-control" id="percentual_comissao" name="percentual_comissao" 
                              value="{{ percentual_comissao_padrao or 0 }}" min="0" max="100" step="0.5">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Garçom/Atendente</label>
                    <select class="form-select" id="vendedor_id" name="vendedor_id">
                        <option value="">Todos</option>
                    </select>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Resumo Geral -->
    <div class="resumo-card mb-4" id="resumo-container" style="display: none;">
        <div class="row">
            <div class="col-md-2 resumo-item">
                <div class="resumo-valor" id="resumo-vendedores">0</div>
                <div class="resumo-label"><i class="fas fa-users me-1"></i>Vendedores</div>
            </div>
            <div class="col-md-2 resumo-item">
                <div class="resumo-valor" id="resumo-vendas">0</div>
                <div class="resumo-label"><i class="fas fa-receipt me-1"></i>Total Vendas</div>
            </div>
            <div class="col-md-3 resumo-item">
                <div class="resumo-valor" id="resumo-faturamento">R$ 0,00</div>
                <div class="resumo-label"><i class="fas fa-dollar-sign me-1"></i>Faturamento</div>
            </div>
            <div class="col-md-2 resumo-item">
                <div class="resumo-valor" id="resumo-ticket">R$ 0,00</div>
                <div class="resumo-label"><i class="fas fa-chart-line me-1"></i>Ticket Médio</div>
            </div>
            <div class="col-md-3 resumo-item">
                <div class="resumo-valor" id="resumo-comissao">R$ 0,00</div>
                <div class="resumo-label"><i class="fas fa-hand-holding-usd me-1"></i>Total Comissões</div>
            </div>
        </div>
    </div>
    
    <!-- Lista de Garçons -->
    <div id="lista-garcons">
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Carregando...</span>
            </div>
            <p class="text-muted mt-2">Carregando dados...</p>
        </div>
    </div>
    
    <!-- Tabela para Impressão -->
    <div class="card mt-4" id="tabela-impressao" style="display: none;">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-table me-2"></i>Detalhamento por Vendedor</h5>
        </div>
        <div class="card-body p-0">
            <table class="table table-striped tabela-detalhes mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Garçom/Atendente</th>
                        <th class="text-center">Vendas</th>
                        <th class="text-end">Total Vendido</th>
                        <th class="text-end">Ticket Médio</th>
                        <th class="text-center">%</th>
                        <th class="text-end">Comissão</th>
                    </tr>
                </thead>
                <tbody id="tabela-garcons-body">
                </tbody>
                <tfoot class="table-light fw-bold">
                    <tr>
                        <td colspan="2">TOTAIS</td>
                        <td class="text-center" id="total-vendas-footer">0</td>
                        <td class="text-end" id="total-vendido-footer">R$ 0,00</td>
                        <td class="text-end" id="total-ticket-footer">R$ 0,00</td>
                        <td></td>
                        <td class="text-end" id="total-comissao-footer">R$ 0,00</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function formatarDataISO(data) {
    const ano = data.getFullYear();
    const mes = String(data.getMonth() + 1).padStart(2, '0');
    const dia = String(data.getDate()).padStart(2, '0');
    return `${ano}-${mes}-${dia}`;
}

function formatarDataBR(valorIso) {
    if (!valorIso || !valorIso.includes('-')) {
        return '';
    }
    const [ano, mes, dia] = valorIso.split('-');
    if (!ano || !mes || !dia) {
        return '';
    }
    return `${dia}/${mes}/${ano}`;
}

function atualizarResumoData(idCampo) {
    const input = document.getElementById(idCampo);
    const alvo = document.getElementById(`${idCampo}_formatada`);
    if (!input || !alvo) {
        return;
    }
    alvo.textContent = input.value ? `Selecionada: ${formatarDataBR(input.value)}` : '';
}

document.addEventListener('DOMContentLoaded', function() {
    // Definir datas padrão (mês atual)
    const hoje = new Date();
    const primeiroDia = new Date(hoje.getFullYear(), hoje.getMonth(), 1);

    document.getElementById('data_inicio').value = formatarDataISO(primeiroDia);
    document.getElementById('data_fim').value = formatarDataISO(hoje);

    ['data_inicio', 'data_fim'].forEach((idCampo) => {
        atualizarResumoData(idCampo);
        document.getElementById(idCampo).addEventListener('change', function() {
            atualizarResumoData(idCampo);
        });
    });
    
    // Carregar dados
    carregarRelatorio();
    
    // Submit do form
    document.getElementById('form-filtros').addEventListener('submit', function(e) {
        e.preventDefault();
        carregarRelatorio();
    });
});

function formatarMoeda(valor) {
    return 'R$ ' + valor.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

function carregarRelatorio() {
    const params = new URLSearchParams({
        data_inicio: document.getElementById('data_inicio').value,
        data_fim: document.getElementById('data_fim').value,
        percentual_comissao: document.getElementById('percentual_comissao').value,
        vendedor_id: document.getElementById('vendedor_id').value
    });
    
    document.getElementById('lista-garcons').innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Carregando...</span>
            </div>
        </div>
    `;
    
    fetch('/food/api/relatorio/comissao-garcom?' + params)
        .then(async (response) => {
            const contentType = response.headers.get('content-type') || '';
            const payload = contentType.includes('application/json')
                ? await response.json()
                : { success: false, message: (await response.text()) || 'Falha ao carregar o relatório.' };

            if (!response.ok || !payload.success) {
                throw new Error(payload.message || 'Falha ao carregar o relatório.');
            }

            return payload;
        })
        .then(data => {
            // Preencher select de vendedores
            const selectVendedor = document.getElementById('vendedor_id');
            const valorAtual = selectVendedor.value;
            selectVendedor.innerHTML = '<option value="">Todos</option>';
            data.vendedores_disponiveis.forEach(v => {
                selectVendedor.innerHTML += `<option value="${v.id}" ${v.id == valorAtual ? 'selected' : ''}>${v.nome}</option>`;
            });

            // Resumo
            const resumo = data.resumo;
            document.getElementById('resumo-container').style.display = 'block';
            document.getElementById('resumo-vendedores').textContent = resumo.total_vendedores;
            document.getElementById('resumo-vendas').textContent = resumo.total_vendas;
            document.getElementById('resumo-faturamento').textContent = formatarMoeda(resumo.total_vendido);
            document.getElementById('resumo-ticket').textContent = formatarMoeda(resumo.ticket_medio_geral);
            document.getElementById('resumo-comissao').textContent = formatarMoeda(resumo.total_comissao);

            // Lista de garçons (cards)
            const container = document.getElementById('lista-garcons');
            if (data.garcons.length > 0) {
                container.innerHTML = '<div class="row">' + data.garcons.map((g, i) => {
                    const rankClass = i === 0 ? 'rank-1' : i === 1 ? 'rank-2' : i === 2 ? 'rank-3' : 'rank-other';
                    const medalha = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : (i + 1);

                    return `
                        <div class="col-md-6 col-lg-4">
                            <div class="card card-garcom">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="rank-medal ${rankClass}">${medalha}</span>
                                        <div>
                                            <h5 class="mb-0">${g.nome}</h5>
                                            <small class="text-muted">${g.qtd_vendas} vendas</small>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-6">
                                            <div class="text-muted small">Total Vendido</div>
                                            <div class="fs-5 fw-bold text-primary">${formatarMoeda(g.total_vendido)}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Ticket Médio</div>
                                            <div class="fs-6 fw-bold">${formatarMoeda(g.ticket_medio)}</div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <span class="origem-mini origem-mesas">
                                            <i class="fas fa-utensils me-1"></i>${g.vendas_por_origem.mesas.qtd}
                                        </span>
                                        <span class="origem-mini origem-pdvweb" title="PDV Web">
                                            <i class="fas fa-desktop me-1"></i>PDV Web: ${g.vendas_por_origem.balcao.qtd}
                                        </span>
                                        <span class="origem-mini origem-delivery">
                                            <i class="fas fa-motorcycle me-1"></i>${g.vendas_por_origem.delivery.qtd}
                                        </span>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">${g.percentual_comissao}% comissão</small>
                                        <div class="comissao-destaque">
                                            ${formatarMoeda(g.valor_comissao)}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('') + '</div>';
            } else {
                container.innerHTML = `
                    <div class="text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Nenhum resultado encontrado</h5>
                        <p class="text-muted">Não há vendas Food no período selecionado.</p>
                    </div>
                `;
            }

            // Tabela para impressão
            const tabelaBody = document.getElementById('tabela-garcons-body');
            if (data.garcons.length > 0) {
                document.getElementById('tabela-impressao').style.display = 'block';
                tabelaBody.innerHTML = data.garcons.map((g, i) => `
                    <tr>
                        <td>${i + 1}</td>
                        <td>${g.nome}</td>
                        <td class="text-center">${g.qtd_vendas}</td>
                        <td class="text-end">${formatarMoeda(g.total_vendido)}</td>
                        <td class="text-end">${formatarMoeda(g.ticket_medio)}</td>
                        <td class="text-center">${g.percentual_comissao}%</td>
                        <td class="text-end fw-bold text-success">${formatarMoeda(g.valor_comissao)}</td>
                    </tr>
                `).join('');

                // Totais
                document.getElementById('total-vendas-footer').textContent = resumo.total_vendas;
                document.getElementById('total-vendido-footer').textContent = formatarMoeda(resumo.total_vendido);
                document.getElementById('total-ticket-footer').textContent = formatarMoeda(resumo.ticket_medio_geral);
                document.getElementById('total-comissao-footer').textContent = formatarMoeda(resumo.total_comissao);
            } else {
                document.getElementById('tabela-impressao').style.display = 'none';
            }
        })
        .catch(err => {
            console.error('Erro:', err);
            document.getElementById('lista-garcons').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Erro ao carregar relatório: ${err.message}
                </div>
            `;
        });
}
</script>
{% endblock %}