<script setup>
import SuperUserDashboardNavigation from "@/views/dashboards/superUserDashboard/SuperUserDashboardNavigation.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import CollectedOrderInvoicesPagination
  from "@/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue";
import PageTitle from "@/components/global/PageTitle.vue";
import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
import {ref} from "vue";
import OpenCustomerInvoicePagination
  from "@/components/displays/pagination/models/SuperUserDashboard/OpenCustomerInvoicePagination.vue";
import CollectedOrderInvoicesOverview
  from "@/views/dashboards/superUserDashboard/collectedOrderInvoices/CollectedOrderInvoicesOverview.vue";
import InvoiceOrdersPagination
  from "@/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue";

const tabs = ref([
  { name: 'Overblik', slot: 'overview', icon: 'fas fa-chart-pie', hidden: false },
  { name: SessionUser.objects.orders.meta.title, slot: 'transactions', icon: 'fas fa-shopping-cart', hidden: false },
  //{ name: 'Faktura pr. måned', slot: 'monthly', icon: 'fas fa-list', hidden: false },
  //{ name: 'Faktura pr. ordre', slot: 'orderly', icon: 'fas fa-check', hidden: false }
])
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <SuperUserDashboardNavigation />
    <PageTitle title="Fakturaer" subtitle="Her kan du se en liste over alle fakturaer i systemet" />
    <ElementTabsBox
        v-bind:tabs="tabs"
        default-active-tab="overview"
        class="is-boxed"
        :allowCompactWhenOneTab="true"
    >
      <template #overview>
        <CollectedOrderInvoicesOverview />
      </template>
      <template #transactions>
        <InvoiceOrdersPagination :auto-load="true" :invoice-view="true"/>
      </template>
      <!--
      <template #monthly>
        <OpenCustomerInvoicePagination :auto-load="true" :invoice-per-order="false" />
      </template>
      <template #orderly>
        <OpenCustomerInvoicePagination :auto-load="true" :invoice-per-order="true" />
      </template>
      -->

    </ElementTabsBox>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>