<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import kategoriOperasiData from '~/data/mock/kategoriOperasi.json';
import antreanOperasiData from '~/data/mock/antreanOperasi.json';
import type { KategoriOperasi, AntreanOperasi } from '~/types/antrean';

definePageMeta({
  middleware: 'auth'
});

const page = ref({ title: 'List Antrean Operasi per Kategori' });
const breadcrumbs = ref([
    {
        text: 'Antrean',
        disabled: false,
        href: '#'
    },
    {
        text: 'List Antrean Operasi per Kategori',
        disabled: true,
        href: '#'
    }
]);

const kategoriOperasiList = ref<KategoriOperasi[]>(kategoriOperasiData);
const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);

// Function to count antrian by kategori operasi id
const countAntreanByKategori = (idKategoriOperasi: number) => {
    return antreanList.value.filter(antrian => antrian.idKategoriOperasi === idKategoriOperasi).length;
};

</script>
<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        
        <v-col 
            v-for="kategori in kategoriOperasiList" 
            :key="kategori.id"
            cols="12"
            md="4"
        >
            <v-card elevation="10" class="h-100">
                <NuxtLink :to="`/antrean/kategori/${kategori.id}`" style="text-decoration: none; color: inherit;">
                    <v-card-item style="cursor: pointer;" class="v-card-item--link">
                        <div class="d-flex align-center justify-space-between">
                            <h5 class="text-h6 font-weight-bold">{{ kategori.kategori }}</h5>
                            <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
                        </div>
                        <v-chip class="mt-3 mb-0"  color="primary" size="small">{{ countAntreanByKategori(kategori.id) }} Antrean</v-chip>
                    </v-card-item>
                </NuxtLink>
            </v-card>
        </v-col>
    </v-row>
</template> 