<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>HEINEKEN PRO | GESTÃO INTEGRADA</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root { --green: #00824A; --bg: #050a08; }
body { background: var(--bg); color: white; font-family: 'Segoe UI', sans-serif; padding: 20px; }
.card { background: #151515; padding: 20px; border-radius: 12px; border-left: 5px solid var(--green); margin-bottom: 20px; }
input, select, button { width: 100%; padding: 12px; margin: 5px 0; border-radius: 6px; border: 1px solid #333; background: #000; color: white; }
button { background: var(--green); font-weight: bold; cursor: pointer; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; color: #fff; }
th, td { border: 1px solid #333; padding: 10px; text-align: left; }
#certificado { background: white; color: black; padding: 40px; width: 600px; margin: 20px auto; position: relative; border: 15px solid var(--green); }
.estrela { width: 120px; height: 120px; background: var(--green); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); position: absolute; left: 10px; top: 10px; }
</style>
</head>
<body>
<div class="card">
<h2>CONFIGURAÇÃO GERAL</h2>
<input type="text" id="inPDV" placeholder="Nome do PDV">
<input type="text" id="inProm" placeholder="Nome do Promotor">
<input type="text" id="inSup" placeholder="Nome do Supervisor">
<button onclick="addConfig()">Adicionar ao Sistema</button>
</div>
<div class="card">
<h2>REGISTRO DE VENDAS E BRINDES</h2>
<select id="selPDV"></select>
<input type="number" id="vQtd" placeholder="Quantidade">
<button onclick="addVenda()">Registrar Venda</button>
<canvas id="meuGrafico" height="80"></canvas>
</div>
<div class="card">
<h2>DADOS DA EQUIPA E VENDAS</h2>
<table>
<thead><tr><th>PDV</th><th>Promotor</th><th>Supervisor</th><th>Qtd</th><th>Brinde</th></tr></thead>
<tbody id="corpoTabela"></tbody>
</table>
</div>
<div class="card">
<h2>CERTIFICADO DE DESEMPENHO</h2>
<div id="certificado" contenteditable="true">
<div class="estrela"></div>
<div style="margin-left: 140px;">
<h3>HEINEKEN PERFORMANCE</h3>
<p>Colaborador: __________________________</p>
<p>Supervisor: ___________________________</p>
</div>
</div>
<button onclick="window.print()">Imprimir ou Guardar PDF</button>
<button onclick="exportCSV()" style="background:#217346; margin-top:10px;">Exportar para Excel</button>
<button onclick="localStorage.clear(); location.reload();" style="background:#800; margin-top:10px;">RESETAR SISTEMA</button>
</div>
<script>
let db = JSON.parse(localStorage.getItem("data")) || { pdvs: [], promotores: [], supers: [], vendas: [] };
function addConfig() {
if(document.getElementById("inPDV").value) db.pdvs.push(document.getElementById("inPDV").value);
if(document.getElementById("inProm").value) db.promotores.push(document.getElementById("inProm").value);
if(document.getElementById("inSup").value) db.supers.push(document.getElementById("inSup").value);
localStorage.setItem("data", JSON.stringify(db));
location.reload();
}
function addVenda() {
let qtd = parseInt(document.getElementById("vQtd").value);
let brinde = qtd >= 10 ? "2 Cervejas e 1 Copo" : (qtd >= 5 ? "1 Cerveja" : "Nenhum");
db.vendas.push({
pdv: document.getElementById("selPDV").value,
prom: db.promotores[0] || "N/A",
sup: db.supers[0] || "N/A",
qtd, brinde
});
localStorage.setItem("data", JSON.stringify(db));
render();
}
function render() {
let sel = document.getElementById("selPDV");
sel.innerHTML = db.pdvs.map(p => `<option>${p}</option>`).join("");
let tbody = document.getElementById("corpoTabela");
tbody.innerHTML = db.vendas.map(v => `<tr><td>${v.pdv}</td><td>${v.prom}</td><td>${v.sup}</td><td>${v.qtd}</td><td>${v.brinde}</td></tr>`).join("");
new Chart(document.getElementById('meuGrafico'), {
type: 'bar',
data: { labels: db.pdvs, datasets: [{ label: 'Vendas', data: db.pdvs.map(p => db.vendas.filter(v => v.pdv === p).reduce((a,b) => a + b.qtd, 0)), backgroundColor: '#00824A' }] }
});
}
function exportCSV() {
let csv = "PDV,Promotor,Supervisor,Qtd,Brinde\n" + db.vendas.map(v => `${v.pdv},${v.prom},${v.sup},${v.qtd},${v.brinde}`).join("\n");
let a = document.createElement("a");
a.href = "data:text/csv," + encodeURI(csv);
a.download = "Relatorio_Heineken.csv";
a.click();
}
window.onload = render;
</script>
</body>
</html>
