<template>
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div class="crud-container">
            <div class="crud-display" :class="{ empty: !displayMode }">
              <template v-if="displayMode">
                <div class="row">
                  <div class="col-12">
                    <div class="mb-3">
                      <h3>
                        {{ $trans("Suppliers") }}
                        <span class="text-muted fw-normal ms-2"
                          >({{ totalRows }})</span
                        >
                      </h3>
                    </div>
                  </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="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="!rows.length"
                        @click="
                          handleExcelExport(
                            '#pagination-table',
                            'Supplier List'
                          )
                        "
                      >
                        <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', 'Supplier 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 flex-wrap align-items-start justify-content-md-end mt-2 mt-md-0 gap-2 mb-3"
                    >
                      <div></div>
                      <div v-if="this.hasPermissionTo('C')">
                        <a
                          href="javascript:void(0)"
                          class="btn btn-primary"
                          @click.prevent="toggleCrudMode"
                          ><i class="uil uil-plus me-1"></i>
                          {{ $trans("Add New") }}</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="table-responsive">
                  <table
                    class="table align-middle table-light table-hover table-striped table-nowrap table-check"
                    id="pagination-table"
                  >
                    <thead>
                      <tr>
                        <th
                          class="check d-print-none"
                          scope="col"
                          style="width: 50px"
                        >
                          <div class="form-check font-size-16">
                            <input
                              type="checkbox"
                              class="form-check-input"
                              id="checkAll"
                              @click="handleCheckAll"
                            />
                            <label
                              class="form-check-label"
                              for="checkAll"
                            ></label>
                          </div>
                        </th>
                        <th scope="col">{{ $trans("Name") }}</th>
                        <th scope="col">{{ $trans("TIN Number") }}</th>
                        <th scope="col">{{ $trans("Email") }}</th>
                        <th scope="col">{{ $trans("Phone") }}</th>
                        <th scope="col">{{ $trans("Address") }}</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="(supplier, i) in rows" :key="supplier.id">
                        <th class="check d-print-none" scope="row">
                          <div class="form-check font-size-16">
                            <input
                              type="checkbox"
                              class="form-check-input"
                              :value="supplier.id"
                              :id="'checkbox-' + i"
                              v-model="checkedRows"
                            />
                            <label
                              class="form-check-label"
                              :for="'checkbox-' + i"
                            ></label>
                          </div>
                        </th>
                        <td>
                          <div class="d-flex align-items-center">
                            <div class="me-2">
                              <img
                                src="/img/avatar.png"
                                class="d-print-none avatar-sm img-thumbnail h-auto rounded-circle"
                                alt="Customer"
                              />
                            </div>
                            <div>
                              <a href="#" class="text-reset fw-bold">{{
                                supplier.name.toUpperCase()
                              }}</a>
                            </div>
                          </div>
                        </td>
                        <td>{{ supplier.tin_number || "N/A" }}</td>
                        <td>{{ supplier.email || "N/A" }}</td>
                        <td>{{ supplier.phone || "N/A" }}</td>
                        <td>
                          <span>{{ supplier.address || "N/A" }}</span>
                        </td>
                        <td>
                          <a href="javascript:void(0)">{{
                            supplier.creator ? supplier.creator.name : "Admin"
                          }}</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 v-if="this.hasPermissionTo('U')">
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleEdit(supplier)"
                                  href="javascript:void(0)"
                                  >{{ $trans("Edit") }}</a
                                >
                              </li>
                              <li v-if="this.hasPermissionTo('D')">
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleDestroy(supplier, i)"
                                  href="javascript:void(0)"
                                  >{{ $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>
              </template>
              <template v-else>
                <div class="crud-display-line">
                  <button
                    class="btn-back crud-back"
                    type="button"
                    @click="toggleCrudMode"
                  >
                    <svg
                      height="18px"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M10 19l-7-7m0 0l7-7m-7 7h18"
                      ></path>
                    </svg>
                  </button>
                  <div class="crud-links"></div>
                </div>
              </template>
            </div>
            <div class="crud-create" :class="{ 'd-none': displayMode }">
              <div class="col-xxl-5 col-xl-6 col-lg-8 col-12">
                <supplier-creator
                  @saved="handleSavedRow"
                  v-if="!displayMode"
                  :supplier="selectedSupplier"
                ></supplier-creator>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { tableMixin } from "@/helpers/tables.mixin";
import SupplierCreator from "./SupplierCreator.vue";
import { permissionsHandler } from "@/helpers/permissions-handler";
export default {
  name: "Suppliers",
  mixins: [tableMixin, permissionsHandler],
  components: {
    SupplierCreator,
  },
  data: () => ({
    dataUrl: "stock/suppliers",
    selectedSupplier: null,
  }),
  methods: {
    handleEdit(supplier) {
      this.selectedSupplier = supplier;
      this.toggleCrudMode();
    },
    handleDestroy(supplier, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${supplier.name} from list of suppliers?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/suppliers/destroy/${supplier.id}`)
            .then((response) => {
              if (response.data.status) {
                this.rows.splice(i, 1);
                this.$notify({
                  type: "success",
                  message: response.data.message,
                });
              }
            });
        },
      });
    },
    handleSavedRow(row) {
      if (this.selectedSupplier) {
        let index = this.rows.findIndex(
          (item) => item.id == this.selectedSupplier.id
        );
        this.rows[index] = row;
        this.selectedSupplier = null;
      } else {
        this.rows.unshift(row);
      }
      this.toggleCrudMode();
    },
    handleBulkAction() {
      switch (this.bulkAction) {
        case "delete":
          this.handleBulkDelete();
          break;
        default:
          console.log(this.bulkAction);
      }
    },
    handleBulkDelete() {
      if (!this.checkedRows.length) {
        this.$notify({
          type: "error",
          message: "Please select multiple rows and continue",
        });
      } else {
        this.$confirm({
          title: "Delete suppliers",
          content: "Are you sure you want to proceed?",
          actionText: "Yes",
          closeText: "Cancel",
          classes: "btn btn-danger",
          action: () => {
            this.$http
              .get(`stock/supplier/bulk-destroy/${this.checkedRows.join(",")}`)
              .then((response) => {
                if (response.data.status) {
                  this.checkedRows.forEach((id) => {
                    let index = this.rows.findIndex((item) => item.id == id);
                    this.rows.splice(index, 1);
                  });
                  this.$notify({
                    type: "success",
                    message: "Suppliers deleted successfully",
                  });
                }
              });
          },
        });
      }
    },
  },
};
</script>
