<script setup>
definePageMeta({
  middleware: "auth"
})

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

const showAddModal = ref(false)

const columns = [
  {
    key: "resourceType",
    label: "Typ"
  },{
    key: "prefix",
    label: "Prefix"
  },{
    key:"nextNumber",
    label:"Nächste Nummer"
  },{
    key: "suffix",
    label: "Suffix"
  }
]

const resources = {
  customers: {
    label: "Kunden"
  },
  vendors: {
    label: "Lieferanten"
  },
  products: {
    label: "Artikel"
  },
  spaces: {
    label: "Lagerplätze"
  },
  invoices: {
    label: "Rechnungen"
  }
}

const updateNumberRange = async (range) => {

  const {data,error} = await supabase
      .from("numberranges")
      .update(range)
      .eq('id',range.id)

  await dataStore.fetchNumberRanges()
}


</script>

<template>
  <UModal
    v-model="showAddModal"
  >

  </UModal>


  <UAlert
    title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge."
    color="rose"
    variant="outline"
    icon="i-heroicons-exclamation-triangle"
  />

  <UTable
    :rows="dataStore.numberRanges"
    :columns="columns"
  >
    <template #resourceType-data="{row}">
      {{resources[row.resourceType] ? resources[row.resourceType].label : ""}}
    </template>
    <template #prefix-data="{row}">
      <UInput
        v-model="row.prefix"
        @focusout="updateNumberRange(row)"
      />
    </template>
    <template #suffix-data="{row}">
      <UInput
        v-model="row.suffix"
        @focusout="updateNumberRange(row)"
      />
    </template>
    <template #nextNumber-data="{row}">
      <UInput
        v-model="row.nextNumber"
        @focusout="updateNumberRange(row)"
      />
    </template>
  </UTable>
  <DevOnly>
    {{dataStore.numberRanges}}
  </DevOnly>

</template>

<style scoped>

</style>