<template>
    <section class="relative w-full h-full py-40 min-h-screen">
            <div class="absolute top-0 w-full h-full bg-gray-900 bg-no-repeat bg-cover" :style="`background-image: url('admin/img/register_bg_2.jpg');`" ></div>
                <div class="container mx-auto px-4 h-full">
                    <div class="flex content-center items-center justify-center h-full">
                        <div class="w-full lg:w-4/12 px-4">
                            <div
                                class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-pink-200 bg-opacity-50 border-0"
                            >

                                <div class="flex-auto px-4 lg:px-10 py-10 pt-10">
                                    <div
                                        class="text-xl text-center center mb-3 pb-10 font-bold"
                                    >
                                        <center><jet-authentication-card-logo /></center>
                                    </div>
                                    <jet-validation-errors class="mb-4" />
                                    <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
                                        {{ status }}
                                    </div>

                                    <form @submit.prevent="submit">
                                        <div class="relative w-full mb-3">
                                            <label
                                                class="block uppercase text-gray-700 text-xs font-bold mb-2"
                                                htmlFor="grid-password"
                                            >
                                                Email
                                            </label>
                                            <input
                                                type="email"
                                                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
                                                placeholder="Email"
                                                v-model="form.email"
                                                required
                                                autofocus
                                            />
                                        </div>

                                        <div class="relative w-full mb-3">
                                            <label
                                                class="block uppercase text-gray-700 text-xs font-bold mb-2"
                                                htmlFor="grid-password"
                                            >
                                                Password
                                            </label>
                                            <input
                                                type="password"
                                                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
                                                placeholder="Password"
                                                v-model="form.password" required autocomplete="current-password"
                                            />
                                        </div>
                                        <div>
                                            <label
                                                class="inline-flex items-center cursor-pointer"
                                            >
                                                <jet-checkbox name="remember" v-model:checked="form.remember" />
                                                <span
                                                    class="ml-2 text-sm font-semibold text-gray-700"
                                                >
                                                    Remember me
                                                </span>
                                            </label>
                                        </div>

                                        <div class="text-center mt-6">
                                            <button
                                                class="active:bg-gray-700 bg-gray-900 text-white text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                                                type="submit"
                                                :class="{ 'opacity-25': form.processing }" :disabled="form.processing"
                                            >
                                                Sign In
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="flex flex-wrap mt-6 relative">
                                <div class="w-1/2">
                                    <inertia-link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900">
                                        <small>Forgot your password?</small>
                                    </inertia-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </section>
</template>

<script>
import JetAuthenticationCardLogo from "@/Jetstream/AuthenticationCardLogo";
import JetCheckbox from "@/Jetstream/Checkbox";
import JetValidationErrors from "@/Jetstream/ValidationErrors";



export default {
    components: {
        JetAuthenticationCardLogo,
        JetCheckbox,
        JetValidationErrors,
    },

    props: {
        canResetPassword: Boolean,
        status: String,
    },

    data() {
        return {
            form: this.$inertia.form({
                email: "",
                password: "",
                remember: false,
            }),
        };
    },

    methods: {
        submit() {
            this.form
                .transform((data) => ({
                    ...data,
                    remember: this.form.remember ? "on" : "",
                }))
                .post(this.route("login"), {
                    onFinish: () => this.form.reset("password"),
                });
        },
    },
};
</script>
