@extends('layouts.client')

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

@section('content')
    <section id="login" 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 uppercase">
                    RESET PASSWORD
                </h1>
                <form id="resetPasswordForm" class="space-y-4 md:space-y-6" method="POST"
                    action="{{ route('password.update') }}">
                    @csrf
                    <input type="hidden" name="token" value="{{ $token }}">

                    <div>
                        @error('email')
                            <span class="invalid-feedback text-red-500" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <label class="font-medium text-base block mb-1 mt-6 text-gray-700" for="email">
                            {{ __('Email Address') }}
                        </label>
                        <input name="email" value="{{ old('email') }}" required autocomplete="email" type="email"
                            id="email" autofocus placeholder="Email"
                            class="@error('email') 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" />
                    </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') }}
                            <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-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 relative">
                        <button type="submit" id="resetPasswordButton"
                            class="w-full py-2 rounded-lg text-neutral-50 bg-blue-500 text-center hover:opacity-80 relative flex items-center justify-center">
                            <div class="flex">
                                <span class="me-3"> {{ __('Reset Password') }}</span>
                                <div class="flex flex-row space-x-4">
                                    <div
                                        class="w-6 h-6 rounded-full animate-spin border-4 border-solid border-neutral-50 border-t-transparent hidden">
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var resetPasswordForm = document.getElementById('resetPasswordForm');

        resetPasswordForm.addEventListener('submit', function() {
            // Get the button and spinner elements
            var resetPasswordButton = document.getElementById('resetPasswordButton');
            var spinner = resetPasswordButton.querySelector('.animate-spin');

            // Disable the button and remove the spinner animation
            resetPasswordButton.disabled = true;
            //  spinner.classList.remove('animate-spin');
            spinner.classList.remove('hidden');
        });
    });
</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-old-password-toggle").on("click", function() {
            let passwordInput = $(".js-old-password");
            let label = $(".js-old-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);
        });
    });
</script>
