@extends('admin.layouts.app')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Change Password</h1>
            </div>
            <div class="col-md-6">
                <div class="text-right mb-2">
                    <div>
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-primary"><i class="bi bi-arrow-left"></i>
                            Back</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                @include('admin.layouts.include.message')
                <div class="card">
                    <div class="card-header">
                        <h3 class="fs-4 mb-0">Change Password</h3>
                    </div>
                    <form action="" method="post" id="changePasswordForm" name="changePasswordForm">
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="old_password" class="form-label">Old Password*</label>
                                <input type="password" name="old_password" id="old_password" placeholder="Old Password" class="form-control" >
                                <div class="invalid-feedback">Please enter your old password.</div>
                            </div>
                            <div class="mb-3">
                                <label for="new_password" class="form-label">New Password*</label>
                                <input type="password" name="new_password" id="new_password" placeholder="New Password" class="form-control" >
                                <div class="invalid-feedback">Please enter your new password.</div>
                            </div>
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">Confirm Password*</label>
                                <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" class="form-control" >
                                <div class="invalid-feedback">Please confirm your new password.</div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('customJs')
<script>
    $('#changePasswordForm').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: '{{ route('admin.changePasswordProcess') }}',
            type: 'put',
            data: $("#changePasswordForm").serializeArray(),
            dataType: 'json',
            success: function(response) {
                if (response.status == false) {
                    var errors = response.errors;
                    if (errors.old_password) {
                        $('#old_password')
                            .addClass('is-invalid')
                            .siblings('p')
                            .addClass('invalid-feedback')
                            .html(errors.old_password);
                    } else {
                        $('#old_password')
                            .removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback')
                            .html('');
                    }
                    if (errors.new_password) {
                        $('#new_password')
                            .addClass('is-invalid')
                            .siblings('p')
                            .addClass('invalid-feedback')
                            .html(errors.new_password);
                    } else {
                        $('#new_password')
                            .removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback')
                            .html('');
                    }
                    if (errors.confirm_password) {
                        $('#confirm_password')
                            .addClass('is-invalid')
                            .siblings('p')
                            .addClass('invalid-feedback')
                            .html(errors.confirm_password);
                    } else {
                        $('#confirm_password')
                            .removeClass('is-invalid')
                            .siblings('p')
                            .removeClass('invalid-feedback')
                            .html('');
                    }
                } else {
                    $('#old_password')
                        .removeClass('is-invalid')
                        .siblings('p')
                        .removeClass('invalid-feedback')
                        .html('');

                    $('#new_password')
                        .removeClass('is-invalid')
                        .siblings('p')
                        .removeClass('invalid-feedback')
                        .html('');
                    $('#confirm_password')
                        .removeClass('is-invalid')
                        .siblings('p')
                        .removeClass('invalid-feedback')
                        .html('');
                    window.location.href = '{{ route('admin.changePassword') }}';
                }
            }

        });
    });
</script>
@endsection