@extends("website.layouts.layout")
@section('title', "Change Password")
@section("body")
<!-- Banner -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!-- Breadcrumb -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('homepage') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                <li class="breadcrumb-item active" aria-current="page">Change Password</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Change Password Form -->
<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar") <!-- Sidebar -->
            <div class="main-content">
                <div class="main-content-wrapper my-profile">
                    <div class="profile-password-change d-flex flex-column">
                        <h3 class="font-size-18">Change Password</h3>
                        <div class="profile-password-change-form">
                            <form action="" method="POST" class="d-flex flex-column forms" id="passwordUpdateForm">
                                @csrf
                                <!-- Old Password -->
                                <div class="profile-password-field d-flex flex-column">
                                    <h3 class="font-size-14">Old Password</h3>
                                    <div class="passwordEye d-flex position-relative">
                                        <input type="password" placeholder="Old Password" id="old_password" name="old_password" value="">
                                        <span class="togglePassword fa-solid fa-eye" onclick="togglePassword('old_password', this)"></span>
                                    </div>
                                </div>

                                <!-- New Password -->
                                <div class="profile-password-field d-flex flex-column">
                                    <h3 class="font-size-14">New Password</h3>
                                    <div class="passwordEye d-flex position-relative">
                                        <input type="password" placeholder="New Password" id="new_password" name="new_password" value="">
                                        <span class="togglePassword fa-solid fa-eye" onclick="togglePassword('new_password', this)"></span>
                                    </div>
                                </div>

                                <!-- Confirm New Password -->
                                <div class="profile-password-field d-flex flex-column">
                                    <h3 class="font-size-14">Confirm New Password</h3>
                                    <div class="passwordEye d-flex position-relative">
                                        <input type="password" placeholder="Confirm New Password" id="confirmation_password_new" name="confirmation_password" value="">
                                        <span class="togglePassword fa-solid fa-eye" onclick="togglePassword('confirmation_password_new', this)"></span>
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <button class="btn btn-primary">Change Password</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // Set up CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Password form submit
        $('#passwordUpdateForm').on('submit', function (event) {
            event.preventDefault();  // Prevent the default form submission

            // Trim inputs to remove unnecessary spaces
            var oldPassword = $('#old_password').val().trim();
            var newPassword = $('#new_password').val().trim();
            var confirmationPassword = $('#confirmation_password_new').val().trim();

            // Log inputs to the console (for debugging)
            console.log('Old Password:', oldPassword);
            console.log('New Password:', newPassword);
            console.log('Confirmation Password:', confirmationPassword);

            // Validation checks for password fields
            if (oldPassword === '') {
                handleValidationError('old_password', 'Please enter your old password');
                return;
            } else { removeError('old_password'); }

            if (newPassword === '') {
                handleValidationError('new_password', 'Please enter a new password');
                return;
            } else { removeError('new_password'); }

            if (confirmationPassword === '') {
                handleValidationError('confirmation_password_new', 'Please enter the confirmation password');
                return;
            } else { removeError('confirmation_password_new'); }

            if (newPassword !== confirmationPassword) {
                handleValidationError('confirmation_password_new', 'New password and confirmation password do not match');
                return;
            } else { removeError('confirmation_password_new'); }

            // Prepare the form data
            var formData = {
                old_password: oldPassword,
                new_password: newPassword,
                confirmation_password: confirmationPassword
            };

            // Make AJAX request to update password
            $.ajax({
                url: "{{ route('client.update.password') }}",  // Your route for password update
                method: 'POST',
                data: JSON.stringify(formData),  // Send data as JSON
                contentType: 'application/json',  // Set content type to JSON
                success: function (response) {
                    // Handle success (if needed)
                    if (response.status === 200) {
                        toastr.success(response.success.message);  // Show success toast
                        setTimeout(function() {
                            window.location.href = "/login";  // Redirect to login page after success
                        }, 2000); // Wait 2 seconds before redirecting (for the user to see the success toast)
                    }
                },
                error: function (xhr) {
                    // Handle error response
                    if (xhr.status === 401) {
                        // Parse the error response
                        var errorResponse = JSON.parse(xhr.responseText);
                        var errorMessage = errorResponse.error.message;
                        toastr.error(errorMessage);  // Show the error message in toast
                    } else {
                        toastr.error('An error occurred. Please try again.');  // Generic error
                    }
                }
            });
        });

        // Helper function to handle validation errors
        function handleValidationError(elementId, errorMessage) {
            toastr.error(errorMessage);
            $('#' + elementId).css('border-color', 'red');
        }

        // Remove error styling
        function removeError(elementId) {
            $('#' + elementId).css('border-color', 'var(--grey-color)');
        }
    });
</script>