<template>
    <Head title="Recuperar Contraseña" />

    <GuestLayout>

        <!-- <div class="mb-4 text-sm text-gray-600">
            Forgot your password? No problem. Just let us know your email address and we will email you a password reset
            link that will allow you to choose a new one.
        </div>

        <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
            {{ status }}
        </div> -->
        <div class="w-full flex justify-center items-center">
            <div class="max-w-lg mx-auto max-h-96 my-10 bg-white p-8 rounded-xl shadow shadow-slate-300">
                <h1 class="text-3xl font-bold text-purple-800">Recuperar contraseña</h1>
                <p class="text-slate-500">Llene el formulario para restablecer la contraseña</p>

                <form @submit.prevent="submit" class="my-5">
                    <div class="flex flex-col space-y-3">
                        <InputLabel for="email" value="Email" />
                        <TextInput id="email" type="email" class="block w-full" v-model="form.email" required autofocus
                            autocomplete="username" />
                        <InputError class="mt-2" :message="form.errors.email" />
                    
                        <button :disabled="form.processing" :class="{ 'opacity-25': form.processing }" class="w-full py-3 font-medium text-white bg-purple-600 hover:bg-purple-500 rounded-lg border-purple-500 hover:shadow inline-flex space-x-2 items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
                            </svg>
                            
                            <span>Recuperar contraseña</span>
                        </button>
                        <p class="text-center">¿No estas registrado aun? <a :href="route('register.create')" class="text-purple-600 font-medium inline-flex space-x-1 items-center"><span>Registrate ahora </span><span><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg></span></a></p>
                    </div>
                </form>
                <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
                    {{ status }}
                </div>
            </div>
        </div>
        <!-- <form @submit.prevent="submit">
            <div>
                <InputLabel for="email" value="Email" />
                <TextInput id="email" type="email" class="block mt-1 w-full" v-model="form.email" required autofocus
                    autocomplete="username" />
                <InputError class="mt-2" :message="form.errors.email" />
            </div>

            <div class="flex justify-end items-center mt-4">
                <PrimaryButton class="w-full justify-center flex" :class="{ 'opacity-25': form.processing }"
                    :disabled="form.processing">
                    Email Password Reset Link
                </PrimaryButton>
            </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, useForm } from '@inertiajs/vue3';

defineProps({
    status: String,
});

const form = useForm({
    email: '',
});

const submit = () => {
    form.post(route('password.email'));
};
</script>
