<script>
import { tableMixin } from "@/helpers/tables.mixin";
import ZohoSearch from "@/components/ZohoSearch.vue";
import LoadingButton from "@/components/LoadingButton.vue";
import { permissionsHandler } from "@/helpers/permissions-handler";
export default {
  name: "DeliveryNoteReport",
  mixins: [tableMixin, permissionsHandler],
  components: {
    ZohoSearch,
    LoadingButton,
  },
  data: () => ({
    items: [],
    offCanvas: null,
    task: "GETTING_DELIVERY_NOTE_ITEMS",
    paymentModes: [],
    approvalModal: null,
    selectedDelivery: null,
    newSale: {
      committed_date: new Date().toLocaleString("fr-CA").slice(0, 10),
      payment_method: null,
      payment_ref: null,
      total_amount: 0,
      discounted_total: 0,
      payment_date: new Date().toLocaleString("fr-CA").slice(0, 10),
      amount_paid: 0,
      discount_amount: 0,
      comment: "",
      amount_remain: 0,
      discount: 0,
    },
  }),
  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/delivery/" + this.rowReference;
    } else {
      this.dataUrl = "stock/reports/delivery";
    }
    this.handleFetch(this.dataUrl);
  },
  mounted() {
    this.offCanvas = new bootstrap.Offcanvas(
      document.getElementById("itemsOffCanvas")
    );
    this.approvalModal = new bootstrap.Modal(
      document.getElementById("approval-modal")
    );
    this.$http.get("stock/pos/payments-modes").then((response) => {
      this.paymentModes = response.data.rows;
    });
  },
  methods: {
    calculateAmountRemain() {
      this.newSale.amount_remain =
        Number(this.newSale.discounted_total) -
        Number(this.newSale.amount_paid);

      if (this.newSale.amount_remain < 0) {
        this.newSale.amount_paid = this.selectedDelivery.amount;
        this.newSale.amount_remain = 0;
      }
    },
    handleItemsView(row) {
      this.offCanvas.show();
      if (this.selectedRow.id != row.id) {
        this.selectedRow = row;
        this.items = [];
        this.$store.commit("SET_AJAX_TASK", "GETTING_DELIVERY_NOTE_ITEMS");
        this.$http
          .get(`stock/delivery/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 Delivery Note of #${row.code}?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/delivery/destroy/${row.id}`)
            .then((response) => {
              if (response.data.status) {
                this.rows.splice(i, 1);
                this.$notify({
                  type: "success",
                  message: "Record deleted successfully",
                });
              }
            });
        },
      });
    },
    deleteItem(item, index) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${item.product.name} from Delivery Note sheet? because this action is irreversible.`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/delivery/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",
                });
              }
            });
        },
      });
    },
    submitApproval() {
      this.newSale.reference = this.selectedDelivery.reference;
      this.$http
        .post(
          "stock/delivery/invoicing",
          this.$helper.generateFormData(this.newSale)
        )
        .then((response) => {
          if (response.data.status) {
            this.$notify({
              type: "success",
              message:
                "Delivery Note Approved and Invoice has been generated Successfuly!",
            });

            this.$router.push({
              name: "ReceiptViewLarge",
              params: {
                reference: response.data.row.reference,
                action: "view",
              },
              query: {
                origin: "receiptview",
              },
            });
          } else {
            this.$notify({
              type: "danger",
              message: response.data.message,
            });
          }
          setTimeout(this.approvalModal.hide(), 1);
        });
    },
    showApprovalModal(row) {
      this.selectedDelivery = row;
      this.newSale.discounted_total = row.amount;
      this.newSale.amount_paid = row.amount;
      this.$store.commit("SET_AJAX_TASK", "GENERATING_INVOICE");
      setTimeout(this.approvalModal.show(), 1);
    },
  },
};
</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">
          {{ `Delivery Note #${$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',
                `Delivery Note #${$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',
                `Delivery-${$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("In-Stock") }}</th>
                <th scope="col">{{ $trans("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.product.quantity)
                  }}</span>
                  {{ item.product.unit }}
                </td>
                <td>
                  <span class="fw-bolder">{{
                    $helper.formatNumber(item.quantity)
                  }}</span>
                  {{ item.product.unit }}
                </td>
                <td>FBU {{ $helper.formatNumber(item.price) }}</td>
                <td>
                  FBU {{ $helper.formatNumber(item.price * item.quantity) }}
                </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"
                    >FBU {{ $helper.formatNumber(itemsAmount) }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <h4>{{ $trans("All Delivery Note") }}</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
              url="stock/clients/search"
              label="name"
              placeholder="Customer"
              v-model="dataFilter.client_id"
              :load-defaults="true"
              :records="[
                {
                  id: $trans('Walk-in'),
                  name: $trans('Walk-in Customer'),
                },
              ]"
              fetch-flag="SEARCHING_FOR_CLIENTS"
              ref="CustomersSelector"
            ></ZohoSearch>
          </div>
          <div class="ms-2">
            <select class="form-control" v-model="dataFilter.status">
              <option :value="undefined" hidden disabled>
                Delivery Status
              </option>
              <option value="PENDING">PENDING</option>
              <option value="ACCEPTED">ACCEPTED</option>
              <option value="CANCELLED">CANCELLED</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 font-size-13 table-light table-hover table-striped 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("Client") }}</th>
              <th scope="col">{{ $trans("TIN Number") }}</th>
              <th scope="col">Tot. {{ $trans("Products") }}</th>
              <th scope="col">Tot. {{ $trans("Amount") }}</th>
              <th scope="col">{{ $trans("Status") }}</th>
              <th scope="col">{{ $trans("Created By") }}</th>
              <th></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>
                <span class="fw-bold">{{
                  row.client ? row.client.name : "Walk-in"
                }}</span>
              </td>
              <td>
                <span>{{ row.client ? row.client.tinnumber : "N/A" }}</span>
              </td>
              <td>{{ $helper.formatNumber(row.total_items) }}</td>
              <td>FBU {{ $helper.formatNumber(row.amount) }}</td>
              <td>
                <span
                  class="badge bg-success font-size-14"
                  v-if="row.status == 'ACCEPTED'"
                  >{{ $trans("Accepted") }}</span
                >
                <span
                  class="badge bg-warning font-size-14"
                  v-else-if="row.status == 'PENDING'"
                  >{{ $trans("Pending") }}</span
                >
                <span class="badge bg-danger font-size-14" v-else>{{
                  $trans("Cancelled")
                }}</span>
              </td>
              <td>
                <a href="javascript:void(0)">{{ row.creator.name }}</a>
              </td>
              <td>
                <div class="">
                  <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="16"
                          height="16"
                          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: 'DeliveryNote',
                          params: {
                            reference: row.reference,
                            action: 'view',
                          },
                          query: {
                            origin: 'deliveryNote',
                          },
                        }"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          fill="currentColor"
                          class="bi bi-journals me-3"
                          viewBox="0 0 16 16"
                        >
                          <path
                            d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"
                          />
                          <path
                            d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z"
                          />
                        </svg>
                        {{ $trans("View Delivery Note") }}
                      </RouterLink>
                    </li>

                    <li v-if="row.status == 'PENDING'">
                      <a
                        class="dropdown-item"
                        @click.prevent="showApprovalModal(row)"
                      >
                        <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("Generate Invoice") }}
                      </a>
                    </li>

                    <li
                      v-if="
                        this.hasPermissionTo('D') && row.status == 'PENDING'
                      "
                    >
                      <a
                        class="dropdown-item"
                        href="javascript:void(0)"
                        @click.prevent="handleDestroy(row, i)"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="20"
                          height="20"
                          fill="currentColor"
                          class="bi bi-x-octagon me-3 text-danger"
                          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("Delete") }}</a
                      >
                    </li>
                  </ul>
                </div>
              </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>

  <div
    class="modal fade"
    id="approval-modal"
    tabindex="-1"
    aria-labelledby="approval-modalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" v-if="selectedDelivery != null">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-white" id="approval-modalLabel">
            Delivery note approval & Generating Invoice <br />
            #<span class="fw-bold">{{ this.selectedDelivery.code }}</span>
          </h5>
        </div>
        <div class="modal-body p-2">
          <div class="row g-gs align-items-center">
            <div class="col-12">
              <div class="form-group d-flex justify-content-between">
                <label class="form-label">Total Amount</label>
                <div class="form-control-wrap">
                  <div class="input-group">
                    <span class="fw-bold font-size-17"
                      >{{
                        $helper.formatNumber(selectedDelivery.amount)
                      }}
                      FBU</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <hr />
            <div class="col-6">
              <div class="form-group">
                <label class="form-label required">Amount To Pay</label>
                <div class="form-control-wrap">
                  <div class="input-group">
                    <span class="input-group-text">FB</span>
                    <input
                      type="number"
                      @keyup="calculateAmountRemain"
                      v-model="newSale.amount_paid"
                      class="form-control fw-bold"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label class="form-label">Amount Due</label>
                <div class="form-control-wrap">
                  <div class="input-group fw-bold">
                    <span>{{
                      $helper.formatNumber(newSale.amount_remain)
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <br /><br /><br /><br />
            <div class="col-6">
              <div class="form-group">
                <label class="form-label">{{ $trans("Payment Ref") }}</label>
                <div class="form-control-wrap">
                  <input
                    type="text"
                    class="form-control"
                    v-model="newSale.payment_ref"
                    placeholder="Payment Ref"
                  />
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label class="form-label required">Payment Mode</label>
                <div class="form-control-wrap">
                  <select class="form-select" v-model="newSale.payment_method">
                    <option value="null" selected hidden>Payment Method</option>
                    <option
                      v-for="row in paymentModes"
                      :key="row.id"
                      :value="row.id"
                    >
                      {{ row.name }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div
              class="col-6"
              v-if="newSale.amount_remain && newSale.amount_remain != 0"
            >
              <div class="form-group">
                <label class="form-label required">{{
                  $trans("Due Date")
                }}</label>
                <div class="form-control-wrap">
                  <input
                    type="date"
                    class="form-control"
                    v-model="newSale.payment_date"
                    placeholder="Due Date"
                  />
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <label class="form-label">Comments</label>
                <div class="form-control-wrap">
                  <textarea
                    class="form-control"
                    v-model="newSale.comment"
                  ></textarea>
                </div>
              </div>
            </div>
            <div class="col-12 m-1">
              <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <LoadingButton
                  task="PAYING_FOR_ORDER"
                  class="btn btn-primary btn-block"
                  type="button"
                  @clicked="submitApproval"
                  :disabled="
                    (newSale.amount_paid && newSale.amount_paid < 0) ||
                    !newSale.payment_method
                  "
                >
                  <template #caption>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      fill="currentColor"
                      class="bi bi-check-all"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="M8.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L2.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093L8.95 4.992a.252.252 0 0 1 .02-.022zm-.92 5.14.92.92a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 1 0-1.091-1.028L9.477 9.417l-.485-.486-.943 1.179z"
                      />
                    </svg>
                    Confirm and Save
                  </template>
                </LoadingButton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
