<script setup>
import HistoryDisplay from "~/components/HistoryDisplay.vue";

const dataStore = useDataStore()
const route = useRoute()

const itemInfo = ref({})

const setupPage = () => {
  if(route.params.id) itemInfo.value = dataStore.getProfileById(route.params.id)
}

setupPage()

</script>

<template>
  <UDashboardNavbar
    :title="itemInfo.fullName"
  >
  </UDashboardNavbar>

  <UTabs
    class="p-5"
    :items="[
        {
          label: 'Informationen'
        },{
          label: 'Logbuch'
        },{
          label: 'Zeiterfassung'
        },{
          label: 'Vertragsdaten'
        },{
          label: 'Dokumente'
        }
    ]"
  >
    <template #item="{item}">
      <UCard class="mt-5">
        <div v-if="item.label === 'Informationen'">
          <Toolbar>
            <UButton
                @click="dataStore.updateItem('profiles',itemInfo)"
            >
              Speichern
            </UButton>
          </Toolbar>
          <InputGroup class="w-full">
            <UFormGroup
              label="Anrede"
              class="w-60"
            >
              <UInput
                v-model="itemInfo.salutation"
              />
            </UFormGroup>
            <UFormGroup
              label="Vorname"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.firstName"
              />
            </UFormGroup>
            <UFormGroup
              label="Nachname"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.lastName"
              />
            </UFormGroup>
          </InputGroup><InputGroup class="w-full">
            <UFormGroup
              label="Mitarbeiternummer"
              class="w-60"
            >
              <UInput
                v-model="itemInfo.employeeNumber"
              />
            </UFormGroup>
          <UFormGroup
              label="E-Mail"
              class="w-120"
            >
              <UInput
                v-model="itemInfo.email"
              />
            </UFormGroup>
          </InputGroup>
        </div>
        <div v-if="item.label === 'Logbuch'">
          <HistoryDisplay
              type="profile"
              v-if="itemInfo"
              :element-id="itemInfo.id"
          />
        </div>
        <div v-if="item.label === 'Vertragsdaten'">
          <Toolbar>
            <UButton
                @click="dataStore.updateItem('profiles',itemInfo)"
            >
              Speichern
            </UButton>
          </Toolbar>
          <InputGroup class="w-full">
            <UFormGroup
              label="Wöchentliche Arbeitszeit"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.weeklyWorkingHours"
              />
            </UFormGroup>
            <UFormGroup
              label="Urlaubstage"
              class="flex-auto"
            >
              <UInput
                v-model="itemInfo.annualPaidLeaveDays"
              />
            </UFormGroup>
          </InputGroup>
        </div>
      </UCard>
    </template>
  </UTabs>
</template>

<style scoped>

</style>