<template>
    <div dir="rtl" class="shadow-2xl p-1 py-3">
        <div class="flex justify-between items-center">
            <MaghaleSecondTitle title="ابرپروژه‌ها" />
            <NuxtLink :to="useRuntimeConfig().public.router.HyperAdd">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-6 text-xl font-bold my-6 text-zinc-900 dark:text-white">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                </svg>
            </NuxtLink>
        </div>
        <!-- table -->
        <div class="relative overflow-x-auto shadow-md  text-xs">
            <div class="flex items-center justify-between pb-4">
                <div>
                    <button id="dropdownRadioButton" data-dropdown-toggle="dropdownRadio"
                        class="inline-flex items-center text-zinc-500 ml-2 bg-white border border-zinc-300 focus:outline-none hover:bg-zinc-100 focus:ring-4 focus:ring-zinc-100 font-medium rounded-lg px-3 py-1 dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 dark:focus:ring-zinc-700"
                        type="button">
                        <svg class="size-2.5 text-zinc-500 dark:text-zinc-400 me-3" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z" />
                        </svg>
                        مرتب‌سازی
                        <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 10 6">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 4 4 4-4" />
                        </svg>
                    </button>
                    <!-- Dropdown menu -->
                    <div id="dropdownRadio"
                        class="z-10 hidden w-48 bg-white divide-y divide-zinc-100 rounded-lg shadow dark:bg-zinc-700 dark:divide-zinc-600"
                        data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top"
                        style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(522.5px, 3847.5px, 0px);">
                        <ul class="p-3 space-y-1 text-zinc-700 dark:text-zinc-200"
                            aria-labelledby="dropdownRadioButton">
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
                                    <input id="filter-radio-example-1" type="radio" value="activity__title"
                                        name="filter-radio" v-model="ordering" @change="getHypers"
                                        class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                                    <label for="filter-radio-example-1"
                                        class="w-full ms-2 font-medium text-zinc-900 rounded dark:text-zinc-300">عنوان</label>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
                                    <input id="filter-radio-example-2" type="radio" value="activity__create_time"
                                        v-model="ordering" @change="getHypers" name="filter-radio"
                                        class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                                    <label for="filter-radio-example-2"
                                        class="w-full ms-2 font-medium text-zinc-900 rounded dark:text-zinc-300">تاریخ
                                        ثبت</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <label for="table-search" class="sr-only">Search</label>
                <div class="relative">
                    <div
                        class="absolute inset-y-0 left-0 rtl:inset-r-0 rtl:right-0 flex items-center ps-3 pointer-events-none">
                        <svg class="size-4 text-zinc-500 dark:text-zinc-400" aria-hidden="true" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <input type="text" id="table-search" @change="getHypers" v-model="search"
                        class="block text-xs p-1 ps-10 text-zinc-900 border border-zinc-300 rounded-lg bg-zinc-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                        placeholder="جستجو در ابرپروژه‌ها">
                </div>
            </div>
            <table class="w-full text-right text-zinc-500 dark:text-zinc-400">
                <thead class="text-xs text-zinc-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-zinc-400">
                    <tr class="">
                        <th scope="col" class="p-2">
                            عنوان
                        </th>
                        <th scope="col" class="p-2 w-4">
                            پروژه‌ها
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hyper in hypers.data" :key="hyper.id"
                        class="bg-white border-b dark:bg-zinc-800 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-600">
                        <th scope="row" class="p-2 font-medium text-zinc-900 whitespace-nowrap dark:text-white">
                            <NuxtLink :to="useRuntimeConfig().public.router.Hyper + hyper.id">
                                <span @click="store.setHyper(hyper)">
                                    {{ hyper.get_title }}
                                </span>
                            </NuxtLink>
                        </th>
                        <th scope="row" class="p-2 font-medium text-zinc-900 whitespace-nowrap dark:text-white">
                            {{ toPersianNumbers(hyper.projects_count) }}
                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- pagination -->
        <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4"
            aria-label="Table navigation">
            <span
                class="font-normal text-zinc-500 dark:text-zinc-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">مشاهده
                <span class="font-semibold text-zinc-900 dark:text-white">{{ toPersianNumbers(page * 10) }} - {{
                    toPersianNumbers((page - 1) * 10 + 1) }} </span> از <span
                    class="font-semibold text-zinc-900 dark:text-white">{{ toPersianNumbers(hypers.data.count)
                    }}</span></span>
            <ul class="inline-flex -space-x-px rtl:space-x-reverse h-8">
                <li>
                    <button @click="previous" :disabled="!hypers.data.previous"
                        class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-zinc-500 bg-white border border-zinc-300 rounded-s-lg hover:bg-zinc-100 hover:text-zinc-700 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-white">قبلی</button>
                </li>
                <li v-for="i in (0, pages)">
                    <button v-if="page != i" @click="go_to_page(i)"
                        class="flex items-center justify-center px-3 h-8 leading-tight text-zinc-500 bg-white border border-zinc-300 hover:bg-zinc-100 hover:text-zinc-700 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-white">{{
                            toPersianNumbers(i) }}</button>
                    <button v-else aria-current="page"
                        class="flex items-center justify-center px-3 h-8 text-blue-600 border border-zinc-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-zinc-700 dark:bg-zinc-700 dark:text-white">{{
                            toPersianNumbers(i) }}</button>
                </li>
                <li>
                    <button @click="next" :disabled="!hypers.data.next"
                        class="flex items-center justify-center px-3 h-8 leading-tight text-zinc-500 bg-white border border-zinc-300 rounded-e-lg hover:bg-zinc-100 hover:text-zinc-700 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-white">بعدی</button>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script setup>
import axios from 'axios'
import { useMaghaleStore } from '~/store'
const { $toPersianNumbers } = useNuxtApp();
const toPersianNumbers = $toPersianNumbers;
const store = useMaghaleStore()

// get hypers
const page = ref(1)
const pages = ref(5)
const search = ref('')
const hypers = reactive({ data: [] })
const ordering = ref('activity__create_time')
async function getHypers() {
    await axios
        .get(`${useRuntimeConfig().public.BaseUrl}projects/my_hypers/?page=${page.value}&ordering=${ordering.value}&search=${search.value}`)
        .then((r) => {
            hypers.data = r.data.results
            pages.value = Math.floor((r.data.count - 1) / 10) + 1
        })
}
// init
getHypers()

async function next() {
    await axios
        .get(hypers.data.next)
        .then((r) => {
            hypers.data = r.data
            page.value++
        })
}
async function previous() {
    await axios
        .get(hypers.data.previous)
        .then((r) => {
            hypers.data = r.data
            page.value--
        })
}
async function go_to_page(num) {
    page.value = num
    getHypers()
}
</script>