@extends('backend.includes.panel')

@section('page_css')
<link href="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.css' }}" rel="stylesheet">
@stop

@section('page_title','Change password')


@section('main_content')
	<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{ Form::open(['route' => 'backend.set.password','class'=>'form-horizontal form-material','data-parsley-validate'=>'','method'=>'POST','autocomplete'=>'off','id'=>'changePasswordForm']) }}
                    <h4 class="card-title">Update your password
                        <button type="reset" style="float: right;" class="btn btn-warning waves-effect waves-light m-r-10">Reset</button>
                        <button type="submit" style="float: right;" class="btn btn-success waves-effect waves-light m-r-10">Change Password</button>
                    </h4>
                    <h6 class="card-subtitle"><code>Change password at regular basis to keep it mnore secure</code></h6>
                    <div class="form-group m-b-40">
                        {{ Form::password('current_password',['class'=>'form-control','placeholder'=>'Current Password','data-parsley-required'=>'true','autofocus'=>'true','id'=>'current_password']) }}
                    </div>
                    <div class="form-group m-b-40">
                        {{ Form::password('new_password',['class'=>'form-control','placeholder'=>'New Password','data-parsley-required'=>'true','id'=>'new_password','data-parsley-notequalpass'=>'#current_password','autofocus'=>'true']) }}
                    </div>
                    <div class="form-group m-b-40">
                        {{ Form::password('confirm_password',['class'=>'form-control','placeholder'=>'Confirm Password','data-parsley-required'=>'true','data-parsley-equalto'=>'#new_password','autofocus'=>'true']) }}
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_script')
<script type="text/javascript">
    
    $(function(){


        function setErrors(response){
            if(response.errors && response.message){
                var errorMessage = '';
                $.each(response.errors,function(i,val){
                    if($('.'+i+'-custom-error').length){
                        $('.'+i+'-custom-error').html(val[0]);
                    }else{
                        $('#changePasswordForm').find('input[name='+i+']').after('<code class="custom-errors text-danger '+i+'-custom-error">'+val[0]+'</code>');
                    }
                    if(!errorMessage){                      
                        errorMessage = val[0];
                    }
                });
                flash(response.message,'error',errorMessage);
            }else{
                flash('Password not changed. Try again','error');
            }   
        }

        // On click check old password and update
        $(document).on('submit','#changePasswordForm',function(e){
            var self = this;
            e.preventDefault();
            setButtonText('changePasswordForm','Changing...');
            $.ajax({
                url:'{{ route("backend.set.password") }}',
                data:$(this).serialize(),
                type:'POST',
                dataType:'JSON',
                success:function(response){
                    if(response.result){
                        resetForm('changePasswordForm','Change Password');
                        $(self).find('button[type="reset"]').click();
                        flash(response.message,'success');
                    }else{
                        setErrors(response);
                        flash('Password not changed','error');
                    }
                },
                error:function(response){
                    response = response.responseJSON;
                    setErrors(response);
                    resetForm('changePasswordForm','Change Password');
                }
            })
        });

    });

</script>
@stop