<script setup>
import InputGroup from "~/components/InputGroup.vue";
import dayjs from "dayjs";
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import {useSupabaseSelect} from "~/composables/useSupabase.js";

definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()
const toast = useToast()

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

const costcentres = ref([])

const setup = async () => {
  let filetype = (await supabase.from("filetags").select().eq("tenant",profileStore.currentTenant).eq("incomingDocumentType","invoices").single()).data.id
  console.log(filetype)

  costcentres.value = await useSupabaseSelect("costcentres")

  itemInfo.value = await useSupabaseSelectSingle("incominginvoices", route.params.id, "*, files(*)")
  await loadFile(itemInfo.value.files[itemInfo.value.files.length-1].id)

}

setup()

const useNetMode = ref(false)

const loadedFile = ref(null)
const loadFile = async (id) => {
  console.log(id)
  loadedFile.value = await useFiles().selectDocument(id)
  console.log(loadedFile.value)
}




const changeNetMode = (mode) => {
  useNetMode.value = mode

  itemInfo.value.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]
}




const taxOptions = ref([
  {
    label: "19% USt",
    percentage: 19,
    key: "19"
  },{
    label: "7% USt",
    percentage: 7,
    key: "7"
  },{
    label: "Innergemeintschaftlicher Erwerb 19%",
    percentage: 0,
    key: "19I"
  },{
    label: "Innergemeintschaftlicher Erwerb 7%",
    percentage: 0,
    key: "7I"
  },{
    label: "§13b UStG",
    percentage: 0,
    key: "13B"
  },{
    label: "Keine USt",
    percentage: 0,
    key: "null"
  },
])


const totalCalculated = computed(() => {
  let totalNet = 0
  let totalAmount19Tax = 0
  let totalAmount7Tax = 0
  let totalAmount0Tax = 0
  let totalGross = 0

  itemInfo.value.accounts.forEach(account => {
    if(account.amountNet) totalNet += account.amountNet

    if(account.taxType === "19" && account.amountTax) {
      totalAmount19Tax += account.amountTax
    }
  })

  totalGross = Number(totalNet + totalAmount19Tax)

  return {
    totalNet,
    totalAmount19Tax,
    totalGross
  }

})

const updateIncomingInvoice = async () => {

  let item = itemInfo.value
  delete item.files

  const data = await dataStore.updateItem('incominginvoices',item)
}


</script>

<template>
  <UDashboardNavbar :title="'Eingangsbeleg erstellen'">
    <template #right>
      <UButton
          @click="updateIncomingInvoice"
      >
        Speichern
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <div
        class="flex justify-between mt-5 workingContainer"
    >
      <object
          v-if="loadedFile"
          :data="loadedFile.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
          type="application/pdf"
          class="mx-5 documentPreview"
      />
      <div class="w-3/5 mx-5">



        <div class=" scrollContainer">
          <InputGroup class="mb-3">
            <UButton
                :variant="itemInfo.expense ? 'solid' : 'outline'"
                @click="itemInfo.expense = true"
            >
              Ausgabe
            </UButton>
            <UButton
                :variant="!itemInfo.expense ? 'solid' : 'outline'"
                @click="itemInfo.expense = false"
            >
              Einnahme
            </UButton>
          </InputGroup>

          <UFormGroup label="Lieferant:" >
            <InputGroup>
              <USelectMenu
                  v-model="itemInfo.vendor"
                  :options="dataStore.vendors"
                  option-attribute="name"
                  value-attribute="id"
                  searchable
                  :search-attributes="['name','vendorNumber']"
                  class="flex-auto"
                  searchable-placeholder="Suche..."
                  :color="!itemInfo.vendor ? 'rose' : 'primary'"
              >
                <template #option="{option}">
                  {{option.vendorNumber}} - {{option.name}}
                </template>
                <template #label>
                  {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
                </template>
              </USelectMenu>
              <UButton
                  @click="router.push('/standardEntity/vendors/create')"
              >
                + Lieferant
              </UButton>
            </InputGroup>


          </UFormGroup>

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

          <InputGroup class="mt-3" gap="2">
            <UFormGroup label="Rechnungsdatum:">
              <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'"
                    variant="outline"
                    :color="!itemInfo.date ? 'rose' : 'primary'"
                />

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

            <UFormGroup label="Fälligkeitsdatum:">
              <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'"
                    variant="outline"
                />

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



          <UFormGroup label="Zahlart:" >
            <USelectMenu
                :options="['Einzug','Kreditkarte','Überweisung','Sonstiges']"
                v-model="itemInfo.paymentType"
            />
          </UFormGroup>

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

          <InputGroup class="my-3">
            <UButton
              :variant="!useNetMode ? 'solid' : 'outline'"
              @click="changeNetMode(false)"
            >
              Brutto
            </UButton>
            <UButton
              :variant="useNetMode ? 'solid' : 'outline'"
              @click="changeNetMode(true)"
            >
              Netto
            </UButton>



<!--            Brutto
            <UToggle
                v-model="useNetMode"
                @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]"
            />
            Netto-->
          </InputGroup>

          <table v-if="itemInfo.accounts.length > 1" class="w-full">
            <tr>
              <td>Gesamt exkl. Steuer: </td>
              <td class="text-right">{{totalCalculated.totalNet.toFixed(2).replace(".",",")}} €</td>
            </tr>
            <tr>
              <td>19% Steuer: </td>
              <td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2).replace(".",",")}} €</td>
            </tr>
            <tr>
              <td>Gesamt inkl. Steuer: </td>
              <td class="text-right">{{totalCalculated.totalGross.toFixed(2).replace(".",",")}} €</td>
            </tr>
          </table>

          <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"
                  :color="!item.account ? 'rose' : 'primary'"
              >
                <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>
            <UFormGroup
                label="Kostenstelle"
                class="w-full mb-3"
            >
              <InputGroup class="w-full">
                <USelectMenu
                    :options="costcentres"
                    option-attribute="name"
                    value-attribute="id"
                    searchable
                    :search-attributes="['label']"
                    searchable-placeholder="Suche..."
                    v-model="item.costCentre"
                    class="flex-auto"
                >
                  <template #label>
                    {{costcentres.find(i => i.id === item.costCentre) ? costcentres.find(i => i.id === item.costCentre).name : "Keine Kostenstelle ausgewählt" }}
                  </template>
                  <template #option="{option}">
                    <span v-if="option.vehicle">Fahrzeug - {{option.name}}</span>
                    <span v-else-if="option.project">Projekt - {{option.name}}</span>
                    <span v-else-if="option.inventoryitem">Inventarartikel - {{option.name}}</span>
                    <span v-else>{{option.name}}</span>
                  </template>

                </USelectMenu>
                <UButton
                    variant="outline"
                    color="rose"
                    v-if="item.costCentre"
                    icon="i-heroicons-x-mark"
                    @click="item.costCentre = null"
                />
              </InputGroup>
            </UFormGroup>



            <InputGroup>
              <UFormGroup
                  v-if="useNetMode"
                  label="Gesamtbetrag exkl. Steuer in EUR"
                  class="flex-auto truncate"
                  :help="item.taxType !== null ? `Betrag inkl. Steuern: ${String(Number(item.amountNet + item.amountTax).toFixed(2)).replace('.',',')} €` : 'Zuerst Steuertyp festlegen' "

              >
                <UInput
                    type="number"
                    step="0.01"
                    v-model="item.amountNet"
                    :color="!item.amountNet ? 'rose' : 'primary'"
                    :disabled="item.taxType === null"
                    @keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
                            item.amountGross = Number(item.amountNet) + NUmber(item.amountTax)"
                >
                  <template #trailing>
                    <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
                  </template>
                </UInput>
              </UFormGroup>
              <UFormGroup
                  v-else
                  label="Gesamtbetrag inkl. Steuer in EUR"
                  class="flex-auto"
                  :help="item.taxType !== null ? `Betrag exkl. Steuern: ${item.amountNet ? String(item.amountNet.toFixed(2)).replace('.',',') : '0,00'} €` : 'Zuerst Steuertyp festlegen' "

              >
                <UInput
                    type="number"
                    step="0.01"
                    :disabled="item.taxType === null"
                    v-model="item.amountGross"
                    :color="!item.amountGross ? 'rose' : 'primary'"
                    :ui-menu="{ width: 'min-w-max' }"
                    @keyup="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
                  item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
                >
                  <template #trailing>
                    <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
                  </template>
                </UInput>

              </UFormGroup>
              <UFormGroup
                  label="Umsatzsteuer"
                  class="w-32"
                  :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
              >
                <USelectMenu
                    :options="taxOptions"
                    v-model="item.taxType"
                    value-attribute="key"
                    :ui-menu="{ width: 'min-w-max' }"
                    option-attribute="label"
                    @change="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
                    item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
                >
                  <template #label>
                    <span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
                  </template>
                </USelectMenu>
              </UFormGroup>
            </InputGroup>


            <UButton
                class="mt-3"
                @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: '19'} , ...itemInfo.accounts.slice(index+1)]"
            >
              Betrag aufteilen
            </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>

        </div>
      </div>
    </div>
  </UDashboardPanelContent>




</template>

<style scoped>
.documentPreview {
  aspect-ratio: 1 / 1.414;
  height: 80vh;
}



.scrollContainer {
  overflow-y: scroll;
  padding-left: 1em;
  padding-right: 1em;
  height: 75vh;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollContainer::-webkit-scrollbar {
  display: none;
}


.lineItemRow {
  display: flex;
  flex-direction: row;
}

.workingContainer {
  height: 80vh;
}
</style>