<script setup>

const dataStore = useDataStore()
const supabase = useSupabaseClient()

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

const setupPage = async () => {
  itemInfo.value = (await supabase.from("tenants").select().eq("id",dataStore.currentTenant).single()).data
  console.log(itemInfo.value)
}

const features = ref(dataStore.ownTenant.features)
const businessInfo = ref(dataStore.ownTenant.businessInfo)

const updateTenant = async (newData) => {
    const {data,error} = await supabase.from("tenants")
        .update(newData)
        .eq("id",dataStore.currentTenant)
        .select()

    if (error) console.log(error)
}

setupPage()
</script>

<template>
  <UDashboardNavbar title="Firmeneinstellungen">

  </UDashboardNavbar>
  <UTabs
      class="p-5"
    :items="[
        {
          label: 'Rechnung & Kontakt'
        },{
          label: 'Lizenz'
        },{
          label: 'Funktionen'
        },{
          label: 'Bankkonten'
        },{
          label: 'Projekte'
        }
    ]"
  >
    <template #item="{item}">
      <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>
      <div v-else-if="item.label === 'Projekte'">
        <UCard class="mt-5">
          <template #header>Projekttypen</template>
        </UCard>
      </div>
    </template>
  </UTabs>
</template>

<style scoped>

</style>