<template>
    <div>
        <VRow>
            <VCol cols="12" align="end">
                <RouterLink to="/permohonan/create">
                    <VBtn prepend-icon="bx-plus-circle" size="small">Permohonan Baru</VBtn>
                </RouterLink>
            </VCol>

            <VCol cols="12">
                <VDataTable
                    :headers="headers"
                    :items="items"
                    height="250"
                    class="elevation-1"
                >
                    <template v-slot:[`item.pemohon`]="{ item }">
                        <span>{{ item.pemohon?.nama ?? '' }}</span>
                    </template>
                    <template v-slot:[`item.maklumat`]="{ item }">
                        <span>{{ item.maklumat?.nama_sistem_aplikasi ?? '' }}</span>
                    </template>
                    <template v-slot:[`item.created_at`]="{ item }">
                        <span>{{ item.created_at }}</span>
                    </template>
                    <template v-slot:[`item.actions`]="{ item }">
                        <RouterLink :to="`/permohonan/${item.id}`">
                            <VBtn icon>
                                <VIcon>bx-show</VIcon>
                            </VBtn>
                        </RouterLink>
                    </template>
                </VDataTable>
            </VCol>
        </VRow>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import PermohonanService from '../../../services/permohonan'

export default {
    setup() {
        const items = ref([])

        const headers = ref([
            { text: 'ID', value: 'id', class: 'text-uppercase' },
            { text: 'Pemohon', value: 'pemohon', align: 'center' },
            { text: 'Nama Sistem Aplikasi', value: 'maklumat', align: 'center' },
            { text: 'Tarikh Permohonan', value: 'created_at', align: 'center' },
            { text: 'Actions', value: 'actions', align: 'center' }
        ])

        const loadData = async () => {
            try {
                const response = await PermohonanService.lists()
                items.value = response.data.data
            } catch (error) {
                console.error('Failed to load data:', error)
            }
        }

        onMounted(() => {
            loadData()
        })

        return {
            items,
            headers,
            loadData
        }
    }
}
</script>

List.vue:43 [Vue warn]: Invalid VNode type: undefined (undefined) 
  at <Anonymous align=undefined fixed=undefined fixedOffset=0  ... > 
  at <VDataTableRow key="item_1" onClick=undefined index=0  ... > 
  at <VDataTableRows loading=false loadingText="$vuetify.dataIterator.loadingText" hideNoData=false  ... > 
  at <VTable class="v-data-table elevation-1" style= {}[[Prototype]]: Object height="250"  ... > 
  at <VDataTable headers= (5) [{…}, {…}, {…}, {…}, {…}]0: class: "text-uppercase"text: "ID"value: "id"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()1: {text: 'Pemohon', value: 'pemohon', align: 'center'}2: {text: 'Nama Sistem Aplikasi', value: 'maklumat', align: 'center'}3: {text: 'Tarikh Permohonan', value: 'created_at', align: 'center'}4: {text: 'Actions', value: 'actions', align: 'center'}length: 5[[Prototype]]: Array(0) items= [{…}] height="250"  ... > 
  at <VCol cols="12" > 
  at <VRow> 
  at <List onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > 
  at <RouterView> 
  at <VCardText> 
  at <VCard> 
  at <VCol cols="12" > 
  at <VRow> 
  at <Permohonan onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false > > 
  at <RouterView> 
  at <VerticalNavLayout> 
  at <DefaultLayoutWithVerticalNav> 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <VApp style="--v-global-theme-primary: 0,124,213" > 
  at <App>