@extends('template.cadastro')
@section('title')
    {{ custom_system('NOME_SISTEMA') }} - Cadastro
@stop
@section('conteudo')

    <div id="login-page" class="row">
        <div class="col s12 z-depth-4 card-panel font-weight-900 grey-text border-radius-10">
            <div class="login-form">
                <div class="row">
                    <div id="conteudoCriacao">

                        <div class="input-field col s12 center">
                            <img src="{{ custom_system('LOGO') }}" width="150" height="150" style="object-fit: cover;">

                        </div>

                        <div class="input-field col s12" style="margin-bottom: 30px;">
                            <h5 class="center-align grey-text font-weight-500">Crie Sua Conta</h5>
                        </div>

                        <div class="center-align" id="btnPassos">

                            <a id="btn-dados-email" onclick="voltarEmail()"
                               class="btn-floating waves-effect waves-light">
                                <i class="material-icons">email</i>
                            </a>

                            <a class="btn-floating transparent z-depth-0" style="cursor: default;">
                                <i class="material-icons grey-text">chevron_right</i>
                            </a>

                            <a id="btn-dados-pessoais" onclick="voltarDadosPessoais()" class="btn-floating waves-effect
                        waves-light" disabled>
                                <i class="material-icons">person</i>
                            </a>

                            <a class="btn-floating transparent z-depth-0" style="cursor: default;">
                                <i class="material-icons grey-text">chevron_right</i>
                            </a>

                            <a id="btn-dados-end" onclick="voltarDadosEnd()" class="btn-floating waves-effect
                         waves-light" disabled>
                                <i class="material-icons">home</i>
                            </a>
                        </div>

                        <br> <br>

                        <div hidden id="preloader">
                            <div class="progress">
                                <div class="indeterminate"></div>
                            </div>
                        </div>

                        <form method="post" id="formEmail">
                            {{ csrf_field() }}
                            <div class="row margin">
                                <div class="input-field col s11">
                                    <input id="email" name="email" type="text">
                                    <label for="email">E-mail*</label>
                                </div>
                                <div hidden id="icone" class=" input-field col s1"
                                     style="margin-top: 40px; margin-left: -10px;">
                                    <div class="material-icons " style="color: #1bc656">done_all</div>
                                </div>
                            </div>

                        </form>

                        <div id="btn-verificar-email" class="right-align">
                            <a onclick="validaEmail() "
                               class=" waves-effect waves-light">
                                <i class="material-icons"
                                   style="font-size: 45px; color: {{ custom_system('___SECONDARY_COLOR___') }}">keyboard_arrow_right</i>
                            </a>
                        </div>

                        <form method="post" hidden id="formDadosPessoais">
                            @if(session('configuration')['cre_user_validation'] === 1)
                                <div>
                                    <div class="row margin">
                                        <div class="input-field col s12">
                                            <input id="password" name="ppassword" type="password">
                                            <label for="password" class="center-align">Criar Senha*</label>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="row margin">
                                        <div class="input-field col s12">
                                            <input id="password2" name="ppassword2" type="password">
                                            <label for="password2" class="center-align">Confirmar Senha*</label>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div>
                                <div class="row margin">
                                    <div class="input-field col s12">
                                        <input id="name" name="name" type="text">
                                        <label for="name" class="center-align">Nome*</label>
                                    </div>
                                </div>
                            </div>

                            @if(session('configuration')['exigir_cpf'] === 1)

                                <div>
                                    <div class="row margin">
                                        <div class="input-field col s12">
                                            <input id="cpf" name="cpf" type="text">
                                            <label for="cpf" class="center-align">CPF*</label>
                                        </div>
                                    </div>
                                </div>

                            @endif

                            <div>
                                <div class="row margin">
                                    <div class="input-field col s12">
                                        <input id="data_nascimento" name="data_nascimento" type="text">
                                        <label for="data_nascimento" class="center-align">Data de Nascimento*</label>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="row margin">
                                    <div class="input-field col s12">
                                        <input id="telefone" name="telefone" type="tel">
                                        <label for="telefone" class="center-align">Telefone*</label>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="row margin">
                                    <div class="input-field col s12">
                                        <input id="celular" name="celular" type="tel">
                                        <label for="celular" class="center-align">Celular*</label>
                                    </div>
                                </div>
                            </div>


                            <div class="col s12">
                                <label for="genter_select">Sexo*</label>
                                <p>
                                    <input name="sexo" type="radio" id="sexo_feminino" value="0">
                                    <label for="sexo_feminino">Feminino</label>
                                </p>
                                <p>
                                    <input value="1" name="sexo" type="radio" id="sexo_masculino"
                                           data-error=".errorTxt8">
                                    <label for="sexo_masculino">Masculino</label>
                                </p>
                                <p>
                                    <input name="sexo" type="radio" id="sexo_outros" value="2">
                                    <label for="sexo_outros">Outros</label>
                                </p>
                            </div>
                        </form>

                        <div hidden id="btn-guardar-dados-pessoais" class="right-align">
                            <a onclick="guardaDadosPessoais() "
                               class=" waves-effect waves-light">
                                <i class="material-icons"
                                   style="font-size: 45px; color: {{ custom_system('___SECONDARY_COLOR___') }}">keyboard_arrow_right</i>
                            </a>
                        </div>

                        <form method="post" hidden id="formDadosEnd">

                            <div class="row margin">
                                <div class="input-field col s12">
                                    <input id="cep" name="cep" type="text">
                                    <label for="cep" class="center-align">Cep</label>
                                </div>
                            </div>

                            <div>
                                <div class="row margin">
                                    <div class="input-field col s12">
                                        <input id="rua" name="rua"
                                               type="text">
                                        <label for="rua" class="center-align">Rua</label>
                                    </div>
                                </div>
                            </div>

                            <div class="row margin">
                                <div class="input-field col s12">
                                    <select name="bairro_id" id="selectBairro">
                                        <option value="" disabled selected>Escolha um bairro</option>

                                        @foreach($bairros->data as $bairro)

                                            <option value="{{ $bairro->id }}">{{ $bairro->nome }}</option>

                                        @endforeach

                                    </select>
                                    <label>Bairro*</label>
                                </div>
                            </div>

                            <div>
                                <div class="row margin">
                                    <div class="input-field col s12">
                                        <input id="numero" name="numero" type="text">
                                        <label for="numero" class="center-align">Número</label>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="row margin">
                                    <div class="input-field col s12">
                                        <input id="complemento" name="complemento" type="text">
                                        <label for="complemento" class="center-align">Complemento</label>
                                    </div>
                                </div>
                            </div>

                            <div class="row margin">
                                <p style="margin-left: 10px; margin-bottom: 0;">
                                    <input checked type="checkbox" name="send_notification" class="filled-in"
                                           id="send_notification" value="1"/>
                                    <label for="send_notification">Receber Notificações do Sistema.</label>
                                </p>
                                <p class="orange-text " onclick="modalNotificacao()"
                                   style="margin-left: 45px; margin-top: 0; cursor: pointer">Clique aqui para ver as
                                    notificações</p>
                            </div>

                            <div class="row margin">
                                <p style="margin-left: 10px; margin-bottom: 0;">
                                    <input type="checkbox" name="termo" class="filled-in" id="termo"/>
                                    <label for="termo">Eu li e concordo com os termos de uso.</label>
                                </p>
                                <p class="orange-text " onclick="modalTermo()"
                                   style="margin-left: 45px; margin-top: 0; cursor: pointer">Clique aqui para ler o
                                    termo</p>
                            </div>

                            <br>

                            <div id="btn-cadastrar" class="center-align">

                                <a onclick="validar()" class="btn waves-effect">Cadastrar</a>

                            </div>

                            <div hidden id="loader-final" class="center-align">
                                <div class="preloader-wrapper active">
                                    <div class="spinner-layer">
                                        <div class="circle-clipper left">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="gap-patch">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="circle-clipper right">
                                            <div class="circle"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>


                    <div hidden id="nao-validado" class="center-align">
                        <i class="material-icons" style="font-size: 80px;">sentiment_dissatisfied</i>
                        <p>Esse e-mail já existe!</p>
                        <div class="col s6">
                            <a href="/registro" class="grey-text">Tentar novamente</a>
                        </div>
                        <div class="col s6">
                            <a href="/esqueciminhasenha" style="color: {{ custom_system('___SECONDARY_COLOR___') }}">Recuperar
                                Senha</a>
                        </div>
                    </div>

                    <div hidden id="conteudoAposCria">
                        <h5 class="center-align"><i class="material-icons" style="font-size: 70px;">email</i></h5>
                        <p class="center-align grey-text">Sua conta foi criada com sucesso.</p>
                        <p class="center-align grey-text">Foi enviado um email com instruções para finalizar o seu
                            cadastro</p>
                        <p class="center-align orange-text">Por favor confira sua caixa de spam!</p>


                        <br>

                        <h5 class="center-align font-weight-600"><a href="/home" class="btn waves-effect">Home</a></h5>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="modalTermo" class="modal border-radius-10">
        <div class="modal-content">
            <h5 class="font-weight-900 grey-text center-align">Termo de uso e privacidade</h5>
            <span>{{ $termo->data }}</span>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>
    <style>
        .lista {
            list-style-type: disc;
        }
    </style>
    <div id="modalNotificacao" class="modal border-radius-10">
        <div class="modal-content">
            <h5 class="font-weight-900 grey-text center-align">Notificações</h5>
            <span>Tipos de notificações:</span> <strong><span>E-mail, SMS e Push(Mensagens no APP)</span></strong>
            <div class="left-alig">
                <p>O {{custom_system('NOME_SISTEMA')}} notifica o usuário nas seguintes ocasiões :</p>
                <ul>
                    <li class="lista">Quando o status da sua ocorrência é alterado;</li>
                    <li class="lista">Quando a ocorrência que você apoio é atendida;</li>
                    <li class="lista">Quando o administrador de uma secretaria envia uma notificação.</li>
                </ul>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>
@endsection

@section('script')

    <script>
        $('#data_nascimento').mask("00/00/0000");
        $('#telefone').mask("(00) 00000000");
        $('#celular').mask("(00) 000000000");
        $('#cep').mask("00000000");
        $('#cpf').mask('000.000.000-00');
    </script>

    <script>

        $(document).ready(function () {
            $('.modal').modal();
        });

        function modalTermo() {
            $('#modalTermo').modal('open');
        }

        function modalNotificacao() {
            $('#modalNotificacao').modal('open');
        }

        function cadastrar() {

            if ($('#password').val() !== $('#password2').val()) {
                alert('A senha não confere, por favor verificar');
                return;
            }

            $.ajax({
                type: 'POST',
                url: '/registro/cidadao',
                data: $('#formEmail, #formDadosPessoais, #formDadosEnd').serialize(),
                beforeSend: function () {

                },
                success: function (data) {

                    Materialize.toast('Seu cadastro foi realizado com sucesso');

                    $('#conteudoCriacao').attr('hidden', 'hidden');
                    $('#conteudoAposCria').removeAttr('hidden', 'hidden');

                },
                error: function (xhr) {

                    Materialize.toast(xhr.responseJSON.message);

                }

            });

        }

        $("#formEmail").validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
            },
            messages: {
                email: {
                    required: "Esse campo é obrigatório",
                },
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }
        });

        $("#formDadosPessoais").validate({
            rules: {
                @if(session('configuration')['cre_user_validation'] === 1)
                password: {
                    required: true,
                    minlength: 4
                },
                password2: {
                    required: true,
                    minlength: 4
                },
                @endif
                name: {
                    required: true,
                    minlength: 9
                },
                @if(session('configuration')['exigir_cpf'] === 1)
                cpf: {
                    required: true,
                    minlength: 13
                },
                @endif
                data_nascimento: {
                    required: true,
                },
                telefone: {
                    required: true,
                    minlength: 10
                },
                celular: {
                    required: true,
                    minlength: 11
                },
                sexo: "required",
            },
            messages: {
                name: {
                    required: "O campo Nome é obrigatório",
                    minlength: "Por favor digite seu nome completo",
                },
                @if(session('configuration')['exigir_cpf'])
                cpf: {
                    required: "O campo CPF é obrigatório",
                    minlength: "Por favor digite seu CPF",
                },
                @endif
                data_nascimento: {
                    required: "O campo Data é obrigatório",
                },
                telefone: {
                    required: "O campo Telefone é obrigatório",
                    minlength: "Você precisa digitar o DD e o Número",
                },
                celular: {
                    required: "O campo Celular é obrigatório",
                    minlength: "Você precisa digitar o DD e o Número",
                },
                sexo: {
                    required: "Selecione um Sexo"
                }

            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }
        });


        $("#formDadosEnd").validate({
            rules: {

                bairro_id: {
                    required: true,

                },

            },
            //For custom messages
            messages: {


                bairro_id: {
                    required: "O campo Bairro é obrigatório",
                },

            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }

        });

        function validaEmail() {

            var valida = $('#formEmail').validate();
            valida.form();
            var retorno = valida.form();

            if (retorno === true) {

                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: '/registro/validar/email',
                    data: {
                        _token: '{{ csrf_token() }}',
                        email: $('#email').val()
                    },
                    beforeSend: function () {

                        $('#formEmail').attr('hidden', 'hidden');
                        $('#btn-verificar-email').attr('hidden', 'hidden');
                        $('#preloader').removeAttr('hidden', 'hidden');

                    },
                    success: function (data) {

                        if (data === true) {

                            $('#preloader').attr('hidden', 'hidden');
                            $('#icone').removeAttr('hidden', 'hidden');
                            $('#formEmail').attr('hidden', 'hidden');
                            $('#validado').attr('hidden', 'hidden');
                            $('#formDadosPessoais').removeAttr('hidden', 'hidden');
                            $('#btn-dados-pessoais').removeAttr('disabled', 'disabled');
                            $('#btn-guardar-dados-pessoais').removeAttr('hidden', 'hidden');


                        } else {


                            $('#conteudoCriacao').attr('hidden', 'hidden');
                            $('#nao-validado').removeAttr('hidden', 'hidden');
                            $('#preloader').attr('hidden', 'hidden');


                        }

                    },
                    error: function (xhr) {

                        alert('existe');

                    }
                });

            }

        }

        function guardaDadosPessoais() {

            var guarda = $('#formDadosPessoais').validate();
            guarda.form();
            var retorno = guarda.form();

            console.log(retorno);


            if (retorno === true) {

                $('#formDadosPessoais').attr('hidden', 'hidden');
                $('#btn-guardar-dados-pessoais').attr('hidden', 'hidden');
                $('#preloader').attr('hidden', 'hidden');
                $('#formDadosEnd').removeAttr('hidden', 'hidden');
                $('#btn-dados-end').removeAttr('disabled', 'disabled');

            }

        }

        function validar() {

            if (!$('#termo').is('input:checked')) {
                alert('Voce precisa aceitar o termo');
                return;
            }

            var valida = $('#formDadosEnd').validate()
            var retorno = valida.form();

            if (retorno != true) {
                return;
            }

            $('#btn-cadastrar').attr('hidden', 'hidden');
            $('#loader-final').removeAttr('hidden', 'hidden');

            cadastrar();

        }

        function voltarEmail() {

            $('#formDadosPessoais').attr('hidden', 'hidden');
            $('#formDadosEnd').attr('hidden', 'hidden');
            $('#btn-guardar-dados-pessoais').attr('hidden', 'hidden');
            $('#btn-verificar-email').removeAttr('hidden', 'hidden');
            $('#formEmail').removeAttr('hidden', 'hidden');
        }

        function voltarDadosPessoais() {

            $('#formDadosEnd').attr('hidden', 'hidden');
            $('#formEmail').attr('hidden', 'hidden');
            $('#btn-guardar-dados-pessoais').removeAttr('hidden', 'hidden');
            $('#btn-verificar-email').attr('hidden', 'hidden');
            $('#formDadosPessoais').removeAttr('hidden', 'hidden');

        }

        function voltarDadosEnd() {

            $('#formDadosPessoais').attr('hidden', 'hidden');
            $('#formEmail').attr('hidden', 'hidden');
            $('#btn-guardar-dados-pessoais').attr('hidden', 'hidden');
            $('#btn-verificar-email').attr('hidden', 'hidden');
            $('#formDadosEnd').removeAttr('hidden', 'hidden');

        }

    </script>

    <script>
        $(document).ready(function () {

            function limpa_formulário_cep() {
                // Limpa valores do formulário de cep.
                $("#rua").val("");

            }

            //Quando o campo cep perde o foco.
            $("#cep").blur(function () {

                //Nova variável "cep" somente com dígitos.
                var cep = $(this).val().replace(/\D/g, '');
                //Verifica se campo cep possui valor informado.
                if (cep != "") {

                    //Expressão regular para validar o CEP.
                    var validacep = /^[0-9]{8}$/;
                    //Valida o formato do CEP.
                    if (validacep.test(cep)) {

                        //Preenche os campos com "..." enquanto consulta webservice.
                        $("#rua").val("...");

                        //Consulta o webservice viacep.com.br/
                        $.getJSON("https://viacep.com.br/ws/" + cep + "/json/?callback=?", function (dados) {

                            if (!("erro" in dados)) {
                                //Atualiza os campos com os valores da consulta.
                                $("#rua").val(dados.logradouro);

                            } //end if.
                            else {
                                //CEP pesquisado não foi encontrado.
                                limpa_formulário_cep();
                                alert("CEP não encontrado.");
                            }
                        });
                    } //end if.
                    else {
                        //cep é inválido.
                        limpa_formulário_cep();
                        alert("Formato de CEP inválido.");
                    }
                } //end if.
                else {
                    //cep sem valor, limpa formulário.
                    limpa_formulário_cep();
                }
            });
        });
    </script>
@stop