<script>
import LoadingButton from "@/components/LoadingButton.vue";
import { permissionsHandler } from "@/helpers/permissions-handler";
import { tableMixin } from "@/helpers/tables.mixin";
export default {
  name: "PaymentMode",
  mixins: [permissionsHandler, tableMixin],
  components: { LoadingButton },
  data: () => ({
    modes: [],
    NewPaymentMode: {},
    modal: null,
    selectedRow: {},
  }),
  created() {
    this.$http.get("stock/paymentmode").then((response) => {
      this.modes = response.data.rows;
    });
  },
  mounted() {
    this.modal = new bootstrap.Modal(
      document.getElementById("payement-mode-modal"),
      {}
    );
  },
  methods: {
    handleSave() {
      this.$http
        .post(
          "stock/paymentmode/store",
          this.$helper.generateFormData(this.NewPaymentMode)
        )
        .then((response) => {
          if (response.data.status) {
            if (!this.NewPaymentMode.id) {
              this.modes.unshift(response.data.row);
            } else {
              let index = this.modes.findIndex(
                (row) => row.id == this.NewPaymentMode.id
              );
              this.modes[index] = response.data.row;
            }
            this.modal.hide();
            this.NewPaymentMode = {};
            this.$notify({
              type: "success",
              message: "Payement Mode saved successfully",
            });
          }
        });
    },
    handleEdit(mode) {
      this.NewPaymentMode = { ...mode };
      this.selectRow(mode);
      this.modal.show();
    },
    handleDestroy(mode, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${mode.name} from list of modes?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/paymentmode/destroy/${mode.id}`)
            .then((response) => {
              if (response.data.status) {
                this.modes.splice(i, 1);
                this.$notify({
                  type: "success",
                  message: "Payment Mode deleted successfully",
                });
              }
            });
        },
      });
    },
    selectRow(row) {
      this.selectedRow = row;
    },
  },
};
</script>
<template>
  <div class="row justify-content-center">
    <div class="col-md-10">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <h4>{{ $trans("Payment Mode") }} ({{ modes.length }})</h4>
            </div>
            <div class="col-md-6">
              <div class="d-flex justify-content-start">
                <select
                  name="action"
                  class="form-control bulk-options form-select"
                  v-model="bulkAction"
                >
                  <option :value="null">Bulk Actions</option>
                  <option value="activate">Activate</option>
                  <option value="disactivate">Disactivate</option>
                  <option value="delete" v-if="this.hasPermissionTo('D')">
                    {{ $trans("Delete") }}
                  </option>
                </select>
                <button
                  class="btn-primary btn btn-icon ms-1"
                  type="button"
                  :disabled="!bulkAction"
                  @click="handleBulkAction"
                >
                  {{ $trans("Apply") }}
                </button>
                <button
                  class="btn-primary btn btn-icon ms-1"
                  type="button"
                  :disabled="!modes.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="!modes.length"
                  @click="
                    handlePrint('#PaymentMode-table', [], 'Payment Mode List')
                  "
                >
                  <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="col-md-6">
              <div class="d-flex align-items-center mb-2">
                <button
                  v-if="this.hasPermissionTo('C')"
                  data-bs-toggle="modal"
                  data-bs-target="#payement-mode-modal"
                  class="btn btn-primary ms-auto"
                >
                  <i class="uil uil-plus me-1"></i> {{ $trans("Add New") }}
                </button>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table
              class="table align-middle table-light table-hover table-striped table-nowrap table-check"
              id="PaymentMode-table"
            >
              <thead>
                <tr>
                  <th class="check" scope="col" style="width: 50px">
                    <div class="form-check font-size-16">
                      <input type="checkbox" class="form-check-input" />
                      <label class="form-check-label" for="checkAll"></label>
                    </div>
                  </th>
                  <th scope="col">{{ $trans("Name") }}</th>
                  <th scope="col">{{ $trans("Currency") }}</th>
                  <th scope="col">{{ $trans("Description") }}</th>
                  <th scope="col">{{ $trans("Created By") }}</th>
                  <th style="width: 80px; min-width: 80px" class="d-print-none">
                    Action
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(mode, i) in modes" :key="mode.id">
                  <th class="check" scope="row">
                    <div class="form-check font-size-16">
                      <input
                        type="checkbox"
                        class="form-check-input"
                        :value="mode.id"
                        :id="'checkbox-' + i"
                      />
                      <label
                        class="form-check-label"
                        :for="'checkbox-' + i"
                      ></label>
                    </div>
                  </th>
                  <td class="fw-bold">
                    {{ mode.name.toUpperCase() }}
                  </td>
                  <td>{{ !mode.currency ? "N/A" : mode.currency }}</td>
                  <td>{{ !mode.description ? "N/A" : mode.description }}</td>
                  <td class="text-capitalize">
                    {{
                      !mode.creator ? "N/A" : mode.creator.name.toLowerCase()
                    }}
                  </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 v-if="this.hasPermissionTo('U')">
                          <a
                            class="dropdown-item"
                            @click.prevent="handleEdit(mode)"
                            href="javascript:void(0)"
                            >{{ $trans("Edit") }}</a
                          >
                        </li>
                        <li v-if="this.hasPermissionTo('D')">
                          <a
                            class="dropdown-item"
                            @click.prevent="handleDestroy(mode, i)"
                            href="javascript:void(0)"
                            >{{ $trans("Delete") }}</a
                          >
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="modal fade"
    tabindex="-1"
    id="payement-mode-modal"
    aria-labelledby="mySmallModalLabel"
    aria-hidden="true"
    style="display: none"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            {{
              NewPaymentMode.id
                ? $trans("Edit Payment Mode")
                : $trans("Create a new Payment Mode")
            }}
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label required">{{
              $trans("Method Name")
            }}</label>
            <div class="col-md-8">
              <input
                class="form-control"
                type="text"
                placeholder="Name"
                v-model="NewPaymentMode.name"
              />
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label">{{
              $trans("Currency")
            }}</label>
            <div class="col-md-8">
              <input
                class="form-control"
                type="text"
                placeholder="Currency"
                v-model="NewPaymentMode.currency"
              />
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-md-4 col-form-label">{{
              $trans("Description")
            }}</label>
            <div class="col-md-8">
              <textarea
                class="form-control"
                placeholder="Optional Comment"
                v-model="NewPaymentMode.description"
              ></textarea>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-8">
              <loading-button
                task="CREATING_PAYMENT_MODE"
                class="btn btn-primary"
                type="button w-100"
                @clicked="handleSave"
                :disabled="!NewPaymentMode.name || !NewPaymentMode.currency"
              >
                <template #caption>{{ $trans("Save and Close") }}</template>
              </loading-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
