@extends('layouts.guest')
@section('content')
<div class="container">
    <div class="contentbox">
        <div class="contentboxheading"><i class="las la-cog"></i> Update New Password</div>
        <div class="contentboxinner ps-3 pe-3">
            @if($user)
            <form id="updateForm">
                @csrf
                <input type="hidden" name="pwrsid" value="{{$pwdreset->id}}" readonly>
                <input type="hidden" name="username" value="{{$user->username}}" readonly>
                <div class="row mt-3 mb-3">
                    <div class="col-md-2">Username*</div>
                    <div class="col-md-4"><b>{{$user->username}}</b></div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-2">New Password*</div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="new_password" name="new_password" placeholder="New Password" />
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-2">Confirm Password*</div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" />
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="btn_update_pass" type="button">Submit <div class="spinner-border spinner-border-sm text-light d-none" role="status"><span class="visually-hidden">Loading...</span></div></button>                    
                    </div>
                </div>
            </form>
            @else
            <div class="alert alert-danger">Password reset token has been expired.</div>
            @endif
        </div>
    </div>
</div>
@endsection
@section('footer_scripts')
<script>
$(document).ready(function () {
    $('#btn_update_pass').click(function(){
        if($('#updateForm').valid()){
            $('#btn_update_pass .spinner-border').show();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: $('#updateForm').serialize(),
                url: APP_URL+"/update-password",
                success: function(res) {
                    $('#btn_update_pass .spinner-border').hide();                   
                    if(res.status){
                        window.location.href = APP_URL;
                    }else{
                        $('.pagemsgcontent').html('<div class="alert alert-error">'+res.message+'</div>');
                        $('#alertMsg').modal('show');
                    }
                },
                error: function(res) {                    
                    $('#btn_update_pass .spinner-border').hide();
                    ajax_error2(res);
                }
            });
        }
    });

    $('#updateForm').validate({ 
        rules: {
            new_password: {
                required: true,
                minlength: 6
            },
            confirm_password: {
                minlength: 5,
                equalTo: "#new_password"
            }
        },
        messages: {
            new_password: {
                required: 'New password is required field.',
                minlength: 'Password must be 6 charecter length.'
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.col-md-4').append(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });  

});
</script>
@endsection