@extends('template.cadastro')
@section('title')
    {{ custom_system('NOME_SISTEMA') }} - Crie sua Senha
@stop
@section('conteudo')
    <script>
        Materialize.updateTextFields();
    </script>
    <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 id="conteudoPrincipal">

                    <div class="row">
                        <div id="titulo" class="input-field col s12 center-align">
                            <img src="{{ custom_system('LOGO') }}" width="150" height="150">
                            <h5 class=" font-weight-700">Redefinir senha</h5>
                        </div>
                    </div>

                    <div hidden id="load" class="center-align">
                        <div class=" preloader-wrapper large active">
                            <div class="spinner-layer spinner-orange-only">
                                <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 id="formSenha" method="post" action="/concluir/cadastro">

                        {{ csrf_field() }}

                        <input hidden name="token" value="{{ $tokenUser }}">

                        <div class="row margin">

                            <div class="input-field col s12">
                                <input placeholder="" id="email" name="email" type="email">
                                <label for="email" class="center-align">Confirme o seu email</label>
                            </div>

                            <div class="input-field col s12">
                                <input placeholder="" id="password" name="password" type="password">
                                <label for="password" class="center-align">Digite sua senha</label>
                            </div>
                            <div class="input-field col s12">
                                <input placeholder="" id="password2" name="password2" type="password">
                                <label for="password2" class="center-align">Confirme sua senha</label>
                            </div>
                            <div onclick="validaSenha()" class=" row center-align">
                                <a class="waves-effect waves-light  btn">Salvar</a>
                            </div>
                        </div>
                    </form>
                </div>

                <div hidden id="conteudoErro" class="row center-align">
                    <div class="col s12">
                        <h5 class="center-align"><i class="material-icons md-48">error_outline</i></h5>
                        <p class="center-align">Não foi possivel criar a sua senha, utilize o esqueci a minha senha</p>

                        <a href="/esqueciminhasenha" class="btn-flat orange-text waves-effect">Esqueci a minha Senha</a>
                        <a href="/home" class="btn-flat orange-text waves-effect">Home</a>
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection
@section('script')
    <script>
        $("#formSenha").validate({
            rules: {
                email: {
                    required: true
                },
                password: {
                    required: true,
                    minlength: 4
                },
                password2: {
                    required: true,
                    minlength: 4,
                    equalTo: "#password"
                },
            },
            messages: {
                email: {
                    required: 'O campo email é obrigatorio'
                },
                password: {
                    required: "O campo Senha é obrigatório",
                    minlength: "Sua senha precisa ter no mínimo 6 dígitos"
                },
                password2: {
                    required: "O campo Senha é obrigatório",
                    minlength: "Sua senha precisa ter no mínimo 6 dígitos",
                    equalTo: "As senhas precisam ser iguais"
                },
            },

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

        });

        function validaSenha() {

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

            if (retorno === true) {

                $('#load').removeAttr('hidden', 'hidden');
                $('#formSenha').attr('hidden', 'hidden');
                $('#formSenha').submit();
            }
        }


        @if (session('status'))
            window.location.href = '/senha/recuperda';
        @endif

        @if(session('status_erro'))
        $(document).ready(function () {
            $('#conteudoPrincipal').attr('hidden', 'hidden');
            $('#conteudoErro').removeAttr('hidden', 'hidden');
        });
        @endif

    </script>
@stop