<template>
    <div dir="rtl" class="shadow-2xl mt-4">
        <div class="flex justify-between items-center px-1">
            <MaghaleSecondTitle title="بخش‌ها" />
            <NuxtLink :to="useRuntimeConfig().public.router.SectionAdd">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-zinc-950 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=" dark:bg-zinc-950 rounded-lg p-2 mt-2">
             <div class="relative overflow-x-auto shadow-md">
                 <div class="flex items-center justify-start 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.5 dark:bg-zinc-900 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-800 dark:hover:border-zinc-600 dark:focus:ring-zinc-800"
                             type="button">
                             <svg class="w-3 h-3 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-800 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-800 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="getSections"
                                             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-900 dark:focus:ring-offset-zinc-900 focus:ring-2 dark:bg-zinc-800 dark:border-zinc-600">
                                         <label for="filter-radio-example-1"
                                             class="w-full ms-2 font-medium text-zinc-950 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="getSections" 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-900 dark:focus:ring-offset-zinc-900 focus:ring-2 dark:bg-zinc-800 dark:border-zinc-600">
                                         <label for="filter-radio-example-2"
                                             class="w-full ms-2 font-medium text-zinc-950 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="w-5 h-5 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="getSections" v-model="search"
                             class="block text-xs p-1 ps-10 text-zinc-950 border border-zinc-300 rounded-lg bg-zinc-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-800 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-800 uppercase bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-400">
                         <tr class="">
                             <th scope="col" class="p-2">
                                 عنوان
                             </th>
                             <th scope="col" class="py-1 px-2 w-4">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                     stroke="currentColor" class="size-6">
                                     <path stroke-linecap="round" stroke-linejoin="round"
                                         d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                 </svg>
     
                             </th>
                             <th scope="col" class="p-1 w-4 flex-row text-center">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                     stroke="currentColor" class="size-5">
                                     <path stroke-linecap="round" stroke-linejoin="round"
                                         d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                                 </svg>
                             </th>
                             <th scope="col" class="p-1 w-4 flex-row">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                     stroke="currentColor" class="size-5 mx-auto">
                                     <path stroke-linecap="round" stroke-linejoin="round"
                                         d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
                                 </svg>
                             </th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr v-for="instance in sections.data.results" :key="instance.id"
                             class="bg-white border-b dark:bg-zinc-900 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-600">
                             <th scope="row" class="px-2 py-2 font-medium text-zinc-950 whitespace-nowrap dark:text-white">
                                 <NuxtLink :to="useRuntimeConfig().public.router.Section + instance.id">
                                     <span @click="store.setSection(instance)">
                                         {{ instance.get_title }}
                                     </span>
                                 </NuxtLink>
                             </th>
                             <th scope="row" class="p-1 py-2 flex-row text-center">
                                 <NuxtLink :to="useRuntimeConfig().public.router.User + instance.activity.user.id">
                                     <img class="size-6 rounded-full"
                                         :src="useRuntimeConfig().public.MediaUrl + instance.activity.user.get_image" alt="">
                                 </NuxtLink>
                             </th>
                             <th scope="row" class="p-1 py-2 font-medium text-zinc-950 whitespace-nowrap dark:text-white flex-row text-center">
                                 {{ toPersianNumbers(instance.activity.user_count) }}
                             </th>
                             <th scope="row" class="p-1 py-2 font-medium text-zinc-950 whitespace-nowrap dark:text-white flex-row text-center">
                                 {{ toPersianNumbers(instance.sections_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-950 dark:text-white">{{ toPersianNumbers(page * 10) }} - {{
                         toPersianNumbers((page - 1) * 10 + 1) }} </span> از <span
                         class="font-semibold text-zinc-950 dark:text-white">{{ toPersianNumbers(sections.data.count)
                         }}</span></span>
                 <ul class="inline-flex -space-x-px rtl:space-x-reverse h-8">
                     <li>
                         <button @click="previous" :disabled="!sections.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-800 dark:bg-zinc-900 dark:border-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800 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-800 dark:bg-zinc-900 dark:border-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800 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-800 dark:border-zinc-800 dark:bg-zinc-800 dark:text-white">{{
                                 toPersianNumbers(i) }}</button>
                     </li>
                     <li>
                         <button @click="next" :disabled="!sections.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-800 dark:bg-zinc-900 dark:border-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white">بعدی</button>
                     </li>
                 </ul>
             </nav>
         </div>

    </div>
</template>

<script setup>
import axios from 'axios'
import { useMaghaleStore } from '~/store'
const { $toPersianNumbers } = useNuxtApp();
const toPersianNumbers = $toPersianNumbers;
const store = useMaghaleStore()
const id = useRoute().params.id
// get sections
const page = ref(1)
const pages = ref(5)
const search = ref('')
const ordering = ref('activity__create_time')
const sections = reactive({ data: {} })
async function getSections() {
    await axios
        .get(`${useRuntimeConfig().public.BaseUrl}books/chapter_sections/?pk=${id}&page=${page.value}&ordering=${ordering.value}&search=${search.value}`)
        .then((r) => {
            sections.data = r.data
            pages.value = Math.floor((r.data.count - 1) / 10) + 1
        })
}
// init
getSections()
// functions
async function next() {
    await axios
        .get(sections.data.next)
        .then((r) => {
            sections.data = r.data
            page.value++
        })
}
async function previous() {
    await axios
        .get(sections.data.previous)
        .then((r) => {
            sections.data = r.data
            page.value--
        })
}
async function go_to_page(num) {
    page.value = num
    getSections()
}

</script>