@extends('layouts.client')

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

@section('content')
    <section id="section-update-password" class="animation-fade-in py-40"
        style="
        background: url({{ asset('img/bg-login.jpg') }});
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        ">
        <div class="w-full container grid md:grid-cols-2 md:mt-0 md:max-w-5xl xl:p-0">
            <div class="flex flex-col items-center flex-col justify-center h-full">
                <img src="{{ asset('img/img_reset_password.png') }}" alt="img_reset_password" />
            </div>
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1 class="text-center mb-0 text-2xl text-blue-700 font-bold md:text-3xl">
                    CHANGE PASSWORD
                </h1>
                <form class="space-y-4 md:space-y-6" id="update-password" method="POST">
                    @csrf

                    <div>
                        <label class="font-medium text-base block mb-1 mt-6 text-gray-700" for="current_password">
                            {{ __('Current Password') }}
                        </label>
                        <div class="relative w-full">
                            <div class="absolute inset-y-0 right-0 flex">
                                <input class="hidden js-current-password-toggle" id="toggleCurrentPassword"
                                    type="checkbox" />
                                <label
                                    class="rounded px-2 py-1 text-xl text-gray-600 cursor-pointer js-current-password-label"
                                    for="toggleCurrentPassword"><i class="ri-eye-line"></i></label>
                            </div>
                            <input name="current_password" required autocomplete="current_password"
                                placeholder="Current password"
                                class="@error('password') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200 js-current-password"
                                id="current_password" type="password" />

                            @error('current_password')
                                <span class="invalid-feedback text-red-500" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div>
                        <label class="font-medium text-base block mb-1 mt-6 text-gray-700" for="password">
                            {{ __('Password') }}
                            <span class="tooltip"
                                title="Your password must meet the following requirements:
                            &#10;• Length: 8-32 characters
                            &#10;• Includes at least one number
                            &#10;• Includes at least one lowercase letter
                            &#10;• Includes at least one uppercase letter
                            &#10;• Includes at least one special symbol">
                                <i class="ri-question-line text-gray-600 ml-2"></i>
                            </span>
                        </label>
                        <div class="relative w-full">
                            <div class="absolute inset-y-0 right-0 flex">
                                <input class="hidden js-new-password-toggle" id="toggleNewPassword" type="checkbox" />
                                <label class="rounded px-2 py-1 text-xl text-gray-600 cursor-pointer js-new-password-label"
                                    for="toggleNewPassword"><i class="ri-eye-line"></i></label>
                            </div>
                            <input name="password" required autocomplete="new-password" placeholder="New password"
                                class="@error('password') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200 js-new-password"
                                id="password" type="password" />

                            @error('password')
                                <span class="invalid-feedback text-red-500" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div>
                        <label class="font-medium text-base block mb-1 mt-6 text-gray-700" for="password-confirm">
                            {{ __('Confirm Password') }}
                        </label>
                        <div class="relative w-full">
                            <div class="absolute inset-y-0 right-0 flex">
                                <input class="hidden js-confirm-password-toggle" id="toggleConfirmNewPassword"
                                    type="checkbox" />
                                <label
                                    class="rounded px-2 py-1 text-xl text-gray-600 cursor-pointer js-confirm-password-label"
                                    for="toggleConfirmNewPassword"><i class="ri-eye-line"></i></label>
                            </div>
                            <input placeholder="Confirm password"
                                class="px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200 js-confirm-password"
                                id="password-confirm" type="password" name="password_confirmation" required
                                autocomplete="new-password" />
                        </div>
                    </div>
                    <div class="text-end">
                        <button type="submit"
                            class="w-full py-2 rounded-lg text-neutral-50 bg-blue-500 text-center hover:opacity-80">
                            {{ __('Change Password') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        window.addEventListener("load", (event) => {
            function togglePasswordVisibility(passwordInput, label) {
                if (passwordInput.attr("type") === "password") {
                    passwordInput.attr("type", "text");
                    label.html('<i class="ri-eye-off-line"></i>');
                } else {
                    passwordInput.attr("type", "password");
                    label.html('<i class="ri-eye-line"></i>');
                }
            }
            $(".js-current-password-toggle").on("click", function() {
                let passwordInput = $(".js-current-password");
                let label = $(".js-current-password-label");
                togglePasswordVisibility(passwordInput, label);
            });

            $(".js-new-password-toggle").on("click", function() {
                let passwordInput = $(".js-new-password");
                let label = $(".js-new-password-label");
                togglePasswordVisibility(passwordInput, label);
            });

            $(".js-confirm-password-toggle").on("click", function() {
                let passwordInput = $(".js-confirm-password");
                let label = $(".js-confirm-password-label");
                togglePasswordVisibility(passwordInput, label);
            });

            $("#update-password").submit(function(event) {
                event.preventDefault();
                const csrfToken = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    type: "POST",
                    url: "update-password",
                    data: $("#update-password").serialize(),
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(response) {
                        toastr.success(response.message);
                        window.location.href = "/login"
                    },
                    error: function(xhr, status, error) {
                        let response;
                        try {
                            response = JSON.parse(xhr.responseText);
                        } catch (e) {
                            console.error("Error parsing JSON response:", e);
                            toastr.error("An unexpected error occurred.");
                            return;
                        }

                        if (response && response.error) {
                            const messageArr = Object.keys(response.error).reduce(
                                (prevResult, item) => {
                                    prevResult.push(response.error[item]);
                                    return prevResult.flat();
                                },
                                []
                            );
                            messageArr.forEach((message) => {
                                toastr.error(message);
                            });
                        } else {
                            toastr.error(response.message);
                        }
                    },
                });
            });
        });
    </script>
@endsection
