@extends('admin.layouts.master')
@section('headerFiles')
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/custom_dt_zero_config.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/jqvalidation/custom-jqBootstrapValidation.css') }}">
    <!-- END GLOBAL MANDATORY STYLES -->    
    <style type="text/css">
        .error{
            color: red;
            display: block;
        }

    </style>
@endsection

@section('content')

<div class="container">
    <div class="page-header">
        <div class="page-title">
            <h3>Change password</h3>
        </div>
    </div>

    <div class="row layout-spacing ">

        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12  layout-spacing">
            <div class="statbox widget box box-shadow">
                
                <div class="widget-content widget-content-area">
                    <form method="post" class="form-validate" method="post">
                        @csrf
                        <div class="form-group col-md-6 col-sm-12">
                            <label>Old Password</label>
                            <input type="password" name="old_password" id="old_password" class="form-control" placeholder="Enter your old password" required>
                        </div>
                        <div class="form-group col-md-6 col-sm-12">
                            <label>New password</label>
                            <input type="password" name="new_password" id="new_password" class="form-control" placeholder="Enter your new password" required>
                        </div>
                        <div class="form-group col-md-6 col-sm-12">
                            <label>Confirm password</label>
                            <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm your new password" required>
                        </div>
                        <div class="form-group col-md-6 col-sm-12">
                            <input type="submit" class="mt-4 btn btn-button-7">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
    </div>

</div>

@endsection

@section('footerJs')
<script src="{{ admin_asset('admin-assets/plugins/jqvalidation/jqBootstrapValidation-1.3.7.min.js') }}"></script>
<script src="{{ admin_asset('admin-assets/plugins/jqvalidation/jqBootstrapValidation-1.3.7.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>

<script>
    

    $(".form-validate").submit(function(e) {
        e.preventDefault();
    }).validate({
        rules: {           
            old_password: "required",
            new_password: "required",
            confirm_password : {
                required: true,
                equalTo : "#new_password"
            }
        },
        messages: {            
            old_password: "Please enter your old password",
            new_password: "Please enter your new password",
            confirm_password : {
                required: "Please enter password confirmation",
                equalTo : "Confirm password must match with new password"
            }
        },
        submitHandler: function(form) { 
            $.ajax({
                type:'POST',
                url: "{{ route("admin.change.password.save")}}",
                data: $('.form-validate').serialize(),
                success: function(response) {
                    if(response.success){
                        toastr["success"](response.message);
                        $("#old_password").val('');
                        $("#new_password").val('');
                        $("#confirm_password").val('');
                    } else {
                        toastr["error"](response.message);
                    }
                }            
            });
        }
    });
</script>

@endsection