<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>Proforma Invoice</span>
          </h4>
          <div class="page-title-right">
            <div class="d-print-none">
              <div class="float-end">
                <a
                  :href="`/reports/proforma`"
                  class="btn btn-primary btn-rounded uil uil-arrow-left me-2"
                >
                  Back
                </a>
                <span
                  class="btn btn-success btn-rounded me-2"
                  v-if="Proforma.status == 'ACCEPTED'"
                >
                  APPROVED
                </span>
                <span
                  class="btn btn-warning btn-rounded me-2"
                  v-else-if="Proforma.status == 'PENDING'"
                  >PENDING</span
                >
                <span class="btn btn-danger btn-rounded me-2" v-else
                  >CANCELLED</span
                >
                <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" style="background-color: none !important">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="invoice-title">
              <div class="float-end font-size-12">
                <h4 style="text-align: center" class="fw-bold">
                  <span>Proforma Invoice</span>
                </h4>
                <div class="table-responsive">
                  <table class="table border-secondary">
                    <thead>
                      <tr>
                        <th>Date :</th>
                        <td class="fw-bold">
                          {{ $helper.formatDate(Proforma.date_initiated) }}
                        </td>
                      </tr>
                      <tr>
                        <th>Invoice# :</th>
                        <td class="fw-bold">
                          {{ Proforma.code || Proforma.reference }}
                        </td>
                      </tr>
                      <tr>
                        <th>Ref# :</th>
                        <td class="fw-bold">
                          {{ Proforma.DocReference || "---" }}
                        </td>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>
              <div class="mb-4">
                <img src="/img/company.png" alt="logo" height="68" />
              </div>
              <div class="text-muted font-size-13">
                <p class="mb-1">
                  P.BOX 128 KIGALI RWANDA 3RD FLOOR, <br />FLORIDA HOUSE (near
                  CITY PLAZA) KN 59 ST, <br />QUARTIER MATHEUS
                </p>
                <p class="mb-1 fw-bold">
                  TIN: {{ company.tin_number || "---" }}
                </p>
                <p class="mb-1">
                  Phone: {{ company.phone || "---" }}, Email:
                  {{ company.email || "---" }}
                </p>
                <p class="mb-1"></p>
              </div>
            </div>
            <hr />
            <div class="row">
              <div class="col-12">
                <div class="text-muted">
                  <h5 class="font-size-16 mb-1">Customer Details</h5>
                  <div class="table-responsive">
                    <table
                      class="table font-size-12 table-striped border-secondary"
                    >
                      <thead>
                        <tr>
                          <th class="text-start">
                            Name:
                            {{ Proforma.client ? Proforma.client.name : "---" }}
                          </th>
                          <th>
                            TIN:
                            {{
                              Proforma.client
                                ? Proforma.client.tinnumber
                                : "N/A"
                            }}
                          </th>
                          <th class="text-end">
                            Phone:
                            {{
                              Proforma.client ? Proforma.client.phone : "N/A"
                            }}
                          </th>
                          <th class="text-end">
                            Address:
                            {{
                              Proforma.client ? Proforma.client.address : "---"
                            }}
                          </th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-1">
              <h5 class="font-size-13">ITEMS LIST</h5>
              <div class="table-responsive">
                <table
                  class="table font-size-12 table-hover table-bordered table-sm border-secondary mb-0"
                >
                  <thead>
                    <tr>
                      <th style="width: 35px">#</th>
                      <th style="width: 94px">Code</th>
                      <th>Item Description</th>
                      <th>LOT</th>
                      <th>Expiry</th>
                      <th>Qty</th>
                      <th>Unit</th>
                      <th class="text-end">Price</th>
                      <th class="text-end" style="width: 120px">Total (FBU)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, i) in items" :key="i">
                      <th scope="row">0{{ i + 1 }}</th>
                      <th>{{ item.product.pcode || "N/A" }}</th>
                      <td>
                        <div class="text-wrap fw-bold">
                          {{ item.product.name.toUpperCase() || "---" }}
                          <small v-if="item.product.packaging"
                            >[{{ item.product.packaging || "" }}]</small
                          >
                        </div>
                      </td>
                      <td>
                        {{
                          item.product_change
                            ? item.product_change.batch_nber
                            : item.product.code
                        }}
                      </td>
                      <td>
                        {{
                          item.product_change
                            ? $helper.shortDate(
                                item.product_change.expiration_date
                              )
                            : item.expiry
                            ? $helper.shortDate(item.expiry.expiration_date)
                            : "N/A"
                        }}
                      </td>
                      <td>
                        <span class="fw-bold">{{ item.quantity || "1" }}</span>
                      </td>
                      <td>{{ item.product.unit || "" }}</td>
                      <td class="text-nowrap text-end">
                        <span class="fw-bold">{{
                          $helper.formatNumber(item.price)
                        }}</span>
                      </td>
                      <td class="text-end">
                        <span class="fw-bold">{{
                          $helper.formatNumber(item.price * item.quantity)
                        }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="border-0 text-end" scope="row" colspan="9">
                        <h4 class="m-0">
                          Total:
                          <span class="fw-semibold">{{
                            $helper.formatNumber(itemsAmount)
                          }}</span>
                        </h4>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <span style="font-family: nunito"
                  >Total In Words:
                  <span class="text-primary fw-bold font-size-10">{{
                    NumInWords(itemsAmount).toUpperCase()
                  }}</span></span
                >
                <hr />
                <div class="font-size-12 d-flex justify-content-between">
                  <div class="w-50">
                    <h5>Terms and Conditions</h5>
                    <span>
                      <b>Payment Terms: 100%</b> Payment in advance/on
                      Derivery<br />
                      <b>Warranty:</b> N/A<br />
                      <b>Proforma time:</b> 5 working days from the date of
                      payment and purchase order<br />
                      <b>Offer validity:</b> 7 days<br />
                    </span>
                  </div>
                  <div class="font-size-11" style="font-family: nunito">
                    <span>Sales Department</span><br />
                    <span class="font-size-13 fw-bold">{{
                      company.name || "---"
                    }}</span>
                  </div>
                </div>
                <br />
                <div class="font-size-12">
                  <h5>Account Information</h5>
                  <span
                    >All credit-approved invoices are payable with in 30 days
                    from the date of receipt.<br />
                    after this period, the management reserves the right to
                    calculate interest of 1.25% per 15 days of delay.<br />
                    Payment is made at our cash desks or against submission of a
                    receipt or via bank account below.
                  </span>
                  <br />
                  <span>
                    Beneficiary Bank: <b>BANK OF KIGALI PLC</b> / ACCOUNT NAME:
                    <b>KING'S MEDICAL LTD</b> / ACCOUNT NUMBER:
                    <b>100082610628</b> FBU / MTN MOMO PAY CODE:
                    <b>852230</b></span
                  >
                </div>
              </div>
            </div>
          </div>
          <BillFooter :company="company"></BillFooter>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { permissionsHandler } from "@/helpers/permissions-handler";
import { tableMixin } from "@/helpers/tables.mixin";
import BillFooter from "@/components/BillFooter.vue";
export default {
  name: "ProformaView",
  mixins: [tableMixin, permissionsHandler],
  components: { BillFooter },
  data: () => ({
    items: [],
    Proforma: {},
    company: {},
    task: "GETTING_PROFORMA_ITEMS",
  }),
  computed: {
    itemsAmount() {
      return this.items.reduce((a, b) => a + b.price * b.quantity, 0);
    },
    rowReference() {
      return this.$route.params.reference;
    },
  },
  created() {
    this.$http
      .get(`stock/proforma/show/${this.rowReference}/items`)
      .then((response) => {
        this.Proforma = response.data.row;
        this.items = response.data.items;
        this.company = response.data.row.company;
      });
  },
};
</script>
