<div class="accordion accordion-lg divcenter nobottommargin clearfix" style="max-width: 550px;">
    <div class="acctitle"><i class="acc-closed icon-lock3"></i><i class="acc-open icon-unlock"></i>Efetue seu Login</div>
    <div class="acc_content clearfix">
        <form  id="login-form" class="ajax_off" action="<?= url("/entrar"); ?>" method="post" enctype="multipart/form-data">
            <div class="col_full">
                <label for="login-form-username" class="t400">Email:</label>
                <input type="text" id="login-form-username" name="email" value="" class="form-control form-control-pill" />
            </div>
            <div class="col_full">
                <label for="login-form-password" class="t400">Senha:</label>
                <input type="password" id="login-form-password" name="password" value="" class="form-control form-control-pill" />
            </div>
            <div class="col_full nobottommargin">
                <input type="hidden" name="destino" value="/fechar/endereco">
                <button class="button button-circle t400 nomargin" id="login-form-submit" name="login-form-submit" value="login">Login</button>
                <a href="<?= url("/recuperar")?>" class="text-muted fright">Perdeu a senha?</a>
            </div>
        </form>
    </div>
    <div class="acctitle"><i class="acc-closed icon-user4"></i><i class="acc-open icon-ok-sign"></i>Não tem cadastro? Clique para registrar</div>
    <div class="acc_content clearfix">
        <form id="register-form" name="register-form" class="nobottommargin" action="<?= url("/cadastrar"); ?>" method="post">
            <?= csrf_input(); ?>
            <input type="hidden" name="destino" value="/restrito">

            <div class="col_full ">
                <label for="cpf">CPF ou CNPJ*</label>

                <div class="input-group divcenter">
                    <input type="text" id="cpf" name="document" value="" class="form-control form-control-pill mask-document" placeholder="CPF ou CNPJ" data-url="<?= url("/verifica-documento"); ?>" autocomplete="off">
                    <div class="input-group-append">
                        <span class="btn btn-info btn-round"><i class="fal fa-check"></i></span>
                    </div>
                </div>

            </div>
            <div class="j_type">

            </div>

            <input type="hidden" name="destino" value="/fechar/endereco">


        </form>
    </div>
</div>
<!--<hr>-->
<!--<div><a href="--><?//= url("carrinho")?><!--" class="button button-black button-circle button-3d">Voltar ao Carrinho</a></div>-->

<?php $v->start("scripts")?>
<script>

    // AJAX RESPONSE
    var ajaxResponseBaseTime = 3;
    var ajaxResponseRequestError = "<div class='message error icon-warning'>Desculpe mas não foi possível processar sua requisição...</div>";
    function ajaxMessage(message, time) {
        var ajaxMessage = $(message);

        ajaxMessage.append("<div class='message_time'></div>");
        ajaxMessage.find(".message_time").animate({"width": "100%"}, time * 1000, function () {
            $(this).parents(".message").fadeOut(200);
        });

        $(".ajax_response").append(ajaxMessage);
        ajaxMessage.effect("bounce");
    }

    // AJAX RESPONSE MONITOR

    $(".ajax_response .message").each(function (e, m) {
        ajaxMessage(m, ajaxResponseBaseTime += 1);
    });

    // AJAX MESSAGE CLOSE ON CLICK
    $(".ajax_response").on("click", ".message", function (e) {
        e.preventDefault();
        $(this).effect("bounce").fadeOut(1);
    });

    var options = {
        onKeyPress: function (cpf, ev, el, op) {
            var masks = ['000.000.000-000', '00.000.000/0000-00'];
            $('.mask-document').mask((cpf.length > 14) ? masks[1] : masks[0], op);
        }
    }

    $('.mask-document').length > 11 ? $('.mask-document').mask('00.000.000/0000-00', options) : $('.mask-document').mask('000.000.000-00#', options);

    $('.mask-cnpj').mask('00.000.000/0000-00');

    $(".mask-document").blur(function(e){
        e.preventDefault();
        var urlData = $(this).data("url");
        var document = $(this).val();
        $.ajax({
            url: urlData,
            type: "POST",
            data: {document: document},
            dataType: "json",
            success: function (response) {
                if(response.result == 1){
                    $(".user_type").val("individual");
                    $(".j_type").html("");
                    $(".j_type").html(response.html);
                }

                if(response.result == 2){
                    $(".user_type").val("corporation");
                    $(".j_type").html("");
                    $(".j_type").html(response.html);
                }

                if(response.result == 3){
                    $(".user_type").val("");
                    $(".j_type").html("");
                    ajaxMessage(response.message, 5);
                }

            }
        });

        $('body').on('focus', 'input[data-mask="date"]', function(){
            $(this).mask("00/00/0000");
        });

        $('body').on('focus', 'input[data-mask="phone"]', function(){
            $(this).mask('(00) 0000-00009');
            $(this).blur(function (event) {
                if ($(this).val().length == 15) { // Celular com 9 dígitos + 2 dígitos DDD e 4 da máscara
                    $(this).mask('(00) 00000-0009');
                } else {
                    $(this).mask('(00) 0000-00009');
                }
            });
        });
    });
</script>
<?php $v->end(); ?>