<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 PageTitle from "@/components/global/PageTitle.vue";
import { useRouter } from "vue-router";
import {ref, watch} from 'vue';
import CollectedOrderInvoiceOrdersTable
  from "@/components/displays/superuser/tables/collectedOrderInvoiceOrdersTable.vue";
import CollectedOrderInvoiceOverview
  from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/collectedOrderInvoiceOverview.vue";
import CollectedOrderInvoiceManage
  from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/collectedOrderInvoiceManage.vue";
import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
import UserOtherSpecialArrangement
  from "@/views/dashboards/superUserDashboard/user/displays/other/UserOtherSpecialArrangement.vue";
import UserOtherVaskeabonnement
  from "@/views/dashboards/superUserDashboard/user/displays/other/UserOtherVaskeabonnement.vue";
import OrdersPagination from "@/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue";
import CollectedOrderInvoiceCustomerNotes
  from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/collectedOrderInvoiceCustomerNotes.vue";
import InvoiceOrdersPagination
  from "@/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue";

// Get the id from the URL
const router = useRouter();
const collectedOrderInvoiceId = router.currentRoute.value.params.collectedOrderInvoiceId;

// Define the reactive objects
const orders = ref([]);
const isLoading = ref(false);
const user = ref(null);

// Make the first letter uppercase
const title = SessionUser.objects.collectedOrderInvoices.meta.labels.single;
const firstLetter = title.charAt(0).toUpperCase();
const restOfTitle = title.slice(1);
const formattedTitle = firstLetter + restOfTitle;

// Get the collected order invoice
const collectedOrderInvoice = ref(null);
const getCollectedOrderInvoice = async () => {
  SessionUser.objects.collectedOrderInvoices.get.single(collectedOrderInvoiceId).then((response) => {
    const raw_data = response;
    console.log(raw_data);
    orders.value = raw_data.orders || [];
    user.value = raw_data.user;
    collectedOrderInvoice.value = raw_data;
    isLoading.value = false;
  }).catch((error) => {
    console.error(error);
    isLoading.value = false;
  });
};

// Get the collected order invoice
getCollectedOrderInvoice();

</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <SuperUserDashboardNavigation />
    <PageTitle
        :title="formattedTitle + ' #' + collectedOrderInvoiceId"
        subtitle="Her kan du se en faktura i systemet"
    />
    <NotFoundFallBackPageWrapper :exists="(collectedOrderInvoice !== null)" v-bind:isLoading="isLoading">
      <template v-slot:error>
        <p>Der findes ingen faktura med det angivne id</p>
      </template>
      <template v-slot:loading>
        <p>Henter faktura...</p>
      </template>
      <template v-slot:default>
        <!-- At A Glance -->
        <collected-order-invoice-overview
            v-bind:invoices="orders"
            v-bind:collectedOrderInvoice="collectedOrderInvoice"
            :total="0"
        />
        <!-- Special Arrangement -->
        <UserOtherSpecialArrangement :user_id="user.id" class="mb-2" v-if="user" :readOnly="true"/>
        <!-- Vaskeabonnement -->
        <UserOtherVaskeabonnement :user_id="user.id" class="mb-6" v-if="user" :readOnly="true"/>
        <!-- Customer notes -->
        <CollectedOrderInvoiceCustomerNotes :user_id="user.id" class="mb-2" v-if="user" :readOnly="true"/>
        <!-- Manage -->
        <CollectedOrderInvoiceManage
            :invoiceId="parseInt(collectedOrderInvoiceId)"
            v-bind:collectedOrderInvoice="collectedOrderInvoice"
        />
        <!-- Orders -->
        <InvoiceOrdersPagination :auto-load="true" :onlyFromInvoiceCollection="collectedOrderInvoiceId" :invoice-view="true" :apply-default-filters="false"/>
        <!-- <OrdersPagination :auto-load="true" :onlyFromInvoiceCollection="collectedOrderInvoiceId" /> -->
      </template>
    </NotFoundFallBackPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>