<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Pagamento PIX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-white text-gray-900 antialiased">

<div class="w-full max-w-4xl mx-auto py-6 px-4">

    <div class="mb-8 text-center">
        <h1 class="text-3xl font-bold">Locação de caçamba </h1>
        <p class="text-gray-500 mt-2">Processo simples e rápido</p>
    </div>

    <div class="flex justify-center mb-6">
        <div class="bg-slate-900 text-white px-5 py-2 rounded-full text-sm font-medium">
            Etapa 3 de 3
        </div>
    </div>

    <h2 class="text-2xl font-bold mb-2">Pagamento via PIX</h2>
    <p class="text-gray-500 mb-6">Escaneie o QR Code ou copie o código</p>

    <div id="loading" class="text-center py-10 text-gray-500">
        Gerando PIX, aguarde...
    </div>

    <div id="conteudoPix" class="hidden">

        <div class="grid md:grid-cols-2 gap-6">

            <div class="border rounded-xl p-6 shadow-sm">
                <h3 class="font-semibold mb-4">QR Code PIX</h3>
                <div class="flex justify-center">
                    <img id="qrCode" class="w-64 h-64">
                </div>
            </div>

            <div class="border rounded-xl p-6 shadow-sm space-y-4">
                <h3 class="font-semibold">Resumo do pedido</h3>

                <div class="flex justify-between text-sm">
                    <span>Produto</span>
                    <span id="produto"></span>
                </div>

                <div class="flex justify-between text-sm">
                    <span>Quantidade</span>
                    <span id="quantidade"></span>
                </div>

                <div class="flex justify-between text-sm">
                    <span>Total</span>
                    <span class="text-xl font-bold" id="total"></span>
                </div>

                <div class="border-t pt-4 text-sm">
                    <p class="font-medium">Cliente</p>
                    <p id="cliente"></p>
                    <p class="text-gray-500" id="email"></p>
                </div>

                <div class="border-t pt-2 text-xs">
                    <p>ID da transação:</p>
                    <code id="transacao"></code>
                </div>
            </div>

        </div>

        <div class="border rounded-xl p-6 shadow-sm mt-6">
            <h3 class="font-semibold mb-2">PIX Copia e Cola</h3>
            <div id="pixCode" class="bg-gray-100 p-4 rounded text-sm break-all font-mono"></div>
            <button onclick="copyPix()" class="mt-4 w-full border rounded-md h-10">
                Copiar código PIX
            </button>
        </div>

    </div>

</div>

<script>
const dados = JSON.parse(localStorage.getItem('cacambaCheckout'));

if (!dados) {
    alert('Dados do checkout não encontrados');
    window.location.href = 'etapa2.html';
}

/* 🔥 CORREÇÃO PRINCIPAL AQUI 🔥
   Garante que sempre exista "documento"
*/
if (dados.cpf) {
    dados.documento = dados.cpf;
}

if (dados.cnpj) {
    dados.documento = dados.cnpj;
}

console.log('Dados enviados para API:', dados);

const loading = document.getElementById('loading');
const conteudo = document.getElementById('conteudoPix');

fetch('api_pix.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(dados)
})
.then(res => res.json())
.then(res => {

    loading.style.display = 'none';

    if (!res.success) {
        alert(res.message || 'Erro ao gerar PIX');
        return;
    }

    conteudo.classList.remove('hidden');

    document.getElementById('qrCode').src = res.qrCode;
    document.getElementById('pixCode').innerText = res.pix;

    document.getElementById('produto').innerText = dados.produto || 'Locação de caçamba';
    document.getElementById('quantidade').innerText = (dados.quantidade || 1) + 'x';

    const total = (dados.valor_unitario * (dados.quantidade || 1))
        .toFixed(2)
        .replace('.', ',');

    document.getElementById('total').innerText = 'R$ ' + total;
    document.getElementById('cliente').innerText = dados.nome;
    document.getElementById('email').innerText = dados.email;
    document.getElementById('transacao').innerText = res.transactionId;
})
.catch(err => {
    console.error(err);
    loading.innerText = 'Erro ao gerar PIX';
});

function copyPix() {
    const pixText = document.getElementById('pixCode').innerText;
    navigator.clipboard.writeText(pixText)
        .then(() => alert('Código PIX copiado!'))
        .catch(() => alert('Erro ao copiar PIX'));
}
</script>

</body>
</html>
