<script>
import { tableMixin } from "@/helpers/tables.mixin";
import ZohoSearch from "@/components/ZohoSearch.vue";
import { permissionsHandler } from "@/helpers/permissions-handler";
import { getUploadedImage } from "@/helpers/utils.js";
export default {
  name: "PurchaseOrderReport",
  mixins: [tableMixin, permissionsHandler],
  components: {
    ZohoSearch,
  },
  data: () => ({
    items: [],
    offCanvas: null,
    task: "GETTING_Purchase_Order_ITEMS",
  }),
  computed: {
    isFetchingItems() {
      this.$store.commit("SET_AJAX_TASK", this.task);
      return (
        this.$store.state.isLoading &&
        this.$store.state.loadingTask == this.task
      );
    },
    itemsAmount() {
      return this.items.reduce((a, b) => a + b.price * b.quantity, 0);
    },
    grandTotal() {
      return this.rows.reduce((a, b) => a + b.amount, 0);
    },
    rowReference() {
      return this.$route.params.reference;
    },
  },
  created() {
    if (this.rowReference) {
      this.dataUrl = "stock/reports/purchase-order/" + this.rowReference;
    } else {
      this.dataUrl = "stock/reports/purchase-order";
    }
    this.handleFetch(this.dataUrl);
  },
  mounted() {
    this.offCanvas = new bootstrap.Offcanvas(
      document.getElementById("itemsOffCanvas")
    );
  },
  methods: {
    getUploadedImage,
    handleItemsView(row) {
      this.offCanvas.show();
      if (this.selectedRow.id != row.id) {
        this.selectedRow = row;
        this.items = [];
        this.$store.commit("SET_AJAX_TASK", "GETTING_ORDER_ITEMS");
        this.$http
          .get(`stock/purchase-order/show/${row.reference}/items`)
          .then((response) => {
            if (response.data.status) {
              this.items = response.data.items;
            }
          });
      }
    },
    handleDestroy(row, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete Purchase Order of #${this.$helper.padNumber(
          row.id
        )}?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/purchase-order/destroy/${row.id}`)
            .then((response) => {
              if (response.data.status) {
                this.rows.splice(i, 1);
                this.$notify({
                  type: "success",
                  message: "Record deleted successfully",
                });
              }
            });
        },
      });
    },
    handleVerified(row) {
      this.$confirm({
        title: "Purchase Order Verification",
        content: `Are you sure you want to Mark this Purchase Order #${this.$helper.padNumber(
          row.id
        )} As verified?`,
        actionText: "Yes, Verified",
        closeText: "Discard",
        classes: "btn btn-purple",
        action: () => {
          this.$http
            .get(`stock/purchase-order/verify/${row.id}`)
            .then((response) => {
              if (response.data.status) {
                this.$notify({
                  type: "success",
                  message: response.data.message,
                });
                this.resetFilters();
              }
            });
        },
      });
    },
    handlePaid(row) {
      this.$confirm({
        title: "Purchase Order Verification",
        content: `Are you sure you want to Mark this Purchase Order #${this.$helper.padNumber(
          row.id
        )} As Paid?`,
        actionText: "Yes, Verified",
        closeText: "Discard",
        classes: "btn btn-success",
        action: () => {
          this.$http
            .get(`stock/purchase-order/paid/${row.id}`)
            .then((response) => {
              if (response.data.status) {
                this.$notify({
                  type: "success",
                  message: response.data.message,
                });
                this.resetFilters();
              }
            });
        },
      });
    },
    deleteItem(item, index) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${item.product.name} from Purchase Order sheet?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/purchase-order/items/${item.id}/destroy`)
            .then((response) => {
              if (response.data.status) {
                let i = this.rows.findIndex(
                  (item) => item.id == this.selectedRow.id
                );
                this.rows[i].total_items -= 1;
                this.rows[i].amount -= item.price * item.quantity;
                this.items.splice(index, 1);
                this.$notify({
                  type: "success",
                  message: "Record deleted successfully",
                });
              }
            });
        },
      });
    },
  },
};
</script>
<template>
  <div
    class="offcanvas offcanvas-end stock-offcanvas"
    tabindex="-1"
    id="itemsOffCanvas"
    aria-labelledby="itemsOffCanvasLabel"
  >
    <template v-if="!$helper.empty(selectedRow)">
      <div class="offcanvas-header">
        <h5 id="itemsOffCanvasLabel">
          {{ `Purchase Order #${$helper.padNumber(selectedRow.id)}` }}
        </h5>
        <div class="d-flex align-items-center">
          <a
            href="javascript:void(0)"
            class="text-reset"
            @click.prevent="
              handlePrint(
                '#details-table',
                `Purchase Order #${$helper.padNumber(selectedRow.id)}`
              )
            "
          >
            <i class="uil uil-print fs-3"></i>
          </a>
          <a
            href="javascript:void(0)"
            class="text-reset"
            @click.prevent="
              handleExcelExport(
                'details-table',
                `Purchase Order -${$helper.padNumber(selectedRow.id)}`
              )
            "
          >
            <svg
              height="20px"
              viewBox="0 0 16 16"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M2 2a2 2 0 0 1 2-2h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm7.5 1.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.884 6.68a.5.5 0 1 0-.768.64L7.349 10l-2.233 2.68a.5.5 0 0 0 .768.64L8 10.781l2.116 2.54a.5.5 0 0 0 .768-.641L8.651 10l2.233-2.68a.5.5 0 0 0-.768-.64L8 9.219l-2.116-2.54z"
              ></path>
            </svg>
          </a>
          <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>
      </div>
      <div class="offcanvas-body">
        <div
          class="d-flex justify-content-center loader-container"
          v-if="isFetchingItems && !items.length"
        >
          <div class="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div class="table-responsive" v-else>
          <table
            class="table align-middle table-nowrap table-check"
            id="details-table"
          >
            <thead>
              <tr>
                <th scope="col">S/N</th>
                <th scope="col">{{ $trans("Item Name") }}</th>
                <th scope="col">{{ $trans("Requested Quantity") }}</th>
                <th scope="col">{{ $trans("Approved Quantity") }}</th>
                <th scope="col">U. {{ $trans("Price") }}</th>
                <th scope="col">T. {{ $trans("Amount") }}</th>
                <th class="action">{{ $trans("Actions") }}</th>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(item, i) in items" :key="'item' + i">
                <td>{{ i + 1 }}</td>
                <td>{{ item.product.name }}</td>
                <td>
                  <span class="fw-bolder">{{
                    $helper.formatNumber(item.requested_qty)
                  }}</span>
                  {{ item.product.unit }}
                </td>
                <td>
                  <span class="fw-bolder">{{
                    $helper.formatNumber(item.quantity)
                  }}</span>
                  {{ item.product.unit }}
                </td>
                <td>
                  {{ selectedRow.currency ? selectedRow.currency.name : "FBU" }}
                  {{ $helper.formatNumber(item.price) }}
                </td>
                <td>
                  {{ selectedRow.currency ? selectedRow.currency.name : "FBU" }}
                  <span class="fw-bold">{{
                    $helper.formatNumber(item.price * item.quantity)
                  }}</span>
                </td>
                <td class="text-nowrap action" v-if="this.hasPermissionTo('D')">
                  <a
                    href="javascript:void(0)"
                    class="text-danger"
                    title="Remove Item"
                    @click.prevent="deleteItem(item, i)"
                    v-if="selectedRow.status == 'PENDING'"
                  >
                    <i class="uil uil-trash fs-5"></i>
                  </a>
                </td>
                <td v-else class="action">---</td>
              </tr>
              <tr v-if="itemsAmount">
                <td colspan="6" class="text-end">
                  <span class="h4"
                    >{{
                      selectedRow.currency ? selectedRow.currency.name : "FBU"
                    }}
                    {{ $helper.formatNumber(itemsAmount) }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <h4>{{ $trans("Purchase Order Report") }}</h4>
      <div class="w-100 justify-content-between d-flex align-items-center my-3">
        <div class="left-toobar d-flex flex-nowrap">
          <div
            class="date-range d-flex align-items-center"
            style="width: 200px"
          >
            <div class="d-flex align-items-center input-wrapper">
              <input
                type="date"
                v-model="dataFilter.from"
                class="form-control"
                @click="displayPicker"
              />
              <span class="input-separator">-</span>
              <input
                type="date"
                v-model="dataFilter.to"
                class="form-control"
                @click="displayPicker"
              />
            </div>
            <div class="icon ms-auto">
              <i class="uil uil-calendar-alt fs-5"></i>
            </div>
          </div>
          <div class="ms-2">
            <ZohoSearch
              placeholder="Select Supplier"
              url="stock/suppliers/search"
              label="name"
              :load-defaults="true"
              style="z-index: 999"
              v-model="dataFilter.supplier"
            ></ZohoSearch>
          </div>
          <div class="ms-2">
            <select class="form-control" v-model="dataFilter.status">
              <option :value="undefined" hidden disabled>Order Status</option>
              <option value="PENDING">PENDING</option>
              <option value="VERIFIED">VERIFIED</option>
              <option value="ACCEPTED">ACCEPTED</option>
              <option value="CANCELLED">CANCELLED</option>
              <option value="PAID">PAID</option>
            </select>
          </div>
          <button
            class="btn btn-primary ms-2"
            type="button"
            @click="handleDataFilter"
          >
            {{ $trans("Apply") }}
          </button>
          <button
            class="btn btn-outline-primary ms-2"
            @click="resetFilters"
            type="button"
          >
            {{ $trans("Reset") }}
          </button>
        </div>
        <div class="right-toobar d-flex align-items-center flex-nowrap">
          <button
            class="btn-primary btn btn-icon ms-1"
            type="button"
            :disabled="!rows.length"
            @click="handleExcelExport(null)"
          >
            <svg
              height="18px"
              viewBox="0 0 16 16"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M2 2a2 2 0 0 1 2-2h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm7.5 1.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.884 6.68a.5.5 0 1 0-.768.64L7.349 10l-2.233 2.68a.5.5 0 0 0 .768.64L8 10.781l2.116 2.54a.5.5 0 0 0 .768-.641L8.651 10l2.233-2.68a.5.5 0 0 0-.768-.64L8 9.219l-2.116-2.54z"
              ></path>
            </svg>
          </button>
          <button
            class="btn-dark btn btn-icon ms-1"
            type="button"
            :disabled="!rows.length"
            @click="handlePrint('#pagination-table')"
          >
            <svg
              height="18px"
              viewBox="0 0 16 16"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
            >
              <path
                d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"
              ></path>
              <path
                fill-rule="evenodd"
                d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"
              ></path>
              <path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="table-responsive">
        <div
          class="d-flex justify-content-center loader-container"
          v-if="isFetchingItems && !rows.length"
        >
          <div class="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <table
          class="table table-light table-hover table-striped font-size-13 align-middle table-nowrap table-check"
          id="pagination-table"
          v-else
        >
          <thead>
            <tr>
              <th scope="col">№</th>
              <th scope="col">{{ $trans("Date") }}</th>
              <th scope="col">{{ $trans("Supplier") }}</th>
              <th scope="col">Nber</th>
              <th scope="col">{{ $trans("Balance") }}</th>
              <th scope="col">{{ $trans("Status") }}</th>
              <th scope="col" class="d-print-none text-center"><i class="uil uil-link-h text-primary font-size-20"></i></th>
              <th scope="col">{{ $trans("Created By") }}</th>
              <th class="d-print-none">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, i) in rows" :key="i">
              <td class="fw-bold">{{ row.code || row.reference }}</td>
              <td>{{ $helper.formatDate(row.date_initiated) }}</td>
              <td class="fw-bold">{{ row.supplier ? row.supplier.name.toUpperCase() : "N/A" }}</td>
              <td>{{ $helper.formatNumber(row.total_items) }}</td>
              <td>
                {{ row.currency ? row.currency.name : "N/A" }}
                <span class="fw-bold">{{
                  $helper.formatNumber(row.amount)
                }}</span>
              </td>
              <td>
                <span class="badge bg-primary" v-if="row.status == 'ACCEPTED'">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-check-circle-fill"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
                    />
                  </svg>
                  {{ $trans("Accepted") }}</span
                >
                <span class="badge bg-success" v-else-if="row.status == 'PAID'">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    fill="currentColor"
                    class="bi bi-check2-all"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z"
                    />
                    <path
                      d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z"
                    />
                  </svg>
                  {{ $trans("Paid") }}</span
                >
                <span
                  class="badge bg-warning"
                  v-else-if="row.status == 'PENDING'"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-arrow-clockwise"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
                    />
                    <path
                      d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"
                    />
                  </svg>
                  {{ $trans("Pending") }}</span
                >
                <span
                  class="badge bg-purple"
                  v-else-if="row.status == 'VERIFIED'"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-patch-check"
                    viewBox="0 0 16 16"
                    style="color: white"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"
                    />
                    <path
                      d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"
                    />
                  </svg>
                  {{ $trans("Verified") }}</span
                >
                <span class="badge bg-danger" v-else>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-x-octagon"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z"
                    />
                    <path
                      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                    />
                  </svg>
                  {{ $trans("Cancelled") }}</span
                >
              </td>
              <td class="d-print-none">
                <a
                  :href="getUploadedImage(row.file_url)"
                  target="_blank"
                  class="btn btn-outline-primary btn-rounded"
                  v-if="row.file_url"
                  ><i class="uil-cloud-download"></i
                ></a>
                <i class="uil uil-ban text-danger font-size-20" v-else></i>
              </td>
              <td>
                <a href="javascript:void(0)">{{ row.creator.name }}</a>
              </td>
              <td class="d-print-none">
                <div>
                  <button
                    class="btn btn-light btn-sm dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <i class="uil uil-ellipsis-h"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <a
                        class="dropdown-item"
                        @click.prevent="handleItemsView(row)"
                        href="javascript:void(0)"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="20"
                          height="20"
                          fill="currentColor"
                          class="bi bi-eye me-3"
                          viewBox="0 0 16 16"
                        >
                          <path
                            d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"
                          />
                          <path
                            d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"
                          />
                        </svg>
                        {{ $trans("View Items") }}</a
                      >
                    </li>
                    <li>
                      <RouterLink
                        class="dropdown-item"
                        :to="{
                          name: 'PurchaseOrderView',
                          params: {
                            reference: row.reference,
                            action: 'view',
                          },
                          query: {
                            origin: 'purchaseorder',
                          },
                        }"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="20"
                          height="20"
                          fill="currentColor"
                          class="bi bi-printer me-3"
                          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>
                        {{ $trans("Print P.O") }}</RouterLink
                      >
                    </li>
                    <li
                      v-if="
                        this.hasPermissionTo('U') && row.status == 'ACCEPTED'
                      "
                    >
                      <a
                        class="dropdown-item"
                        @click.prevent="handlePaid(row)"
                        href="javascript:void(0)"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="20"
                          height="20"
                          fill="currentColor"
                          class="bi bi-check2-all me-2"
                          viewBox="0 0 16 16"
                        >
                          <path
                            d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z"
                          />
                          <path
                            d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z"
                          />
                        </svg>
                        {{ $trans("Mark As Paid") }}</a
                      >
                    </li>
                    <template
                      v-if="row.status == 'PENDING' || row.status == 'VERIFIED'"
                    >
                      <li
                        v-if="
                          this.hasPermissionTo('U') && row.status == 'VERIFIED'
                        "
                      >
                        <RouterLink
                          class="dropdown-item"
                          :to="{
                            name: 'ItemsReceive',
                            params: {
                              reference: row.reference,
                              action: 'approve',
                            },
                            query: {
                              origin: 'Order',
                            },
                          }"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="20"
                            height="20"
                            fill="currentColor"
                            class="bi bi-check-circle me-3"
                            viewBox="0 0 16 16"
                          >
                            <path
                              d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
                            />
                            <path
                              d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
                            />
                          </svg>
                          {{ $trans("Approve") }}
                        </RouterLink>
                      </li>
                      <li v-if="this.hasPermissionTo('U')">
                        <RouterLink
                          class="dropdown-item"
                          :to="{
                            name: 'ItemsReceive',
                            params: {
                              reference: row.reference,
                              action: 'editOrder',
                            },
                            query: {
                              origin: 'edit',
                            },
                          }"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="20"
                            height="20"
                            fill="currentColor"
                            class="bi bi-box-arrow-down-left me-3"
                            viewBox="0 0 16 16"
                          >
                            <path
                              fill-rule="evenodd"
                              d="M7.364 12.5a.5.5 0 0 0 .5.5H14.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 14.5 0h-10A1.5 1.5 0 0 0 3 1.5v6.636a.5.5 0 1 0 1 0V1.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H7.864a.5.5 0 0 0-.5.5z"
                            />
                            <path
                              fill-rule="evenodd"
                              d="M0 15.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H1.707l8.147-8.146a.5.5 0 0 0-.708-.708L1 14.293V10.5a.5.5 0 0 0-1 0v5z"
                            />
                          </svg>
                          {{ $trans("Edit") }}
                        </RouterLink>
                      </li>
                      <li
                        v-if="
                          this.hasPermissionTo('U') && row.status != 'VERIFIED'
                        "
                      >
                        <a
                          class="dropdown-item"
                          @click.prevent="handleVerified(row)"
                          href="javascript:void(0)"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="20"
                            height="20"
                            fill="currentColor"
                            class="bi bi-patch-check me-3"
                            viewBox="0 0 16 16"
                          >
                            <path
                              fill-rule="evenodd"
                              d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"
                            />
                            <path
                              d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"
                            />
                          </svg>
                          {{ $trans("Mark As Verified") }}</a
                        >
                      </li>
                      <li v-if="this.hasPermissionTo('D')">
                        <a
                          class="dropdown-item"
                          @click.prevent="handleDestroy(row, i)"
                          href="javascript:void(0)"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="20"
                            height="20"
                            fill="currentColor"
                            class="bi bi-trash me-3"
                            viewBox="0 0 16 16"
                          >
                            <path
                              d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"
                            />
                            <path
                              d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"
                            />
                          </svg>
                          {{ $trans("Delete") }}</a
                        >
                      </li>
                    </template>
                  </ul>
                </div>
              </td>
            </tr>
            <tr v-if="grandTotal">
              <td colspan="5" class="text-end">
                {{ $trans("Grand Total") }}:
                <span class="h5 mb-0 fw-bolder">{{
                  $helper.formatNumber(grandTotal)
                }}</span>
              </td>
              <td colspan="4"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <paginations
        :to="recordsTo"
        :from="recordsFrom"
        :current_page="currentPage"
        :row_count_page="rowCountPage"
        @page-update="handlePagination"
        :total_records="totalRows"
        :page_range="pageRange"
      ></paginations>
    </div>
  </div>
</template>
