<template>
  <UDashboardPage>
    <UDashboardPanel grow>
      <UDashboardNavbar title="Home">
        <template #right>
          <UTooltip text="Notifications" :shortcuts="['N']">
            <UButton color="gray" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
              <UChip :show="false" color="red" inset>
                <UIcon name="i-heroicons-bell" class="w-5 h-5" />
              </UChip>
            </UButton>
          </UTooltip>
        </template>
      </UDashboardNavbar>

      <UDashboardPanelContent>
        <UDashboardCard
            title="Anwesenheiten"
          v-if="dataStore.getStartedWorkingTimes().length > 0"
        >
          <p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{dataStore.getProfileById(time.profile).fullName}}</p>
        </UDashboardCard>

<!--TODO: Fix Card Table overflowing        <UDashboardCard
          title="Offene Aufgaben"
          v-if="dataStore.getOpenTasksCount > 0"
          class="w-1/2 h-1/2"
        >
          <UTable
            :rows="dataStore.tasks.filter(i => i.categorie !== 'Erledigt' && (i.profile === dataStore.activeProfile.id ||!i.profile))"
            @select="(row) => router.push(`/tasks/show/${row.id}`)"
            :columns="[
                {
                  key: 'categorie',
                  label: 'Kategorie'
                },{
                  key: 'name',
                  label: 'Name'
                },
            ]"
          >
            <template #categorie-data="{row}">
              <span v-if="row.categorie === 'Dringend'" class="text-rose-500">{{row.categorie}}</span>
              <span v-else-if="row.categorie === 'In Bearbeitung'" class="text-primary-500">{{row.categorie}}</span>
              <span v-else>{{row.categorie}}</span>
            </template>
          </UTable>
        </UDashboardCard>-->
        <UDashboardCard
            :ui="{ body: { padding: '!pb-3 !px-5' }}"
        >
          <display-income-and-expenditure/>
        </UDashboardCard>
        <UDashboardCard
            class="w-1/3 mt-3"
            :ui="{ body: { padding: '!py-5 !px-5' }}"
        >
          <display-open-balances/>
        </UDashboardCard>
      </UDashboardPanelContent>
    </UDashboardPanel>
  </UDashboardPage>
</template>

<script setup>

definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()
const toast = useToast()
const router = useRouter()

const { isNotificationsSlideoverOpen } = useDashboard()
const items = [[{
  label: 'Aufgabe',
  icon: 'i-heroicons-paper-airplane',
  to: '/tasks/create'
}, {
  label: 'Kunde',
  icon: 'i-heroicons-user-plus',
  to: '/customers/create'
}]]


const supabase = useSupabaseClient()

const user = useSupabaseUser()

</script>

<style scoped>
.card {
  border: 1px solid darkgray;
  border-radius: 20px;

}
</style>