<!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>Cadastro Entregador | BRT PRO</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; }
        .step-hidden { display: none; }
    </style>
</head>
<body class="p-4 flex flex-col items-center">

    <div class="max-w-md w-full mt-4">
        <div class="text-center mb-6">
            <h1 class="text-2xl font-black italic text-[#003964] uppercase tracking-tighter">BRT <span class="text-yellow-400">PRO</span></h1>
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em]">Credenciamento de Entregadores</p>
        </div>

        <div class="bg-white rounded-[2.5rem] shadow-2xl border border-slate-100 overflow-hidden">
            <div class="bg-[#003964] p-4 text-center text-white font-black italic uppercase text-xs">Validação de Segurança</div>

            <form action="processar_entregador.php" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
                
                <div>
                    <label class="text-[13px] font-black uppercase text-slate-400 ml-2 italic">CPF (11 números)</label>
                    <input type="text" id="cpf" name="cpf" maxlength="11" oninput="validarCPF(this.value)" required 
                           class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 outline-none text-sm" placeholder="00000000000">
                </div>

                <div id="campos-entregador" class="step-hidden space-y-4">
                    <input type="text" name="nome" placeholder="Nome Completo" required class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm uppercase">
                    <input type="text" name="nome_mae" placeholder="Nome da Mãe" required class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm uppercase">
                    
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-[11px] font-black uppercase text-slate-400 ml-2 italic">Nascimento</label>
                            <input type="date" name="nascimento" required class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm">
                        </div>
                        <div>
                            <label class="text-[11px] font-black uppercase text-slate-400 ml-2 italic">WhatsApp</label>
                            <input type="text" name="celular" placeholder="(21) 9..." required class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm">
                        </div>
                    </div>

                    <div>
                        <label class="text-[11px] font-black uppercase text-slate-400 ml-2 italic">E-mail para Acesso</label>
                        <input type="email" name="email" placeholder="exemplo@email.com" required 
                               class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm outline-none shadow-inner lowercase">
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-[11px] font-black uppercase text-slate-400 ml-2 italic">Crie uma Senha</label>
                            <input type="password" name="senha" placeholder="******" required 
                                   class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm outline-none">
                        </div>
                        <div>
                            <label class="text-[11px] font-black uppercase text-slate-400 ml-2 italic">Confirme</label>
                            <input type="password" name="confirma_senha" placeholder="******" required 
                                   class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm outline-none">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <input type="text" id="cep" name="cep" placeholder="CEP" maxlength="8" onblur="buscarCEP(this.value)" required class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm">
                        <input type="text" name="numero" placeholder="Nº" required class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 text-sm">
                    </div>

                    <input type="text" id="rua" name="rua" readonly placeholder="Rua" class="w-full p-4 bg-slate-100 rounded-2xl text-xs italic">
                    <input type="text" id="bairro" name="bairro" readonly placeholder="Bairro" class="w-full p-4 bg-slate-100 rounded-2xl text-xs italic">

                    <p class="text-[12px] font-black text-blue-600 uppercase italic text-center">Fotos para Aprovação</p>
                    
                    <label class="flex items-center justify-between p-4 bg-blue-50 rounded-2xl border border-dashed border-blue-200 cursor-pointer text-[10px] font-bold text-slate-500 uppercase italic">
                        Selfie com RG <i class="fas fa-camera text-blue-500"></i>
                        <input type="file" name="selfie" required class="hidden">
                    </label>

                    <button type="submit" class="w-full bg-[#003964] text-white font-black py-5 rounded-[2rem] shadow-xl uppercase italic text-xs tracking-widest mt-4 active:scale-95 transition-transform">
                        SOLICITAR CREDENCIAMENTO
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function validarCPF(v) {
            const cpf = v.replace(/\D/g, '');
            const campos = document.getElementById('campos-entregador');
            if(cpf.length === 11) {
                campos.classList.remove('step-hidden');
            } else {
                campos.classList.add('step-hidden');
            }
        }

        async function buscarCEP(v) {
            const cep = v.replace(/\D/g, '');
            if(cep.length !== 8) return;
            const r = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
            const d = await r.json();
            if(!d.erro) {
                document.getElementById('rua').value = d.logradouro;
                document.getElementById('bairro').value = d.bairro;
            }
        }
    </script>
</body>
</html>