<template>
    <div>
        <v-app>
            <v-main>
                <v-container>
                    <v-row>
                        <v-col><h3>Jadwal Dokter</h3></v-col>
                    </v-row>
                    <v-card title="" flat class="mx-auto my-8 pt-3" elevation="3" min-width="300">
                        <div class="d-inline-flex ml-5 mb-3">
                            <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1"  width="500px"></v-text-field>
                        </div>
                            <v-data-table class="elevation-1 px-5" :headers="headers" :items="JadwalDokter" F :search="search" hide-default-header>
                                <template v-slot:body="{items}">
                                    <!-- <thead>-->
                                        <tr>
                                            <th>Hari</th>
                                            <th>Waktu</th>
                                            <th>Spesialis</th>
                                            <th>Subspesialis</th>
                                            <th>Namalengkap</th>
                                        </tr>
                                    <!-- </thead>  -->
                                    <!-- <tbody> -->
                                        <tr v-for="(item,index) in items" :key="index">
                                            <td v-if="index===0||item.hari !== items[index-1].hari">{{ item.hari }}</td>
                                            <td v-else></td>
                                            <!-- <td>{{ item.hari }}</td> -->
                                            <td>{{ item.waktu }}</td>
                                            <td v-if="index===0||item.spesialis !== items[index-1].spesialis">{{ item.spesialis }}</td>
                                            <td v-else></td>
                                            <!-- <td>{{ item.spesialis }}</td> -->
                                            <td v-if="index===0||item.subspesialis !== items[index-1].subspesialis">{{ item.subspesialis }}</td>
                                            <td v-else></td>
                                            <!-- <td>{{ item.subspesialis }}</td> -->
                                            <td>{{ item.namalengkap }}</td>
                                        </tr>
                                    <!-- </tbody> -->
                                </template>
                            </v-data-table>
                    </v-card>
                </v-container>
            </v-main>
        </v-app>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';

const {JadwalDokter} = storeToRefs(useJadwalDokter());
const {loadJadwalDokter} = useJadwalDokter();
const dataJadwalDokter = ref([]);
const search = ref("");
const headers = [
    {
        align:'start',
        key:'name',
        sortable:false,
    },
    {key:'hari', title:'hari'},
    {key:'waktu', title:'waktu'},
    {key:'spesialis', title:'spesialis'},
    {key:'subspesialis', title:'subspesialis'},
    {key:'namalengkap', title:'namalengkap'},
]


onMounted(()=> {
    loadJadwalDokter();
    // console.log(JadwalDokter)
    // console.log(hari)
})
</script>
