<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>Dados de Recebimento | BRT Express</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
        body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
        .bg-azul-brt { background-color: #003964; }
        .text-azul-brt { color: #003964; }
        .bg-amarelo-brt { background-color: #facc15; }
    </style>
</head>
<body class="p-4 flex items-center justify-center min-h-screen">

    <div class="max-w-md w-full">
        <div class="bg-blue-50 border-l-4 border-amarelo-brt p-4 rounded-2xl mb-6 shadow-sm">
            <div class="flex items-center gap-2 mb-1">
                <i class="fas fa-coins text-azul-brt"></i>
                <h4 class="text-[10px] font-black uppercase text-azul-brt italic">Pagamento Automático</h4>
            </div>
            <p class="text-[10px] font-bold text-slate-500 uppercase leading-tight">
                Ao completar <span class="text-azul-brt font-black">R$ 50,00</span>, o saldo será enviado para a chave abaixo. 
                <span class="text-red-500 font-black">Confira os dados com atenção!</span>
            </p>
        </div>

        <div class="bg-white rounded-[2.5rem] shadow-2xl border border-slate-100 overflow-hidden">
            <div class="bg-azul-brt p-5 text-center">
                <h2 class="text-white font-black italic uppercase tracking-widest text-xs">Configurar Recebimento PIX</h2>
            </div>

            <form action="salvar_pix.php" method="POST" class="p-8 space-y-5" id="formPix">
                
                <div>
                    <label class="text-[10px] font-black uppercase text-slate-400 ml-2 italic">Nome do Titular da Conta</label>
                    <div class="relative mt-1">
                        <i class="fas fa-user absolute left-4 top-4 text-slate-300"></i>
                        <input type="text" name="favorecido" id="favorecido" required 
                               class="w-full pl-11 p-4 bg-slate-50 rounded-2xl border border-slate-100 outline-none focus:border-azul-brt text-sm font-bold text-slate-700 uppercase" 
                               placeholder="NOME COMPLETO">
                    </div>
                </div>

                <div>
                    <label class="text-[10px] font-black uppercase text-slate-400 ml-2 italic">Tipo de Chave PIX</label>
                    <select name="tipo_chave" class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 outline-none mt-1 text-sm font-bold text-slate-600 appearance-none">
                        <option value="cpf">CPF</option>
                        <option value="celular">Celular</option>
                        <option value="email">E-mail</option>
                        <option value="aleatoria">Chave Aleatória (EVP)</option>
                    </select>
                </div>

                <div>
                    <label class="text-[10px] font-black uppercase text-slate-400 ml-2 italic">Sua Chave PIX</label>
                    <div class="relative mt-1">
                        <i class="fas fa-key absolute left-4 top-4 text-slate-300"></i>
                        <input type="text" name="chave_pix" id="chave_pix" required 
                               class="w-full pl-11 p-4 bg-slate-50 rounded-2xl border border-slate-100 outline-none focus:border-azul-brt text-sm font-bold text-slate-700" 
                               placeholder="Digite sua chave aqui">
                    </div>
                </div>

                <button type="submit" id="btnSalvar" class="w-full bg-azul-brt text-white font-black py-5 rounded-[2rem] shadow-xl uppercase italic text-xs tracking-[0.2em] hover:scale-[1.02] transition-all">
                    VINCULAR CONTA PIX
                </button>

                <p class="text-[9px] text-center text-slate-400 font-bold uppercase italic mt-4">
                    <i class="fas fa-lock mr-1"></i> Proteção de Dados OABCG Soluções
                </p>
            </form>
        </div>

        <a href="painel_entregador.php" class="block text-center mt-6 text-xs font-black text-slate-400 underline uppercase italic">
            Voltar ao Painel
        </a>
    </div>

    <script>
        // Trava os campos após o envio para segurança do entregador
        document.getElementById('formPix').onsubmit = function() {
            if(confirm("Confirma que os dados PIX estão corretos? Após salvar, a alteração só poderá ser feita via suporte.")) {
                return true;
            }
            return false;
        };
    </script>

</body>
</html>