<script setup>
const router = useRouter()
const route = useRoute()
const dataStore = useDataStore()

const itemInfo = ref({})

const createProfile = async () => {
  let data = {
    fullName: `${itemInfo.value.firstName} ${itemInfo.value.lastName}`,
    ...itemInfo.value
  }

  await dataStore.createNewItem("profiles", data)
}

</script>

<template>
  <UDashboardNavbar title="Mitarbeiter erstellen">
    <template #right>
      <UButton
        color="rose"
        @click="router.push(`/settings/profiles`)"
      >
        Abbrechen
      </UButton>
      <UButton
        @click="createProfile"
      >
        Erstellen
      </UButton>
    </template>
  </UDashboardNavbar>

  <UForm
    class="p-5"
  >
    <UFormGroup
      label="Anrede"
    >
      <UInput
        required
        v-model="itemInfo.salutation"
      />
    </UFormGroup>
    <UFormGroup
      label="Vorname"
    >
      <UInput
        required
        v-model="itemInfo.firstName"
      />
    </UFormGroup>
    <UFormGroup
      label="Nachname"
    >
      <UInput
        required
        v-model="itemInfo.lastName"
      />
    </UFormGroup>
    <UFormGroup
      label="Mitarbeiter Nummer"
    >
      <UInput
        v-model="itemInfo.employeeNumber"
      />
    </UFormGroup>
    <UFormGroup
      label="E-Mail"
    >
      <UInput
          v-model="itemInfo.email"
      />
    </UFormGroup>
    <UFormGroup
      label="Handynummer"
    >
      <UInput
          v-model="itemInfo.mobileTel"
      />
    </UFormGroup>
    <UFormGroup
      label="Festnetznummer"
    >
      <UInput
          v-model="itemInfo.fixedTel"
      />
    </UFormGroup>
  </UForm>

</template>

<style scoped>

</style>