<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";
import ReceiptView from "./ReceiptView.vue";
export default {
  name: "SalesReport",
  mixins: [tableMixin, permissionsHandler],
  components: {
    ZohoSearch,
    ReceiptView,
    LoadingButton,
  },
  computed: {
    isFetchingSales() {
      this.$store.commit("SET_AJAX_TASK", this.task);
      return (
        this.$store.state.isLoading &&
        this.$store.state.loadingTask == this.task
      );
    },
    isGettingPaymentData() {
      return (
        this.$store.state.isLoading &&
        this.$store.state.loadingTask == "PAY_DEBTS"
      );
    },
    grandTotal() {
      return this.rows.reduce((a, b) => a + b.discounted_total, 0);
    },
    totalPaid() {
      return this.rows.reduce((a, b) => a + b.amount_paid, 0);
    },
    totalRemain() {
      return this.rows.reduce((a, b) => a + b.amount_remain, 0);
    },
  },
  data: () => ({
    selectedRow: null,
    paymentModes: [],
    thermalCss: [`${location.origin}/css/thermal-print.css`],
    newPayment: {
      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,
    },
    selectedInvoice: null,
    paymentModal: null,
    detailModal: null,
    task: "GETTING_SALES_REPORT",
  }),
  created() {
    if (this.isAdministrator) this.dataUrl = "stock/pos/sales?is_admin=1";
    else this.dataUrl = "stock/pos/sales";
    this.handleFetch(this.dataUrl);
  },
  mounted() {
    this.paymentModal = new bootstrap.Modal(
      document.getElementById("payment-modal")
    );
    this.$http.get("stock/pos/payments-modes").then((response) => {
      this.paymentModes = response.data.rows;
    });
  },
  methods: {
    GetMoreDetails(reference) {
      this.detailModal = new bootstrap.Modal(
        document.getElementById("detail-modal")
      );
      setTimeout(this.detailModal.show(), 1);
      console.log(reference);
    },
    handlePartialPayment() {
      if (this.selectedInvoice && this.newPayment.amount_paid) {
        this.newPayment.amount_remain =
          this.selectedInvoice.discounted_total -
          (this.selectedInvoice.amount_paid + this.newPayment.amount_paid);

        this.newPayment.record_id = this.selectedInvoice.id;
      }

      if (this.selectedInvoice.amount_remain >= this.newPayment.amount_paid) {
        this.$http
          .post(
            "stock/pos/sales/partial-payment",
            this.$helper.generateFormData(this.newPayment)
          )
          .then((response) => {
            if (response.data.status) {
              const index = this.rows.findIndex(
                (item) => item.id == this.selectedInvoice.id
              );
              if (index) {
                this.rows[index].amount_paid = this.newPayment.amount_paid;
                this.rows[index].amount_remain = this.newPayment.amount_remain;
                this.rows[index].paid = this.newPayment.amount_paid == 0;
              }

              this.paymentModal.hide();
              this.$notify({
                type: "success",
                message: "Payment recorded successfully",
              });
              Object.assign(this.newPayment, {
                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,
              });
              this.selectedInvoice = null;
              this.resetFilters();
            }
          });
      } else {
        this.$notify({
          type: "danger",
          message:
            "Amount Paid must be less or equal to remain amount! try again.",
        });
      }
    },
    handleDestroy(orderId) {
      this.$http.get(`stock/pos/sales/destroy/${orderId}`).then((response) => {
        if (response.data.status) {
          const index = this.rows.findIndex((item) => item.id == orderId);
          this.rows.splice(index, 1);
          this.$notify({
            type: "success",
            message: "Sales deleted successfully",
          });
        }
      });
    },
    showPaymentModal(sale) {
      this.selectedInvoice = sale;
      this.$store.commit("SET_AJAX_TASK", "PAY_DEBTS");
      setTimeout(this.paymentModal.show(), 1);
    },
  },
};
</script>
<template>
  <div class="row">
    <div class="col-lg-12">
      <h4 ref="title">{{ $trans("Sales Report") }}</h4>
      <div class="row">
        <div
          class="col-xl-3 col-sm-6"
          v-for="(method, i) in PaymentMethodUsed"
          :key="i"
        >
          <div class="card dashboard">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0 me-3">
                  <div class="avatar-sm">
                    <div
                      class="avatar-title bg-primary-subtle text-white rounded-circle font-size-20"
                    >
                      <i class="uil uil-chart-pie-alt"></i>
                    </div>
                  </div>
                </div>
                <div class="flex-grow-1 overflow-hidden">
                  <p class="mb-1 text-truncate text-muted">
                    <span class="fw-bold text-purple">{{
                      method.payment_type
                    }}</span>
                  </p>
                  <h4 class="font-size-18 mb-0">
                    {{ $helper.formatNumber(method.total) }}
                  </h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card scrollable-content pb-5 overflow-auto">
        <div class="card-header">
          <div class="row w-100">
            <div class="col-md-8 d-flex align-items-center">
              <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"></i>
                </div>
              </div>
              <div class="ms-1">
                <ZohoSearch
                  url="stock/clients/search"
                  label="name"
                  placeholder="select a client"
                  v-model="dataFilter.client_id"
                  :load-defaults="true"
                  :records="[{ id: 'walk-in', name: 'Walk-in Customer' }]"
                  fetch-flag="SEARCHING_FOR_CLIENTS"
                ></ZohoSearch>
              </div>
              <div class="ms-1">
                <select class="form-control" v-model="dataFilter.type">
                  <option :value="undefined" hidden disabled>Sales Type</option>
                  <option value="POS_SALE">FROM COUNTER</option>
                  <option value="FROM_DERIVERY_NOTE">FROM DERIVERY NOTE</option>
                </select>
              </div>
              <div class="ms-1">
                <select class="form-control" v-model="dataFilter.status">
                  <option :value="undefined" hidden disabled>Status</option>
                  <option value="PAID">PAID</option>
                  <option value="DEBTS">DEBTS</option>
                  <option value="DELETED">CANCELLED</option>
                </select>
              </div>
            </div>
            <div
              class="col-md-4 d-flex gap-1 align-items-center justify-content-md-end mb-1"
            >
              <button class="btn btn-primary" @click="handleDataFilter">
                <span>{{ $trans("Apply") }}</span>
              </button>
              <button
                class="btn btn-icon btn-outline-primary"
                @click="resetFilters"
              >
                <i class="uil uil-refresh"></i>
              </button>
              <button
                class="btn btn-icon btn-dark"
                :disabled="!rows.length"
                @click="handlePrint('#sales-table', [], 'Sales Report')"
              >
                <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>
              <button
                class="btn btn-icon btn-success"
                :disabled="!rows.length"
                @click="
                  handleExcelExport('sales-table', 'Purchase Products Report')
                "
              >
                <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>
            </div>
          </div>
        </div>
        <div
          class="d-flex justify-content-center loader-container"
          v-if="isFetchingSales && !rows.length"
        >
          <div class="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div class="card-body" v-else>
          <div class="table-responsive">
            <table
              class="table font-size-13 align-middle table-light table-hover table-striped table-nowrap table-check"
              id="sales-table"
              v-if="rows.length"
            >
              <thead>
                <tr>
                  <th class="d-print-none rounded-start" style="width: 15px">
                    <div class="form-check">
                      <input
                        class="form-check-input font-size-16"
                        type="checkbox"
                        value=""
                        id="checkAll"
                      />
                      <label class="form-check-label" for="checkAll"> </label>
                    </div>
                  </th>
                  <th>{{ $trans("Invoice") }} #</th>
                  <th>{{ $trans("Client") }}</th>
                  <th>{{ $trans("Amount") }}</th>
                  <th>{{ $trans("Paid") }}</th>
                  <th>{{ $trans("Amount Due") }}</th>
                  <th>{{ $trans("Status") }}</th>
                  <th v-if="isAdministrator">{{ $trans("Created By") }}</th>
                  <th>{{ $trans("Created at") }}</th>
                  <th class="d-print-none">{{ $trans("Action") }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="order in rows" :key="order.reference">
                  <td class="d-print-none">
                    <div class="form-check">
                      <input
                        class="form-check-input font-size-16"
                        type="checkbox"
                        value=""
                        id="flexCheckexampleone"
                      />
                      <label class="form-check-label" for="flexCheckexampleone">
                      </label>
                    </div>
                  </td>
                  <td>
                    <span class="text-dark fw-bold">{{
                      order.code || order.reference
                    }}</span>
                  </td>
                  <td class="fw-bold">
                    <a href="#" class="text-reset">{{
                      order.client ? order.client.name : "Walk-in Customer"
                    }}</a>
                  </td>
                  <td class="fw-bold text-purple">
                    <span
                      >FB
                      {{ $helper.formatNumber(order.discounted_total) }}</span
                    >
                  </td>
                  <td>
                    <span
                      >FB
                      <b>{{ $helper.formatNumber(order.amount_paid) }}</b></span
                    >
                  </td>
                  <td>
                    <span
                      >FB
                      <b>{{
                        $helper.formatNumber(order.amount_remain)
                      }}</b></span
                    >
                  </td>
                  <td v-on:click="GetMoreDetails(order.reference)">
                    <span
                      class="badge bg-success font-size-14"
                      v-if="order.paid == 1"
                      ><i class="uil-check-circle"></i> Paid</span
                    >
                    <span class="badge bg-warning font-size-14" v-else
                      ><i class="uil-exchange"></i> Due</span
                    >
                  </td>
                  <td v-if="isAdministrator">
                    <span>{{
                      order.creator
                        ? limitCharacters(order.creator.name, 10)
                        : "N/A"
                    }}</span>
                  </td>
                  <td>
                    <span>{{ $helper.formatDate(order.committed_date) }}</span>
                  </td>
                  <td class="action">
                    <div class="">
                      <a
                        href="javascript:void(0)"
                        class="dark sharp btn btn-light btn-sm"
                        data-bs-toggle="dropdown"
                        aria-expanded="true"
                      >
                        <svg
                          width="20px"
                          height="20px"
                          viewBox="0 0 24 24"
                          version="1.1"
                        >
                          <g
                            stroke="none"
                            stroke-width="1"
                            fill="none"
                            fill-rule="evenodd"
                          >
                            <rect x="0" y="0" width="24" height="24"></rect>
                            <circle
                              fill="#000000"
                              cx="5"
                              cy="12"
                              r="2"
                            ></circle>
                            <circle
                              fill="#000000"
                              cx="12"
                              cy="12"
                              r="2"
                            ></circle>
                            <circle
                              fill="#000000"
                              cx="19"
                              cy="12"
                              r="2"
                            ></circle>
                          </g>
                        </svg>
                      </a>
                      <div
                        class="d-print-none dropdown-menu dropdown-menu-end"
                        data-popper-placement="bottom-end"
                      >
                        <a
                          class="dropdown-item"
                          href="javascript:void(0)"
                          v-if="order.paid != 1"
                          @click.prevent="showPaymentModal(order)"
                          ><i
                            class="uil uil-process text-success fs-5 me-3"
                          ></i>
                          Process Payment</a
                        >
                        <!-- <a
                          class="dropdown-item"
                          href="javascript:void(0)"
                          v-if="this.hasPermissionTo('R')"
                          @click.prevent="selectedRow = order"
                          ><i class="uil uil-eye text-primary fs-5 me-3"></i>
                          {{ $trans("View Items") }}</a
                        > -->
                        <router-link
                          :to="{
                            name: 'ReceiptViewLarge',
                            params: { reference: order.reference },
                          }"
                          class="dropdown-item"
                          v-if="this.hasPermissionTo('R')"
                          ><i class="uil uil-eye text-primary fs-5 me-3"></i
                          >{{ $trans("View Items") }}</router-link
                        >
                        <router-link
                          :to="{
                            name: 'PosSale',
                            params: { reference: order.reference },
                          }"
                          class="dropdown-item"
                          v-if="
                            this.hasPermissionTo('U') && order.amount_paid == 0
                          "
                          ><i class="uil uil-edit text-primary fs-5 me-3"></i
                          >{{ $trans("Edit") }}</router-link
                        >
                        <a
                          class="dropdown-item"
                          v-if="this.hasPermissionTo('D')"
                          href="javascript:void(0)"
                          @click.prevent="
                            $confirm({
                              title: 'Refund Proccess',
                              content: `Are you sure you want to refund this invoice #<b class='fw-bold'>${
                                order.code || $helper.padNumber(order.code)
                              }</b> ?
                              <br/><br/>

                              <p class='alert alert-info'>This invoice will be refunded and product quantities going to be back into stock.
                                <br/>
                                <p><svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='currentColor' class='bi bi-exclamation-diamond-fill me-2 text-danger' viewBox='0 0 16 16'>
                                    <path d='M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098L9.05.435zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/>
                                  </svg> This Action is irrevesible so make sure!
                                  </p>
                                </p>
                              `,
                              classes: 'btn btn-danger',
                              actionText: 'Yes, Continue',
                              closeText: 'Cancel',
                              action: () => {
                                handleDestroy(order.id);
                              },
                            })
                          "
                        >
                          <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("Refund") }}</a
                        >
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td colspan="2">Total:</td>
                  <td class="fw-bolder">
                    FB {{ $helper.formatNumber(grandTotal) }}
                  </td>
                  <td class="fw-bolder">
                    FB {{ $helper.formatNumber(totalPaid) }}
                  </td>
                  <td class="fw-bolder">
                    FB {{ $helper.formatNumber(totalRemain) }}
                  </td>
                  <td colspan="4"></td>
                </tr>
              </tbody>
            </table>
            <div v-else class="p-2 w-100">
              <div class="ant-empty">
                <div class="ant-empty-description">
                  <img src="/img/no sales.svg" width="400" />
                </div>
                <br />
                <p class="alert alert-warning">
                  {{ $trans("No Sales Report Found") }} !
                </p>
              </div>
            </div>
          </div>
          <div class="pb-4 pt-2">
            <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>
    </div>
  </div>
  <div
    class="receipt receipt-end border-0 shadow"
    tabindex="-1"
    style="visibility: visible"
    aria-modal="true"
    role="dialog"
    :class="{ 'show-receipt': selectedRow != null }"
  >
    <div class="receipt-header bg-primary">
      <h4 class="receipt-title">{{ $trans("RECEIPT") }}</h4>
      <div class="text-center text-nowrap d-flex align-items-center">
        <a
          class="text-white mx-2"
          href="javascript:void(0)"
          @click.prevent="printWithoutHeader('#print-container', thermalCss)"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="28"
            height="28"
            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>
        <a
          class="text-danger"
          href="javascript:void(0)"
          @click.prevent="selectedRow = null"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="28"
            height="28"
            fill="currentColor"
            class="bi bi-x-circle-fill"
            viewBox="0 0 16 16"
          >
            <path
              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"
            />
          </svg>
        </a>
      </div>
    </div>
    <div class="receipt-body scrollable-content px-1">
      <ReceiptView
        v-if="selectedRow != null"
        :order="selectedRow"
      ></ReceiptView>
    </div>
  </div>

  <div
    class="modal fade"
    id="payment-modal"
    tabindex="-1"
    aria-labelledby="payment-modalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" v-if="selectedInvoice != null">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-white" id="payment-modalLabel">
            Payment For #{{ this.$helper.padNumber(selectedInvoice.id) }}
          </h5>
        </div>
        <div class="modal-body p-2">
          <div
            class="d-flex justify-content-center loader-container"
            v-if="isGettingPaymentData"
          >
            <div class="lds-ellipsis">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
          <div class="row g-gs align-items-center" v-else>
            <div class="col-6">
              <div class="form-group">
                <label class="form-label">Total Amount</label>
                <div class="form-control-wrap">
                  <div class="input-group">
                    <span class="input-group-text">FB</span>
                    <input
                      type="text"
                      :value="selectedInvoice.discounted_total"
                      class="form-control"
                      readonly
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label class="form-label">Paid Amount</label>
                <div class="form-control-wrap">
                  <div class="input-group">
                    <span class="input-group-text">FB</span>
                    <input
                      type="text"
                      :value="selectedInvoice.amount_paid"
                      class="form-control"
                      readonly
                    />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-6">
              <div class="form-group">
                <label class="form-label">Remain Amount</label>
                <div class="form-control-wrap">
                  <div class="input-group">
                    <span class="input-group-text">FB</span>
                    <input
                      type="text"
                      :value="selectedInvoice.amount_remain"
                      class="form-control"
                      readonly
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label class="form-label">Amount To Pay</label>
                <div class="form-control-wrap">
                  <div class="input-group">
                    <span class="input-group-text">FB</span>
                    <input
                      type="number"
                      v-model="newPayment.amount_paid"
                      class="form-control"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-6">
              <div class="form-group">
                <label class="form-label required">Issued date</label>
                <div class="form-control-wrap">
                  <input
                    type="date"
                    v-model="newPayment.payment_date"
                    class="form-control"
                    placeholder="Issued date"
                  />
                </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="newPayment.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-12">
              <div class="form-group">
                <label class="form-label">Comment</label>
                <div class="form-control-wrap">
                  <textarea
                    class="form-control"
                    v-model="newPayment.comment"
                  ></textarea>
                </div>
              </div>
            </div>
            <div class="col-12 m-1">
              <div class="form-group d-block">
                <LoadingButton
                  task="PAYING_FOR_ORDER"
                  class="btn btn-primary btn-block"
                  type="button"
                  @clicked="handlePartialPayment"
                  :disabled="
                    !newPayment.amount_paid || !newPayment.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>

  <div
    class="modal fade"
    id="detail-modal"
    tabindex="-1"
    aria-labelledby="detail-modalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-white" id="detail-modalLabel">
            Payment For
          </h5>
        </div>
        <div class="modal-body p-2"></div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.card {
  border-radius: 15px;
  border: 1px solid #ddd;
}
</style>
