<div class="container-form-home">
    <input type="hidden" name="etapa" class="etapa_page" value="<?php e($etapa); ?>">
    <?php if($etapa == 0){ ?>
    <div class="row">
        <div class="col-md-12">
            <div class="content-title">
                <h2>Crie sua conta</h2>
            </div>
            
            
            <a class="btn btn-primary" href="<?php echo htmlspecialchars($url); ?>"><i class="fa fa-facebook-official ico-login" aria-hidden="true"></i> Cadastre-se com o seu Facebook</a>
            
            <div class="box-cad">
                <fieldset>
                    <legend>ou</legend>
                </fieldset>
                <button id="cad-default" class="btn btn-secondary" data-toggle="collapse" data-target="#box-form-cad">Cadastre-se aqui com o seu e-mail</button>
            </div>
            
            <div class="content-form collapse" id="box-form-cad">
                <form id="precadastro-form" action="<?php e(base_url("comdono/ajax/cad_ajax/pre_cadastro")); ?>" method="post" class="precadastro-form needs-validation" autocomplete="off">
                    <div class="form-group">
                        <label for="nome_cad">Nome</label>
                        <input type="text" name="nome" class="form-control" id="nome_cad" placeholder="Nome Completo" required="required">
                    </div>
                    <div class="form-group mb-4">
                        <label for="email_cad">E-mail</label>
                        <input type="email" name="email" class="form-control" id="email_cad" placeholder="Endereço de e-mail" required="required" value="<?php e($email_anunciar??'')?>">
                    </div>
                    <div class="form-group">
                        <label for="password_cad">Senha</label>
                        <input type="password" name="password" class="form-control" id="password_cad" placeholder="*********" required="required" rel="txtTooltip" title="Use no mínimo 8 caracteres sendo letras maiúsculas, minúsculas, números e símbolos. Assim, seus dados continuam protegidos." data-toggle="tooltip" data-placement="top">
                        <span toggle="#password_cad" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                        <div id="forca_senha"></div>
                        <div class="container-force-password">
                            <div class="row">
                                <div class="col">
                                    <div class="row">
                                        <div class="col pr-0"><div class="box-force box-1"></div></div>
                                        <div class="col pr-0"><div class="box-force box-2"></div></div>
                                        <div class="col pr-0"><div class="box-force box-3"></div></div>
                                        <div class="col"><div class="box-force box-4"></div></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="text">Segurança: <span class="info">Muito fraca</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password_conf">Confirmar Senha</label>
                        <input type="password" name="password_conf" class="form-control" id="password_conf" placeholder="*********" required="required">
                    </div>
                    <div id="content-error"></div>
                    <div class="form-group content-btn">
                        <button type="submit" class="btn btn-success btnCadastro">Vamos lá!</button>
                    </div>
                </form>
            </div>
            <div class="content-bottom">
                <div class="form-group m-0">
                    <label class="fw-700 m-0">Já tem uma conta? <a href="<?php e(base_url("login")); ?>">Entre aqui.</a></label>
                </div>
            </div>
        </div>
    </div>
    
    <?php } if($etapa == 1){ ?>
    <div class="row">
        <div class="col-lg-12">
            <div class="content-title">
                <h2>Termos<span>de Uso</span></h2>
            </div>
            <div class="container-termos">
                <p class="mb-0">Fique atento aos termos de uso e leia cada um dos itens.</p>
                <p class="mb-10"><strong>Aceite os termos ao final da rolagem.</strong></p>
                <div class="box-termos style-scroll scroll-height">
                    
                    <?php include "doc_termos_de_uso_view.php"; ?>
                    
                    
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" name="chk_termo" class="custom-control-input" id="chk_termo">
                            <label class="custom-control-label text-blue" for="chk_termo">
                                Li, aceito e concordo com os termos de uso*
                            </label>
                        </div>
                    </div>
                </div>
                <div id="content-error" class="mb-30 mt-30"></div>
                <div class="row">
                    <div class="offset-lg-2 col-lg-5">
                        <button class="btn btn-secondary btn-recusar" type="button">Recusar</button>
                    </div>
                    <div class="col-lg-5">
                        <button type="button" class="aceitar_termo btn btn-success">Aceitar</button>
                    </div>
                </div>
            </div>
            <div class="container-recusar d-none">
                <div class="row">
                    <div class="col-lg-12">
                        <p>Ao recusar o contrato, você não poderá mais navegar na plataforma. Para maiores informações e esclarecimentos, entre em contato.</p>
                        <div class="row mt-60 mb-15">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-primary btn-contato bg-contato"><i class="fa fa-envelope" aria-hidden="true"></i> E-mail</button>
                            </div>
                            <div class="col-md-6">
                                <a href="https://api.whatsapp.com/send?phone=5561994483087&text=Olá! Gostaria de conversar melhor sobre os termos de uso." target="_blank" class="btn bg-whatsapp"><i class="fa fa-whatsapp" aria-hidden="true"></i> Whatsapp </a>
                            </div>
                        </div>
                        
                        <button type="button" class="recusar_termo btn btn-danger">Sair do cadastro</button>
                        <a href="javascript:;" class="link-termos mb-15">
                            <i class="material-icons">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/>
                                    <path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/>
                                </svg>
                            </i>
                            Voltar aos termos de uso
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
    
</div>