@extends("base")
@section("title", "Регистрация")
@section("content")
    <section class="flex relative flex-col items-center px-6 sm:px-10 pt-7 pb-10 min-h-screen">
        @include("components.index_header")
        <img
            src="https://cdn.builder.io/api/v1/image/assets/TEMP/7c402bcc5e0e204f0e2c971a3aac94752802a680?placeholderIfAbsent=true&apiKey=849ba896f59940849f13fd50b0edecfa"
            alt="Background image"
            class="object-cover absolute inset-0 size-full"
        />
        <div class="flex relative flex-col items-center w-full max-w-[1520px]">
            <form method="POST" action="{{ route('register') }}" class="flex flex-col w-full max-w-md px-4 sm:px-6">
                @csrf

                <input
                    type="hidden"
                    name="referred_by_code"
                    id="referred_by_code"
                    value="{{ request()->get('ref') }}"
                />

                <h1 class="mt-20 text-3xl sm:text-4xl text-black tracking-[4px] text-center sm:mt-24">
                    Регистрация
                </h1>

                <div class="mt-6 w-full">
                    <label for="username" class="block text-base sm:text-lg tracking-widest text-black mb-1">
                        Придумайте логин
                    </label>
                    <input
                        type="text"
                        name="name"
                        id="username"
                        class="w-full bg-white h-[46px] rounded-[30px] shadow-[5px_7px_4px_rgba(0,0,0,0.25)] px-4"
                        required
                    />
                </div>

                <div class="mt-6 w-full">
                    <label for="email" class="block text-base sm:text-lg tracking-widest text-black mb-1">
                        Введите E-Mail
                    </label>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        autocomplete="email"
                        class="w-full bg-white h-[46px] rounded-[30px] shadow-[5px_7px_4px_rgba(0,0,0,0.25)] px-4"
                        required
                    />
                </div>

                <div class="mt-6 w-full">
                    <label for="password" class="block text-base sm:text-lg tracking-widest text-black mb-1">
                        Придумайте пароль
                    </label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                        class="w-full bg-white h-[46px] rounded-[30px] shadow-[5px_7px_4px_rgba(0,0,0,0.25)] px-4"
                        required
                    />
                </div>

                <button
                    type="submit"
                    class="mt-8 w-full max-w-xs px-6 py-3 text-base sm:text-lg tracking-widest text-black whitespace-nowrap bg-green-500 rounded-[30px] shadow-[5px_7px_4px_rgba(0,0,0,0.25)] hover:bg-green-600 transition-colors cursor-pointer mx-auto"
                >
                    Зарегистрироваться
                </button>
            </form>
            @if ($errors->any())
                <div class="mt-6 max-w-md mx-auto bg-red-100 border border-red-400 text-red-700 px-6 py-4 rounded-lg shadow-md">
                    <strong class="block mb-2 text-lg font-semibold">Ошибки при заполнении формы:</strong>
                    <ul class="list-disc list-inside space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <footer class="mt-12 text-xl tracking-wider leading-10 text-black max-md:mt-10 text-center">
                © 2023 AI FINANCE INC. Все права защищены.
            </footer>
        </div>
    </section>
@endsection