<?php
// Configurações de exibição de erros (opcional para desenvolvimento)
ini_set('display_errors', 1);
error_reporting(E_ALL);

// Dados iniciais do produto
$produto = [
    "nome" => "Smartphone Nexus X",
    "descricao" => "Tela 6.7', 256GB, Câmera 50MP - O melhor custo benefício.",
    "preco" => 1500.00,
    "imagem" => ""
];

$passo_finalizado = false;
$upload_msg = "";

// Processamento
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    
    // 1. Atualizar dados do produto e Upload de Imagem
    if (isset($_POST['atualizar_produto'])) {
        $produto['nome'] = $_POST['prod_nome'];
        $produto['descricao'] = $_POST['prod_desc'];
        $produto['preco'] = (float)$_POST['prod_preco'];

        if (!empty($_FILES['imagem']['name'])) {
            $diretorio = "uploads/";
            if (!is_dir($diretorio)) mkdir($diretorio, 0777, true);
            
            $extensao = strtolower(pathinfo($_FILES['imagem']['name'], PATHINFO_EXTENSION));
            $novo_nome = md5(time()) . "." . $extensao;
            $destino = $diretorio . $novo_nome;

            if (move_uploaded_file($_FILES['imagem']['tmp_name'], $destino)) {
                $produto['imagem'] = $destino;
                $upload_msg = "Produto atualizado com sucesso!";
            }
        }
    }

    // 2. Finalizar Compra
    if (isset($_POST['finalizar'])) {
        $passo_finalizado = true;
        // Pix estático para exemplo
        $pix_copia_e_cola = "00020126580014BR.GOV.BCB.PIX0136123e4567-e89b-12d3-a456-42661417400052040000530398654071500.005802BR5913NOME_RECEBEDOR6008BRASILIA62070503***6304ABCD";
    }
}
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout OABCG Style</title>
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #34495e;
            --accent: #d4af37; /* Estilo Gold/OAB */
            --success: #27ae60;
            --bg: #f8f9fa;
        }

        * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: var(--bg); margin: 0; padding: 20px; color: #333; }

        .container { 
            max-width: 800px; 
            margin: auto; 
            background: white; 
            border-radius: 12px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
        }

        .header { width: 100%; background: var(--primary); color: white; padding: 20px; text-align: center; border-bottom: 4px solid var(--accent); }
        
        .section { padding: 25px; width: 100%; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

        @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

        .card-produto { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
        .img-preview { width: 100%; max-height: 200px; object-fit: contain; background: #eee; border-radius: 4px; margin-bottom: 10px; }

        label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: var(--secondary); }
        input, textarea, select { 
            width: 100%; padding: 12px; margin-bottom: 15px; 
            border: 1px solid #ddd; border-radius: 6px; 
            transition: border 0.3s;
        }
        input:focus { border-color: var(--accent); outline: none; }

        .btn { 
            background: var(--primary); color: white; border: none; 
            padding: 15px; border-radius: 6px; cursor: pointer; 
            width: 100%; font-weight: bold; text-transform: uppercase;
            transition: filter 0.3s;
        }
        .btn:hover { filter: brightness(1.2); }
        .btn:disabled { background: #ccc; cursor: not-allowed; }
        .btn-success { background: var(--success); }

        .pix-box { 
            background: #f0f4f8; border: 2px dashed var(--accent); 
            padding: 20px; border-radius: 8px; text-align: center; 
        }
        code { display: block; padding: 10px; background: #fff; margin: 10px 0; border-radius: 4px; font-size: 12px; word-break: break-all; }
        
        .alert { padding: 10px; background: #d4edda; color: #155724; border-radius: 4px; margin-bottom: 15px; }
    </style>
</head>
<body>

<div class="container">
    <div class="header">
        <h1>Sistema de Vendas OABCG</h1>
    </div>

    <?php if (!$passo_finalizado): ?>
        <div class="section" style="border-bottom: 1px solid #eee;">
            <h3>1. Configurar Produto</h3>
            <?php if($upload_msg) echo "<div class='alert'>$upload_msg</div>"; ?>
            
            <form method="POST" enctype="multipart/form-data" class="grid">
                <div>
                    <label>Nome do Produto:</label>
                    <input type="text" name="prod_nome" value="<?php echo $produto['nome']; ?>" required>
                    
                    <label>Preço (R$):</label>
                    <input type="number" step="0.01" name="prod_preco" value="<?php echo $produto['preco']; ?>" required>
                    
                    <label>Descrição:</label>
                    <textarea name="prod_desc" rows="3"><?php echo $produto['descricao']; ?></textarea>
                </div>
                <div>
                    <label>Imagem do Produto:</label>
                    <?php if($produto['imagem']): ?>
                        <img src="<?php echo $produto['imagem']; ?>" class="img-preview">
                    <?php endif; ?>
                    <input type="file" name="imagem" accept="image/*">
                    <button type="submit" name="atualizar_produto" class="btn">Atualizar Dados</button>
                </div>
            </form>
        </div>

        <div class="section">
            <h3>2. Dados do Comprador</h3>
            <form method="POST" id="formCheckout">
                <div class="grid">
                    <div>
                        <label>CPF:</label>
                        <input type="text" name="cpf" id="cpf" placeholder="000.000.000-00" required>
                        <span id="statusCpf"></span>
                    </div>
                    <div>
                        <label>Nome Completo:</label>
                        <input type="text" name="nome_cli" id="nome_cli" readonly placeholder="Valide o CPF...">
                    </div>
                    <div>
                        <label>E-mail:</label>
                        <input type="email" name="email" required placeholder="exemplo@email.com">
                    </div>
                    <div>
                        <label>Celular:</label>
                        <input type="tel" name="celular" placeholder="(00) 00000-0000" required>
                    </div>
                </div>
                <button type="submit" name="finalizar" id="btnFinalizar" class="btn btn-success" disabled>Finalizar e Gerar PIX</button>
            </form>
        </div>

    <?php else: ?>
        <div class="section" style="text-align: center;">
            <h2 style="color: var(--success);">✔ Pedido Confirmado!</h2>
            <div class="card-produto">
                <?php if($produto['imagem']): ?>
                    <img src="<?php echo $produto['imagem']; ?>" style="max-width: 150px;">
                <?php endif; ?>
                <h4><?php echo $produto['nome']; ?></h4>
                <p>Valor Total: <strong>R$ <?php echo number_format($produto['preco'], 2, ',', '.'); ?></strong></p>
            </div>

            <div class="pix-box">
                <h4>Pagamento via PIX</h4>
                <p>Copie o código para pagar no seu banco:</p>
                <code><?php echo $pix_copia_e_cola; ?></code>
                <button class="btn" onclick="copyPix()">Copiar Código PIX</button>
            </div>
        </div>
    <?php endif; ?>
</div>

<script>
// Validação de CPF simplificada
document.getElementById('cpf').addEventListener('blur', function() {
    let cpf = this.value.replace(/\D/g, '');
    let status = document.getElementById('statusCpf');
    let nomeInput = document.getElementById('nome_cli');
    let btn = document.getElementById('btnFinalizar');

    if (cpf.length === 11) {
        status.innerText = "⌛ Validando...";
        status.style.color = "orange";

        setTimeout(() => {
            if (cpf === "00000000000") {
                status.innerText = "❌ CPF Inválido";
                status.style.color = "red";
                btn.disabled = true;
            } else {
                status.innerText = "✅ CPF Válido";
                status.style.color = "green";
                nomeInput.value = "Usuário Teste OABCG";
                nomeInput.removeAttribute('readonly');
                btn.disabled = false;
            }
        }, 800);
    }
});

function copyPix() {
    const code = document.querySelector('code').innerText;
    navigator.clipboard.writeText(code).then(() => {
        alert('Código PIX copiado com sucesso!');
    });
}
</script>

</body>
</html>