@extends('layouts.cs.main')

@section('', 'active')

@section('main-content')
    <style>
        /* .card {
                                                                                        background: #FFFFFF;
                                                                                    } */
    </style>

    <div class="container justify-content-center align-items-center h-100 mt-5" style="max-width: 450px">
        <div class=" p-5 text-center">
            <form id="updatePassword">
                @csrf
                <img class="mb-4" src="{{ asset('/assets/images/logo.png') }}" alt="" width="60">
                <h3 class="">Change Password</h3>
                <p class="text-muted mb-5">Update your password below.</p>

                <div class="form-group">
                    <span class="d-block mb-1 text-left" for="">Current Password</span>
                    <input type="password" name="old_password" class="form-control form-control-lg" required>
                    <div class="text-left text-sm mt-1" id="">
                        <ul class="text-danger" id="currentPasswordError"></ul>
                    </div>
                </div>

                <div class="form-group">
                    <span class="d-block mb-1 text-left" for="">New Password</span>
                    <input type="password" name="new_password" class="form-control form-control-lg" required>
                    <div class="text-left text-sm mt-1">
                        <ul class="text-danger" id="newPasswordError"></ul>
                    </div>
                </div>

                <button class="btn btn-primary border mt-1 float-left btn-lg w-100" type="submit" id="submitBtn"
                    style="padding-left: 2.5rem; padding-right: 2.5rem;">
                    Submit
                </button>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let isSubmit = false;

        const changePassword = {
            init: function() {
                changePassword.events();
            },
            events: function() {
                $("#updatePassword").on('submit', function(e) {
                    e.preventDefault();

                    isSubmit = true;

                    if (isSubmit === true) {
                        let formData = new FormData(this);
                        changePassword.updatePassword(formData);
                    }
                })
            },
            updatePassword: function(formData) {
                $("#submitBtn").attr('disabled', true);

                $("#currentPasswordError").empty();
                $("#newPasswordError").empty();

                $.ajax({
                        url: '/cs/update-password',
                        method: 'POST',
                        data: formData,
                        processData: false, // Ensure jQuery doesn't process the data
                        contentType: false, // Ensure jQuery doesn't set the content type
                    })
                    .then(function(response) {
                        Swal.fire({
                            icon: "success",
                            title: "Successfully Updated!",
                            text: "For better security, remember to update your password regularly.",
                        });

                        window.location.href = '/logout';
                    })
                    .fail(function(xhr, status, error) {
                        let jsonResponse = JSON.parse(xhr.responseText);
                        let jsonResponse = JSON.parse(xhr.responseText);

                        if (jsonResponse.errors.old_password &&
                            Array.isArray(jsonResponse.errors.old_password)) {
                            jsonResponse.errors.old_password.forEach(function(error) {
                                $('#currentPasswordError').append('<li>' + error + '</li>');
                            });
                        }

                        if (jsonResponse.errors.new_password &&
                            Array.isArray(jsonResponse.errors.new_password)) {
                            jsonResponse.errors.new_password.forEach(function(error) {
                                $('#newPasswordError').append('<li>' + error + '</li>');
                            });
                        }
                    })
                    .always(function() {
                        isSubmit = false;
                        $("#submitBtn").attr('disabled', false);
                    });
            }
        }

        changePassword.init();
    </script>
@endsection