{% extends "base.html" %}

{% block title %}Histórico de Comandas{% endblock %}

{% block extra_css %}
<style>
    .badge-status-aberta    { background: #dbeafe; color: #1e40af; }
    .badge-status-fechada   { background: #dcfce7; color: #166534; }
    .badge-status-cancelada { background: #fee2e2; color: #991b1b; }

    .badge-status {
        font-size: 0.78rem;
        padding: 0.25rem 0.6rem;
        border-radius: 20px;
        font-weight: 600;
        display: inline-block;
    }

    .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; }

    .table-comandas th {
        font-weight: 600;
        background: #f8fafc;
        font-size: 0.85rem;
    }

    .table-comandas td { font-size: 0.9rem; vertical-align: middle; }

    .btn-detalhe {
        font-size: 0.78rem;
        padding: 0.2rem 0.5rem;
    }

    .itens-table th { font-size: 0.8rem; background: #f1f5f9; }
    .itens-table td { font-size: 0.82rem; }
    .item-cancelado td { text-decoration: line-through; color: #9ca3af; }

    @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-history me-2"></i>Histórico de Comandas</h2>
            <p class="text-muted mb-0">Consulte consumo por período, status, garçom ou cliente</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-2">
                    <label class="form-label fw-semibold">Data Início</label>
                    <input type="date" class="form-control" id="data_inicio" name="data_inicio">
                    <small class="text-muted" id="lbl_data_inicio"></small>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Data Fim</label>
                    <input type="date" class="form-control" id="data_fim" name="data_fim">
                    <small class="text-muted" id="lbl_data_fim"></small>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="todas">Todas</option>
                        <option value="aberta">Abertas</option>
                        <option value="fechada">Fechadas</option>
                        <option value="cancelada">Canceladas</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Garçom / Atendente</label>
                    <select class="form-select" id="garcom_id" name="garcom_id">
                        <option value="">Todos</option>
                        {% for g in garcons %}
                        <option value="{{ g.id }}">{{ g.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Cliente (nome)</label>
                    <input type="text" class="form-control" id="cliente" name="cliente" placeholder="Buscar cliente...">
                </div>
                <div class="col-md-1">
                    <label class="form-label fw-semibold">Nº Comanda</label>
                    <input type="number" class="form-control" id="numero" name="numero" min="1" placeholder="Ex: 42">
                </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 me-1"></i>Buscar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Resumo -->
    <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="res-total">0</div>
                <div class="resumo-label"><i class="fas fa-receipt me-1"></i>Comandas</div>
            </div>
            <div class="col-md-2 resumo-item">
                <div class="resumo-valor" id="res-fechadas">0</div>
                <div class="resumo-label"><i class="fas fa-check-circle me-1"></i>Fechadas</div>
            </div>
            <div class="col-md-2 resumo-item">
                <div class="resumo-valor" id="res-canceladas">0</div>
                <div class="resumo-label"><i class="fas fa-times-circle me-1"></i>Canceladas</div>
            </div>
            <div class="col-md-3 resumo-item">
                <div class="resumo-valor" id="res-valor-total">R$ 0,00</div>
                <div class="resumo-label"><i class="fas fa-dollar-sign me-1"></i>Faturamento (período)</div>
            </div>
            <div class="col-md-3 resumo-item">
                <div class="resumo-valor" id="res-ticket">R$ 0,00</div>
                <div class="resumo-label"><i class="fas fa-chart-line me-1"></i>Ticket Médio</div>
            </div>
        </div>
    </div>

    <!-- Tabela -->
    <div class="card">
        <div class="card-body p-0">
            <div id="loading-state" class="text-center py-5">
                <div class="text-muted">
                    <i class="fas fa-search fa-2x mb-2 d-block"></i>
                    Use os filtros acima e clique em <strong>Buscar</strong> para carregar o histórico.
                </div>
            </div>

            <div id="tabela-container" style="display:none">
                <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
                    <span class="text-muted small" id="info-paginacao"></span>
                    <div class="d-flex gap-2 no-print">
                        <button class="btn btn-sm btn-outline-secondary" id="btn-prev" onclick="mudarPagina(-1)" disabled>
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" id="btn-next" onclick="mudarPagina(1)" disabled>
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover table-comandas mb-0">
                        <thead>
                            <tr>
                                <th>Nº</th>
                                <th>Status</th>
                                <th>Mesa/Tipo</th>
                                <th>Cliente</th>
                                <th>Garçom</th>
                                <th>Abertura</th>
                                <th>Fechamento</th>
                                <th class="text-end">Subtotal</th>
                                <th class="text-end">Desconto</th>
                                <th class="text-end">Taxa Serv.</th>
                                <th class="text-end">Total</th>
                                <th class="text-center">Itens</th>
                                <th class="no-print"></th>
                            </tr>
                        </thead>
                        <tbody id="tbody-comandas"></tbody>
                    </table>
                </div>
            </div>

            <div id="vazio-state" class="text-center py-5" style="display:none">
                <i class="fas fa-inbox fa-2x text-muted mb-2 d-block"></i>
                <p class="text-muted">Nenhuma comanda encontrada para os filtros selecionados.</p>
            </div>
        </div>
    </div>

    <!-- Modal de Detalhes -->
    <div class="modal fade" id="modal-detalhes" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-list me-2"></i>Detalhes da Comanda <span id="modal-numero"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Info resumo -->
                    <div class="row mb-3" id="modal-resumo"></div>
                    <!-- Tabela de itens -->
                    <div class="table-responsive">
                        <table class="table table-sm itens-table">
                            <thead>
                                <tr>
                                    <th>Produto</th>
                                    <th class="text-center">Qtd</th>
                                    <th class="text-end">Unit.</th>
                                    <th class="text-end">Total</th>
                                    <th>Status</th>
                                    <th>Obs.</th>
                                    <th>Lançado por</th>
                                    <th>Data/Hora</th>
                                </tr>
                            </thead>
                            <tbody id="modal-itens"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="me-auto text-muted small" id="modal-rodape"></span>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    'use strict';

    const state = { pagina: 1, paginas: 1, por_pagina: 50, ultimoFiltro: {} };

    // Inicializa datas padrão: hoje
    function isoHoje() {
        const d = new Date();
        return d.toISOString().slice(0, 10);
    }
    function fmtBr(iso) {
        if (!iso) return '';
        const [y, m, d] = iso.split('-');
        return `${d}/${m}/${y}`;
    }
    function fmtMoeda(v) {
        return 'R$ ' + Number(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    document.getElementById('data_inicio').value = isoHoje();
    document.getElementById('data_fim').value = isoHoje();

    ['data_inicio', 'data_fim'].forEach(id => {
        const input = document.getElementById(id);
        const lbl = document.getElementById('lbl_' + id);
        input.addEventListener('change', () => { lbl.textContent = fmtBr(input.value); });
        lbl.textContent = fmtBr(input.value);
    });

    document.getElementById('form-filtros').addEventListener('submit', function (e) {
        e.preventDefault();
        state.pagina = 1;
        carregar();
    });

    function coletarFiltros() {
        return {
            data_inicio: document.getElementById('data_inicio').value,
            data_fim: document.getElementById('data_fim').value,
            status: document.getElementById('status').value,
            garcom_id: document.getElementById('garcom_id').value,
            cliente: document.getElementById('cliente').value,
            numero: document.getElementById('numero').value,
            pagina: state.pagina,
            por_pagina: state.por_pagina,
        };
    }

    function carregar() {
        const filtros = coletarFiltros();
        state.ultimoFiltro = filtros;

        document.getElementById('loading-state').innerHTML = `
            <div class="py-5 text-center">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="text-muted mt-2">Carregando...</p>
            </div>`;
        document.getElementById('loading-state').style.display = '';
        document.getElementById('tabela-container').style.display = 'none';
        document.getElementById('vazio-state').style.display = 'none';
        document.getElementById('resumo-container').style.display = 'none';

        const params = new URLSearchParams(filtros);
        fetch(`{{ url_for('food.api_relatorio_historico_comandas') }}?${params}`)
            .then(r => r.json())
            .then(renderizar)
            .catch(() => {
                document.getElementById('loading-state').innerHTML = `
                    <div class="alert alert-danger m-3">Erro ao carregar dados. Tente novamente.</div>`;
            });
    }

    function renderizar(data) {
        document.getElementById('loading-state').style.display = 'none';

        if (!data.success) {
            document.getElementById('loading-state').innerHTML = `<div class="alert alert-danger m-3">${data.message || 'Erro'}</div>`;
            document.getElementById('loading-state').style.display = '';
            return;
        }

        state.paginas = data.paginas || 1;

        // Totais para resumo
        const comandas = data.comandas || [];
        const totalFechadas = comandas.filter(c => c.status === 'fechada').length;
        const totalCanceladas = comandas.filter(c => c.status === 'cancelada').length;
        const qtdFechadas_geral = data.total > 0 ? totalFechadas : 0; // aproximação da página

        // Resumo
        document.getElementById('res-total').textContent = data.total;
        document.getElementById('res-fechadas').textContent = totalFechadas;
        document.getElementById('res-canceladas').textContent = totalCanceladas;
        document.getElementById('res-valor-total').textContent = fmtMoeda(data.valor_total_geral);
        const ticket = data.total > 0 ? data.valor_total_geral / data.total : 0;
        document.getElementById('res-ticket').textContent = fmtMoeda(ticket);
        document.getElementById('resumo-container').style.display = '';

        if (comandas.length === 0) {
            document.getElementById('vazio-state').style.display = '';
            return;
        }

        // Paginação
        const inicio = (state.pagina - 1) * state.por_pagina + 1;
        const fim = Math.min(state.pagina * state.por_pagina, data.total);
        document.getElementById('info-paginacao').textContent =
            `Mostrando ${inicio}–${fim} de ${data.total} comanda(s) · Pág. ${state.pagina}/${state.paginas}`;
        document.getElementById('btn-prev').disabled = state.pagina <= 1;
        document.getElementById('btn-next').disabled = state.pagina >= state.paginas;

        // Linhas
        const tbody = document.getElementById('tbody-comandas');
        tbody.innerHTML = '';
        comandas.forEach(c => {
            const badge = badgeStatus(c.status);
            const mesaTxt = c.mesa_numero
                ? `${c.mesa_tipo === 'comanda' ? 'Comanda' : 'Mesa'} ${c.mesa_numero}`
                : `—`;
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td><strong>#${c.numero}</strong></td>
                <td>${badge}</td>
                <td>${mesaTxt}</td>
                <td>${escHtml(c.cliente_nome) || '<span class="text-muted">—</span>'}</td>
                <td>${escHtml(c.garcom_nome) || '<span class="text-muted">—</span>'}</td>
                <td>${c.data_abertura || '—'}</td>
                <td>${c.data_fechamento || '—'}</td>
                <td class="text-end">${fmtMoeda(c.subtotal)}</td>
                <td class="text-end text-danger">${c.desconto > 0 ? '- ' + fmtMoeda(c.desconto) : '—'}</td>
                <td class="text-end">${c.taxa_servico > 0 ? fmtMoeda(c.taxa_servico) : '—'}</td>
                <td class="text-end fw-bold">${fmtMoeda(c.valor_total)}</td>
                <td class="text-center">
                    <span class="badge bg-secondary">${c.qtd_itens}</span>
                    ${c.qtd_itens_cancelados > 0 ? `<span class="badge bg-danger ms-1" title="Itens cancelados">${c.qtd_itens_cancelados} canc.</span>` : ''}
                </td>
                <td class="no-print">
                    <button class="btn btn-outline-primary btn-detalhe" onclick="verDetalhes(${JSON.stringify(c).replace(/"/g, '&quot;')})">
                        <i class="fas fa-eye"></i>
                    </button>
                    ${c.venda_id ? `<a href="/vendas/${c.venda_id}" target="_blank" class="btn btn-outline-secondary btn-detalhe ms-1" title="Ver venda"><i class="fas fa-file-invoice"></i></a>` : ''}
                </td>`;
            tbody.appendChild(tr);
        });

        document.getElementById('tabela-container').style.display = '';
    }

    function badgeStatus(status) {
        const map = {
            aberta: ['badge-status-aberta', 'Aberta'],
            fechada: ['badge-status-fechada', 'Fechada'],
            cancelada: ['badge-status-cancelada', 'Cancelada'],
        };
        const [cls, label] = map[status] || ['', status];
        return `<span class="badge-status ${cls}">${label}</span>`;
    }

    function escHtml(str) {
        if (!str) return '';
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    window.mudarPagina = function (delta) {
        const nova = state.pagina + delta;
        if (nova < 1 || nova > state.paginas) return;
        state.pagina = nova;
        carregar();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    window.verDetalhes = function (comanda) {
        document.getElementById('modal-numero').textContent = `#${comanda.numero}`;

        // Resumo no modal
        document.getElementById('modal-resumo').innerHTML = `
            <div class="col-md-3"><div class="card h-100 border-0 bg-light p-3">
                <div class="small text-muted">Status</div>
                <div>${badgeStatus(comanda.status)}</div>
            </div></div>
            <div class="col-md-3"><div class="card h-100 border-0 bg-light p-3">
                <div class="small text-muted">Cliente</div>
                <div class="fw-semibold">${escHtml(comanda.cliente_nome) || '—'}</div>
            </div></div>
            <div class="col-md-3"><div class="card h-100 border-0 bg-light p-3">
                <div class="small text-muted">Garçom / Atendente</div>
                <div class="fw-semibold">${escHtml(comanda.garcom_nome) || '—'}</div>
            </div></div>
            <div class="col-md-3"><div class="card h-100 border-0 bg-light p-3">
                <div class="small text-muted">Abertura → Fechamento</div>
                <div class="fw-semibold">${comanda.data_abertura || '—'} ${comanda.data_fechamento ? '→ ' + comanda.data_fechamento : ''}</div>
            </div></div>`;

        // Itens
        const tbody = document.getElementById('modal-itens');
        tbody.innerHTML = '';
        (comanda.itens || []).forEach(item => {
            const tr = document.createElement('tr');
            if (item.status === 'cancelado') tr.classList.add('item-cancelado');
            tr.innerHTML = `
                <td>${escHtml(item.produto_nome)}</td>
                <td class="text-center">${Number(item.quantidade).toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 3 })}</td>
                <td class="text-end">${fmtMoeda(item.valor_unitario)}</td>
                <td class="text-end fw-semibold">${fmtMoeda(item.valor_total)}</td>
                <td>${item.status === 'cancelado' ? '<span class="text-danger small">Cancelado</span>' : '<span class="text-success small">' + escHtml(item.status) + '</span>'}</td>
                <td class="text-muted small">${escHtml(item.observacao) || '—'}</td>
                <td class="text-muted small">${escHtml(item.usuario) || '—'}</td>
                <td class="text-muted small">${item.data_lancamento || '—'}</td>`;
            tbody.appendChild(tr);
        });

        // Rodapé com totais
        document.getElementById('modal-rodape').innerHTML =
            `Subtotal: <strong>${fmtMoeda(comanda.subtotal)}</strong>` +
            (comanda.desconto > 0 ? ` &nbsp;|&nbsp; Desconto: <strong class="text-danger">- ${fmtMoeda(comanda.desconto)}</strong>` : '') +
            (comanda.taxa_servico > 0 ? ` &nbsp;|&nbsp; Taxa Serv.: <strong>${fmtMoeda(comanda.taxa_servico)}</strong>` : '') +
            ` &nbsp;|&nbsp; <strong>Total: ${fmtMoeda(comanda.valor_total)}</strong>`;

        new bootstrap.Modal(document.getElementById('modal-detalhes')).show();
    };

}());
</script>
{% endblock %}