<script setup lang="ts">
// meta

definePageMeta({
    middleware: "check-is-logged-in",
    layout: "profile",
});

// state

const filters = ref({
    sort: undefined,
    status: undefined,
    search: "",
});

const tableHeads = ref([
    "دسته بندی",
    "موضوع",
    "تاریخ ایجاد و بروز رسانی",
    "وضعیت",
    "عملیات",
]);
</script>

<template>
    <div class="w-full flex flex-col gap-5">
        <ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />

        <div class="w-full flex flex-col gap-5">
            <div class="w-full flex items-center justify-between px-5">
                <div class="flex items-center justify-start gap-8">
                    <div class="flex items-center justify-start gap-3">
                        <span class="text-sm">ترتیب بر اساس</span>
                        <Select
                            :options="['جدید ترین', 'قدیمی ترین']"
                            v-model="filters.sort!"
                            triggerRootClass="!py-2.5"
                            class="w-[5rem]"
                        />
                    </div>
                    <div class="flex items-center justify-start gap-3">
                        <span class="text-sm">وضعیت پرداخت</span>
                        <Select
                            :options="[
                                'پرداخت شده',
                                'در حال پردازش',
                                'لغو شده',
                            ]"
                            v-model="filters.status!"
                            triggerRootClass="!py-2.5"
                            class="w-[5rem]"
                        />
                    </div>
                </div>

                <NuxtLink :to="{ name: 'profile-tickets-new' }">
                    <Button end-icon="bi:plus" size="md" class="rounded-full">
                        <span class="font-bold whitespace-pre">
                            تیکت جدید
                        </span>
                    </Button>
                </NuxtLink>
            </div>

            <Table>
                <template #thead>
                    <th
                        v-for="(tableHead, index) in tableHeads"
                        :key="index"
                        scope="col"
                        :class="
                            [0, 1, 2].includes(index)
                                ? 'w-3/12'
                                : tableHeads.length - 1 == index
                                ? 'w-1/2'
                                : 'w-2/12'
                        "
                        class="px-6 py-5 text-sm font-normal"
                    >
                        {{ tableHead }}
                    </th>
                </template>
                <template #tbody>
                    <TicketsTableRow v-for="i in 4" />
                </template>
            </Table>
        </div>
    </div>
</template>

<style scoped></style>
