@extends('admin.layouts.master')

@section('title', 'Change Password')

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Change Password',
        'crumbs' => [
            ['label' => 'Settings', 'url' => route('admin.profile')],
            ['label' => 'Change Password'],
        ],
    ])

    <div class="card mt-3">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.change-password-process') }}" id="settingsPasswordForm">
                @csrf
                <div class="mb-3">
                    <label class="form-label">Old Password <span class="text-danger">*</span></label>
                    <input type="password" name="old_pass" id="old_pass" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">New Password <span class="text-danger">*</span></label>
                    <input type="password" name="new_pass" id="new_pass" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                    <input type="password" name="confirm_pass" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary">Change Password</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(function () {
        $('#settingsPasswordForm').validate({
            rules: {
                old_pass: {
                    required: true,
                    remote: tomValidateRemoteOldPass(@json(route('admin.check-old-pass')))
                },
                new_pass: { required: true, minlength: 6 },
                confirm_pass: { required: true, minlength: 6, equalTo: '#new_pass' }
            },
            messages: {
                old_pass: { remote: 'Old Password Incorrect' },
                confirm_pass: { equalTo: 'New password and confirm password do not match.' }
            }
        });
    });
</script>
@endpush