<script setup>
import dayjs from "dayjs"
const dataStore = useDataStore()
const user = useSupabaseUser()

const tabItems = [
  {
    label: "Editor"
  },
  {
    label: "Vorschau"
  }
]

const itemInfo = ref({
  customer: 13,
  contact: 8,
  address: {
    street: null,
    special: null,
    zip: null,
    city: null,
  },
  project: 6,
  documentNumber: "RE23-1409",
  documentDate: "10.01.2024",
  deliveryDate: "10.01.2024",
  dateOfPerformance: null,
  createdBy: user.value.id,
  title: "TITEL",
  description: "BESCHREIBUNG",
  startText: "Sehr geehrte Frau Sindern,\n" +
      "wir bedanken uns für Ihr entgegengebrachtes Vertrauen und Ihren Auftrag und stellen Ihnen\n" +
      "folgende Positionen in Rechnung: ",
  endText: "Bitte überweisen Sie den Rechnungsbetrag unter Angabe der Rechnungsnummer im Verwendungszweck innerhalb von 10 Tagen auf das unten angegebene Konto. Wir bedanken uns für das entgegengebrachte Vertrauen und freuen uns auf eine weitere gute Zusammenarbeit.",
  rows: [
    {
      id: 1,
      pos: 1,
      mode: "free",
      text: "FahrtkostenFahrtkostenFahrtkostenFahrtkosten",
      quantity: 204,
      unit: 3,
      price: 0.80,
      taxPercent: 19,
      discountPercent: 0
    },
    {
      id: 2,
      pos: 2,
      mode: "free",
      text: "Test",
      quantity: 1,
      unit: 1,
      price: 10,
      taxPercent: 19,
      discountPercent: 0
    }
  ]
})

const getRowAmount = (row) => {
  return String(Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) /100) ).toFixed(2)).replace('.',',')
}

const addPosition = (mode) => {

  let lastId = 0
  itemInfo.value.rows.forEach(row => {
    if(row.id > lastId) lastId = row.id
  })

  if(mode === 'free'){
    itemInfo.value.rows.push({
      id: lastId +1,
      mode: "free",
      text: "",
      quantity: 1,
      unit: 1,
      price: 0,
      taxPercent: 19,
      discountPercent: 0
    })
  } else if(mode === 'normal'){
    itemInfo.value.rows.push({
      id: lastId +1,
      mode: "normal",
      quantity: 1,
      price: 0,
      taxPercent: 19,
      discountPercent: 0
    })
  } else if(mode === "pagebreak") {
    itemInfo.value.rows.push({
      id: lastId +1,
      mode: "pagebreak",
    })
  }

  setPosNumbers()


}

const removePosition = (id) => {
  let rows = itemInfo.value.rows.filter(row => row.id !== id)
  /*rows = rows.sort((a,b) => a.pos - b.pos)

  rows.forEach((row,index) => {
    rows[index] = {...row, pos: index + 1}
  })*/

  itemInfo.value.rows = rows
  setPosNumbers()


}

const documentTotal = computed(() => {
  let totalNet = 0
  let total19 = 0
  let totalGross = 0

  itemInfo.value.rows.forEach(row => {
    if(row.mode === 'free' || row.mode === 'normal'){
      let rowPrice = Number(Number(row.quantity) * Number(row.price)).toFixed(2)
      totalNet += Number(rowPrice)

      if(row.taxPercent === 19) {
        total19 += Number(rowPrice * 0.19)
      }
    }
  })


  return {
    totalNet: `${String(totalNet.toFixed(2)).replace(".",",")} €`,
    total19: `${String(total19.toFixed(2)).replace(".",",")} €`,
    totalGross: `${String(Number(totalNet + total19).toFixed(2)).replace(".",",")} €`
  }



})

const getDocumentData = () => {

  let customerData = dataStore.getCustomerById(itemInfo.value.customer)
  let contactData = dataStore.getContactById(itemInfo.value.contact)
  let userData = dataStore.getProfileById(user.value.id)




  let rows = itemInfo.value.rows.map(row => {

    let unit = dataStore.units.find(i => i.id === row.unit)

    if(row.mode === 'free' || row.mode === 'normal') {
      if(row.mode === 'normal') row.text = dataStore.getProductById(row.product).name

      return {
        ...row,
        rowAmount: `${getRowAmount(row)} €`,
        quantity: String(row.quantity).replace(".",","),
        unit: unit.short,
        pos: String(row.pos),
        price: `${String(row.price.toFixed(2)).replace(".",",")} €`,
        discountText: `(Rabatt: ${row.discountPercent} %)`
      }
    } else {
      return row
    }





  })

  const returnData = {

    recipient: {
      name: customerData.name,
      contact: `${contactData.firstName} ${contactData.lastName}`,
      street: customerData.infoData.street,
      special: "",
      city: customerData.infoData.city,
      zip: customerData.infoData.zip
    },
    info: {
      customerNumber: customerData.customerNumber,
      documentNumber: itemInfo.value.documentNumber,
      documentDate: dayjs(itemInfo.value.documentDate, 'DD.MM.YYYY').format("DD.MM.YYYY"),
      deliveryDate: dayjs(itemInfo.value.deliveryDate, 'DD.MM.YYYY').format("DD.MM.YYYY"),
      contactPerson: userData.fullName ||"",
      contactTel: userData.mobileTel ||"",
      contactEMail: userData.email,
      project: dataStore.getProjectById(itemInfo.value.project).name
    },
    title: itemInfo.value.title,
    description: itemInfo.value.description,
    endText: itemInfo.value.endText,
    startText: itemInfo.value.startText,
    rows: rows,
    total: documentTotal.value
  }

  console.log(returnData)

  return returnData
}


const showDocument = ref(false)
const uri = ref("")
const generateDocument = async () => {
  uri.value = await useCreatePdf(getDocumentData())
  //alert(uri.value)
  showDocument.value = true

}

const onChangeTab = (index) => {
  if(index === 1) {
    generateDocument()
  }
}

const setPosNumbers = () => {
  let index = 1
  let rows = itemInfo.value.rows.map(row => {
    if(row.mode === 'free' ||row.mode === 'normal') {
      row.pos = index
      index += 1
    }
    return row
  })
}



</script>

<template>
<!--  <UButton
    @click="createPdf"
  >TEST</UButton>-->
    <UCard class="h-fit">
      <UTabs :items="tabItems" @change="onChangeTab">
        <template #item="{item}">
          <div v-if="item.label === 'Editor'">
            <InputGroup>
              <div class="flex-auto mr-5">
                <UFormGroup
                    label="Kunde:"
                >
                  <USelectMenu
                      :options="dataStore.customers"
                      option-attribute="name"
                      value-attribute="id"
                      :search-attributes="['name']"
                      searchable
                      searchable-placeholder="Suche..."
                      v-model="itemInfo.customer"

                  >
                    <template #label>
                      {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt"}}
                    </template>
                  </USelectMenu>
                </UFormGroup>
                <UFormGroup
                    label="Ansprechpartner:"
                >
                  <USelectMenu
                      :options="dataStore.getContactsByCustomerId(itemInfo.customer)"
                      option-attribute="fullName"
                      value-attribute="id"
                      :search-attributes="['name']"
                      searchable
                      searchable-placeholder="Suche..."
                      v-model="itemInfo.contact"
                  >
                    <template #label>
                      {{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Kontakt ausgewählt"}}
                    </template>
                  </USelectMenu>
                </UFormGroup>

                <UFormGroup
                    label="Adresse:"
                >
                  <UInput
                      v-model="itemInfo.address.street"
                      :placeholder="dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).infoData.street : 'Straße + Hausnummer'"
                  />
                  <UInput
                      v-model="itemInfo.address.special"
                      class="mt-3"
                      :placeholder="dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).infoData.special : 'Adresszusatz'"

                  />
                  <InputGroup class="mt-3">
                    <UInput
                        class="flex-auto"
                        v-model="itemInfo.address.zip"
                        :placeholder="dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).infoData.zip : 'PLZ'"
                    />
                    <UInput
                        class="flex-auto"
                        v-model="itemInfo.address.city"
                        :placeholder="dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).infoData.city : 'Ort'"

                    />
                  </InputGroup>
                </UFormGroup>


              </div>
              <div class="flex-auto">
                <UFormGroup
                    label="Rechnungsnummer:"
                >
                  <UInput
                      v-model="itemInfo.documentNumber"
                  />
                </UFormGroup>
                <UFormGroup
                    label="Datum:"
                >
                  <UInput
                      v-model="itemInfo.documentDate"
                  />
                </UFormGroup>
                <UFormGroup
                    label="Lieferdatum:"
                >
                  <UInput
                      v-model="itemInfo.deliveryDate"
                  />
                </UFormGroup>
                <UFormGroup
                    label="Ansprechpartner:"
                >
                  <UInput

                  />
                </UFormGroup>
                <UFormGroup
                    label="Kontakt Telefon:"
                >
                  <UInput

                  />
                </UFormGroup>
                <UFormGroup
                    label="Kontakt E-Mail:"
                >
                  <UInput

                  />
                </UFormGroup><UFormGroup
                    label="Kontakt E-Mail:"
                >
                  <UInput

                  />
                </UFormGroup>
                <UFormGroup
                    label="Projekt:"
                >
                  <USelectMenu
                    :options="dataStore.projects"
                    v-model="itemInfo.project"
                    value-attribute="id"
                    option-attribute="name"
                    searchable
                    searchable-placeholder="Suche..."
                    :search-attributes="['name']"
                  >
                    <template #label>
                      {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
                    </template>
                    <template #option="{option: project}">
                      {{dataStore.getCustomerById(project.customer).name}} - {{project.name}}
                    </template>
                  </USelectMenu>
                </UFormGroup>

              </div>
            </InputGroup>

            <UDivider
                class="my-3"
            />

            <UFormGroup
                label="Titel:"
            >
              <UInput v-model="itemInfo.title"/>
            </UFormGroup>
            <UFormGroup
                label="Beschreibung:"
                class="mt-3"
            >
              <UInput v-model="itemInfo.description"/>
            </UFormGroup>

            <UDivider
                class="my-3"
            />

            <UFormGroup
                label="Einleitung:"
            >
              <UTextarea
                v-model="itemInfo.startText"
              />
            </UFormGroup>

            <UDivider
                class="my-3"
            />

            <table class="w-full">
              <thead>
              <tr>
                <th></th>
                <th>Pos.</th>
                <th>Produkt / Leistung</th>
                <th>Menge</th>
                <th>Einheit</th>
                <th>Preis</th>
                <th>Steuer</th>
                <th>Rabatt</th>
                <th>Gesamt</th>
              </tr>
              </thead>


              <draggable
                  v-model="itemInfo.rows"
                  handle=".handle"
                  tag="tbody"
                  itemKey="pos"
                  @end="setPosNumbers"
              >
                <template #item="{element: row}">
                  <tr

                  >
                    <td>
                      <UIcon
                        class="handle"
                        name="i-mdi-menu"
                      />
                    </td>
                    <td
                        v-if="row.mode === 'pagebreak'"
                        colspan="8"
                    >
                      <UDivider/>
                    </td>
                    <td
                        v-if="row.mode === 'free' || row.mode === 'normal'"
                    >{{row.pos}}</td>
                    <td
                        class="w-120"
                        v-if="row.mode === 'free'"
                    >
                      <UInput
                          v-model="row.text"
                          maxlength="40"
                          placeholder="Name"
                      />
                    </td>
                    <td
                        class="w-120"
                        v-else-if="row.mode === 'normal'"
                    >
                      <USelectMenu
                          :options="dataStore.products"
                          option-attribute="name"
                          value-attribute="id"
                          searchable
                          searchable-placeholder="Suche ..."
                          :search-attributes="['name']"
                          v-model="row.product"
                          @change="row.unit = dataStore.getProductById(row.product).unit,
                             row.price = dataStore.getProductById(row.product).sellingPrice || 0"
                      >
                        <template #label>
                          {{dataStore.getProductById(row.product) ?dataStore.getProductById(row.product).name : "Kein Produkt ausgewählt" }}
                        </template>
                      </USelectMenu>
                    </td>
                    <td
                        class="w-20"
                        v-if="row.mode === 'free' || row.mode === 'normal'"
                    >
                      <UInput
                          v-model="row.quantity"
                          type="number"
                          :step="dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).step : '1' "

                      />
                    </td>
                    <td
                        class="w-40"
                        v-if="row.mode === 'free' || row.mode === 'normal'"
                    >
                      <USelectMenu
                          v-model="row.unit"
                          :options="dataStore.units"
                          option-attribute="name"
                          value-attribute="id"
                      >
                        <template #label>
                          {{dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).name : "Keine Einheit gewählt"}}
                        </template>
                      </USelectMenu>
                    </td>
                    <td
                        v-if="row.mode === 'free' || row.mode === 'normal'"
                    >
                      <UInput
                          v-model="row.price"
                          type="number"
                          step="0.01"
                      >
                        <template #trailing>
                          <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
                        </template>
                      </UInput>
                    </td>
                    <td
                        class="w-40"
                        v-if="row.mode === 'free' || row.mode === 'normal'"

                    >
                      <USelectMenu
                          :options="['19','7','0']"
                          v-model="row.taxPercent"
                      >
                        <template #option="{option}">
                          {{option}} %
                        </template>
                        <template #label>
                          {{row.taxPercent}} %
                        </template>
                      </USelectMenu>

                    </td>
                    <td
                        class="w-40"
                        v-if="row.mode === 'free' || row.mode === 'normal'"
                    >
                      <UInput
                          v-model="row.discountPercent"
                          type="number"
                          step="0.01"
                          placeholder="0"
                      >
                        <template #trailing>
                          <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                        </template>
                      </UInput>
                    </td>
                    <td
                        v-if="row.mode === 'free' || row.mode === 'normal'"
                    >
                      <div class="text-right font-bold">{{getRowAmount(row)}} €</div>
                    </td>
                    <td>
                      <UButton
                          variant="ghost"
                          color="rose"
                          icon="i-heroicons-x-mark-16-solid"
                          @click="removePosition(row.id)"
                      />
                    </td>
                  </tr>
                </template>
              </draggable>



<!--              <template v-for="row in itemInfo.rows">
                <tr

                >
                  <td
                      v-if="row.mode === 'pagebreak'"
                      colspan="8"
                  >
                    <UDivider/>
                  </td>
                  <td
                      rowspan="2"
                      v-if="row.mode === 'free' || row.mode === 'normal'"
                  >{{row.pos}}</td>
                  <td
                      class="w-120"
                      v-if="row.mode === 'free'"
                  >
                    <UInput
                        v-model="row.text"
                        maxlength="40"
                        placeholder="Name"
                    />
                  </td>
                  <td
                      class="w-120"
                      v-else-if="row.mode === 'normal'"
                  >
                    <USelectMenu
                        :options="dataStore.products"
                        option-attribute="name"
                        value-attribute="id"
                        searchable
                        searchable-placeholder="Suche ..."
                        :search-attributes="['name']"
                        v-model="row.product"
                        @change="row.unit = dataStore.getProductById(row.product).unit,
                             row.price = dataStore.getProductById(row.product).sellingPrice || 0"
                    >
                      <template #label>
                        {{dataStore.getProductById(row.product) ?dataStore.getProductById(row.product).name : "Kein Produkt ausgewählt" }}
                      </template>
                    </USelectMenu>
                  </td>
                  <td
                      class="w-20"
                      v-if="row.mode === 'free' || row.mode === 'normal'"
                  >
                    <UInput
                        v-model="row.quantity"
                        type="number"
                        :step="dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).step : '1' "

                    />
                  </td>
                  <td
                      class="w-40"
                      v-if="row.mode === 'free' || row.mode === 'normal'"
                  >
                    <USelectMenu
                        v-model="row.unit"
                        :options="dataStore.units"
                        option-attribute="name"
                        value-attribute="id"
                    >
                      <template #label>
                        {{dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).name : "Keine Einheit gewählt"}}
                      </template>
                    </USelectMenu>
                  </td>
                  <td
                      v-if="row.mode === 'free' || row.mode === 'normal'"
                  >
                    <UInput
                        v-model="row.price"
                        type="number"
                        step="0.01"
                    >
                      <template #trailing>
                        <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
                      </template>
                    </UInput>
                  </td>
                  <td
                      class="w-40"
                      v-if="row.mode === 'free' || row.mode === 'normal'"

                  >
                    <USelectMenu
                        :options="['19','7','0']"
                        v-model="row.taxPercent"
                    >
                      <template #option="{option}">
                        {{option}} %
                      </template>
                      <template #label>
                        {{row.taxPercent}} %
                      </template>
                    </USelectMenu>
                    &lt;!&ndash;                  <UInput
                                          v-model="row.taxPercent"
                                      >
                                        <template #trailing>
                                          <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                                        </template>
                                      </UInput>&ndash;&gt;
                  </td>
                  <td
                      class="w-40"
                      v-if="row.mode === 'free' || row.mode === 'normal'"
                  >
                    <UInput
                        v-model="row.discountPercent"
                        type="number"
                        step="0.01"
                        placeholder="0"
                    >
                      <template #trailing>
                        <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
                      </template>
                    </UInput>
                  </td>
                  <td
                      v-if="row.mode === 'free' || row.mode === 'normal'"
                      rowspan="2"
                  >
                    <div class="text-right font-bold">{{getRowAmount(row)}} €</div>
                  </td>
                  <td rowspan="2">
                    <UButton
                        variant="ghost"
                        color="rose"
                        icon="i-heroicons-x-mark-16-solid"
                        @click="removePosition(row.pos)"
                    />
                  </td>
                </tr>
                <tr>
                  <td colspan="6">
                    <UTextarea
                      v-model="row.description"
                      placeholder="Beschreibung"
                    />
                  </td>
                </tr>
              </template>-->

            </table>



            <table>
              <tr>
                <td class="font-bold">Netto:</td>
                <td>{{documentTotal.totalNet}}</td>
              </tr>
              <tr>
                <td class="font-bold">zzgl. 19 % USt:</td>
                <td>{{documentTotal.total19}}</td>
              </tr>
              <tr>
                <td class="font-bold">Brutto:</td>
                <td>{{documentTotal.totalGross}}</td>
              </tr>
            </table>





            <InputGroup>
              <UButton
                  @click="addPosition('normal')"
                  class="mt-3"
              >
                + Artikelposition
              </UButton>
              <UButton
                  @click="addPosition('free')"
                  class="mt-3"
              >
                + Freitextposition
              </UButton>
              <UButton
                  @click="addPosition('pagebreak')"
                  class="mt-3"
              >
                + Seitenumbruch
              </UButton>
            </InputGroup>



            <UDivider
                class="my-3"
            />

            <UFormGroup
                label="Nachbemerkung:"
            >
              <UTextarea
                v-model="itemInfo.endText"
              />
            </UFormGroup>
          </div>
          <div v-else-if="item.label === 'Vorschau'">
<!--            <UButton
              @click="generateDocument"
            >
              Show
            </UButton>-->

            <object
                :data="uri"
                v-if="showDocument"
                type="application/pdf"
                class="w-full previewDocument"
              />
          </div>
        </template>
      </UTabs>


    </UCard>


</template>

<style scoped>


th {
  text-align: left;
}

td {
  padding: .4em;
}

/*tr:hover {
  border: 1px solid #69c350;
}*/

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