<template>
    <nav
        class="fixed z-50 px-8 bg-white rounded-lg shadow-lg top-8 py-7 lg:left-8 lg:right-8 left-4 right-4"
    >
        <Disclosure as="nav" class="" v-slot="{ open }">
            <div class="">
                <div class="flex justify-between">
                    <div class="flex items-center justify-between w-full">
                        <div class="flex px-2 lg:px-0">
                            <div class="flex items-center shrink-0">
                                <Link :href="route('welcome-no-redirect')">
                                    <JetApplicationMark
                                        class="block w-auto h-9"
                                    />
                                </Link>
                            </div>
                            <div
                                class="hidden md:mx-3 lg:mx-6 lg:flex lg:gap-x-8"
                            >
                                <Link
                                    :href="route('projects.index')"
                                    class="inline-flex items-center px-1 text-sm font-medium text-gray-300"
                                >
                                    {{ $t("footer.explore_jobs") }}
                                </Link>
                                <a
                                    :href="
                                        route().current() == 'welcome'
                                            ? '#how-it-works'
                                            : route('welcome-no-redirect') +
                                              '#how-it-works'
                                    "
                                    class="inline-flex items-center px-1 text-sm font-medium text-gray-300"
                                >
                                    {{ $t("footer.how_it_works") }}
                                </a>
                                <Link
                                    :href="route('about')"
                                    class="inline-flex items-center px-1 text-sm font-medium text-gray-300"
                                >
                                    {{ $t("footer.about_us") }}
                                </Link>
                            </div>
                        </div>
                        <div class="hidden lg:flex items-center gap-2.5">
                            <template v-if="!$page.props.current_user">
                                <Button
                                    size="landing"
                                    :href="route('login')"
                                    buttonStyle="light_blue"
                                >
                                    {{ $t("CurrentStatus.Login") }}
                                </Button>
                                <span class="h-4 w-[1px] bg-blue-200"></span>
                                <Button
                                    size="landing_lg"
                                    :href="route('register')"
                                >
                                    {{ $t("CurrentStatus.join_for_free") }}
                                </Button>
                            </template>
                            <template v-else>
                                <Button
                                    size="landing"
                                    :href="route('dashboard')"
                                    buttonStyle="light_blue"
                                >
                                    {{ $t("Register.dashord") }}
                                </Button>
                            </template>
                            <span class="h-4 w-[1px] bg-blue-200"></span>

                            <currency-select />
                            <span class="h-4 w-[1px] bg-blue-200"></span>
                            <language-select light />
                        </div>
                    </div>

                    <div class="flex items-center gap-2 lg:hidden">
                        <language-select light />
                        <!-- Mobile menu button -->
                        <DisclosureButton
                            class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:bg-gray-100 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                        >
                            <span class="sr-only">Open main menu</span>
                            <svg
                                v-if="!open"
                                xmlns="http://www.w3.org/2000/svg"
                                class="block w-6 h-6"
                                aria-hidden="true"
                                viewBox="0 0 24 24"
                                stroke-width="1.5"
                                stroke="#000000"
                                fill="none"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            >
                                <path
                                    stroke="none"
                                    d="M0 0h24v24H0z"
                                    fill="none"
                                />
                                <line x1="4" y1="6" x2="20" y2="6" />
                                <line x1="4" y1="12" x2="20" y2="12" />
                                <line x1="4" y1="18" x2="20" y2="18" />
                            </svg>
                            <svg
                                v-else
                                class="block w-6 h-6"
                                viewBox="0 0 20 21"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_2099_52789)">
                                    <path
                                        d="M15.8337 5.59199L14.6587 4.41699L10.0003 9.07533L5.34199 4.41699L4.16699 5.59199L8.82533 10.2503L4.16699 14.9087L5.34199 16.0837L10.0003 11.4253L14.6587 16.0837L15.8337 14.9087L11.1753 10.2503L15.8337 5.59199Z"
                                        fill="#000000"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_2099_52789">
                                        <rect
                                            width="20"
                                            height="20"
                                            fill="white"
                                            transform="translate(0 0.25)"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                        </DisclosureButton>
                    </div>
                </div>
            </div>

            <DisclosurePanel class="lg:hidden">
                <div class="flex flex-col gap-3 pt-2 pb-3">
                    <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
                    <Link
                        :href="route('projects.index')"
                        class="block py-2 pl-3 pr-4 text-base font-medium text-center text-blue-300"
                        >{{ $t("footer.explore_jobs") }}</Link
                    >
                    <a
                        :href="
                            route().current() == 'welcome'
                                ? '#how-it-works'
                                : route('welcome-no-redirect') +
                                  '/#how-it-works'
                        "
                        class="block py-2 pl-3 pr-4 text-base font-medium text-center text-blue-300"
                        >{{ $t("footer.how_it_works") }}</a
                    >
                    <Link
                        :href="route('about')"
                        class="block py-2 pl-3 pr-4 text-base font-medium text-center text-blue-300"
                        >{{ $t("footer.about_us") }}</Link
                    >
                    <template v-if="!$page.props.current_user">
                        <Button
                            size="full-sm"
                            class="text-center"
                            :href="route('login')"
                            buttonStyle="light_blue"
                        >
                            <span class="mx-auto">
                                {{ $t("CurrentStatus.Login") }}
                            </span>
                        </Button>
                        <Button size="full-sm" :href="route('register')">
                            <span class="mx-auto">
                                {{ $t("CurrentStatus.join_for_free") }}
                            </span>
                        </Button>
                    </template>
                    <template v-else>
                        <Button
                            size="full-sm"
                            :href="route('dashboard')"
                            buttonStyle="light_blue"
                        >
                            <span class="mx-auto">
                                {{ $t("Register.dashord") }}
                            </span>
                        </Button>

                        <form method="POST" @submit.prevent="logout">
                            <Button
                                @click="logout"
                                size="full-sm"
                                buttonStyle="danger"
                            >
                                <span class="mx-auto">
                                    {{ $t("Register.logout") }}
                                </span>
                            </Button>
                        </form>
                    </template>
                </div>
            </DisclosurePanel>
        </Disclosure>
    </nav>
</template>

<script>
import {
    Disclosure,
    DisclosureButton,
    DisclosurePanel,
    Menu,
    MenuButton,
    MenuItem,
    MenuItems,
} from "@headlessui/vue";
import { Link } from "@inertiajs/inertia-vue3";
import JetApplicationMark from "@/Jetstream/ApplicationMark.vue";
import CurrencySelect from "@/components/CurrencySelect";
import LanguageSelect from "@/components/LanguageSelect";
import Button from "@/Jetstream/Button";

export default {
    components: {
        Disclosure,
        DisclosureButton,
        DisclosurePanel,
        Menu,
        MenuButton,
        MenuItem,
        MenuItems,
        Link,
        JetApplicationMark,
        CurrencySelect,
        LanguageSelect,
        Button,
    },
    methods: {
        logout() {
            this.$inertia.post(route("logout"));
        },
    },
};
</script>
