<template>
    <div class="fixed bottom-0 left-0 right-0 flex justify-center z-50">
        <footer
            class="max-w-[1300px] mx-auto z-20 w-full p-2 px-6 bg-white border-t border-zinc-200 shadow-sm dark:bg-zinc-950 dark:border-zinc-600">
            <div class="sm:ml-64 lg:mr-64">
                <ul
                    class="flex max-w-96 mx-auto flex-wrap items-center text-sm font-medium text-zinc-500 dark:text-zinc-400 justify-between ">
                    <li class="relative">

                        <button id="dropdownTopButton" @click="store.setHiddenWebsites(!store.hiddenWebsites)"
                            class="hover:underline" type="button">
                            <div class="flex">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="size-8">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                                </svg>
                            </div>
                        </button>

                        <!-- Dropdown menu -->
                        <div id="dropdownTop" :class="{ 'hidden': store.hiddenWebsites }"
                            class="z-10 absolute bottom-12 -right-5 bg-white divide-y divide-zinc-100 rounded-lg shadow-sm w-30 dark:bg-zinc-950">
                            <ul class="py-2 text-sm text-zinc-700 dark:text-zinc-200">

                                <li class="">
                                    <NuxtLink :to="useRuntimeConfig().public.router.Golchin"
                                        class="flex items-center p-2 hover:bg-cyan-100 dark:hover:bg-cyan-600 dark:hover:text-white">
                                        <img src="/assets/img/golchin.png" class="size-7 ml-2 mt-1" alt="">
                                        گلچین
                                    </NuxtLink>
                                </li>
                                <li class="">
                                    <NuxtLink :to="useRuntimeConfig().public.router.Hooshmand"
                                        class="flex items-center p-2 hover:bg-cyan-100 dark:hover:bg-cyan-600 dark:hover:text-white">
                                        <img src="/assets/img/hooshmand.png" class="size-7 ml-2 mt-1" alt="">
                                        هوشمند
                                    </NuxtLink>
                                </li>
                                <li class="">
                                    <NuxtLink :to="useRuntimeConfig().public.router.Maghale"
                                        class="flex items-center p-2 hover:bg-cyan-100 dark:hover:bg-cyan-600 dark:hover:text-white">
                                        <img src="/assets/img/maghale.png" class="size-7 ml-2 mt-1" alt="">
                                        مقاله
                                    </NuxtLink>
                                </li>
                                <li class="">
                                    <NuxtLink :to="useRuntimeConfig().public.router.Nohakim"
                                        class="flex items-center p-2 hover:bg-cyan-100 dark:hover:bg-cyan-600 dark:hover:text-white">
                                        <img src="/assets/img/nohakim.png" class="size-7 ml-2 mt-1" alt="">
                                        نوحکیم
                                    </NuxtLink>
                                </li>
                            </ul>
                        </div>

                    </li>
                    <li>
                        <NuxtLink :to="useRuntimeConfig().public.router.UserSearch" class="hover:underline ">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-8">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                            </svg>
                        </NuxtLink>
                    </li>
                    <li class="">
                        <NuxtLink v-if="store.isAuthenticated"
                            :to="useRuntimeConfig().public.router.GolchinDashboard + store.me.id"
                            class="hover:underline ">
                            <img class="size-8 rounded-full object-cover"
                                :src="useRuntimeConfig().public.MediaUrl + store.me.get_image" alt="">
                        </NuxtLink>
                        <NuxtLink v-else :to="useRuntimeConfig().public.router.Home" class="hover:underline ">
                            <img class="size-8 object-cover" src="/assets/img/golchin.png" alt="">
                        </NuxtLink>
                    </li>
                    <li>
                        <NuxtLink :to="useRuntimeConfig().public.router.Sessions" class="hover:underline relative"><svg
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-8">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
                            </svg>
                            <span v-if="unreadMassage" class="bg-red-600 rounded-full px-1 absolute min-w-px top-0">
                                {{ toPersianNumbers(unreadMassage) }}</span>
                        </NuxtLink>
                    </li>
                    <li>
                        <a href="/" class="hover:underline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                fill="currentColor" class="size-8">
                                <path fill-rule="evenodd"
                                    d="M9.53 2.47a.75.75 0 0 1 0 1.06L4.81 8.25H15a6.75 6.75 0 0 1 0 13.5h-3a.75.75 0 0 1 0-1.5h3a5.25 5.25 0 1 0 0-10.5H4.81l4.72 4.72a.75.75 0 1 1-1.06 1.06l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.06 0Z"
                                    clip-rule="evenodd" />
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
        </footer>
    </div>
</template>


<script setup>
import { useFlowbite } from '~/composables/useFlowbite';
import axios from 'axios';
import { useMaghaleStore } from '~/store'
const store = useMaghaleStore()
const { $toPersianNumbers } = useNuxtApp();
const toPersianNumbers = $toPersianNumbers;
axios.defaults.headers.common['Authorization'] = store.token
// get messages
const unreadMassage = ref(0)
function getMessages() {
    axios
        .get(`${useRuntimeConfig().public.BaseUrl}messages/UnreadMessages`)
        .then((r) => {
            unreadMassage.value = r.data;
        });
}
// init
onMounted(() => {
    useFlowbite(() => {
        initFlowbite();
    })
})
store.isAuthenticated ? getMessages() : 0
// functions
</script>