<template>
<meta-head title="Авторизация">
  <meta name="description" content="Авторизация">
</meta-head>

<div class="header-simple flex items-center justify-center p-2 bg-orange">
    <img class="block h-12" src="/image/logotype.svg" alt="">
</div>

<div class="min-h-[calc(100vh-64px)] place-items-center grid md:pt-3"
    style="background-image: url('/image/auth-bg.jpg');">

    <div class="w-full md:w-auto max-w-7xl mx-auto ">
        <div class="md:grid grid-cols-12 ">
            <div class="col-span-7 bg-indigo-200">
                <div class="p-4 lg:p-28">
                    <h1 class="font-medium text-xl md:text-2xl lg:text-4xl text-white text-center">Регистрация</h1>

                    <div class="auth-form mt-7">
                        <form @submit.prevent="submit" class="space-y-6">
                                <div>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-5 text-gray flex items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                        </div>
                                        <input
                                        v-model="form.first_name"
                                        autocapitalize="off"
                                            class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
                                            type="text" placeholder="Имя">
                                    </div>
                                    <div v-if="form.errors.email" class="form-error text-sm text-red">{{ form.errors.first_name }}</div>
                                </div>


                                <div>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-5 text-gray flex items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" class="flex-shrink-0">
                                                <path
                                                    d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
                                                </path>
                                                <polyline points="22,6 12,13 2,6"></polyline>
                                            </svg>
                                        </div>
                                        <input
                                        v-model="form.email"
                                        autocapitalize="off"
                                            class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
                                            type="email" placeholder="E-mail">
                                    </div>
                                    <div v-if="form.errors.email" class="form-error text-sm text-red">{{ form.errors.email }}</div>
                                </div>

                                <div>
                                    <div class="relative">
                                    <div class="absolute inset-y-0 left-5 text-gray flex items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" class="flex-shrink-0">
                                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                        </svg>
                                    </div>
                                    <input
                                    v-model="form.password"
                                        class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
                                        type="password" placeholder="Пароль">
                                    </div>
                                    <div v-if="form.errors.password" class="form-error text-sm text-red">{{ form.errors.password }}</div>
                                </div>


                            <div class="text-center">
                                <loading-button :loading="form.processing" class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white bg-orange focus:outline-none" type="submit">Зарегистрироваться</loading-button>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
            <div class="col-span-5 bg-center bg-cover" style="background-image: url('image/orange-auth.jpg');">
                <div class="py-4 lg:py-28 px-4 flex flex-col h-full justify-center">
                        <div class="font-medium text-xl md:text-2xl lg:text-4xl !leading-relaxed text-white text-center">
                        Уже есть учетная запись?
                        </div>

                        <div class="text-center mt-4 md:mt-10">
                             <inertia-link
                                :href="route('login')"
                                class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white border border-white bg-transparent focus:outline-none">
                                Войти
                           </inertia-link>
                        </div>

                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { Inertia } from "@inertiajs/inertia";
import LoadingButton from "@/Shared/Form/LoadingButton";
import MetaHead from '@/Shared/MetaHead'

export default {
  components: {
      MetaHead,
      LoadingButton,
  },

  setup() {
    const form = Inertia.form({
      first_name: null,
      email: null,
      password: null,
    });

    const submit = () => {
      form.post(route("register.store"));
    };

    return {
      form,
      submit,
    };
  },

}
</script>
