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

@push('js')
<script>
async function login(event) {
    const response = await postData(event.target.action, getFormData(event))

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

        return;
    }

    removeValidationClasess()

    await Swal.fire({
        title: '{{ __('Successfully logged in') }}',
        text: '{{ __('Press continue') }}',
        confirmButtonText: '{{ __('Continue') }}',
        icon: 'success',
        showDenyButton: false,
        showCancelButton: false,
    })

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

@section('content')
    <form
        method="POST"
        action="{{ route('login') }}"
        onsubmit="event.preventDefault();login(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 uppercase">{{ __('Online panel') }}</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 class="mb-6">
            <label class="block mb-2" for="username">
                {{ __('Username') }}
            </label>
            <input class="form-control form-input form-input-bordered w-full"
                id="username"
                type="text"
                name="username"
                autofocus=""
                value="{{ old('username') }}"
            >

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

        </div>
        <div class="mb-6">
            <label class="block mb-2" for="password">
                {{ __('Password') }}
            </label>
            <input
                class="form-control form-input form-input-bordered w-full"
                id="password"
                type="password"
                name="password"
            >

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

        </div>
        <div class="flex mb-6">
            <div class="ml-auto">
                <a href="{{ route('reset-password') }}" class="text-gray-500 font-bold no-underline">
                    {{ __('Forgot your password?')  }}
                </a>
            </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>{{ __('Login') }}</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>{{ __('Register') }}</span></span>
        </a>
    </form>
@stop