<script setup>
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref, defineProps } from 'vue';

const props = defineProps({
  orderItems: {
    type: Array,
    required: true,
  },
  tax_percentage: {
    type: Number,
    required: true,
  },
  paid: {
    type: Boolean,
    default: false,
  },
  order_id: {
    type: Number,
    required: true,
  },
});

const calculatePriceAfterTax = (price, tax_percentage) => {
  // Calculate the price after tax
  return price + (price * tax_percentage / 100);
};

const printInvoice = () => {
  // Show a print dialog, with a table of the order items
  // and the tax percentage
  const printWindow = window.open('', '_blank');
  printWindow.document.write('<html><head><title>Invoice #' + props.order_id + '</title></head>');
  printWindow.document.write('<table border="1" style="width: 100%"><tr><th>Item</th><th>Amount</th><th>Price</th><th>Total</th></tr>');
  props.orderItems.forEach(item => {
    printWindow.document.write(`<tr><td>${item.product.name}</td><td>${item.quantity}</td><td>${item.price.toFixed(2)} DKK</td><td>${(item.price * item.quantity).toFixed(2)} DKK</td></tr>`);
  });
  // Add a row for the tax percentage
  printWindow.document.write(`<tr><td colspan="3">Tax (${props.tax_percentage}%)</td><td>${props.orderItems.reduce((total, item) => total + (item.price * item.quantity), 0) * (props.tax_percentage / 100).toFixed(2)} DKK</td></tr>`);
  // Add a row for the total
  printWindow.document.write(`<tr><td colspan="3">Total</td><td>${props.orderItems.reduce((total, item) => total + (item.price * item.quantity), 0) * (1 + props.tax_percentage / 100).toFixed(2)} DKK</td></tr>`);
  printWindow.document.write('</table>');
  // Add a PAID / UNPAID label
  if (props.paid) {
    printWindow.document.write('<h2 style="color: green; text-align: center">PAID</h2>');
  }
  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
};
</script>

<template>
  <div class="buttons">
    <button class="button is-primary" @click="printInvoice">
      Print Invoice
    </button>
  </div>
</template>

<style scoped>

</style>