<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> Purchase Order Review</span>
          </h4>
          <div class="page-title-right">
            <div class="d-print-none">
              <div class="float-end">
                <a
                  :href="`/reports/purchase-order/${order.reference}`"
                  class="btn btn-primary btn-rounded uil uil-arrow-left me-2"
                >
                  Back
                </a>
                <span
                  class="btn btn-primary btn-rounded me-2"
                  v-if="order.status == 'ACCEPTED'"
                >
                  APPROVED
                </span>
                <span
                  class="btn btn-outline-purple btn-rounded me-2"
                  v-else-if="order.status == 'VERIFIED'"
                  >VERIFIED</span
                >
                <span
                  class="btn btn-success btn-rounded me-2"
                  v-else-if="order.status == 'PAID'"
                  >PAID</span
                >
                <span
                  class="btn btn-warning btn-rounded me-2"
                  v-else-if="order.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">
      <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>Purchase Order</span>
                </h4>
                <div class="table-responsive">
                  <table class="table border-secondary">
                    <thead>
                      <tr>
                        <th>Date :</th>
                        <td>
                          {{ $helper.formatDate(order.date_initiated) }}
                        </td>
                      </tr>
                      <tr>
                        <th>Order# : </th>
                        <td>{{ order.code || order.reference }}</td>
                      </tr>
                      <tr>
                        <th>Ref# :</th>
                        <td>{{ order.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 class="my-4" />
            <div class="row">
              <div class="col-12">
                <div class="text-muted">
                  <h5 class="font-size-13 fw-bold mb-1">Supplier Details</h5>
                  <div class="table-responsive">
                    <table
                      class="table font-size-12 table-bordered border-secondary"
                    >
                      <thead>
                        <tr>
                          <th>Name: {{ order.supplier.name }}</th>
                          <th>TIN: {{ order.supplier.tin_number }}</th>
                          <th class="text-end">
                            Phone: {{ order.supplier.phone }}
                          </th>
                          <th class="text-end">
                            Address: {{ order.supplier.address || "---" }}
                          </th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-1">
              <h5 class="font-size-13 fw-bold">ITEMS LIST</h5>
              <div class="table-responsive">
                <table
                  class="table table-hover font-size-12 table-bordered table-striped border-secondary table-sm mb-0"
                >
                  <thead>
                    <tr>
                      <th style="width: 35px">No.</th>
                      <th style="width: 94px">Code</th>
                      <th>Item</th>
                      <th class="text-start">Qty</th>
                      <th class="text-start">Unit</th>
                      <th class="text-end">Price</th>
                      <th class="text-end" style="width: 120px">
                        Total({{
                          order.currency ? order.currency.name : "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="mb-1 fw-bold">
                          {{ item.product.name.toUpperCase() }}
                          {{ item.product.packaging || "" }}
                        </div>
                      </td>
                      <td class="text-start">
                        <span class="fw-bold">{{ item.quantity }}</span>
                      </td>
                      <td class="text-start">
                        <span class="fw-bold">{{
                          item.product.unit || ""
                        }}</span>
                      </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(order.amount)
                          }}</span>
                        </h4>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <span style="font-family: nunito"
                  >Total In Words:
                  <span class="text-primary font-size-10 fw-bold">{{
                    NumInWords(order.amount).toUpperCase()
                  }}</span></span
                >
                <div class="font-size-10 d-flex justify-content-between">
                  <div>
                    <hr />
                    <h5>Terms and Conditions</h5>
                    <span>
                      <b>Payment Terms: 100%</b> Payment in advance/on
                      delivery<br />
                      <b>Warranty:</b> N/A<br />
                      <b>Delivery time:</b> 5 working days from the date of
                      payment and purchase order<br />
                      <b>Offer validity:</b> 7 days<br />
                    </span>
                    <hr />
                    <h5>Account Information</h5>
                    <span>
                      Beneficiary Bank: <b>BANK OF KIGALI PLC</b> <br />
                      ACCOUNT NAME: <b>KING'S MEDICAL LTD</b><br />
                      ACCOUNT NUMBER: <b>100082610628</b> FBU<br />
                      MTN MOMO PAY CODE: <b>852230</b></span
                    >
                  </div>
                  <div class="font-size-13" style="font-family: nunito">
                    <span>Sales Department</span><br />
                    <span class="font-size-13 fw-bold">{{ company.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { permissionsHandler } from "@/helpers/permissions-handler";
import { tableMixin } from "@/helpers/tables.mixin";
export default {
  name: "PurchaseOrderView",
  mixins: [tableMixin, permissionsHandler],
  data: () => ({
    items: [],
    order: {},
    company: {},
    task: "GETTING_PURCHASE_ORDER_ITEMS",
  }),
  computed: {
    rowReference() {
      return this.$route.params.reference;
    },
  },
  beforeMount() {
    this.$http
      .get(`stock/purchase-order/show/${this.rowReference}/items`)
      .then((response) => {
        this.order = response.data.row;
        this.items = response.data.items;
        this.company = response.data.row.company;
      });
  },
};
</script>
