<template>
  <div id="main">

    <div
      class="previewDoc"
    >
      <embed
          v-if="currentDocument"
          :src="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"

      >

    </div>
    <div
      class="inputData"
    >
      <UFormGroup label="Lieferant:" required>
        <USelectMenu
          v-model="itemInfo.vendor"
          :options="dataStore.vendors"
          option-attribute="name"
          value-attribute="id"
          searchable
          :search-attributes="['name','vendorNumber']"
        >
          <template #label>
            {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
          </template>
        </USelectMenu>
      </UFormGroup>

      <UFormGroup
          class="mt-3"
          label="Rechnungsreferenz:"
          required
      >
        <UInput
          v-model="itemInfo.reference"
        />
      </UFormGroup>

      <InputGroup class="mt-3" gap="2">
        <UFormGroup label="Rechnungsdatum:" required>
          <UPopover :popper="{ placement: 'bottom-start' }">
            <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'" />

            <template #panel="{ close }">
              <LazyDatePicker v-model="itemInfo.date" @close="close" />
            </template>
          </UPopover>
        </UFormGroup>

        <UFormGroup label="Fälligkeitsdatum:" required>
          <UPopover :popper="{ placement: 'bottom-start' }">
            <UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'" />

            <template #panel="{ close }">
              <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
            </template>
          </UPopover>
        </UFormGroup>
      </InputGroup>



      <UFormGroup label="Beschreibung:" required>
        <UTextarea
          v-model="itemInfo.description"
        />
      </UFormGroup>

      <div
        class="my-3"
        v-for="(item,index) in itemInfo.accounts"
      >

        <UFormGroup
          label="Kategorie"
          class=" mb-3"
        >
          <USelectMenu
            :options="dataStore.accounts"
            option-attribute="label"
            value-attribute="id"
            searchable
            :search-attributes="['label']"
            searchable-placeholder="Suche..."
            v-model="item.account"
          >
            <template #label>
              {{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
            </template>

          </USelectMenu>
        </UFormGroup>

        <InputGroup>
          <UFormGroup
            label="Steuer"
            class="w-32"
            :help="`Betrag: ${String(item.amountTax).replace('.',',')} €`"
          >
            <USelectMenu
              :options="[19,7,0]"
              v-model="item.taxType"
            >
              <template #label>
                {{item.taxType}} %
              </template>
            </USelectMenu>
          </UFormGroup>
          <UFormGroup
            label="Gesamtbetrag exkl. Steuer in EUR"
            class="flex-auto"
            :help="`Betrag inkl. Steuern: ${String(Number(calculateWithTax(item)) + Number(item.amountNet)).replace('.',',')} €` "

          >
            <UInput
              type="number"
              step="0.01"
              v-model="item.amountNet"
            >
              <template #trailing>
                <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
              </template>
            </UInput>
          </UFormGroup>


        </InputGroup>

        <UButton
          class="mt-3"
          @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: null} , ...itemInfo.accounts.slice(index+1)]"
        >
          Position hinzufügen
        </UButton>
        <UButton
            v-if="index !== 0"
            class="mt-3"
            variant="ghost"
            color="rose"
            @click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
        >
          Position entfernen
        </UButton>
      </div>


<!--
      <UFormGroup label="Kategorie:" required>
        <USelectMenu
          :options="dataStore.accounts"
          option-attribute="label"
          value-attribute="number"
          searchable
          :search-attributes="['label']"
          v-model="itemInfo.account"
        >

        </USelectMenu>
      </UFormGroup>
      <UFormGroup label="Betrag:" required>
        <UInput
          type="number"
          step="0.01"
          v-model="itemInfo.amount"
        >
          <template #trailing>
            <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
          </template>
        </UInput>
      </UFormGroup>-->

      <InputGroup class="mt-3">
        <UButton
            @click="updateItem"
        >
          Speichern
        </UButton>
      </InputGroup>

      <DevOnly>
        {{itemInfo}}<br>
        {{currentVendorInvoice}}<br>
        {{currentDocument}}
      </DevOnly>


    </div>
  </div>
</template>

<script setup>
import InputGroup from "~/components/InputGroup.vue";
import dayjs from "dayjs";

const dataStore = useDataStore()
const supabase = useSupabaseClient()
const route = useRoute()
const toast = useToast()

const {vendors} = storeToRefs(useDataStore())
const {fetchVendorInvoices} = useDataStore()

let currentVendorInvoice = null
let currentDocument  = ref(null)
//Working
const mode = ref(route.params.mode || "show")

const types = [
  {
    number: "3200",
    label: "Wareneinkauf",
    description: "Der Einkauf von Produkten umfasst auch die Kosten für die Bearbeitung/Verarbeitung und den Handel"
  },{
    number: "3000",
    label: "Materialeinkauf",
    description: "Hierzu gehören sämtliche Kosten, die im Rahmen der Produktion für Roh, Hilfs- und Betriebsstoffe anfallen."
  },{
    number: "3800",
    label: "Bezugsnebenkosten",
    description: "Dazu zählen alle Beschaffungskosten für Material und Waren bzw. Produkte"
  },{
    number: "4930",
    label: "Bürobedarf",
    description: ""
  },{
    number: "4964",
    label: "Lizenzen und Konzessionen",
    description: ""
  },{
    number: "4925",
    label: "Internet",
    description: ""
  },{
    number: "4920",
    label: "Telekommunikation",
    description: ""
  },{
    number: "4530",
    label: "Kraftstoff/Ladestrom",
    description: ""
  },{
    number: "4969",
    label: "Müllgebühren",
    description: ""
  }
]




//Functions
const setupPage = async () => {
  if(mode.value === "show" || mode.value === "edit"){
    currentVendorInvoice = await dataStore.getVendorInvoiceById(Number(useRoute().params.id))
    currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.document)
  }

  if(mode.value === "edit") itemInfo.value = currentVendorInvoice
}





const itemInfo = ref({
  vendor: 0,
  reference: "",
  date:  null,
  dueDate: null,
  paymentType: "",
  description: "",
  state: "Entwurf",
  accounts: [
    {
      account: null,
      amountNet: null,
      amountTax: null,
      taxType: null
    }
  ]
})

const calculateWithTax = (item) => {
  item.amountTax = Number((item.amountNet / 100 *  Number(item.taxType)).toFixed(2))

  return item.amountTax
}


const updateItem = async () => {
  const {error} = await supabase
      .from("vendorInvoices")
      .update(itemInfo.value)
      .eq('id',itemInfo.value.id)
  if(error) {
    console.log(error)
  } else {
    mode.value = "show"
    /*itemInfo.value = {
      id: 0,
    }*/
    toast.add({title: "Eingangsrechnung erfolgreich gespeichert"})
    dataStore.fetchVendorInvoices()
  }
}



setupPage()
</script>

<style scoped>
#main {
  display: flex;
  flex-direction: row;
}

.previewDoc {
  min-width: 50vw;
  min-height: 80vh;
}

.previewDoc embed {
  width: 90%;
  height: 100%;
}

.inputData {
  max-width: 40vw;
}




.lineItemRow {
  display: flex;
  flex-direction: row;
}
</style>