<?php
include_once('../config.php');
include_once('../header.php');

// 1. BUSCA DADOS DA LOJA (PEGA AS CONFIGURAÇÕES SALVAS EM DADOS_LOJA.PHP)
$dados_loja = $conn->query("SELECT * FROM configuracoes_loja WHERE id=1")->fetch_assoc();

// 2. BUSCA PRODUTOS CADASTRADOS PARA O SELECT
$produtos_db = $conn->query("SELECT * FROM produtos ORDER BY nome ASC");
?>

<style>
    .cupom-wrapper { max-width: 900px; margin: auto; padding: 20px; font-family: 'Segoe UI', sans-serif; text-transform: uppercase; }
    
    /* CABEÇALHO COM DADOS DA LOJA */
    .cupom-header { border: 2px solid #333; padding: 15px; margin-bottom: 20px; background: #fff; text-align: center; }
    .cupom-header h1 { margin: 5px 0; font-size: 22px; color: #000; }
    .cupom-header p { margin: 2px 0; font-size: 11px; font-weight: bold; }

    .secao-titulo { background: #333; color: #fff; padding: 8px; font-size: 12px; font-weight: bold; margin-top: 20px; }

    /* DADOS DO CLIENTE */
    .grid-cliente { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; padding: 15px; border: 1px solid #ccc; background: #f9f9f9; }
    .input-cupom { width: 100%; padding: 8px; border: 1px solid #999; font-size: 12px; box-sizing: border-box; text-transform: uppercase; }
    .label-cupom { font-size: 10px; font-weight: bold; display: block; margin-bottom: 3px; }

    /* EXIBIÇÃO DE DADOS DO CLIENTE APÓS PREENCHIDO (PARA IMPRESSÃO) */
    .cliente-view { display: none; padding: 10px; border: 1px solid #ccc; font-size: 12px; font-weight: bold; margin-bottom: 10px; }

    /* TABELA DE ITENS */
    .table-itens { width: 100%; border-collapse: collapse; margin-top: 10px; background: #fff; }
    .table-itens th { background: #eee; padding: 10px; font-size: 11px; border: 1px solid #ccc; }
    .table-itens td { padding: 8px; border: 1px solid #ddd; font-size: 12px; font-weight: bold; }

    .btn-add { background: #28a745; color: white; border: none; padding: 10px 20px; cursor: pointer; font-weight: bold; }
    .btn-del { background: #d32f2f; color: white; border: none; padding: 5px 10px; cursor: pointer; border-radius: 3px; }
    .btn-imprimir { background: #00569e; color: white; border: none; padding: 20px; width: 100%; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 0 #003d70; }

    /* REGRA DE IMPRESSÃO */
@media print {
    body * { visibility: hidden !important; }
    .cupom-wrapper, .cupom-wrapper * { visibility: visible !important; }
    .cupom-wrapper { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; background: #fff; }
    .no-print, .btn-del, .btn-add, .btn-imprimir, .grid-cliente, select, input, button { display: none !important; }
    .cliente-view { display: block !important; border: 1px solid #000; padding: 10px; margin-bottom: 10px; }
    .cupom-header { border: 2px solid #000; }
    .table-itens th, .table-itens td { border: 1px solid #000; }
    body { background: #fff !important; margin: 0; padding: 0; }
    @page { margin: 10mm; }
}
</style>

<div class="cupom-wrapper">
    
    <div class="cupom-header">
        <?php if(!empty($dados_loja['logo_path'])): ?>
            <img src="<?php echo $dados_loja['logo_path']; ?>" style="max-height: 60px; margin-bottom: 10px;">
        <?php endif; ?>
        <h1><?php echo $dados_loja['nome_loja']; ?></h1>
        <p><?php echo $dados_loja['endereco']; ?></p>
        <p>CNPJ: <?php echo $dados_loja['cnpj']; ?> | TEL: <?php echo $dados_loja['telefone']; ?></p>
    </div>

    <div id="print_cliente" class="cliente-view"></div>

    <form id="formCupom">
        <div class="no-print">
            <div class="secao-titulo">👤 DADOS DO CLIENTE (OPCIONAL)</div>
            <div class="grid-cliente">
                <div style="grid-column: span 1;">
                    <label class="label-cupom">NOME COMPLETO</label>
                    <input type="text" id="c_nome" class="input-cupom" oninput="atualizarViewCliente()">
                </div>
                <div>
                    <label class="label-cupom">TELEFONE</label>
                    <input type="text" id="c_tel" class="input-cupom" oninput="atualizarViewCliente()">
                </div>
                <div>
                    <label class="label-cupom">CPF/CNPJ</label>
                    <input type="text" id="c_cpf" class="input-cupom" oninput="atualizarViewCliente()">
                </div>
                <div style="grid-column: span 2;">
                    <label class="label-cupom">ENDEREÇO</label>
                    <input type="text" id="c_end" class="input-cupom" oninput="atualizarViewCliente()">
                </div>
                <div>
                    <label class="label-cupom">E-MAIL</label>
                    <input type="text" id="c_email" class="input-cupom" oninput="atualizarViewCliente()">
                </div>
            </div>

            <div class="secao-titulo">🛒 SELEÇÃO DE PRODUTOS</div>
            <div class="area-selecao" style="display: flex; gap: 10px; padding: 15px; border: 1px solid #ccc; background: #fff; align-items: flex-end;">
                <div style="flex: 2;">
                    <label class="label-cupom">PRODUTO</label>
                    <select id="select_prod" class="input-cupom" style="height: 35px;">
                        <option value="">SELECIONE UM PRODUTO...</option>
                        <?php while($p = $produtos_db->fetch_assoc()): ?>
                            <option value="<?php echo $p['id']; ?>" data-nome="<?php echo $p['nome']; ?>" data-preco="<?php echo $p['preco']; ?>">
                                <?php echo $p['nome']; ?> - R$ <?php echo number_format($p['preco'], 2, ',', '.'); ?>
                            </option>
                        <?php endwhile; ?>
                    </select>
                </div>
                <div style="flex: 0.5;">
                    <label class="label-cupom">QTD</label>
                    <input type="number" id="qtd_prod" value="1" min="1" class="input-cupom">
                </div>
                <button type="button" onclick="adicionarItem()" class="btn-add">➕ ADICIONAR</button>
            </div>
        </div>

        <div class="secao-titulo">📝 ITENS DO PEDIDO</div>
        <table class="table-itens" id="tabela_itens">
            <thead>
                <tr>
                    <th>DESCRIÇÃO</th>
                    <th style="text-align: center; width: 80px;">QTD</th>
                    <th style="text-align: right; width: 100px;">UNIT.</th>
                    <th style="text-align: right; width: 100px;">TOTAL</th>
                    <th class="no-print" style="text-align: center; width: 50px;">AÇÃO</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr style="background: #333; color: #fff;">
                    <td colspan="3" style="text-align: right;">TOTAL GERAL:</td>
                    <td style="text-align: right;" id="total_geral">R$ 0,00</td>
                    <td class="no-print"></td>
                </tr>
            </tfoot>
        </table>

        <div class="no-print">
            <button type="button" onclick="salvarEVender()" class="btn-imprimir">🖨️ GERAR NOTA E IMPRIMIR</button>
        </div>
    </form>
</div>

<script>
let itens = [];
let totalVenda = 0;

function atualizarViewCliente() {
    const nome = document.getElementById('c_nome').value;
    const tel = document.getElementById('c_tel').value;
    const cpf = document.getElementById('c_cpf').value;
    const end = document.getElementById('c_end').value;
    
    let html = `<strong>CLIENTE:</strong> ${nome || 'NÃO INFORMADO'}`;
    if(tel) html += ` | <strong>TEL:</strong> ${tel}`;
    if(cpf) html += ` | <strong>CPF/CNPJ:</strong> ${cpf}`;
    if(end) html += `<br><strong>ENDEREÇO:</strong> ${end}`;
    
    document.getElementById('print_cliente').innerHTML = html;
}

function adicionarItem() {
    const select = document.getElementById('select_prod');
    const option = select.options[select.selectedIndex];
    const qtd = parseFloat(document.getElementById('qtd_prod').value);

    if (!option.value) return;

    const item = {
        id: option.value,
        nome: option.getAttribute('data-nome'),
        preco: parseFloat(option.getAttribute('data-preco')),
        qtd: qtd,
        total: parseFloat(option.getAttribute('data-preco')) * qtd
    };

    itens.push(item);
    atualizarTabela();
    select.value = ""; 
}

function removerItem(index) {
    itens.splice(index, 1);
    atualizarTabela();
}

function atualizarTabela() {
    const tbody = document.querySelector('#tabela_itens tbody');
    const totalLabel = document.getElementById('total_geral');
    tbody.innerHTML = "";
    totalVenda = 0;

    itens.forEach((item, index) => {
        totalVenda += item.total;
        tbody.innerHTML += `
            <tr>
                <td>${item.nome}</td>
                <td style="text-align: center;">${item.qtd}</td>
                <td style="text-align: right;">R$ ${item.preco.toLocaleString('pt-br', {minimumFractionDigits: 2})}</td>
                <td style="text-align: right;">R$ ${item.total.toLocaleString('pt-br', {minimumFractionDigits: 2})}</td>
                <td class="no-print" style="text-align: center;">
                    <button type="button" class="btn-del" onclick="removerItem(${index})">🗑️</button>
                </td>
            </tr>
        `;
    });

    totalLabel.innerText = "R$ " + totalVenda.toLocaleString('pt-br', {minimumFractionDigits: 2});
}

function salvarEVender() {
    if (itens.length === 0) {
        alert("ADICIONE PELO MENOS UM PRODUTO!");
        return;
    }

    const dadosVenda = {
        cliente_nome: document.getElementById('c_nome').value || 'CONSUMIDOR',
        cliente_tel: document.getElementById('c_tel').value,
        cliente_cpf: document.getElementById('c_cpf').value,
        cliente_end: document.getElementById('c_end').value,
        valor_total: totalVenda,
        itens: itens
    };

    // Envia os dados para salvar no banco antes de imprimir
    fetch('salvar_venda_cupom.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dadosVenda)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.print();
            // Opcional: recarregar a página após imprimir para limpar o cupom
            // setTimeout(() => { location.reload(); }, 2000);
        } else {
            alert("Erro ao salvar venda: " + data.message);
        }
    })
    .catch(error => {
        console.error('Erro:', error);
        alert("Erro na comunicação com o servidor.");
    });
}
</script>