<script setup>

const auth = useAuthStore()

const itemInfo = ref({
  features: {},
  businessInfo: {},
  projectTypes: []
})

const setupPage = async () => {
  itemInfo.value = auth.activeTenantData
  console.log(itemInfo.value)
}

const features = ref(auth.activeTenantData.features)
const businessInfo = ref(auth.activeTenantData.businessInfo)

const updateTenant = async (newData) => {

  const res = await useNuxtApp().$api(`/api/tenant/other/${auth.activeTenant}`, {
    method: "PUT",
    body: {
      data: newData,
    }
  })
}

setupPage()
</script>

<template>
  <UDashboardNavbar title="Firmeneinstellungen">

  </UDashboardNavbar>
  <UTabs
      class="p-5"
      :items="[
        {
          label: 'Dokubox'
        },{
          label: 'Rechnung & Kontakt'
        }
    ]"
  >
    <template #item="{item}">
      <div v-if="item.label === 'Dokubox'">
        <UAlert
            class="mt-5"
            title="DOKUBOX"
        >
          <template #description>
            <p>Die Dokubox ist eine E-Mail Inbox um deine Anhänge direkt als Dokumente zu importieren. Leite Deine E-Mails einfach an die folgende E-Mail Adresse weiter, diese ist für dein Unternehmen einzigartig. Die E-Mails werden dann alle 5 min abgerufen.</p>
            <br><br>
            <a
                v-if="itemInfo.id"
                :href="`mailto:${itemInfo.dokuboxkey}@fedeo-dokubox.de`"
            >
              {{itemInfo.dokuboxkey}}@fedeo-dokubox.de
            </a>
          </template>
        </UAlert>

      </div>
      <div v-if="item.label === 'Rechnung & Kontakt'">
        <UCard class="mt-5">
          <UForm class="w-1/2">
            <UFormGroup
                label="Firmenname:"
            >
              <UInput v-model="businessInfo.name"/>
            </UFormGroup>
            <UFormGroup
                label="Straße + Hausnummer:"
            >
              <UInput v-model="businessInfo.street"/>
            </UFormGroup>
            <UFormGroup
                label="PLZ + Ort"
                class="w-full"
            >
              <InputGroup class="w-full">
                <UInput v-model="businessInfo.zip"/>
                <UInput v-model="businessInfo.city" class="flex-auto"/>
              </InputGroup>
            </UFormGroup>
            <UButton
                class="mt-3"
                @click="updateTenant({businessInfo: businessInfo})"
            >
              Speichern
            </UButton>
          </UForm>
        </UCard>

      </div>
      <div v-else-if="item.label === 'Funktionen'">
        <UCard class="mt-5">
          <UAlert
              title="Funktionen ausblenden"
              description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen."
              color="rose"
              variant="outline"
              class="mb-5"
          />
          <UCheckbox
              label="Kalendar"
              v-model="features.calendar"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Kontakte"
              v-model="features.contacts"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Plantafel"
              v-model="features.planningBoard"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Zeiterfassung"
              v-model="features.timeTracking"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Anwesenheiten"
              v-model="features.workingTimeTracking"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Lager"
              v-model="features.inventory"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Fahrzeuge"
              v-model="features.vehicles"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Buchhaltung"
              v-model="features.accounting"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Projekte"
              v-model="features.projects"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Verträge"
              v-model="features.contracts"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Objekte"
              v-model="features.objects"
              @change="updateTenant({features: features})"
          />
        </UCard>
      </div>
    </template>
  </UTabs>
</template>

<style scoped>

</style>
