@extends('layouts.guest')
@section('content')
<div class="container">
    <div class="contentbox">
        <div class="contentboxheading"><i class="las la-cog"></i> Reset Password</div>
        <div class="contentboxinner ps-3 pe-3">
            <form id="resetForm">
                @csrf
                <div class="row mt-3 mb-5">
                    <div class="col-md-1">Username*</div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="username" placeholder="Username" />
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="btn_reset_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>
        </div>
    </div>
</div>
@endsection
@section('footer_scripts')
<script>
$(document).ready(function () {
    $('#btn_reset_pass').click(function(){
        if($('#resetForm').valid()){
            $('#btn_reset_pass .spinner-border').show();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: $('#resetForm').serialize(),
                url: APP_URL+"/reset-password",
                success: function(res) {
                    $('#btn_reset_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_reset_pass .spinner-border').hide();
                    ajax_error2(res);
                }
            });
        }
    });

    $('#resetForm').validate({ 
        rules: {
            username: {
                required: true,
            },
        },
        messages: {
            username: {
                required: 'Username is required field.'
            },
        },
        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