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

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

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

        return;
    }

    removeValidationClasess()

    console.log(response)

    await Swal.fire({
        title: '{{ __('module.base-auth::base.successfully_registered') }}',
        text: '{{ __('module.base-auth::base.please_now_verify_your_phone_number_to_continue') }}',
        icon: 'success',
        showDenyButton: false,
        showCancelButton: false,
    })

    window.location.href = response.url;
}
</script>
@endpush

@section('content')
    <form
        class="bg-white dark:bg-gray-800 rounded-lg p-8 w-[25rem] mx-auto mt-1"
        method="POST"
        action="{{ route('register') }}"
        onsubmit="event.preventDefault();register(event)"
    >
    @csrf
    <h2 class="text-2xl text-center font-normal mb-6">{{ __('module.base-auth::base.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-1">
        <label class="block mb-1" for="name">
            {{ __('module.base-auth::base.full_name') }}
        </label>
        <input class="form-control form-input form-input-bordered w-full"
            id="name"
            type="text"
            name="name"
            autofocus=""
            value="{{ old('name') }}"
        >

        <span id="name-error-box" class="text-red-500 text-italic error-box"></span>
    </div>
    <div class="mb-1">
        <label class="block mb-1" for="phone">
            {{ __('module.base-auth::base.phone') }}
        </label>
        <input class="form-control form-input form-input-bordered w-full"
            id="phone"
            type="text"
            name="phone"
            autofocus=""
            value="{{ old('phone') }}"
        >

        <span id="phone-error-box" class="text-red-500 text-italic error-box"></span>
    </div>
    <div class="mb-1">
        <label class="block mb-1" for="username">
            {{ ucfirst(__('module.base-auth::base.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-1">
        <label class="block mb-1" for="password">
            {{ __('module.base-auth::base.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="mb-1">
        <label class="block mb-1" for="password_confirmation">
            {{ __('module.base-auth::base.confirm_password') }}
        </label>
        <input class="form-control form-input form-input-bordered w-full"
            id="password_confirmation"
            type="password"
            name="password_confirmation"
        >

        <span id="password_confirmation-error-box" class="text-red-500 text-italic error-box"></span>
    </div>
    <div class="mb-6"></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>{{ __('module.base-auth::base.register') }}</span></span>
    </button>

    <a
        href="{{ route('login') }}"
        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>{{ __('module.base-auth::base.go_to_login_page') }}</span></span>
    </a>
</form>
@stop