<script setup>

import dayjs from "dayjs";

let unpaidInvoicesSum = ref(0)
let unpaidInvoicesCount = ref(0)
let unpaidOverdueInvoicesSum = ref(0)
let unpaidOverdueInvoicesCount = ref(0)
let draftInvoicesSum = ref(0)
let draftInvoicesCount = ref(0)

let countPreparedOpenIncomingInvoices = ref(0)

const setupPage = async () => {
  let items = (await useEntities("createddocuments").select("*, statementallocations(*), customer(id,name), linkedDocument(*)")).filter(i => !i.archived)
  let documents = items.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")

  let draftDocuments = documents.filter(i => i.state === "Entwurf")
  let finalizedDocuments = documents.filter(i => useSum().isOpenCreatedDocument(i, items))



  finalizedDocuments.forEach(i => {
    if(dayjs().subtract(i.paymentDays,"days").isAfter(i.documentDate)) {
      unpaidOverdueInvoicesSum.value += useSum().getCreatedDocumentOpenAmount(i, items)
      unpaidOverdueInvoicesCount.value += 1
    } else {
      unpaidInvoicesSum.value += useSum().getCreatedDocumentOpenAmount(i, items)
      unpaidInvoicesCount.value += 1
    }
  })
  //unpaidInvoicesCount.value = finalizedDocuments.length

  draftDocuments.forEach(i => {
    draftInvoicesSum.value +=  useSum().getCreatedDocumentOpenAmount(i, items)
  })
  draftInvoicesCount.value = draftDocuments.length

  countPreparedOpenIncomingInvoices.value = (await useEntities("incominginvoices").select("id, state")).filter(i => i.state === "Vorbereitet" && !i.archived).length
}

setupPage()

</script>

<template>
  <div class="space-y-3">
    <div class="balance-row">
      <p class="balance-label">Offene Rechnungen</p>
      <div
        v-if="unpaidInvoicesSum > 0"
        class="balance-value text-orange-500"
      >
        <span>{{ unpaidInvoicesCount }} Stk</span>
        <span>{{ useCurrency(unpaidInvoicesSum) }}</span>
      </div>
      <div v-else class="balance-value text-primary-500">
        <span>0 Stk</span>
        <span>0,00€</span>
      </div>
    </div>

    <div class="balance-row">
      <p class="balance-label">Überfällige Rechnungen</p>
      <div
        v-if="unpaidOverdueInvoicesSum !== 0"
        class="balance-value text-rose-600"
      >
        <span>{{ unpaidOverdueInvoicesCount }} Stk</span>
        <span>{{ useCurrency(unpaidOverdueInvoicesSum) }}</span>
      </div>
      <div v-else class="balance-value text-primary-500">
        <span>0 Stk</span>
        <span>0,00€</span>
      </div>
    </div>

    <div class="balance-row">
      <p class="balance-label">Angelegte Rechnungsentwürfe</p>
      <div
        v-if="draftInvoicesSum > 0"
        class="balance-value text-orange-500"
      >
        <span>{{ draftInvoicesCount }} Stk</span>
        <span>{{ useCurrency(draftInvoicesSum) }}</span>
      </div>
      <div v-else class="balance-value text-primary-500">
        <span>0 Stk</span>
        <span>0,00€</span>
      </div>
    </div>

    <div class="balance-row">
      <p class="balance-label">Vorbereitete Eingangsrechnungen</p>
      <div
        v-if="countPreparedOpenIncomingInvoices > 0"
        class="balance-value text-orange-500"
      >
        <span>{{ countPreparedOpenIncomingInvoices }} Stk</span>
      </div>
      <div v-else class="balance-value text-primary-500">
        <span>0 Stk</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.balance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}

.balance-label {
  margin: 0;
  line-height: 1.35;
  color: rgb(55 65 81);
}

.balance-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

:deep(.dark) .balance-label {
  color: rgb(209 213 219);
}
</style>
