@extends('module.base-auth::layouts.auth-layout')

@push('js')
<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>
@endpush

@section('content')
<form
    method="POST"
    action="{{ route('reset-password') }}"
    onsubmit="event.preventDefault();resetPassword(event)"
    class="bg-white dark:bg-gray-800 rounded-lg p-8 w-[25rem] 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>
@stop