<script setup>

import SelectCustomerFormPOS from "@/components/forms/department/pos/SelectCustomerFormPOS.vue";
import PosLastScannedLicensePlates from "@/components/displays/department/pos/PosLastScannedLicensePlates.vue";
import NextStep from "@/components/forms/department/pos/buttons/NextStep.vue";
import SelectProductsFormPOS from "@/components/forms/department/pos/SelectProductsFormPOS.vue";
import NextStepError from "@/components/forms/department/pos/error/NextStepError.vue";
import { order_items, order_id, loadOrderItems, isCustomerSelected, doesOrderContainMaterial } from "@/components/shop/POSDepartmentProcess.vue";
import PosOrderItemsCurrent from "@/components/displays/department/pos/PosOrderItemsCurrent.vue";
import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
import PreviousStep from "@/components/forms/department/pos/buttons/PreviousStep.vue";
import PosOrderLicensePlates from "@/components/displays/department/pos/order/PosOrderLicensePlates.vue";

</script>

<template>
  <div>
    <div class="columns">
      <!-- Choose add-ons -->
      <div class="column is-8 pl-0 pr-3">
        <WhiteBox>
          <template #default>
            <div>
              <PosOrderItemsCurrent :orderItems="order_items" :orderId="order_id" :loadOrderItems="loadOrderItems" :editPossible="true" :is-large="true">
                <template #bottom>
                  <!-- Back button -->
                  <ButtonsBox>
                    <PreviousStep :is-text="true" label="Tilføj flere varer" />
                  </ButtonsBox>
                </template>
              </PosOrderItemsCurrent>
            </div>
          </template>
        </WhiteBox>
        <NextStepError class="is-fullwidth" />
        <ButtonsBox>
          <div class="buttons">
            <Cancel
                style="width: 25%;"
                tabindex="2"
                class="is-fullwidth"
                label="Annuller"
            />
            <NextStep
                style="width: 25%;"
                class="is-fullwidth"
                label="Gennemfør"
            />
          </div>
        </ButtonsBox>
      </div>
      <!-- Last provided orders -->
      <div class="column is-4 pl-3 pr-0">
        <WhiteBox>
          <template #default v-if="isCustomerSelected()">
            <PosSelectedCustomer />
          </template>
        </WhiteBox>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>