@extends('backend.layout.main')

@section('title', 'Admin-Dashboard : Change Password')

@section('content')

<div class="page-wrapper">
    <div class="content">


        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Change Password</h2>
     
            </div>
        </div>
        <!-- /Breadcrumb -->

        <!-- Change Password Form -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="border-bottom mb-3 pb-3">
                            <h4>Update Password</h4>
                        </div>
                        <form id="passwordForm">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Current Password</label>
                                <input type="password" name="current_password" id="current_password" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">New Password</label>
                                <input type="password" name="new_password" id="new_password" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Confirm New Password</label>
                                <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" required>
                            </div>
                            <div class="d-flex align-items-center justify-content-end">
                                <button type="reset" class="btn btn-outline-light border me-3">Cancel</button>
                                <button type="submit" class="btn btn-primary">Update Password</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script>
$(function() {
    $.ajaxSetup({
        headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") }
    });

    $("#passwordForm").off('submit').on('submit', function(e) {
        e.preventDefault();

        let current = $("#current_password").val();
        let newPass = $("#new_password").val();
        let confirmPass = $("#new_password_confirmation").val();

        if(newPass !== confirmPass) {
            Swal.fire("Error", "New password and confirmation do not match.", "error");
            return false;
        }

        $.ajax({
            url: "{{ route('admin.password.update') }}",
            type: "POST",
            data: $(this).serialize(),
            success: function(res) {
                Swal.fire("Success", res.message, "success");
                $("#passwordForm")[0].reset();
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let message = "Something went wrong.";
                if(errors) {
                    message = Object.values(errors).join("<br>");
                }
                Swal.fire("Error", message, "error");
            }
        });
    });
});
</script>
@endpush