<template>
    <footer class="w-full pt-20 rounded-t-2xl home-footer">
        <div
            class="container grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"
        >
            <div class="flex flex-col mx-auto">
                <img
                    src="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/footerLogo.svg"
                    alt="logo"
                    class="-mt-1 -ml-2 no-magnify"
                />
                <h4
                    class="mt-4 mb-6 text-xs leading-6 text-blue-100 max-w-[200px]"
                >
                    {{ $t("CurrentStatus.start_log") }}
                </h4>
                <img
                    src="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/payment.svg"
                    alt="payment"
                    class="no-magnify"
                />
            </div>
            <div class="flex mx-auto gap-x-9 sm:pt-2">
                <div class="home">
                    <a :href="route('welcome-no-redirect')">
                        <h4 class="font-bold text-blue-100 text-md">
                            {{ $t("footer.home") }}
                        </h4></a
                    >
                    <ul class="pt-8 space-y-5">
                        <li>
                            <a
                                class="text-sm font-medium text-blue-100"
                                :href="
                                    route().current() == 'welcome'
                                        ? '#how-it-works'
                                        : route('welcome-no-redirect') +
                                          '/#how-it-works'
                                "
                            >
                                {{ $t("footer.how_it_works") }}</a
                            >
                        </li>
                        <li>
                            <a
                                class="text-sm font-medium text-blue-100"
                                :href="route('services.index')"
                            >
                                {{ $t("footer.explore_services") }}</a
                            >
                        </li>
                        <li>
                            <a
                                class="text-sm font-medium text-blue-100"
                                :href="route('projects.index')"
                            >
                                {{ $t("footer.explore_jobs") }}</a
                            >
                        </li>
                    </ul>
                </div>
                <div class="other">
                    <a>
                        <h4 class="font-bold text-blue-100 text-md">
                            {{ $t("footer.other") }}
                        </h4></a
                    >
                    <ul class="pt-8 space-y-5">
                        <li>
                            <a
                                class="text-sm font-medium text-blue-100"
                                :href="route('about')"
                                >{{ $t("footer.about_us") }}</a
                            >
                        </li>
                        <li>
                            <a
                                class="text-sm font-medium text-blue-100"
                                :href="route('policy.show')"
                                >{{ $t("footer.privacy_policy") }}</a
                            >
                        </li>

                        <li>
                            <a
                                class="text-sm font-medium text-blue-100"
                                :href="route('terms.show')"
                                >{{ $t("footer.terms_conditions") }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div
                class="flex flex-col w-full mx-auto sm:flex-row-reverse sm:col-span-2 sm:ml-9 lg:col-span-1 lg:flex-col gap-x-10 space-y-9"
            >
                <div class="mx-auto subscribe lg:mx-0">
                    <label
                        class="font-bold text-white text-md"
                        for="subscribe"
                        >{{ $t("footer.subscribe") }}</label
                    >
                    <div class="relative flex mt-5 w-72">
                        <input
                            v-model="form.email"
                            @keyup.enter="subscribe"
                            type="email"
                            id="subscribe"
                            class="block w-full px-2 py-3 text-sm font-medium text-white bg-transparent border border-blue-100 ltr:border-r-0 ltr:rounded-l-md rtl:rounded-r-md rtl:border-l-0 focus:outline-none"
                            :placeholder="$t('footer.get_lates_updates')"
                        />
                        <button
                            type="button"
                            :disabled="!form.email || notEmail"
                            class="top-0 bottom-0 right-0 p-3 bg-blue-100 rounded-r-md rtl:rotate-180 disabled:opacity-75 disabled:cursor-not-allowed"
                            @click="subscribe"
                        >
                            <img
                                src="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/arrow.svg"
                                alt="subscribe"
                                class="no-magnify"
                            />
                        </button>
                    </div>
                </div>
                <div class="flex flex-row pt-4 mx-auto gap-x-8 social lg:mx-0">
                    <a
                        href="https://www.linkedin.com/company/muhandisin-%D9%85%D9%87%D9%86%D8%AF%D8%B3%D9%8A%D9%86/"
                        target="_blank"
                        ><img
                            class="no-magnify"
                            src="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/linkedin.svg"
                            alt="linkedin"
                    /></a>
                    <a
                        target="_blank"
                        href="https://twitter.com/Muhandisin2?t=9YatfBpf3t6ATa7deqp56Q&s=09"
                        ><img
                            class="no-magnify"
                            src="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/twitter.svg"
                            alt="twitter"
                    /></a>
                    <a
                        target="_blank"
                        href="https://www.facebook.com/profile.php?id=100063308057058&mibextid=ZbWKwL"
                        ><img
                            class="no-magnify"
                            src="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/fb.svg"
                            alt="facebook"
                    /></a>
                    <a
                        target="_blank"
                        href="https://instagram.com/muhandisin1?igshid=MDM4ZDc5MmU="
                        ><img
                            class="no-magnify"
                            src="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/instagram.svg"
                            alt="instagram"
                    /></a>
                </div>
            </div>
        </div>
        <div class="bottom-0 h-16 pt-6 bg-gray-200 mt-14">
            <p class="text-sm text-center">
                {{ $t("footer.rights_reserved") }}. Muhandisin © 2023
            </p>
        </div>
    </footer>
</template>
<style>
.home-footer {
    background: linear-gradient(252.41deg, #222222 1.57%, #414141 100%);
}
</style>
<script>
import { useForm } from "@inertiajs/inertia-vue3";

export default {
    mounted() {},
    data() {
        return {
            form: useForm({
                email: null,
            }),
        };
    },
    methods: {
        subscribe() {
            if (this.notEmail) return;
            this.form.get(route("subscribe"), {
                preserveScroll: true,
                preserveState: true,
                onSuccess: () => {
                    this.form.reset("email");
                },
            });
        },
    },
    computed: {
        notEmail() {
            // regex for email validation
            const regex =
                /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return !regex.test(this.form.email);
        },
    },
};
</script>
