
<!DOCTYPE html>
<html lang="tk" dir="ltr" class="h-full font-sans antialiased">
<head>
    <meta name="theme-color" content="#fff">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width"/>
    <meta name="locale" content="tk"/>
    <meta name="robots" content="noindex">

    <!-- Styles -->
    <link rel="stylesheet" href="/vendor/nova/app.css?id=496e3383c5e2918c7bc875f45870e701">
</head>
<body class="min-w-site text-sm font-medium min-h-full text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-900">
    <div class="py-6 px-1 md:px-2 lg:px-6">
        <div class="mx-auto py-8 max-w-md flex justify-center">
            <span class="text-4xl text-center">{{ __('Forgot your password?') }}</span>
        </div>
    <div>
        <form 
            method="POST" 
            action="{{ route('reset-password') }}"
            onsubmit="event.preventDefault();resetPassword(event)" 
            class="bg-white dark:bg-gray-800 shadow rounded-lg p-8 max-w-lg mx-auto"
        >
            @csrf
            <h2 class="text-2xl text-center font-normal mb-6">{{ __('Enter your username to continue') }}</h2>
            <svg class="block mx-auto mb-6" xmlns="http://www.w3.org/2000/svg" width="100" height="2" viewBox="0 0 100 2">
                <path fill="#D8E3EC" d="M0 0h100v2H0z"></path>
            </svg>

            <div id="username-box" class="mb-6">
                <label class="block mb-2" for="username">
                    {{ __('Username') }}
                </label>
                <input 
                    id="username" 
                    type="text" 
                    name="username" 
                    class="form-control form-input form-input-bordered w-full" 
                    autofocus="" 
                >
                <input type="hidden" name="step-sms" value="1">

                <span id="username-error-box" class="text-red-500 text-italic error-box"></span>
            </div>

            <div class="mb-6 hidden" id="verification-code-box">
                <label class="block mb-2" for="verification">
                    {{ __('Verification code') }}
                </label>
            </div>

            <div class="hidden" id="reset-password-container">
                <div class="mb-6" id="password-box">
                    <label class="block mb-2" for="password">
                        {{ __('Password') }}
                    </label>
                </div>

                <div class="mb-6" id="password-confirm-box">
                    <label class="block mb-2" for="password_confirmation">
                        {{ __('Confirm Password') }}
                    </label>
                </div>
            </div>

            <button class="w-full flex justify-center shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 w-full flex justify-center cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 inline-flex items-center justify-center h-9 px-3 mb-3 w-full flex justify-center shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 w-full flex justify-center" type="submit">
                <span class=""><span>{{ __('Submit') }}</span></span>
            </button>
            <a href="{{ route('register') }}" class="w-full flex justify-center shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 w-full flex justify-center cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 inline-flex items-center justify-center h-9 px-3 mb-3 w-full flex justify-center shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 w-full flex justify-center">
                <span class=""><span>{{ __('Go to login page') }}</span></span>
            </a>
        </form>
    </div>
</div>

<script src="/assets/js/sweetalert2@11.js"></script>
<script src="/assets/js/fn.js"></script>
<script>
async function resetPassword(event) {
    const response = await postData(event.target.action, getFormData(event))

    if (response.errors) {
        loopObject(response.errors, item => addValidationClasses(item))
    } else {
        removeValidationClasess()

        if (response.step === 1) {
            showVerificationCodeBox()

            Swal.fire({
                title: '{{ __('Verification code') }}',
                text: response.message,
                icon: 'info'
              })
        }

        if (response.step === 2) {
            showPasswordBox()

            Swal.fire({
              title: '{{ __('Reset Password') }}',
              text: response.message,
              icon: 'warning'
            })
        }

        if (response.step === 3) {
            await Swal.fire({
              title: response.message,
              showDenyButton: false,
              showCancelButton: false,
            })

            window.location.href = '{{ route('login') }}'
        }
    }
}
</script>
</body>
</html>
