<?php
$url = 'http://localhost:5000/produtos';
$json = @file_get_contents($url);
$produtos = json_decode($json, true);
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Catálogo de Produtos</title>
    <link rel="stylesheet" href="css/estilos.css">
    <script src="js/carrinho.js"></script>
</head>
<body>
    <h2>Catálogo de Produtos</h2>
    <?php if (!$produtos || isset($produtos['erro'])): ?>
        <div style="color:red;text-align:center;">
            Não foi possível carregar os produtos.
        </div>
    <?php else: ?>
        <table class="catalogo-tabela" id="produtos-table">
            <tr>
                <th>Código</th>
                <th>Nome</th>
                <th>Preço</th>
                <th>Foto</th>
                <th>Qtd</th>
                <th>Comprar</th>
            </tr>
            <?php foreach ($produtos as $p): ?>
                <?php $fotoPath = !empty($p['url_imagem']) ? $p['url_imagem'] : ""; ?>
                <tr data-codigo="<?= htmlspecialchars($p['codigo']) ?>"
                    data-descricao="<?= htmlspecialchars($p['descricao']) ?>"
                    data-preco="<?= htmlspecialchars($p['p_venda']) ?>">
                    <td><?= htmlspecialchars($p['codigo']) ?></td>
                    <td><?= htmlspecialchars($p['descricao']) ?></td>
                    <td>R$ <?= number_format($p['p_venda'], 2, ',', '.') ?></td>
                    <td>
                        <?php if ($fotoPath): ?>
                            <img src="<?= htmlspecialchars($fotoPath) ?>" width="80" alt="Foto">
                        <?php else: ?>
                            Sem foto
                        <?php endif; ?>
                    </td>
                    <td>
                        <input type="number" min="1" value="1" style="width:50px;" class="qtd-input">
                    </td>
                    <td>
                        <button onclick="adicionarCarrinho(this)">Adicionar</button>
                    </td>
                </tr>
            <?php endforeach; ?>
        </table>
    <?php endif; ?>

    <div id="carrinho" style="display:none;">
        <h3>Seu Carrinho</h3>
        <table id="carrinho-table">
            <tr><th>Produto</th><th>Qtd</th><th>Preço</th><th>Remover</th></tr>
        </table>
        <div id="total"></div>
        <br>
        <label>Seu nome: <input type="text" id="nomeCliente"></label>
        <label>Seu telefone: <input type="text" id="telCliente" placeholder="DDD+Número"></label>
        <br><br>
        <button class="finalizar" onclick="finalizarPedido()">Finalizar Pedido no WhatsApp</button>
    </div>
</body>
</html>