<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
       <div
          class="page-title-box d-flex align-items-center justify-content-between"
        >
          <h4 class="mb-0">
            <img src="/img/categories.png" alt="" class="avatar-sm me-2" />
            <span>Commercial Invoices Preview</span>
          </h4>
          <div class="page-title-right">
            <div class=" d-print-none">
              <div class="float-end">
                <a
                  href="/reports/sales/"
                  class="btn btn-primary btn-rounded uil uil-arrow-left me-2"
                >
                  Back
                </a>
                <a
                  href="javascript:window.print()"
                  class="btn btn-secondary me-1"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="25"
                    height="25"
                    fill="currentColor"
                    class="bi bi-printer-fill"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2H5zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z"
                    />
                    <path
                      d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2V7zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
                    />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
     
      <div class="" id="print-container" style="background-color: white;">
    <div class="fs-5 text-center py-1 border-bottom border-dashed">
      <p class="h5 mb-0">
       
        <b style="font-weight: bold; color:black">EURIKA SUPERMARKET </b>
      </p>
      <p class="mb-0 h6"  style="font-weight: bold; color:black">NIF: {{ company.tin_number }}</p>
      <p class="mb-0 h6" style="font-weight: bold; color:black">Tél: {{ company.phone }}, Email: {{ company.email }}</p>
    </div>
    <div class="py-1 border-bottom border-dashed">
      <table
        class="table table-sm table-borderless mb-1"
      
      >
        <tr>
          <td colspan="2">
            <p class="mb-0 h6" >
              <template >
              
               <h3> RECEIPT NO: <b  style="font-weight: bold; color:black">#hellooooo</b></h3>
              </template>
              <template  style="font-weight: bold; color:black">
                INVOICE NO: <b> #{{ order.code || order.reference }}</b>
              </template>
            </p>
            <p class="mb-0 h6"  style="font-weight: bold; color:black">
              Order NO: <b>#000000000</b>
            </p>
          </td>
        </tr>
        <tr>
          <td>
            <p class="mb-0 h6">
              Waiter:
              <b  style="font-weight: bold; color:black">Innnovation</b>
            </p>
          </td>
          <td class="text-end text-nowrap">
            <p class="mb-0 h6">
              Table No: <b>77</b>
            </p>
          </td>
        </tr>
        <tr>
          <td>
            <p class="mb-0 h6">
              Date: <b style="font-weight: bold; color:black"> {{ $helper.formatDate(order.committed_date) }}</b>
            </p>
          </td>
          <td class="text-end text-nowrap">
            <p class="mb-0 h6">
              <b></b>
            </p>
          </td>
        </tr>
      </table>
    </div>
    <div class="py-1 border-bottom border-dashed">
      <table class="table table-sm table-borderless mb-1">
        <thead>
        <tr>
                      <th style="width: 34px;font-weight: bold; color:black">No.</th>
                     <!-- <th style="width: 94px;font-weight: bold; color:black">Code</th>-->
                    <th style="font-weight: bold; color:black">Nom du Produi</th>
                     <!---<th style="font-weight: bold; color:black">LOT</th>-->
                     <!-- <th style="font-weight: bold; color:black">Expiry</th>-->
                      <th class="text-end" style="font-weight: bold; color:black;">Qty</th>
                      <th class="text-end" style="font-weight: bold; color:black">Unit</th>
                      <th class="text-end" style="font-weight: bold; color:black">U/Price</th>
                      <th class="text-end" style="width: 120px;font-weight: bold; color:black">Total(FBU)</th>
                    </tr>
                  </thead>
                  <tbody>
        <tr v-for="(item, i) in items" :key="i">
          <td>
            <span  style="font-weight: bold; color:black">{{ i + 1 }}</span>
          </td>
         <!-- <td>
            <span  style="font-weight: bold; color:black">{{ item.pcode || "N/A" }}</span>
          </td>-->
         <td class="text-end text-nowrap">
            <span  style="font-weight: bold; color:black;align:left;"> 
               {{ item.name.toUpperCase() || "" }}</span>         
                       
          </td>
         <!-- <td>
            <span  style="font-weight: bold; color:black"> {{
                          item.product_change
                            ? item.product_change.batch_nber
                            : item.code
                        }}</span>
          </td>-->
         <!-- <td>
            <span  style="font-weight: bold; color:black">
              {{
                          item.product_change
                            ? $helper.shortDate(
                                item.product_change.expiration_date
                              )
                            : item.expiry
                            ? $helper.shortDate(item.expiry.latest_expiry_date)
                            : "N/A"
                        }}
            </span>
          </td>-->
          <td>
            <span  style="font-weight: bold; color:black">{{ item.quantity || "0" }}  {{ item.unit || "" }}</span>

          </td>
         
          <td>
            <span  style="font-weight: bold; color:black">{{
                          $helper.formatNumber(item.price)
                        }}</span>
            
          </td>
          <td>
            <span  style="font-weight: bold; color:black">{{
                          $helper.formatNumber(item.price * item.quantity)
                        }}</span>
            
          </td>
          <td>
            <span  style="font-weight: bold; color:black">{{
                          $helper.formatNumber(order.discounted_total)
                        }}</span>
            
          </td>
        </tr>
      </tbody>
      </table>
    </div>
    <div class="py-1 border-bottom border-dashed">
      <table class="table table-sm table-borderless mb-0">
        <tr>
          <td><span class="fw-bolder"  style="font-weight: bold; color:black">Grand Total</span></td>
          <td class="text-end text-nowrap">
            <span class="h5 mb-0"  style="font-weight: bold; color:black">
            80000
            </span>
           
          </td>
        </tr>
      </table>
    </div>
    <div class="py-1 text-center" >
      <table class="table table-sm table-borderless mb-0">
        <tr >
          <td colspan="2">
            <span class="h6 mb-0"  style="font-weight: bold; color:black"
              >Dial 80000 to pay with MOMO</span
            >
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="text-center" style="font-size: 12px;font-weight: bold; color:black">
              This is not a legal receipt. Please ask your legal receipt.
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <span class="h5 mb-0"> <em>Thank you!</em> </span>
          </td>
        </tr>
      </table>
    </div>
  </div>



  </div></div>
</template>
<script>
import { tableMixin } from "@/helpers/tables.mixin";
import BillFooter from "@/components/BillFooter.vue";
export default {
  name: "ReceiptView",
  mixins: [tableMixin],
  components: { BillFooter },
  data: () => ({
    items: [],
    order: null,
    company: null,
    paymentModes: null,
  }),
  computed: {
    rowReference() {
      return this.$route.params.reference;
    },
  },
  beforeMount() {
    this.$http
      .all([
        this.$http.get(`stock/pos/sales/details/${this.rowReference}`),
        this.$http.get("auth/me"),
      ])
      .then(
        this.$http.spread((responseOne, responseTwo) => {
          this.items = responseOne.data.items;
          this.order = responseOne.data.record;
          this.company = responseTwo.data.user.company;
          this.paymentModes = responseOne.data.record.payments;
        })
      );
  },
};
</script>
<style scoped>

</style>
