<script setup>
import dayjs from "dayjs";
import MaterialComposing from "~/components/materialComposing.vue";
import PersonalComposing from "~/components/personalComposing.vue";

const props = defineProps({
  type: {
    required: true,
    type: String
  },
  mode: {
    required: true,
    type: String
  },
  createQuery: {
    type: Object
  },
  item: {
    required: true,
    type: Object
  },
  inModal: {
    type: Boolean,
  },
  platform: {
    type: String,
  }
})

const emit = defineEmits(["returnData"])

const {type} = props

defineShortcuts({
  'backspace': () => {
    router.push(`/${type}`)
  },
  'arrowleft': () => {
    if(openTab.value > 0){
      openTab.value -= 1
    }
  },
  'arrowright': () => {
    if(openTab.value < 3) {
      openTab.value += 1
    }
  },
})

const router = useRouter()
const route = useRoute()
const dataStore = useDataStore()
const modal = useModal()

const dataType = dataStore.dataTypes[type]
const openTab = ref(0)
const item = ref(JSON.parse(props.item))
// console.log(item.value)

const oldItem = ref(null)
const generateOldItemData = () => {
  oldItem.value = JSON.parse(props.item)
}
generateOldItemData()

const inputColumnCount = computed(() => {
  return Array.isArray(dataType.inputColumns) && dataType.inputColumns.length > 0
    ? dataType.inputColumns.length
    : 1
})

const getInputColumnStyle = () => {
  if (props.platform === 'mobile') return undefined

  return {
    width: `${100 / inputColumnCount.value}%`
  }
}


// --- ÄNDERUNG START: Computed Property statt Watcher/Function ---
// Dies berechnet den Status automatisch neu, egal woher die Daten kommen (Init oder User-Eingabe)
const saveAllowed = computed(() => {
  if (!item.value) return false

  const isFilledValue = (value) => {
    if (Array.isArray(value)) return value.length > 0
    if (typeof value === "string") return value.trim().length > 0
    return value !== null && value !== undefined && value !== false
  }

  let allowedCount = 0
  // Nur Input-Felder berücksichtigen
  const relevantColumns = dataType.templateColumns.filter(i => {
    if (!i.inputType) return false
    if (i.showFunction && !i.showFunction(item.value)) return false
    if (i.disabledFunction && i.disabledFunction(item.value)) return false
    return true
  })

  relevantColumns.forEach(datapoint => {
    if(datapoint.required) {
      if(datapoint.key.includes(".")){
        const [parentKey, childKey] = datapoint.key.split('.')
        // Prüfung: Existiert Parent UND ist Child "truthy" (nicht null/undefined/empty)
        if(item.value[parentKey] && isFilledValue(item.value[parentKey][childKey])) {
          allowedCount += 1
        }
      } else {
        if(isFilledValue(item.value[datapoint.key])) {
          allowedCount += 1
        }
      }
    } else {
      // Wenn nicht required, zählt es immer als "erlaubt"
      allowedCount += 1
    }
  })

  return allowedCount >= relevantColumns.length
})
// --- ÄNDERUNG ENDE ---


const setupCreate = () => {
  const setDefaultValue = (datapoint) => {
    if (props.mode !== "create" || !("defaultValue" in datapoint)) return

    const defaultValue = typeof datapoint.defaultValue === "function"
      ? datapoint.defaultValue()
      : datapoint.defaultValue

    if(datapoint.key.includes(".")){
      const [parentKey, childKey] = datapoint.key.split(".")
      if (item.value[parentKey][childKey] === undefined) {
        item.value[parentKey][childKey] = defaultValue
      }
      return
    }

    if (item.value[datapoint.key] === undefined) {
      item.value[datapoint.key] = defaultValue
    }
  }

  dataType.templateColumns.forEach(datapoint => {
    if(datapoint.key.includes(".")){
      !item.value[datapoint.key.split(".")[0]] ? item.value[datapoint.key.split(".")[0]] = {} : null
    }

    setDefaultValue(datapoint)

    if(datapoint.inputType === "editor") {
      if(datapoint.key.includes(".")){
        item.value[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
      } else {
        item.value[datapoint.key] = {}
      }
    }
  })
}
setupCreate()

const setupQuery = () => {
  console.log("setupQuery")
  console.log(props.mode)
  if(props.mode === "create" && (route.query || props.createQuery)) {

    let data = !props.inModal ? route.query : props.createQuery

    Object.keys(data).forEach(key => {
      if (dataType.templateColumns.find(i => i.key === key)) {
        if (["customer", "contract", "plant", "contact", "project", "outgoingsepamandate", "bankaccount"].includes(key)) {
          item.value[key] = Number(data[key])
        } else {
          item.value[key] = data[key]
        }
      } else if (key === "resources") {
        /*item.value[key] = data[key]*/
        JSON.parse(data[key]).forEach(async (i) => {
          console.log(i)
          let type = i.substring(0, 1)
          let id = i.substring(2, i.length)
          console.log(type)
          console.log(id)
          let holder = ""
          if (type === "P") {
            holder = "profiles"
          } else if (type === "F") {
            holder = "vehicles"
            id = Number(id)
          } else if (type === "I") {
            holder = "inventoryitems"
            id = Number(id)
          } else if (type === "G") {
            holder = "inventoryitemgroups"
          }

          if (typeof item.value[holder] === "object") {
            item.value[holder].push(id)
          } else {
            item.value[holder] = [id]
          }
        })
      }
    })
    // calcSaveAllowed() -> Entfernt, da computed automatisch reagiert
  }
}
setupQuery()

const loadedOptions = ref({})

const normalizeSelectFieldValue = (value, isMultiple = false) => {
  if (isMultiple) {
    if (!Array.isArray(value)) return []

    return value.map((entry) => {
      if (entry && typeof entry === "object" && "id" in entry) {
        return entry.id
      }

      return entry
    })
  }

  if (value && typeof value === "object" && "id" in value) {
    return value.id
  }

  return value
}

const normalizeLoadedSelectValues = () => {
  dataType.templateColumns.forEach((datapoint) => {
    if (datapoint.inputType !== "select") return

    if (datapoint.key.includes(".")) {
      const [parentKey, childKey] = datapoint.key.split(".")
      if (!item.value[parentKey]) return

      item.value[parentKey][childKey] = normalizeSelectFieldValue(
        item.value[parentKey][childKey],
        datapoint.selectMultiple
      )
      return
    }

    item.value[datapoint.key] = normalizeSelectFieldValue(
      item.value[datapoint.key],
      datapoint.selectMultiple
    )
  })
}

const loadOptions = async () => {
  let optionsToLoad = dataType.templateColumns.filter(i => i.selectDataType).map(i => {
    return {
      option: i.selectDataType,
      key: i.key
    }
  })

  for await(const option of optionsToLoad) {
    if (option.option === "countrys") {
      loadedOptions.value[option.option] = await useEntities("countrys").selectSpecial()
    } else if (option.option === "units") {
      loadedOptions.value[option.option] = await useEntities("units").selectSpecial()
    } else {
      loadedOptions.value[option.option] = (await useEntities(option.option).select())

      if (dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter) {
        loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, item))
      }
    }
  }
}

normalizeLoadedSelectValues()

const initialProjecttype = props.type === "projects" ? item.value.projecttype : null
const lastAppliedProjecttype = ref(null)

const syncProjectPhasesForProjecttype = () => {
  if (props.type !== "projects") return
  if (!item.value?.projecttype) return
  if (!Array.isArray(loadedOptions.value.projecttypes) || !loadedOptions.value.projecttypes.length) return

  const projecttypeColumn = dataType.templateColumns.find((column) => column.key === "projecttype")
  if (!projecttypeColumn?.inputChangeFunction) return

  const shouldSyncOnCreate = props.mode === "create" && lastAppliedProjecttype.value !== item.value.projecttype
  const shouldSyncOnEdit = props.mode === "edit"
    && item.value.projecttype !== initialProjecttype
    && lastAppliedProjecttype.value !== item.value.projecttype

  if (!shouldSyncOnCreate && !shouldSyncOnEdit) return

  projecttypeColumn.inputChangeFunction(item.value, loadedOptions.value)
  lastAppliedProjecttype.value = item.value.projecttype
}

loadOptions().then(() => {
  syncProjectPhasesForProjecttype()
})

watch(
  () => [item.value?.projecttype, loadedOptions.value.projecttypes?.length || 0],
  () => {
    syncProjectPhasesForProjecttype()
  },
  { immediate: true }
)

const contentChanged = (content, datapoint) => {
  if (datapoint.key.includes(".")) {
    item.value[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
    item.value[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
    item.value[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
  } else {
    item.value[datapoint.key].html = content.html
    item.value[datapoint.key].text = content.text
    item.value[datapoint.key].json = content.json
  }
}

const getSelectItems = (datapoint) => {
  return datapoint.selectManualOptions || loadedOptions.value[datapoint.selectDataType] || []
}

const getSelectValueKey = (datapoint) => {
  return datapoint.selectValueAttribute || 'id'
}

const getSelectLabelKey = (datapoint) => {
  return datapoint.selectOptionAttribute || 'label'
}

const getSelectSearchInput = (datapoint) => {
  return datapoint.selectSearchAttributes ? { placeholder: 'Suche...' } : false
}

const triggerInputChange = (datapoint) => {
  if (datapoint.inputChangeFunction) {
    datapoint.inputChangeFunction(item.value, loadedOptions.value)
    if (datapoint.key === "projecttype") {
      lastAppliedProjecttype.value = item.value.projecttype
    }
  }
}

const getDatapointValue = (datapoint) => {
  if (datapoint.key.includes(".")) {
    const [parentKey, childKey] = datapoint.key.split(".")
    return item.value[parentKey]?.[childKey] || null
  }

  return item.value[datapoint.key] || null
}

const setDatapointValue = (datapoint, value) => {
  if (datapoint.key.includes(".")) {
    const [parentKey, childKey] = datapoint.key.split(".")
    if (!item.value[parentKey]) item.value[parentKey] = {}
    item.value[parentKey][childKey] = value
  } else {
    item.value[datapoint.key] = value
  }

  triggerInputChange(datapoint)
}

const getEntityModalCreateQuery = (datapoint) => {
  if (datapoint.entityModalCreateQueryFunction) {
    return datapoint.entityModalCreateQueryFunction(item.value)
  }

  return datapoint.entityModalCreateQuery || {}
}

const getPostSaveRoute = () => {
  if (type !== "events") return null

  if (route.query.returnTo === "plantafel") {
    return {
      path: "/organisation/plantafel",
      query: {
        date: route.query.returnDate || undefined,
        view: route.query.returnView || undefined
      }
    }
  }

  return null
}

const canArchiveItem = computed(() => {
  if (!item.value?.id) return false
  if (dataType.canArchiveFunction) return dataType.canArchiveFunction(item.value)
  return true
})

const telephonyExtensionTarget = computed(() => {
  if (!item.value?.id) return null

  if (type === "teams") {
    return {
      targetType: "team",
      targetId: item.value.id,
      displayName: item.value.name || "Team",
      title: "Telefonie",
      description: "Lege fest, unter welcher Nebenstelle dieses Team erreichbar ist."
    }
  }

  if (type === "branches") {
    return {
      targetType: "branch",
      targetId: item.value.id,
      displayName: item.value.name || "Niederlassung",
      title: "Telefonie",
      description: "Lege fest, unter welcher Nebenstelle diese Niederlassung erreichbar ist."
    }
  }

  return null
})

const createItem = async () => {
  let ret = null

  if (props.inModal) {
    ret = await useEntities(type).create(item.value, true)

  } else {
    const postSaveRoute = getPostSaveRoute()

    if (postSaveRoute) {
      ret = await useEntities(type).create(item.value, true)
      await router.push(postSaveRoute)
    } else {
      ret = await useEntities(type).create(item.value)//dataStore.createNewItem(type,item.value)
    }
  }

  emit('returnData', ret)
  modal.close()
}

const updateItem = async () => {
  let ret = null

  if (props.inModal) {
    ret = await useEntities(type).update(item.value.id, item.value, true)
    emit('returnData', ret)
    modal.close()
  } else {
    const postSaveRoute = getPostSaveRoute()

    if (postSaveRoute) {
      ret = await useEntities(type).update(item.value.id, item.value, true)
      await router.push(postSaveRoute)
    } else {
      ret = await useEntities(type).update(item.value.id, item.value)
    }
    emit('returnData', ret)
  }
}
</script>

<template>
  <UDashboardNavbar
      v-if="!props.inModal"
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #toggle>
      <div v-if="platform === 'mobile'"></div>
    </template>
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.back()"
      >
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="item"
          :class="['text-xl','font-medium', 'text-center']"
      >{{ item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
    </template>
    <template #right>
      <ArchiveButton
          color="error"
          v-if="platform !== 'mobile' && canArchiveItem"
          variant="outline"
          :type="type"
          @confirmed="useEntities(type).archive(item.id)"
      />
      <UButton
          v-if="item.id"
          @click="updateItem"
          :disabled="!saveAllowed"
      >
        Speichern
      </UButton>
      <UButton
          v-else
          @click="createItem"
          :disabled="!saveAllowed"
      >
        Erstellen
      </UButton>
      <UButton
          @click="router.push(item.id ? `/standardEntity/${type}/show/${item.id}` : `/standardEntity/${type}`)"
          color="red"
          class="ml-1"
      >
        Abbrechen
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardNavbar
      v-else
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #center>
      <h1
          v-if="item"
          :class="['text-xl','font-medium']"
      >{{ item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
    </template>
    <template #right>
      <UButton
          v-if="item.id"
          @click="updateItem"
          :disabled="!saveAllowed"
      >
        Speichern
      </UButton>
      <UButton
          v-else
          @click="createItem"
          :disabled="!saveAllowed"
      >
        Erstellen
      </UButton>
      <UButton
          @click="modal.close()"
          color="red"
          class="ml-2"
          icon="i-heroicons-x-mark"
          variant="outline"
      />
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <UForm
        class="p-5"
    >
      <div :class="platform ===  'mobile' ?['flex','flex-col'] : ['flex','flex-row']">
        <div
            v-for="(columnName,index) in dataType.inputColumns"
            :class="platform === 'mobile' ? ['w-full'] : [... index < inputColumnCount - 1 ? ['mr-5'] : []]"
            :style="getInputColumnStyle()"
        >
          <USeparator :label="columnName"/>

          <div
              v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
          >
            <UFormField
                v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
                :label="datapoint.label"
            >
              <template #help>
                <component
                    v-if="datapoint.helpComponent"
                    :is="datapoint.helpComponent"
                    :item="item"
                />
              </template>
              <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
                <UInput
                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-if="['text','number'].includes(datapoint.inputType)"
                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    :type="datapoint.inputType"
                    :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
                >
                  <template #trailing v-if="datapoint.inputTrailing">
                    <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
                  </template>
                </UInput>
                <USwitch
                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'bool'"
                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />
                <USelectMenu
                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @update:model-value="triggerInputChange(datapoint)"
                    v-else-if="datapoint.inputType === 'select'"
                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    :items="getSelectItems(datapoint)"
                    :label-key="getSelectLabelKey(datapoint)"
                    :value-key="getSelectValueKey(datapoint)"
                    :search-input="getSelectSearchInput(datapoint)"
                    :filter-fields="datapoint.selectSearchAttributes"
                    :multiple="datapoint.selectMultiple"
                >
                  <template #empty>
                    Keine Optionen verfügbar
                  </template>
                </USelectMenu>
                <UTextarea
                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'textarea'"
                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    rows="4"
                />
                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                  <UButton
                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                      variant="outline"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

                  />

                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    />
                  </template>
                </UPopover>
                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                  <UButton
                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                      variant="outline"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

                  />

                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                        mode="datetime"
                    />
                  </template>
                </UPopover>
                <BankAccountAssignInput
                    v-else-if="datapoint.inputType === 'bankaccountassign'"
                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />
                <Tiptap
                    v-else-if="datapoint.inputType === 'editor'"
                    @updateContent="(i) => contentChanged(i,datapoint)"
                    :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
                />

                <UButton
                    v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
                    @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
                    variant="outline"
                    color="white"
                    icon="i-heroicons-x-mark"
                />
                <EntityModalButtons
                    v-if="datapoint.entityModalButtonsType"
                    :type="datapoint.entityModalButtonsType"
                    :id="getDatapointValue(datapoint)"
                    :create-query="getEntityModalCreateQuery(datapoint)"
                    @return-data="(data) => setDatapointValue(datapoint, data.id)"
                />
              </InputGroup>
              <InputGroup class="w-full" v-else>
                <UInput
                    class="flex-auto"
                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-if="['text','number'].includes(datapoint.inputType)"
                    v-model="item[datapoint.key]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    :type="datapoint.inputType"
                    :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
                >
                  <template #trailing v-if="datapoint.inputTrailing">
                    {{ datapoint.inputTrailing }}
                  </template>
                </UInput>
                <USwitch
                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'bool'"
                    v-model="item[datapoint.key]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />
                <USelectMenu
                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @update:model-value="triggerInputChange(datapoint)"
                    v-else-if="datapoint.inputType === 'select'"
                    v-model="item[datapoint.key]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    :items="getSelectItems(datapoint)"
                    :label-key="getSelectLabelKey(datapoint)"
                    :value-key="getSelectValueKey(datapoint)"
                    :search-input="getSelectSearchInput(datapoint)"
                    :filter-fields="datapoint.selectSearchAttributes"
                    :multiple="datapoint.selectMultiple"
                >
                  <template #empty>
                    Keine Optionen verfügbar
                  </template>
                </USelectMenu>
                <UTextarea
                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                    class="flex-auto"
                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                    v-else-if="datapoint.inputType === 'textarea'"
                    v-model="item[datapoint.key]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    rows="4"
                />
                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
                  <UButton
                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                      variant="outline"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  />

                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                        v-model="item[datapoint.key]"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                    />
                  </template>
                </UPopover>
                <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
                  <UButton
                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                      icon="i-heroicons-calendar-days-20-solid"
                      :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                      variant="outline"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  />

                  <template #content>
                    <LazyDatePicker
                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                        v-model="item[datapoint.key]"
                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                        mode="datetime"
                    />
                  </template>
                </UPopover>
                <BankAccountAssignInput
                    v-else-if="datapoint.inputType === 'bankaccountassign'"
                    v-model="item[datapoint.key]"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />
                <Tiptap
                    v-else-if="datapoint.inputType === 'editor'"
                    @updateContent="(i) => contentChanged(i,datapoint)"
                    :preloadedContent="item[datapoint.key].html"
                />


                <MaterialComposing
                    v-else-if="datapoint.inputType === 'materialComposing'"
                    :item="item"
                />
                <PersonalComposing
                    v-else-if="datapoint.inputType === 'personalComposing'"
                    :item="item"
                />

                <UButton
                    v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
                    @click="item[datapoint.key] = null"
                    variant="outline"
                    color="white"
                    icon="i-heroicons-x-mark"
                />
                <EntityModalButtons
                    v-if="datapoint.entityModalButtonsType"
                    :type="datapoint.entityModalButtonsType"
                    :id="getDatapointValue(datapoint)"
                    :create-query="getEntityModalCreateQuery(datapoint)"
                    @return-data="(data) => setDatapointValue(datapoint, data.id)"
                />
              </InputGroup>
            </UFormField>
          </div>
        </div>
      </div>
      <UFormField
          v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
          :label="datapoint.label"
      >
        <template #help>
          <component
              v-if="datapoint.helpComponent"
              :is="datapoint.helpComponent"
              :item="item"
          />
        </template>
        <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
          <UInput
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-if="['text','number'].includes(datapoint.inputType)"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :type="datapoint.inputType"
              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
          >
            <template #trailing v-if="datapoint.inputTrailing">
              <span class="text-gray-500 dark:text-gray-400 text-xs">{{ datapoint.inputTrailing }}</span>
            </template>
          </UInput>
          <USwitch
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'primary'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'bool'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <USelectMenu
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @update:model-value="triggerInputChange(datapoint)"
              v-else-if="datapoint.inputType === 'select'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :items="getSelectItems(datapoint)"
              :label-key="getSelectLabelKey(datapoint)"
              :value-key="getSelectValueKey(datapoint)"
              :search-input="getSelectSearchInput(datapoint)"
              :filter-fields="datapoint.selectSearchAttributes"
              :multiple="datapoint.selectMultiple"
          >
            <template #empty>
              Keine Optionen verfügbar
            </template>
          </USelectMenu>
          <UTextarea
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'textarea'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              rows="4"
          />
          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

            />

            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
            </template>
          </UPopover>
          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

            />

            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  mode="datetime"
              />
            </template>
          </UPopover>
          <BankAccountAssignInput
              v-else-if="datapoint.inputType === 'bankaccountassign'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <Tiptap
              v-else-if="datapoint.inputType === 'editor'"
              @updateContent="(i) => contentChanged(i,datapoint)"
              :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
          />

          <UButton
              v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
              @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
              variant="outline"
              color="white"
              icon="i-heroicons-x-mark"
          />
          <EntityModalButtons
              v-if="datapoint.entityModalButtonsType"
              :type="datapoint.entityModalButtonsType"
              :id="getDatapointValue(datapoint)"
              :create-query="getEntityModalCreateQuery(datapoint)"
              @return-data="(data) => setDatapointValue(datapoint, data.id)"
          />
        </InputGroup>
        <InputGroup class="w-full" v-else>
          <UInput
              class="flex-auto"
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-if="['text','number'].includes(datapoint.inputType)"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :type="datapoint.inputType"
              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
          >
            <template #trailing v-if="datapoint.inputTrailing">
              {{ datapoint.inputTrailing }}
            </template>
          </UInput>
          <USwitch
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'primary'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'bool'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <USelectMenu
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @update:model-value="triggerInputChange(datapoint)"
              v-else-if="datapoint.inputType === 'select'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :items="getSelectItems(datapoint)"
              :label-key="getSelectLabelKey(datapoint)"
              :value-key="getSelectValueKey(datapoint)"
              :search-input="getSelectSearchInput(datapoint)"
              :filter-fields="datapoint.selectSearchAttributes"
              :multiple="datapoint.selectMultiple"
          >
            <template #empty>
              Keine Optionen verfügbar
            </template>
          </USelectMenu>
          <UTextarea
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'textarea'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              rows="4"
          />
          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
            />

            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
            </template>
          </UPopover>
          <UPopover :content="{ side: 'bottom', align: 'start' }" v-else-if="datapoint.inputType === 'datetime'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
            />

            <template #content>
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  mode="datetime"
              />
            </template>
          </UPopover>
          <BankAccountAssignInput
              v-else-if="datapoint.inputType === 'bankaccountassign'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <Tiptap
              v-else-if="datapoint.inputType === 'editor'"
              @updateContent="(i) => contentChanged(i,datapoint)"
              :preloadedContent="item[datapoint.key].html"
          />


          <MaterialComposing
              v-else-if="datapoint.inputType === 'materialComposing'"
              :item="item"
          />
          <PersonalComposing
              v-else-if="datapoint.inputType === 'personalComposing'"
              :item="item"
          />

          <UButton
              v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
              @click="item[datapoint.key] = null"
              variant="outline"
              color="white"
              icon="i-heroicons-x-mark"
          />
          <EntityModalButtons
              v-if="datapoint.entityModalButtonsType"
              :type="datapoint.entityModalButtonsType"
              :id="getDatapointValue(datapoint)"
              :create-query="getEntityModalCreateQuery(datapoint)"
              @return-data="(data) => setDatapointValue(datapoint, data.id)"
          />
        </InputGroup>
      </UFormField>
    </UForm>

    <TelephonyExtensionField
        v-if="telephonyExtensionTarget"
        class="mx-5 mb-5"
        :target-type="telephonyExtensionTarget.targetType"
        :target-id="telephonyExtensionTarget.targetId"
        :display-name="telephonyExtensionTarget.displayName"
        :title="telephonyExtensionTarget.title"
        :description="telephonyExtensionTarget.description"
    />
  </UDashboardPanelContent>
</template>

<style scoped>
td {
  border-bottom: 1px solid lightgrey;
  vertical-align: top;
  padding-bottom: 0.15em;
  padding-top: 0.15em;
}
</style>
