@extends('template.cadastro')
@section('title')
    {{ custom_system('NOME_SISTEMA') }} - Troque Sua Senha
@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="titulo" class="input-field col s12 center-align">
                        <img src="{{ custom_system('LOGO') }}" width="150" height="150" class="img-responsive-custom">
                        <h5 class=" font-weight-700">Troque Sua 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">

                    <div class="row margin">

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

                        <div class="input-field col s12">
                            <input id="password" name="password" type="password">
                            <label for="password" class="center-align">Digite sua senha</label>
                        </div>
                        <div class="input-field col s12">
                            <input 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>
    </div>
@endsection
@section('script')
    <script>
        $("#formSenha").validate({
            rules: {
                password: {
                    required: true,
                    minlength: 6
                },
                password2: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"
                },
            },
            messages: {
                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();
            }
        }
    </script>
@stop