<script setup>

import DepartmentDashboardHero from "@/views/dashboards/departmentDashboard/DepartmentDashboardHero.vue";
import PosDepartmentMVP from "@/components/displays/department/pos/PosDepartmentMVP.vue";
import DepartmentPosNavigation from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosNavigation.vue";
import { useRouter } from "vue-router";
import {onMounted, ref, watch} from "vue";
import { selectCustomer, setOrderId, customer_name, deleteOrder, showDeleteOrderDialog, invoiceAllOrdersIndividually, invoiceUsingStripe, setProductsCategory, order_items, customer_id, invoiceCollectionId } from "@/components/shop/POSDepartmentProcess.vue";
import { getOrder, editOrderNotes } from "@/components/shop/Orders.vue";
import { getOrderItems } from "@/components/shop/OrdersItems.vue";
import { showEditOrderNotesForm } from "@/components/forms/superUser/editOrderNotesForm.vue";
import OrderItemsTable from "@/components/displays/department/pos/order/orderItemsTable.vue";
import PosOrderItemsCurrent from "@/components/displays/department/pos/PosOrderItemsCurrent.vue";
import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
import ExportOrderToDraftButton from "@/components/search/economic/exportOrderToDraftButton.vue";
import ExportOrderToInvoiceButton from "@/components/search/economic/exportOrderToInvoiceButton.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { Colors } from '@/ThemeConfig.vue'

import RemoveOrderDraftInvoiceButton from "@/components/search/economic/removeOrderDraftInvoiceButton.vue";
const router = useRouter();
import { getDepartmentName, getDepartments } from "@/components/pagination/departmentTabs.vue";
import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
import PosDepartmentStep2 from "@/components/displays/department/pos/steps/PosDepartmentStep2.vue";
import SelectProductsFormPOS from "@/components/forms/department/pos/SelectProductsFormPOS.vue";
import GetOrderInvoicePDFButton from "@/components/search/economic/getOrderInvoicePDFButton.vue";
import ExportOrderToInvoiceStripeButton from "@/components/search/economic/exportOrderToInvoiceStripeButton.vue";
import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
import ShowErrorField from "@/components/global/ShowErrorField.vue";
import PrintInvoiceFromOrderItems from "@/components/forms/department/pos/buttons/PrintInvoiceFromOrderItems.vue";
import ColorIndicator from "@/components/displays/buttons/ColorIndicator.vue";
import MyOrder from "@/views/dashboards/userDashboard/orders/MyOrder.vue";

// Get the id from the route
const orderId = ref(router.currentRoute.value.params.orderId);
const isLoading = ref(true);
const order = ref([]);
const customer = ref([]);
const cashier = ref([]);
const economicModule = ref([]);
const stripeModule = ref([]);
const AddOrderItemsVisible = ref(false);
const draftInvoice = ref([]);
const errors = ref([]);
const closed_at = ref(null);
const doesOrderExist = ref(false);

const loadOrder = async () => {
  isLoading.value = true;
  const response = await getOrder(orderId.value, true) .catch((error) => {
    isLoading.value = false;
    return null;
  });
  order.value = response.data.data;
  order_items.value = response.data.includes.orderItems; // Get the order items
  customer.value = response.data.includes.customer; // Get the customer
  cashier.value = response.data.includes.cashier; // Get the cashier
  economicModule.value = response.data.includes.economicModuleOrders; // Get the economic module orders
  stripeModule.value = response.data.includes.stripeModuleOrders; // Get the stripe module orders
  closed_at.value = response.data.data.closed_at;
  isLoading.value = false;
  setOrderId(orderId.value);
  selectCustomer(customer.value.economic_customer);
  if (response.data.data.id) {
    doesOrderExist.value = true;
  }
  if (economicModule.value.invoice_draft_id) {
    try {
      draftInvoice.value = await SessionUser.adminUser.invoices.draft.get(economicModule.value.invoice_draft_id).then((response) => {
        console.log(response);
      })
          .catch((error) => {
            // Set the error "draftInvoice" to the error message
            errors.value['draftInvoice'] = error;
          });
    } catch (error) {
      console.error(error);
    }
  }
};


const isInvoicedWithStripe = () => {
  // If the stripe module is anything else than an empty object, then the order is invoiced
  if (Object.keys(stripeModule.value).length !== 0) {
    return true;
  }
};

const isInvoicedWithEconomic = () => {
  // If the economic module is anything else than an empty object, then the order is invoiced
  return !!(economicModule.value.invoice_id || economicModule.value.invoice_draft_id);

};

const loadOrderItems = async () => {
  const response = await getOrderItems(orderId.value);
  order_items.value = response.data.data;
};

const showAddOrderItemsDisplay = (show) => {
  if (show) {
    setProductsCategory(null);
  }
  AddOrderItemsVisible.value = show;
};

const openStripeInvoice = () => {
  window.open(stripeModule.value.url, '_blank');
};

const getStripeInvoiceStatus = () => {
  console.log(stripeModule.value.status);
  switch (stripeModule.value.status) {
    case 'open':
      return 'Ikke betalt';
    case 'paid':
      return 'Betalt';
    case 'uncollectible':
      return 'Ikke inddrivbar';
    case 'void':
      return 'Opkrævning annulleret (void)';
    case 'pending':
      return 'Afventer';
    case 'deleted':
      return 'Slettet';
    default:
      return 'Ukendt';
  }
};

const isStripeInvoicePaid = () => {
  return stripeModule.value.paid;
};

// Load the order, when the page is loaded
loadOrder();

const forceAllowEdit = ref(false);

// Make sure the order isn't invoiced, and the user has permission to edit the order items
const isEditPossible = () => {
  if (forceAllowEdit.value) {
    return true;
  }
  return !isInvoicedWithEconomic() && !isInvoicedWithStripe() && SessionUser.hasPermission('edit_order_items') && !closed_at.value;
};

const isInvoiced = () => {
  return isInvoicedWithEconomic() || isInvoicedWithStripe();
};

const isBookedWithEconomic = () => {
  return economicModule.value.invoice_id !== null;
};

const isCompleted = () => {
  return order.value.completed_at !== null;
};

const isPaymentMethodStripe = ref(() => {
  return customer_id.value === 999;
});

const invoiceCollection = ref(null);
const getInvoiceCollection = async () => {
  if (!invoiceCollectionId.value) {
    return;
  }
  const response = await SessionUser.objects.collectedOrderInvoices.get.single(invoiceCollectionId.value);
  invoiceCollection.value = response;
}
const isPaymentCollectionLoaded = ref(() => {
  return invoiceCollection.value !== null;
});

const getInvoiceCollectionValue = () => {
  return invoiceCollection.value;
};

watch(() => invoiceCollectionId.value, async () => {
  await getInvoiceCollection();
});

const getStripePaymentStatus = () => {
  let result = {
    color_class: 'has-text-dark',
    text: 'Ikke betalt',
    classes: [],
    amount: null,
    amount_capturable: null,
    amount_received: null,
    tax_percentage: null
  }
  if (!invoiceCollection.value) {
    result.text = SessionUser.objects.global.language.loading
    return result;
  }
  let tmp_amounts = {
    amount: (getInvoiceCollectionValue().stripe.amount ?? null),
    amount_capturable: (getInvoiceCollectionValue().stripe.amount_capturable ?? null),
    amount_received: (getInvoiceCollectionValue().stripe.amount_received ?? null),
    tax_percentage: parseInt((getInvoiceCollectionValue().stripe.metadata.tax_percentage) ?? null),
  };
  function isNotNull(value) {
    return value !== null;
  }
  function isPaid() {
    return (
        tmp_amounts.amount === tmp_amounts.amount_received &&
        tmp_amounts.amount_capturable === 0 &&
        isNotNull(tmp_amounts.amount) &&
        isNotNull(tmp_amounts.amount_received)
    );
  }
  function isPartiallyPaid() {
    return (
        tmp_amounts.amount > tmp_amounts.amount_received &&
        tmp_amounts.amount_capturable > 0 &&
        isNotNull(tmp_amounts.amount) &&
        isNotNull(tmp_amounts.amount_received)
    );
  }
  function isNotPaid() {
    return (
        tmp_amounts.amount > 0 &&
        tmp_amounts.amount_received === 0 &&
        tmp_amounts.amount_capturable > 0 &&
        isNotNull(tmp_amounts.amount) &&
        isNotNull(tmp_amounts.amount_received)
    );
  }

  if (isPaid()) {
    result.color_class = 'has-text-success';
    result.text = 'Betalt';
  } else if (isPartiallyPaid()) {
    result.color_class = 'has-text-warning';
    result.text = 'Delvist betalt';
  } else if (isNotPaid()) {
    result.color_class = 'has-text-danger';
    result.text = 'Ikke betalt';
  }
  else {
    result.color_class = 'has-text-dark';
    result.text = 'Ukendt';
  }

  // Add the amounts to the result
  result = {
    ...result,
    amount: tmp_amounts.amount,
    amount_capturable: tmp_amounts.amount_capturable,
    amount_received: tmp_amounts.amount_received,
    tax_percentage: tmp_amounts.tax_percentage,
  };
  return result;
};

const isShowingPrintReceipt = ref(false);

getDepartments();


const openPrintDialog = () => {
  isShowingPrintReceipt.value = true;
  // Use the window.print() function to open the print dialog
  setTimeout(() => {
    window.print();
    isShowingPrintReceipt.value = false;
  }, 500);
};
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
    <DepartmentDashboardPageWrapper
      v-show="!isShowingPrintReceipt"
      title="Kassesystem"
      subtitle="Transaktion"
      >
    <notFoundFallBackPageWrapper
        v-bind:exists="doesOrderExist || isLoading"
        error="Denne handel findes ikke, eller du har ikke adgang til at se den.">
    <div class="columns">
      <div class="column is-8-desktop" v-if="AddOrderItemsVisible">
        <SelectProductsFormPOS class="mt-3" category="products" />
      </div>

      <div class="column" :class="{'is-8-desktop': !AddOrderItemsVisible, 'is-4-desktop': AddOrderItemsVisible}">
        <WhiteBox class="">
        <PosOrderItemsCurrent :orderItems="order_items" :orderId="orderId" :loadOrderItems="loadOrderItems" :editPossible="isEditPossible()">
          <!-- Default slot -->
          <div slot="default">
            <div v-if="isLoading">
              <div class="tag is-dark is-skeleton"><span>Loading...</span></div>
            </div>
            <div v-else-if="isInvoicedWithStripe()">
              <div class="tag is-success" v-if="isStripeInvoicePaid()"> Betalt </div>
              <div class="tag is-warning" v-else> {{ getStripeInvoiceStatus() }} </div>
            </div>
            <div v-else-if="isPaymentMethodStripe()">
              <div class="tag">
                <ColorIndicator
                    v-bind:label="getStripePaymentStatus()"
                    v-bind:color_class="getStripePaymentStatus().color_class"
                    v-bind:is_loading="!isPaymentCollectionLoaded()"
                    v-bind:dropdown_content="{
                      title: 'Betalings status',
                      content: [
                        {
                          text: 'Betalings status',
                          action: () => {},
                          classes: ['has-text-grey'],
                          button: true,
                          button_classes: ['no-underline-text', 'is-text', ...[getStripePaymentStatus().color_class]],
                          v_centered: true,
                          button_text: getStripePaymentStatus().text,
                        },
                        ...(getStripePaymentStatus().amount_received > 0 ? [
                          {
                            text: 'Beløb modtaget',
                            action: () => {},
                            classes: ['has-text-grey'],
                            button: true,
                            button_classes: ['no-underline-text', 'has-text-grey', 'is-text'],
                            v_centered: true,
                            button_text: SessionUser.functions.currency.toLocal(getStripePaymentStatus().amount_received / 100),
                          },
                        ] : []),
                        ...(getStripePaymentStatus().amount_capturable > 0 ? [
                            {
                              text: 'Beløb reserveret',
                              action: () => {},
                              classes: ['has-text-grey'],
                              button: true,
                              button_classes: ['no-underline-text', 'is-text', ...[(getStripePaymentStatus().amount_capturable <= 0 ? 'has-text-grey' : 'has-text-warning')]],
                              v_centered: true,
                              button_text: SessionUser.functions.currency.toLocal(getStripePaymentStatus().amount_capturable / 100),
                            },
                        ] : []),
                        ...(getStripePaymentStatus().amount - getStripePaymentStatus().amount_received > 0 ? [
                            {
                              text: 'Skyldig beløb',
                              action: () => {},
                              classes: ['has-text-grey'],
                              button: true,
                              button_classes: ['no-underline-text', 'is-text', ...[(getStripePaymentStatus().amount - getStripePaymentStatus().amount_received) <= 0 ? 'has-text-grey' : 'has-text-danger']],
                              v_centered: true,
                              button_text: SessionUser.functions.currency.toLocal(getStripePaymentStatus().amount / 100 - getStripePaymentStatus().amount_received / 100),
                            },
                        ] : []),
                        ...(getStripePaymentStatus().tax_percentage > 0 ? [
                            {
                              text: 'Moms',
                              action: () => {},
                              classes: ['has-text-grey'],
                              button: true,
                              button_classes: ['no-underline-text', 'is-text', ...[(getStripePaymentStatus().tax_percentage <= 0 ? 'has-text-grey' : 'has-text-warning')]],
                              v_centered: true,
                              button_text: getStripePaymentStatus().tax_percentage + '%',
                            },
                        ] : []),
                      ]
                    }"
                />
              </div>
            </div>
            <div v-else-if="economicModule.invoice_id">
              <div class="tag is-dark"> Faktura {{ economicModule.invoice_id }} </div>
            </div>
            <div v-else-if="economicModule.invoice_draft_id">
              <div class="tag is-danger" v-if="errors.draftInvoice">
                <span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
                <span> Kladde {{ economicModule.invoice_draft_id }}</span>
              </div>
              <div class="tag is-warning" v-else> Kladde {{ economicModule.invoice_draft_id }} </div>
            </div>
            <div v-else-if="invoiceAllOrdersIndividually()">
              <div class="tag is-warning"> Ikke faktureret </div>
            </div>
            <div v-else-if="!isCompleted()">
              <div class="tag is-warning">
                <span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
                <span> Ikke fuldført </span>
              </div>
            </div>
            <div v-else>
              <div class="tag is-dark"> Gemt til fakturering #{{ order.invoice_collection_id }} </div>
            </div>
          </div>
          <!-- Heading center slot -->
          <template #headingcenter>
            <span class="has-text-grey" v-if="!AddOrderItemsVisible"> &nbsp;-&nbsp; Overblik til gennemlæsning</span>
          </template>
          <!-- Before items slot -->
          <template #beforeItems>
            <tr>
              <td colspan="3">
                <!-- Error messages, if any -->
                <div v-if="errors.draftInvoice && !economicModule.invoice_id"
                     class="message is-danger">
                  <div class="message-body">
                    <p>Faktura kladden kunne ikke hentes fra e-conomic.</p>
                    <p>Tjek venligst om kladde fakturaen eksisterer i e-conomic.</p>
                  </div>
                </div>
                <!-- Department, register and cashier -->
                <div class="tags">
                <span class="tag is-dark">Afdeling: {{ getDepartmentName(parseInt(order.department_id)) }}</span>
                <span class="tag is-dark">Oprettet: {{ order.created_at }}</span>
                </div>
              </td>
            </tr>
          </template>
          <!-- Bottom slot -->
          <template #bottom>
            <div style="width: 100%;">
                <label class="label"> Nummerplader </label>
                <!-- Reg 1-3 -->
                <div class="field is-grouped is-grouped-multiline">
                  <div class="control">
                    <div class="tags has-addons is-clickable" @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_1', order.reg_1, 'Reg 1', loadOrder)">
                      <span class="tag is-dark">Reg 1</span>
                      <span class="tag is-darker">{{ order.reg_1 }}</span>
                    </div>
                  </div>
                  <div class="control">
                    <div class="tags has-addons is-clickable" @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_2', order.reg_2, 'Reg 2', loadOrder)">
                      <span class="tag is-dark">Reg 2</span>
                      <span class="tag is-darker">{{ order.reg_2 }}</span>
                    </div>
                  </div>
                  <div class="control">
                    <div class="tags has-addons is-clickable" @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_3', order.reg_3, 'Reg 3', loadOrder)">
                      <span class="tag is-dark">Reg 3</span>
                      <span class="tag is-darker">{{ order.reg_3 }}</span>
                    </div>
                  </div>
                </div>
                <!-- Reference -->
                <div class="field">
                  <label class="label">Reference</label>
                  <div class="control">
                    <input class="input has-text-danger" type="text" v-model="order.reference" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reference', order.reference, 'Reference', loadOrder)">
                  </div>
                </div>
                <!-- Ordre noter -->
                <div class="field is-fullwidth">
                  <label class="label">Ordre note (Sendes til kunden øverst på faktura)</label>
                  <div class="control">
                    <textarea class="textarea" v-model="order.notes" readonly v-if="!isInvoiced()" @click="showEditOrderNotesForm(order.id, order.notes).then(() => loadOrder())"></textarea>
                    <textarea class="textarea" v-else disabled>{{ order.notes }}</textarea>
                    <button class="button is-dark is-fullwidth mt-3" @click="showEditOrderNotesForm(order.id, order.notes).then(() => loadOrder())" v-if="!isInvoiced()">Rediger note</button>
                    <button class="button is-dark is-fullwidth mt-3" v-else disabled>Rediger note</button>
                  </div>
                </div>
            </div>
          </template>
          <!-- Other slot -->
          <template #other>
            <!-- Super user actions -->
            <span v-if="SessionUser.canAccessSuperUser()" class="buttons">
              <!-- Delete order button -->
              <button class="button is-danger is-inverted" @click="showDeleteOrderDialog" v-if="(!isInvoiced() || SessionUser.canAccessSuperUser())">
                <span class="icon"><i class="fas fa-trash"></i></span>
                <span>Slet ordre</span>
              </button>
              <!-- Force allow edit button -->
              <button class="button is-danger is-inverted" @click="forceAllowEdit = !forceAllowEdit" v-if="!isInvoiced()">
                <span class="icon"><i class="fas fa-lock-open"></i></span>
                <span v-if="!isEditPossible()">Gennemtving redigeringsret</span>
                <span v-else>Fjern tvungen redigeringsret</span>
              </button>
            </span>
          </template>
          <!-- Details slot -->
          <template #details>
            <div style="width: 100%;">
              <!-- Department -->
              <div class="field">
                <label class="label">Afdeling ID</label>
                <div class="control">
                  <input class="input is-clickable" type="text" v-model="order.department_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'department_id', order.department_id, 'Afdeling (ID)', loadOrder)">
                </div>
              </div>
              <!-- Reference -->
              <div class="field">
                <label class="label">Reference</label>
                <div class="control">
                  <input class="input is-clickable" type="text" v-model="order.reference" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reference', order.reference, 'Reference', loadOrder)">
                </div>
              </div>
              <!-- Køretøjer -->
              <div class="divider">Køretøjer</div>
              <div class="columns">
                <div class="column is-4">
                  <!-- Reg 1 -->
                  <div class="field">
                    <label class="label">Reg 1</label>
                    <div class="control">
                      <input class="input is-clickable" type="text" v-model="order.reg_1" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_1', order.reg_1, 'Reg 1', loadOrder)">
                    </div>
                  </div>
                </div>
                <!-- Reg 2 -->
                <div class="column is-4">
                  <div class="field">
                    <label class="label">Reg 2</label>
                    <div class="control">
                      <input class="input is-clickable" type="text" v-model="order.reg_2" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_2', order.reg_2, 'Reg 2', loadOrder)">
                    </div>
                  </div>
                </div>
                <!-- Reg 3 -->
                <div class="column is-4">
                  <div class="field">
                    <label class="label">Reg 3</label>
                    <div class="control">
                      <input class="input is-clickable" type="text" v-model="order.reg_3" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_3', order.reg_3, 'Reg 3', loadOrder)">
                    </div>
                  </div>
                </div>
              </div>
              <!-- Customer -->
              <div class="field">
                <label class="label">
                  <span
                      class="icon is-clickable"
                      v-if="SessionUser.canAccessSuperUser()"
                      @click="SessionUser.functions.redirectTo.superUser('/users/' + order.customer_id,true)"
                  >
                    <i class="fas fa-user"></i>
                  </span>
                  <span>Kunde</span>
                </label>
                <div class="control">
                  <input class="input is-clickable" type="text" v-model="order.customer_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'customer_id', order.customer_id, 'Kunde', loadOrder)">
                </div>
              </div>
              <!-- Invoice collection -->
              <div class="field">
                <label class="label">
                  <span
                      class="icon is-clickable"
                      v-if="SessionUser.canAccessSuperUser()"
                      @click="SessionUser.functions.redirectTo.superUser('/invoices/' + order.invoice_collection_id,true)"
                  >
                    <i class="fas fa-file-invoice"></i>
                  </span>
                  <span>{{SessionUser.objects.global.language.invoice}}</span>
                </label>
                <div class="control">
                  <input class="input is-clickable" type="text" v-model="order.invoice_collection_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'invoice_collection_id', order.invoice_collection_id, 'Faktura samling', loadOrder)">
                </div>
              </div>
              <!-- Booking (if any) -->
              <div class="field" v-if="order.booking_id">
                <label class="label">Booking</label>
                <div class="message" :class="order.booking_id ? 'is-success' : 'is-danger'">
                  <div class="message-body">
                      <div
                          class="is-clickable"
                          @click="SessionUser.functions.redirectTo.department(
                            order.department_id,
                            'modules/bookings/' + order.booking_id)"
                          >
                        <p>
                          Tilknyttet booking ID: {{ order.booking_id }}
                        </p>
                        <p>
                          <strong>Tryk for at gå til booking</strong>
                        </p>
                      </div>
                  </div>
                </div>
                <div class="control">
                  <input class="input is-clickable" type="text" v-model="order.booking_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'booking_id', order.booking_id, 'Booking', loadOrder)">
                </div>
              </div>
            </div>
          </template>
          <!-- Bottom order items slot -->
          <template #bottom-order-items>
            <tr v-if="!isInvoiced() && !AddOrderItemsVisible && isEditPossible()">
              <td colspan="3">
                <div class="button is-text is-small"
                     @click="showAddOrderItemsDisplay(true)"
                     style="text-decoration-line: none;">
                  <span class="icon"><i class="fas fa-plus"></i></span>
                  <span>Tilføj flere produkter</span>
                </div>
              </td>
            </tr>
          </template>
        </PosOrderItemsCurrent>
        </WhiteBox>
        <!-- Go back button: If the user is currently adding order items -->
        <div class="buttons mt-4" v-if="AddOrderItemsVisible">
          <button class="button is-dark is-fullwidth" @click="showAddOrderItemsDisplay(false)" v-if="AddOrderItemsVisible">
            <span class="icon"><i class="fas fa-arrow-left"></i></span>
            <span>Tilbage</span>
          </button>
        </div>
      </div>
      <div class="column is-4-desktop" v-if="!AddOrderItemsVisible">
        <WhiteBox class="p-0">
          <PosSelectedCustomer/>
        </WhiteBox>
        <ButtonsBox>
          <!-- Economic module actions -->
          <!--<ExportOrderToDraftButton :order_id="orderId" class="is-fullwidth" v-if="!isInvoiced() && invoiceAllOrdersIndividually() && !invoiceUsingStripe()" /> -->
          <getOrderInvoicePDFButton :invoice_id="economicModule.invoice_id" class="is-fullwidth" v-if="isBookedWithEconomic()" />
          <!-- If the order is invoiced with Stripe, then show a button to get the invoice -->
          <ExportOrderToInvoiceStripeButton :order_id="orderId" class="is-fullwidth" v-if="!isInvoiced() && invoiceUsingStripe()" />
          <button class="button is-dark is-fullwidth" @click="openStripeInvoice" v-if="isInvoicedWithStripe()">
            <span class="icon"><i class="fas fa-file-invoice"></i></span>
            <span>Hent faktura</span>
          </button>
          <!-- Complete order button -->
          <button
              class="button is-success is-fullwidth"
              @click="SessionUser.objects.orders.functions.mark_as_completed(orderId) && loadOrder()"
              v-if="!isCompleted()"
          >
            <span class="icon"><i class="fas fa-check"></i></span>
            <span>Fuldfør ordre</span>
          </button>
          <!-- Print invoice button -->
          <button class="button is-dark is-fullwidth" @click="isShowingPrintReceipt = !isShowingPrintReceipt; openPrintDialog()" v-if="isPaymentMethodStripe()">
            <span class="icon"><i class="fas fa-print"></i></span>
            <span>Print kvittering</span>
          </button>
        </ButtonsBox>
        <div class="buttons">
          <!-- Export order to draft button : If the order is not invoiced, and a draft invoice does not exist -->
          <!-- Export order to invoice button : If the order is not invoiced, and the user has chosen to invoice all orders individually -->
          <!-- <ExportOrderToInvoiceButton :order_id="orderId" class="is-fullwidth" v-else-if="!economicModule.invoice_id && invoiceAllOrdersIndividually()" /> -->
          <!-- Remove order draft invoice button : Allow the user to remove the draft invoice, to be able to make changes to the order -->
          <!-- Deactivated, on request at Roskilde: <RemoveOrderDraftInvoiceButton :order_id="orderId" class="is-fullwidth" v-if="economicModule.invoice_draft_id && !economicModule.invoice_id" /> -->
          <!-- Export the order to invoice with Stripe -->
          <!-- <ExportOrderToInvoiceStripeButton :order_id="orderId" class="is-fullwidth" v-if="!isInvoiced() && invoiceUsingStripe()" /> -->
          <!-- If the order is invoiced with Stripe, then show a button to get the invoice -->
          <!--<button class="button is-dark is-fullwidth" @click="openStripeInvoice" v-if="isInvoicedWithStripe()">
            <span class="icon"><i class="fas fa-file-invoice"></i></span>
            <span>Hent faktura</span>
          </button> -->
        </div>
      </div>
    </div>

      <!-- Test -->

    </notFoundFallBackPageWrapper>
    </DepartmentDashboardPageWrapper>
    <div v-if="isShowingPrintReceipt">
      <!-- Image -->
      <div class="has-text-centered py-6 keep-bg-during-print" :style="{'background-color': Colors.menus.parentBackgroundColor}">
        <img src="@/assets/branding/truckwash-banner-white-compressed.png" alt="Truck Wash Logo" style="max-width: 100%; max-height: 200px;"/>
      </div>
      <!-- Order details -->
      <div class="box">
        <div class="columns is-mobile is-multiline">
          <!-- Order information -->
          <div class="column is-half">
            <div class="content">
              <h3 class="title is-4">Transaktions information</h3>
              <p><strong>Transaktions ID:</strong> {{ orderId }}</p>
              <p><strong>Faktura ID:</strong> {{ getInvoiceCollectionValue().id }}</p>
              <p><strong>Oprettet:</strong> {{ order.created_at }}</p>
              <p><strong>Afdeling:</strong> {{ getDepartmentName(order.department_id)}}</p>
            </div>
          </div>
          <!-- Customer information -->
          <div class="column is-half">
            <div class="content has-text-right">
              <h3 class="title is-4">Kunde information</h3>
              <p><strong>Kunde:</strong> {{ customer_name }}</p>
            </div>
          </div>
        </div>
        <!-- Vehicle information -->
        <div class="column is-12 pt-0">
          <div class="divider">Køretøjer</div>
          <div class="columns has-text-centered">
            <div class="column" v-if="order.reg_1">
              <p><strong>Reg. 1:</strong> {{ order.reg_1 }}</p>
            </div>
            <div class="column" v-if="order.reg_2">
              <p><strong>Reg. 2:</strong> {{ order.reg_2 }}</p>
            </div>
            <div class="column" v-if="order.reg_3">
              <p><strong>Reg. 3:</strong> {{ order.reg_3 }}</p>
            </div>
          </div>
        </div>
      </div>
    <!-- Order items table -->
      <OrderItemsTable
          v-bind:orderItems="order_items"
          v-bind:show-payment-status="true"
          v-bind:is-loading="false"
          v-bind:paid="(getStripePaymentStatus().amount_received > 0 && getStripePaymentStatus().amount_received === getStripePaymentStatus().amount)"
          v-bind:tax-percentage="getStripePaymentStatus().tax_percentage"
      />
    </div>
  </RestrictedPageWrapper>
</template>

<style scoped>
.keep-bg-during-print {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
</style>