<template>
    <Head title="Register" />

    <GuestLayout>

        <div class="flex-col flex self-center lg:px-14 sm:max-w-4xl xl:max-w-lg z-10">
            <div class="self-start hidden lg:flex flex-col  text-gray-300">

                <h1 class="my-3 font-semibold text-4xl">Bienvenido a <img :src="logoCarpooling" class="w-72" alt=""></h1>
                <p class="pr-3 text-sm opacity-75">Aquí encontrarás un espacio donde harás parte de la movilidad sostenible, el ahorro y la
                colaboración entre los miembros de la comunidad universitaria con tendencias modernas, la plataforma está
                diseñada para facilitar la programación de viajes compartidos. Permite a los conductores agendar trayectos
                visibles para otros, con destinos específicos desde o hacia la Universidad Tecnológica de Pereira (UTP).</p>
            </div>
        </div>
        <div class="flex justify-center self-center  z-10">
            <div class="p-12 bg-white mx-auto rounded-3xl w-96 ">
                <div class="mb-7">
                    <h3 class="font-semibold text-2xl text-gray-800">Registro de usuario </h3>
                    <p class="text-gray-400">¿Ya tienes una cuenta? <a href="/"
                            class="text-sm text-purple-700 hover:text-purple-700">Inicia sesión</a></p>
                </div>
                <form @submit.prevent="submit">
                    <div class="space-y-7">
                        <div>
                            <TextInput id="name" placeholder="Nombre de usuario" type="text" class="text-gray-800 h-11 rounded-lg w-full bg-[#f8fafc] focus:bg-gray-100 border-2 border-gray-200 focus:outline-none focus:border-purple-400" v-model="form.name" required autofocus
                            autocomplete="username" />
                            <InputError class="mt-2" :message="form.errors.name" />
                        </div>

                        <div class="">
                            <TextInput id="email" placeholder="Correo electrónico" type="email" class="text-gray-800 h-11 rounded-lg w-full bg-[#f8fafc] focus:bg-gray-100 border-2 border-gray-200 focus:outline-none focus:border-purple-400" v-model="form.email" required autofocus
                            autocomplete="username" />
                            <InputError class="mt-2" :message="form.errors.email" />
                        </div>


                        <div class="relative" x-data="{ show: true }">
                            <Password id="password" placeholder="Contraseña" class="text-gray-200 bg-gray-200 rounded-lg w-full focus:bg-gray-100 border border-gray-200 focus:outline-none focus:border-purple-400" v-model="form.password" :feedback="false" variant="filled" required toggleMask />
                            <InputError class="mt-2" :message="form.errors.password" />
                        </div>

                        <div class="relative" x-data="{ show: true }">
                            <Password id="password_confirmation" placeholder="Confirmar contraseña" class="text-gray-200 bg-gray-200 rounded-lg w-full focus:bg-gray-100 border border-gray-200 focus:outline-none focus:border-purple-400" v-model="form.password_confirmation" :feedback="false" variant="filled" required toggleMask />
                            <InputError class="mt-2" :message="form.errors.password_confirmation" />
                        </div>
                        <div>
                            <button type="submit"
                                :disabled="loading"
                                :class="{
                                    'bg-purple-400 cursor-not-allowed': loading,
                                    'bg-purple-800 hover:bg-purple-700 cursor-pointer': !loading
                                }"
                                class="w-full gap-3 flex justify-center text-gray-100 p-3 rounded-lg tracking-wide font-semibold  transition ease-in duration-300">
                                Registrar
                                <span v-if="loading" class="loader"></span>
                            </button>
                        </div>
                    </div>
                </form>
                
                <div class="text-center text-gray-300 text-xs mt-5">
                    <span>
                        Copyright © 2025 -
                        <a href="https://azproyectoseducativos.co" rel="" target="_blank" title="Codepen aji"
                            class="text-purple-500 hover:text-purple-600 ">AZ</a></span>
                </div>
            </div>
        </div>
        <!-- <form @submit.prevent="submit">
            <div>
                <InputLabel for="name" value="Name" />
                <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus autocomplete="name" />
                <InputError class="mt-2" :message="form.errors.name" />
            </div>

            <div class="mt-3">
                <InputLabel for="email" value="Email" />
                <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autocomplete="username" />
                <InputError class="mt-2" :message="form.errors.email" />
            </div>

            <div class="mt-3">
                <InputLabel for="password" value="Password" />
                <TextInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
                <InputError class="mt-2" :message="form.errors.password" />
            </div>

            <div class="mt-3">
                <InputLabel for="password_confirmation" value="Confirm Password" />
                <TextInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
                <InputError class="mt-2" :message="form.errors.password_confirmation" />
            </div>

            <div class="mt-4 flex flex-col items-end">
                <PrimaryButton class="w-full" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Register
                </PrimaryButton>

                <Link :href="route('login')" class="mt-4 text-sm text-gray-600 underline hover:text-gray-900">
                    Already registered?
                </Link>
            </div>
        </form> -->
    </GuestLayout>
</template>

<script setup>
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import GuestLayout from '@/Layouts/GuestLayout.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import Password from 'primevue/password';
import logoCarpooling from '/public/assets/icons/Carpooling-inicio.png';
import { ref } from 'vue';

const form = useForm({
    name: '',
    email: '',
    password: '',
    password_confirmation: '',
    terms: false,
});

const loading = ref(false);

const submit = () => {
    loading.value = true;
    setTimeout(() => {
        form.post(route('register'), {
            onFinish: () => {
                form.reset('password', 'password_confirmation'), (loading.value = false)
            }
        });
    }, 1000);
    
};
</script>

<style>
.p-password-input {
    width: 100% !important;
    border: solid 0.5px;
}
.loader {
    width: 20px;
    height: 20px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>