<script setup lang="ts">
import dayjs from "dayjs"
const exports = ref([])

const auth = useAuthStore()
const toast = useToast()

const setupPage = async () => {
  exports.value = await useNuxtApp().$api("/api/exports",{
    method: "GET"
  })
}

setupPage()

function downloadFile(row) {
  const a = document.createElement("a")
  a.href = row.url
  a.download = row.file_path.split("/").pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

const showCreateExportModal = ref(false)
const createExportData = ref({
  start_date: null,
  end_date: null,
  beraternr:null,
  mandantennr: null
})

const createExport = async () => {
  const res = await useNuxtApp().$api("/api/exports/datev",{
    method: "POST",
    body: createExportData.value
  })

  showCreateExportModal.value = false

  if(res.success) {
    toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."})
  } else {
    toast.add({title: "Es gab einen Fehler beim erstellen", color: "rose"})
  }

}


</script>

<template>
  <UDashboardNavbar
      title="Exporte"
  >
    <template #right>
      <UButton
          @click="showCreateExportModal = true"
      >+ Export</UButton>
    </template>
  </UDashboardNavbar>
  <UTable
      :rows="exports"
      :columns="[
        {
          key: 'created_at',
          label: 'Erstellt am',
        },{
          key: 'start_date',
          label: 'Start',
        },{
          key: 'end_date',
          label: 'Ende',
        },{
          key: 'valid_until',
          label: 'Gültig bis',
        },{
          key: 'type',
          label: 'Typ',
        },{
          key: 'download',
          label: 'Download',
        },
    ]"
  >
    <template #created_at-data="{row}">
      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
    </template>
    <template #start_date-data="{row}">
      {{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
    </template>
    <template #end_date-data="{row}">
      {{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
    </template>
    <template #valid_until-data="{row}">
      {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
    </template>
    <template #download-data="{row}">
      <UButton
          @click="downloadFile(row)"
      >
        Download
      </UButton>
    </template>
  </UTable>

  <UModal v-model="showCreateExportModal">
    <UCard>
      <template #header>
        Export erstellen
      </template>

      <UFormGroup
          label="Start:"
      >
        <UPopover :popper="{ placement: 'bottom-start' }">
          <UButton
              icon="i-heroicons-calendar-days-20-solid"
              :label="createExportData.start_date ? dayjs(createExportData.start_date).format('DD.MM.YYYY') : 'Datum auswählen'"
              variant="outline"
              class="mx-auto"
          />

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

      <UFormGroup
          label="Ende:"
      >
        <UPopover :popper="{ placement: 'bottom-start' }">
          <UButton
              icon="i-heroicons-calendar-days-20-solid"
              :label="createExportData.end_date ? dayjs(createExportData.end_date).format('DD.MM.YYYY') : 'Datum auswählen'"
              variant="outline"
              class="mx-auto"
          />

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

      <template #footer>
        <UButton
            @click="createExport"
        >
          Erstellen
        </UButton>
      </template>

    </UCard>
  </UModal>

</template>

<style scoped>

</style>
