<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';


// Data dummy untuk antrian operasi
const totalActive = ref(45);
const totalInactive = ref(12);
const totalAll = ref(57);

// Data antrian per spesialis
const antrianPerSpesialis = ref([
    { spesialis: 'Bedah Umum', total: 15, active: 12, inactive: 3 },
    { spesialis: 'Bedah Ortopedi', total: 10, active: 8, inactive: 2 },
    { spesialis: 'Bedah Saraf', total: 8, active: 7, inactive: 1 },
    { spesialis: 'Bedah Jantung', total: 12, active: 10, inactive: 2 },
    { spesialis: 'Bedah Plastik', total: 7, active: 5, inactive: 2 },
    { spesialis: 'Bedah Urologi', total: 5, active: 3, inactive: 2 }
]);

// Data antrian per subspesialis
const antrianPerSubspesialis = ref([
    { spesialis: 'Bedah Umum', subspesialis: 'Digestif', total: 8, active: 7, inactive: 1 },
    { spesialis: 'Bedah Umum', subspesialis: 'Onkologi', total: 7, active: 5, inactive: 2 },
    { spesialis: 'Bedah Ortopedi', subspesialis: 'Traumatologi', total: 6, active: 5, inactive: 1 },
    { spesialis: 'Bedah Ortopedi', subspesialis: 'Spine', total: 4, active: 3, inactive: 1 },
    { spesialis: 'Bedah Saraf', subspesialis: 'Tumor', total: 5, active: 4, inactive: 1 },
    { spesialis: 'Bedah Saraf', subspesialis: 'Vaskular', total: 3, active: 3, inactive: 0 },
    { spesialis: 'Bedah Jantung', subspesialis: 'Dewasa', total: 7, active: 6, inactive: 1 },
    { spesialis: 'Bedah Jantung', subspesialis: 'Anak', total: 5, active: 4, inactive: 1 }
]);

const searchSpesialis = ref('');
const searchSubspesialis = ref('');

const headersSpesialis = [
    { title: 'Spesialis', key: 'spesialis' },
    { title: 'Total', key: 'total', align: 'center' as const },
    { title: 'Active', key: 'active', align: 'center' as const },
    { title: 'Inactive', key: 'inactive', align: 'center' as const }
];

const headersSubspesialis = [
    { title: 'Spesialis', key: 'spesialis' },
    { title: 'Subspesialis', key: 'subspesialis' },
    { title: 'Total', key: 'total', align: 'center' as const },
    { title: 'Active', key: 'active', align: 'center' as const },
    { title: 'Inactive', key: 'inactive', align: 'center' as const }
];
const page = ref({ title: 'Dashboard' });
const breadcrumbs = ref([
  {
    text: 'Dashboard',
    disabled: false,
    href: '#'
  }
]);

definePageMeta({
  middleware: 'auth'
});
</script>

<template>
    <v-row>
        <!-- Score Cards -->
         <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        <v-col cols="12" md="4">
            <v-card elevation="10">
                <v-card-item>
                    <div class="d-flex ga-3 align-center">
                        <v-avatar size="48" class="rounded-md bg-lightsuccess">
                            <Icon icon="solar:checklist-outline" class="text-success" height="25" />
                        </v-avatar>
                        <div>
                            <h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Antrian Aktif</h6>
                            <h3 class="text-h3 font-weight-bold">{{ totalActive }}</h3>
                        </div>
                    </div>
                </v-card-item>
            </v-card>
        </v-col>

        <v-col cols="12" md="4">
            <v-card elevation="10">
                <v-card-item>
                    <div class="d-flex ga-3 align-center">
                        <v-avatar size="48" class="rounded-md bg-lighterror">
                            <Icon icon="solar:close-circle-outline" class="text-error" height="25" />
                        </v-avatar>
                        <div>
                            <h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Antrian Tidak Aktif</h6>
                            <h3 class="text-h3 font-weight-bold">{{ totalInactive }}</h3>
                        </div>
                    </div>
                </v-card-item>
            </v-card>
        </v-col>

        <v-col cols="12" md="4">
            <v-card elevation="10">
                <v-card-item>
                    <div class="d-flex ga-3 align-center">
                        <v-avatar size="48" class="rounded-md bg-lightsecondary">
                            <Icon icon="solar:list-check-outline" class="text-secondary" height="25" />
                        </v-avatar>
                        <div>
                            <h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Semua Antrian</h6>
                            <h3 class="text-h3 font-weight-bold">{{ totalAll }}</h3>
                        </div>
                    </div>
                </v-card-item>
            </v-card>
        </v-col>

        <!-- Table Antrian Per Spesialis -->
        <v-col cols="12" lg="6">
            <v-card elevation="10">
                <v-card-item>
                    <div class="d-flex align-center justify-space-between mb-4">
                        <h5 class="text-h5 font-weight-bold">Antrian Per Spesialis</h5>
                        <v-avatar size="40" class="rounded-md bg-lightprimary">
                            <Icon icon="solar:users-group-rounded-outline" class="text-primary" height="22" />
                        </v-avatar>
                    </div>
                    <v-text-field v-model="searchSpesialis" density="compact" placeholder="Cari spesialis..."
                        prepend-inner-icon="mdi-magnify" variant="outlined" hide-details clearable
                        class="mb-4"></v-text-field>
                </v-card-item>
                <v-divider></v-divider>
                <v-card-text class="pa-0">
                    <v-data-table :headers="headersSpesialis" :items="antrianPerSpesialis" :search="searchSpesialis"
                        :items-per-page="10" class="border-0" hide-default-footer>
                        <template v-slot:item.total="{ item }">
                            <v-chip size="small" color="primary" variant="tonal">
                                {{ item.total }}
                            </v-chip>
                        </template>
                        <template v-slot:item.active="{ item }">
                            <v-chip size="small" color="success" variant="tonal">
                                {{ item.active }}
                            </v-chip>
                        </template>
                        <template v-slot:item.inactive="{ item }">
                            <v-chip size="small" color="error" variant="tonal">
                                {{ item.inactive }}
                            </v-chip>
                        </template>
                    </v-data-table>
                </v-card-text>
            </v-card>
        </v-col>

        <!-- Table Antrian Per Subspesialis -->
        <v-col cols="12" lg="6">
            <v-card elevation="10">
                <v-card-item>
                    <div class="d-flex align-center justify-space-between mb-4">
                        <h5 class="text-h5 font-weight-bold">Antrian Per Subspesialis</h5>
                        <v-avatar size="40" class="rounded-md bg-lightsecondary">
                            <Icon icon="solar:users-group-two-rounded-outline" class="text-secondary" height="22" />
                        </v-avatar>
                    </div>
                    <v-text-field v-model="searchSubspesialis" density="compact"
                        placeholder="Cari spesialis atau subspesialis..." prepend-inner-icon="mdi-magnify"
                        variant="outlined" hide-details clearable class="mb-4"></v-text-field>
                </v-card-item>
                <v-divider></v-divider>
                <v-card-text class="pa-0">
                    <v-data-table :headers="headersSubspesialis" :items="antrianPerSubspesialis"
                        :search="searchSubspesialis" :items-per-page="10" class="border-0" hide-default-footer>
                        <template v-slot:item.total="{ item }">
                            <v-chip size="small" color="primary" variant="tonal">
                                {{ item.total }}
                            </v-chip>
                        </template>
                        <template v-slot:item.active="{ item }">
                            <v-chip size="small" color="success" variant="tonal">
                                {{ item.active }}
                            </v-chip>
                        </template>
                        <template v-slot:item.inactive="{ item }">
                            <v-chip size="small" color="error" variant="tonal">
                                {{ item.inactive }}
                            </v-chip>
                        </template>
                    </v-data-table>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</template>
