@extends('admin.layout.master')

@section('content')

<style>
    .error{
        color:red;
    }
</style>
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Change Password</h1>
            </div><!-- /.col -->

        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="row">
            <!-- left column -->
            <div class="col-md-8">
                <!-- general form elements -->
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Change Password</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form id="accountChangePassForm" action="{{ route('admin.change-password-save') }}" method="post">
                       @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="old_password">Old Password</label>
                                        <input type="text" class="form-control" value="{{ old('old_password') }}" name="old_password" id="old_password" placeholder="Enter Old Password" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="new_password">New Password</label>
                                        <input type="text" class="form-control" value="{{ old('new_password') }}" name="new_password" id="new_password" placeholder="Enter New Password" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="confirm_password">Confirm Password</label>
                                        <input type="text" class="form-control" value="{{ old('confirm_password') }}" name="confirm_password" id="confirm_password" placeholder="Enter Confirm Password" autocomplete="off">
                                    </div>
                                </div>

                            </div>

                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-info">Back</a>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<script>

    $( document ).ready(function() {


        $('#accountChangePassForm').validate({
            rules: {

                old_password: {

                    required: true,

                    remote: {
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                        url: "{{ route('admin.verify-old-password') }}",
                        type: "get",
                        data: {
                            old_password: function() {
                                return $('#old_password').val();
                                },

                            }
                        }
                    },

                new_password: {
                    required: true,
                    minlength: 6,
                },
                confirm_password: {
                    required: true,
                    minlength: 6,
                    equalTo : "#new_password"
                }
            },
            messages: {
                old_password: {
                    remote: "This password does not match in your account.",
                    required: 'Please enter old password',
                },
                new_password: {
                    required: "Please enter a new password"
                },
                confirm_password: {
                    required: "Please enter a confirm password",
                    equalTo : "Newpassword and Confirm password not match"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                $(element).parents('.form-group').append(error)
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
        });

</script>
@endsection