<!DOCTYPE html>
<%- include('../../../views/header.ejs') %>

<div class="main d-flex align-items-center justify-content-center">
    <div class="form-login p-4 rounded">
        
        <%- include('../../../views/message.ejs') %>
         
        <div class="mb-3">
            <a class="btn rounded-pill btn-primary" href="#" role="button">
                <i class="bi-facebook"></i>  Continue com Facebook</a>
        </div>
        <div class="mb-3">
            <a class="btn rounded-pill btn-secondary" href="#" role="button">
                <i class="bi-google"></i>  Continue com Google
            </a>
        </div>
        <div class="mb-3">
            <a class="btn rounded-pill btn-dark" href="#" role="button">
                <i class="bi-apple"></i>  Continue com Apple
            </a>
        </div>
        <div class="text-separator mb-2">OU</div>
        <div class="mb-3 ">
            <input type="text" class="form-control" id="inputEmail" placeholder="E-mail">
        </div>
        <div class="mb-3">
            <input type="text" class="form-control" id="inputName" placeholder="Nome Completo">
        </div>
        <div class="mb-3">
            <input type="password" class="form-control" id="inputPassword" placeholder="Senha">
        </div>
        <div class="mb-3">
            <input type="password" class="form-control" id="inputPasswordConfirm" placeholder="Confirmação de Senha">
        </div>
        <div class="mb-3">
            <button type="button" class="btn rounded-pill btn-primary btn-login-create" > Criar conta</button>
        </div>
        <div class="mb-3">
            <a class="btn rounded-pill btn-primary" href="/login" role="button">
                <i class="bi-arrow-bar-left"></i>  Voltar</a>
        </div>
    </div>
</div>
<%- include('../../../views/footer.ejs') %>

<script type="text/javascript">
    window.onload = ()=>{
        const alerta = (msg)=>{
            $('.alert.alert-danger').removeClass('d-none');
            $('.alert-message').html(msg);
            
        }
        $(".btn-login-create").click((e)=>{
            var data = {
                login: $('#inputEmail').val(),
                name: $('#inputName').val(),
                password: $('#inputPassword').val(),
                password_confirm: $('#inputPasswordConfirm').val(),
            }
            let error = false;
            let msg = [];
            if(!data.login){
                error = true;
                msg.push("Login é obrigatório!")
            }
            if(!data.name){
                error = true;
                msg.push("Nome é obrigatório!")
            }
            if(!data.password){
                error = true;
                msg.push("Senha é obrigatório!")
            }
            if(!data.password_confirm){
                error = true;
                msg.push("Confirmação de senha é obrigatório!")
            }
            if(data.password_confirm != data.password){
                error = true;
                msg.push("As senhas não conferem!")
            }
            if(!error){
                axios.post('/login/create', data)
                .then((response) => {
                    console.log(response, 'response')
                    if(response.data.redirect){
                        window.location.href = response.data.redirect;
                    }else{
                        window.location.href = '/login';

                    }
                })
                .catch((error) => {
                    console.log(error,error.response.data.message, error.toJSON());
                    if(error.response.data){
                        alerta(error.response.data.message)
                    }else{
                        alerta(error.message);
                    }
                   
                });
            }else{
                alerta(msg.join('</br>'));
            }
        });
    }
</script>
<style type="text/css">
    .main{
        width: 100%;
        height: 100%;
    }
    .form-login{
        width: 30%;
        border: solid 1px darkgray;
     
        min-width: 25rem;

        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    .btn{
       width: 100%; 
    }
</style>
