<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title>Consulta DRBENEFICIO</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
        .container { width: 100%; max-width: 600px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-top: 10px; position: relative; }
        
        .top-nav { margin-bottom: 25px; text-align: left; }
        .btn-back { 
            background-color: #f36f21; 
            color: white; 
            padding: 10px 20px; 
            border-radius: 30px; 
            text-decoration: none; 
            font-size: 14px; 
            font-weight: bold;
            display: inline-flex; 
            align-items: center; 
            transition: background 0.3s, transform 0.2s;
            box-shadow: 0 2px 5px rgba(243, 111, 33, 0.3);
        }
        .btn-back:hover { background-color: #d65a12; transform: translateY(-2px); }
        .btn-back::before { content: '←'; margin-right: 8px; font-weight: bold; font-size: 18px; }

        .header-box { text-align: center; margin-bottom: 25px; }
        .logo-img { max-width: 220px; height: auto; margin-bottom: 15px; } 
        h2 { color: #f36f21; margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
        
        .input-group { margin-bottom: 15px; }
        input { width: 100%; padding: 15px; font-size: 18px; border: 2px solid #e1e4e8; border-radius: 8px; box-sizing: border-box; outline: none; transition: border-color 0.3s; text-align: center; letter-spacing: 1px; color: #333; }
        input:focus { border-color: #f36f21; }
        
        .action-buttons { display: flex; gap: 10px; }
        
        button { padding: 15px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; border: none; }
        
        .btn-primary { flex: 2; background-color: #f36f21; color: white; }
        .btn-primary:hover { background-color: #d65a12; }
        .btn-primary:disabled { background-color: #ffccaa; cursor: wait; }

        .btn-clear { flex: 1; background-color: #f0f0f0; color: #666; border: 1px solid #ccc; }
        .btn-clear:hover { background-color: #e0e0e0; color: #333; }

        .loader-container { display: none; text-align: center; margin-top: 20px; }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #f36f21;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px auto;
        }
        .loader-text { color: #f36f21; font-size: 14px; font-weight: bold; }

        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        .lista-resultados { margin-top: 25px; }
        
        .card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-bottom: 15px; animation: slideUp 0.4s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .card.ativo { border-left: 5px solid #27ae60; background: #fafffc; }
        .card.cancelado { border-left: 5px solid #e74c3c; background: #fff5f5; }

        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
        
        .row { display: flex; justify-content: space-between; margin-bottom: 8px; }
        .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
        .value { font-size: 14px; font-weight: 600; color: #333; }
        
        .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase; }
        .badge-ativo { background: #d4edda; color: #155724; }
        .badge-cancelado { background: #f8d7da; color: #721c24; }

        /* Estilos comentados/escondidos da caixa de produtos */
        .produtos-box { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #ddd; }
        .produtos-title { font-size: 11px; font-weight: bold; color: #f36f21; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
        .tags-container { display: flex; flex-wrap: wrap; gap: 6px; }
        .tag-produto { background-color: #fff4ec; color: #f36f21; padding: 5px 10px; border-radius: 15px; font-size: 12px; font-weight: 700; border: 1px solid #ffdcb8; }

        .error { color: #721c24; background: #f8d7da; padding: 15px; border-radius: 8px; margin-top: 20px; text-align: center; display: none; }
        .contador { text-align: center; font-size: 13px; color: #666; margin-bottom: 10px; display: none; }

        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body>

<div class="container">
    <div class="top-nav">
        <a href="https://drbeneficio.com.br" class="btn-back">Voltar para o site</a>
    </div>

    <div class="header-box">
        <img src="logo_drb.png" alt="Logo DRBENEFICIO" class="logo-img" onerror="this.style.display='none'"> 
        <h2>VALIDADOR</h2>
    </div>
    
    <div class="input-group">
        <input type="text" id="cpf" placeholder="Digite o CPF (apenas números)" maxlength="14" inputmode="numeric">
    </div>
    
    <div class="action-buttons">
        <button class="btn-primary" id="btnBuscar" onclick="buscar()">CONSULTAR</button>
        <button class="btn-clear" onclick="limpar()">LIMPAR</button>
    </div>

    <div id="loaderBox" class="loader-container">
        <div class="spinner"></div>
        <div class="loader-text">Buscando informações...</div>
    </div>

    <div id="msgErro" class="error"></div>
    <div id="contadorMsg" class="contador"></div>

    <div id="areaResultados" class="lista-resultados"></div>
</div>

<script>
    const API_URL = "https://script.google.com/macros/s/AKfycbypQs9uGmTpbtSWp8fS3EfT2yqocG-bYC8tRlrYMsTJ4QjETLKtqBM6rFO04WbqESRyYg/exec";
    const TOKEN = "MinhaChaveSecreta123";

    const inputCPF = document.getElementById('cpf');
    
    inputCPF.addEventListener('input', (e) => {
        let v = e.target.value.replace(/\D/g, "");
        if (v.length > 11) v = v.slice(0, 11);
        e.target.value = v.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
    });
    
    inputCPF.addEventListener('keypress', (e) => { if(e.key === 'Enter') buscar(); });

    function limpar() {
        inputCPF.value = '';
        document.getElementById('areaResultados').innerHTML = '';
        document.getElementById('msgErro').style.display = 'none';
        document.getElementById('contadorMsg').style.display = 'none';
        document.getElementById('loaderBox').style.display = 'none';
        inputCPF.focus();
    }

    async function buscar() {
        const cpfRaw = inputCPF.value.replace(/\D/g, "");
        const btn = document.getElementById('btnBuscar');
        const area = document.getElementById('areaResultados');
        const erroBox = document.getElementById('msgErro');
        const contadorBox = document.getElementById('contadorMsg');
        const loader = document.getElementById('loaderBox');

        area.innerHTML = '';
        erroBox.style.display = 'none';
        contadorBox.style.display = 'none';

        if (cpfRaw.length < 11) {
            erroBox.innerText = "Por favor, digite os 11 números do CPF.";
            erroBox.style.display = 'block';
            return;
        }

        btn.disabled = true;
        btn.innerText = "Aguarde...";
        loader.style.display = 'block';

        try {
            const resp = await fetch(`${API_URL}?token=${TOKEN}&cpf=${cpfRaw}`);
            const listaDados = await resp.json();

            if (listaDados.error) throw new Error(listaDados.error);
            if (!Array.isArray(listaDados) || listaDados.length === 0) {
                throw new Error("Nenhum registro encontrado para este CPF.");
            }

            contadorBox.innerText = `${listaDados.length} registro(s) encontrado(s)`;
            contadorBox.style.display = 'block';

            listaDados.forEach(item => criarCartao(item));

        } catch (err) {
            erroBox.innerText = err.message || "Erro de conexão.";
            erroBox.style.display = 'block';
        } finally {
            btn.disabled = false;
            btn.innerText = "CONSULTAR";
            loader.style.display = 'none';
        }
    }

    function criarCartao(dados) {
        const area = document.getElementById('areaResultados');
        const status = dados.STATUS || "INDEFINIDO";
        const isAtivo = status === 'ATIVO';
        const classeCard = isAtivo ? 'ativo' : 'cancelado';
        const classeBadge = isAtivo ? 'badge-ativo' : 'badge-cancelado';

        /* ---------------------------------------------------------
        PARTE COMENTADA: PACOTES E BENEFÍCIOS
        Remova o comentário abaixo caso queira voltar a mostrar.
        ---------------------------------------------------------
        
        let produtosHTML = '';
        const listaProdutos = dados.MEUS_PRODUTOS || [];
        
        if (listaProdutos.length > 0) {
            const tags = listaProdutos.map(prod => `<span class="tag-produto">${prod}</span>`).join('');
            produtosHTML = `
                <div class="produtos-box">
                    <div class="produtos-title">Benefícios inclusos (${dados.PACOTE || 'N/A'})</div>
                    <div class="tags-container">${tags}</div>
                </div>
            `;
        } else {
            produtosHTML = `
                <div class="produtos-box">
                    <div class="produtos-title">Pacote: ${dados.PACOTE || '--'}</div>
                    <div style="font-size:12px; color:#999; font-style:italic;">Sem produtos listados</div>
                </div>`;
        }
        --------------------------------------------------------- */

        const cardHTML = `
            <div class="card ${classeCard}">
                <div class="card-header">
                    <span class="value" style="font-size:15px; color:#555;">${dados['TIT.DEP.PF']}</span>
                    <span class="status-badge ${classeBadge}">${status}</span>
                </div>

                <div class="row">
                    <div>
                        <div class="label">Nome</div>
                        <div class="value" style="font-size:16px;">${dados['NOME.PF']}</div>
                    </div>
                </div>
                
                <div class="row">
                    <div>
                        <div class="label">CPF</div>
                        <div class="value">${dados['CPF.PF']}</div>
                    </div>
                    <div>
                        <div class="label">Nascimento</div>
                        <div class="value">${dados['DT.NASC.PF']}</div>
                    </div>
                </div>

                </div>
        `;
        area.innerHTML += cardHTML;
    }
</script>

</body>
</html>