<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import spesialisData from '~/data/mock/spesialis.json';
import subSpesialisData from '~/data/mock/subSpesialis.json';
import antreanOperasiData from '~/data/mock/antreanOperasi.json';
import type { Spesialis, SubSpesialis, AntreanOperasi } from '~/types/antrean';

definePageMeta({
  middleware: 'auth'
});

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

const spesialisList = ref<Spesialis[]>(spesialisData);
const subSpesialisList = ref<SubSpesialis[]>(subSpesialisData);
const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);

// Function to get sub-spesialis by spesialis id
const getSubSpesialisBySpesialisId = (spesialisId: number) => {
    return subSpesialisList.value.filter(sub => sub.id_spesialis === spesialisId);
};

// Function to count antrian by spesialis kode
const countAntreanBySpesialis = (kodeSpesialis: string) => {
    return antreanList.value.filter(antrian => antrian.kodeSpesialis === kodeSpesialis).length;
};

// Function to count antrian by sub-spesialis kode
const countAntreanBySubSpesialis = (kodeSubSpesialis: string) => {
    return antreanList.value.filter(antrian => antrian.kodeSubSpesialis === kodeSubSpesialis).length;
};

</script>
<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        
        <v-col 
            v-for="spesialis in spesialisList" 
            :key="spesialis.id"
            cols="12"
            md="4"
        >
            <v-card elevation="10" class="h-100">
                <NuxtLink :to="`/antrean/spesialis/${spesialis.kode}`" 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">Spesialis: {{ spesialis.spesialis }}</h5>
                            <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
                        </div>
                        <v-chip class="mt-3 mb-0"  color="primary" size="small">{{ countAntreanBySpesialis(spesialis.kode) }} Antrean</v-chip>
                    </v-card-item>
                </NuxtLink>
                <v-divider></v-divider>
                <v-card-text>

                    <v-label class="mb-2 font-weight-medium text-subtitle-2">Sub Spesialis:</v-label>
                    <v-list density="compact" class="py-0">
                        <v-list-item
                            v-for="subSpesialis in getSubSpesialisBySpesialisId(spesialis.id)"
                            :key="subSpesialis.id"
                            class="px-0"
                            :to="`/antrean/subspesialis/${subSpesialis.kode}`"
                        >
                            <template #prepend>
                                <v-icon size="small" color="primary">mdi-chevron-right</v-icon>
                            </template>
                            <v-list-item-title class="text-body-2">
                                {{ subSpesialis.subspesialis }}
                            </v-list-item-title>
                            <template #append>
                                <v-chip size="x-small" variant="outlined" color="primary">
                                    {{ countAntreanBySubSpesialis(subSpesialis.kode) }} Antrean
                                </v-chip>
                            </template>
                        </v-list-item>
                        
                        <v-list-item v-if="getSubSpesialisBySpesialisId(spesialis.id).length === 0" class="px-0">
                            <v-list-item-title class="text-body-2 text-medium-emphasis">
                                Tidak ada sub spesialis
                            </v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</template> 