@extends('vendor.nova.partials.auth-layout')

@section('content')
    <div class="login-section flex justify-between items-center h-screen">
        <div>
            <img src="{{ asset('assets/images/logo-login.png')}}" width="400px">
        </div>
        <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 w-[25rem] mx-auto"
                    >
                        @csrf
                        <div class="mx-auto py-2 max-w-md flex justify-center">
                            <span class="text-4xl text-center">{{ __('Forgot your password?') }}</span>
                        </div>
                        <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>
    </div>
@stop