<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-md-6">
                    <h3>
                      {{ $trans("Products") }}
                      <span class="text-muted fw-normal"
                        >({{ totalRows }})</span
                      >
                    </h3>
                  </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 v-if="this.hasPermissionTo('C')">
                        <a
                          href="javascript:void(0)"
                          class="btn btn-default border border-secondary"
                          data-bs-toggle="modal"
                          data-bs-target="#upload-modal"
                          ><i class="uil uil-upload me-1"></i>
                          {{ $trans("Upload Products") }}</a
                        >
                      </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="row mb-2">
                  <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="!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', [], 'Products 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="input-group search-area right d-lg-inline-flex d-none"
                    >
                      <input
                        type="text"
                        class="form-control"
                        placeholder="Search here..."
                        v-model="searchKey"
                      />
                      <span class="input-group-text"
                        ><a href="javascript:void(0)"
                          ><i class="uil uil-search"></i></a
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="table-responsive">
                  <table
                    class="table font-size-13 table-light table-hover table-striped"
                    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("Code") }}</th>
                        <th scope="col">{{ $trans("Category") }}</th>
                        <th scope="col">{{ $trans("Unit") }}</th>
                        <th scope="col" title="Purchase Price">
                          {{ $trans("P.Price") }}
                        </th>
                        <th scope="col" title="Selling Price">
                          {{ $trans("S.Price") }}
                        </th>
                        <!-- <th scope="col">RHIA Price</th> -->
                        <!-- <th scope="col">INTER. Price</th> -->
                        <th class="action">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(product, i) in products" :key="product.id">
                        <th class="check d-print-none" scope="row">
                          <div class="form-check font-size-16">
                            <input
                              type="checkbox"
                              class="form-check-input"
                              :value="product.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 d-print-none">
                              <img
                                class="avatar-sm img-thumbnail h-auto rounded-circle"
                                alt="Customer"
                                :src="
                                  product.image
                                    ? getUploadedImage(product.image)
                                    : '/img/default.jpg'
                                "
                                style="
                                  width: 40px;
                                  height: 40px;
                                  cursor: pointer;
                                "
                                @click="editProductImage(product)"
                              />
                            </div>
                            <div>
                              <a
                                href="#"
                                class="text-reset font-size-12 fw-bold"
                                >{{ product.name.toUpperCase() }}
                                {{ product.packaging || "" }}</a
                              >
                            </div>
                          </div>
                        </td>
                        <td>{{ product.pcode }}</td>
                        <td
                          :title="
                            product.category ? product.category.name : 'N/A'
                          "
                        >
                          <span class="fw-bold text-purple">
                            {{
                              product.category
                                ? limitCharacters(
                                    product.category.name.toUpperCase(),
                                    10
                                  )
                                : "N/A"
                            }}
                          </span>
                        </td>
                        <td>{{ product.unit ? product.unit.name : "N/A" }}</td>
                        <td>
                          <span class="fw-bold text-nowrap"
                            >FBU
                            {{ $helper.formatNumber(product.cost_price) }}</span
                          >
                        </td>
                        <td>
                          <span class="fw-bold text-nowrap"
                            >FBU
                            {{
                              $helper.formatNumber(product.private_price)
                            }}</span
                          >
                        </td>
                        <!-- <td>
                          <span class="fw-bold"
                            >FBU
                            {{ $helper.formatNumber(product.rhia_price) }}</span
                          >
                        </td>
                        <td>
                          <span class="fw-bold"
                            >USD
                            {{
                              $helper.formatNumber(product.inter_price)
                            }}</span
                          >
                        </td> -->
                        <td class="action">
                          <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(product)"
                                  href="javascript:void(0)"
                                  >{{ $trans("Edit") }}</a
                                >
                              </li>
                              <li v-if="this.hasPermissionTo('D')">
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleDestroy(product, 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">
                <product-creator
                  @saved="handleSavedRow"
                  v-if="!displayMode"
                  :product="selectedProduct"
                ></product-creator>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    aria-live="polite"
    aria-atomic="true"
    class="position-relative"
    v-if="isUploading"
  >
    <div class="toast-container position-fixed end-0 p-3" style="bottom: 20px">
      <div
        class="toast show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <strong class="me-auto">Uploading</strong>
          <small class="text-muted">just now</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body">
          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              :style="`width: ${percentageCount}%`"
              :aria-valuenow="percentageCount"
              aria-valuemin="0"
              aria-valuemax="100"
            >
              {{ percentageCount }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <input
    type="file"
    id="productImage"
    class="d-none"
    accept="image/*"
    @change="handleUploading($event)"
  />
  <div
    class="modal fade"
    tabindex="-1"
    id="upload-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">
            <div
              class="font-size-14 alert alert-purple alert-outline alert-dismissible fade show"
              role="alert"
            >
              <span
                class="badge rounded-circle header-profile-user badge-soft-purple"
              >
                <i
                  class="uil uil-upload-alt font-size-20 text-dark"
                  style="position: relative; top: 3px"
                ></i>
              </span>

              Required Columns in your products list excel
            </div>
            <span class="font-size-14 fw-bold">
              <ul class="list-unstyled pricing-features mb-0">
                <li>
                  <i
                    class="uil uil-check-circle text-success font-size-18 align-middle me-2"
                  ></i>
                  product_name
                </li>
                <li>
                  <i
                    class="uil uil-check-circle text-success font-size-18 align-middle me-2"
                  ></i>
                  packaging
                </li>
                <li>
                  <i
                    class="uil uil-check-circle text-success font-size-18 align-middle me-2"
                  ></i>
                  selling_price
                </li>
                <li>
                  <i
                    class="uil uil-check-circle text-success font-size-18 align-middle me-2"
                  ></i>
                  purchase_price
                </li>
              </ul>
            </span>
          </h5>
          <button
            type="button"
            class="btn btn-danger btn-rounded"
            data-bs-dismiss="modal"
            aria-label="Close"
          >
            <i class="uil uil-times font-size-16"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="mb-3 row">
            <label class="col-md-2 col-form-label required">{{
              $trans("File")
            }}</label>
            <div class="col-md-10">
              <input
                class="form-control border border-secondary"
                type="file"
                ref="productFile"
                accept=".xls, .xlsx"
              />
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-8">
              <loading-button
                task="CREATING_UPLOAD"
                class="btn btn-primary"
                type="button w-100"
                @click="handleFileUpload"
              >
                <template #caption
                  ><i class="uil uil-refresh"></i>
                  {{ $trans("Check before Submit") }}</template
                >
              </loading-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="offcanvas offcanvas-end stock-offcanvas"
    tabindex="-1"
    id="importedProductOffCanvas"
    aria-labelledby="importedProductLabel"
  >
    <template v-if="!$helper.empty(uploadedData)">
      <div class="offcanvas-header">
        <h5 id="importedProductLabel">Product going to Imported</h5>
        <div class="d-flex align-items-center">
          <a
            href="javascript:void(0)"
            class="btn btn-outline-primary me-2"
            @click="saveModifiedData"
          >
            <i class="uil uil-check fs-3"></i>
          </a>
          <a
            href="javascript:void(0)"
            class="btn btn-outline-secondary"
            @click.prevent="
              handlePrint('#importing-table', `Products to be imported`)
            "
          >
            <i class="uil uil-print fs-3"></i>
          </a>
          <a
            href="javascript:void(0)"
            class="text-muted"
            @click.prevent="
              handleExcelExport('importing-table', `Products to be imported`)
            "
          >
            <svg
              height="40px"
              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="!uploadedData.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-check" id="importing-table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">{{ $trans("Name") }}</th>
                <th scope="col">{{ $trans("Packaging") }}</th>
                <th scope="col">P.{{ $trans("Amount") }}</th>
                <th scope="col">S.{{ $trans("Amount") }}</th>
                <th scope="col">{{ $trans("Category") }}</th>
                <th scope="col">{{ $trans("Unit") }}</th>
                <th class="action">{{ $trans("Actions") }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in uploadedData" :key="'item' + i">
                <td>{{ i }}</td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    v-model="ModifiedData[i].name"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    v-model="ModifiedData[i].packaging"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    v-model="ModifiedData[i].purchase_price"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    v-model="ModifiedData[i].selling_price"
                  />
                </td>
                <td>
                  <select
                    class="form-control"
                    required="required"
                    v-model="ModifiedData[i].category"
                  >
                    <option value="">Select Category</option>
                    <option
                      v-for="category in categories"
                      :value="category.id"
                      :key="category.id"
                    >
                      {{ category.name }}
                    </option>
                  </select>
                </td>
                <td>
                  <select class="form-control" v-model="ModifiedData[i].unit">
                    <option value="">Select Unit</option>
                    <option
                      v-for="unit in units"
                      :value="unit.id"
                      :key="unit.id"
                    >
                      {{ unit.name }}
                    </option>
                  </select>
                </td>
                <td>
                  <a
                    href="javascript:void(0)"
                    class="text-danger"
                    title="Remove Item"
                    @click.prevent="deleteItem(i)"
                  >
                    <i class="uil uil-trash fs-5"></i>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { tableMixin } from "@/helpers/tables.mixin";
import { permissionsHandler } from "@/helpers/permissions-handler";
import { getUploadedImage } from "@/helpers/utils.js";
import ProductCreator from "./ProductCreator.vue";
import LoadingButton from "@/components/LoadingButton.vue";
export default {
  name: "Products",
  mixins: [tableMixin, permissionsHandler],
  components: {
    ProductCreator,
    LoadingButton,
  },
  data: () => ({
    dataUrl: "stock/products",
    selectedProduct: null,
    progressBarWidth: 0,
    percentageCount: 0,
    isUploading: false,
    selectedRow: null,
    uploadingProModal: null,
    uploadedProModal: null,
    uploadedData: null,
    MissedProData: null,
    ModifiedData: [],
    units: [],
    categories: [],
    searchKey: null,
  }),
  mounted() {
    this.uploadingProModal = new bootstrap.Modal(
      document.getElementById("upload-modal"),
      {}
    );
    this.offCanvas = new bootstrap.Offcanvas(
      document.getElementById("importedProductOffCanvas")
    );
  },
  computed: {
    products() {
      let keyword = this.searchKey && this.searchKey.toLowerCase();
      let items = this.rows;
      if (keyword) {
        items = items.filter(
          (item) => String(item.name).toLowerCase().indexOf(keyword) > -1
        );
      }
      return items;
    },
  },
  methods: {
    getUploadedImage,
    editProductImage(product) {
      this.selectedRow = product;
      document.querySelector("#productImage").click();
    },
    handleUploading(e) {
      if (e.target.files && e.target.files.length > 0) {
        let fd = new FormData();
        fd.append("product_id", this.selectedRow.id);
        fd.append("file", e.target.files[0], e.target.files[0].name);
        this.isUploading = true;
        this.$http
          .post("stock/products/store/file", fd, {
            onUploadProgress: (uploadEvent) => {
              let percentage = Math.round(
                (uploadEvent.loaded / uploadEvent.total) * 100
              );
              this.progressBarWidth = percentage;
              this.percentageCount = percentage;
            },
          })
          .then((response) => {
            this.isUploading = false;
            this.progressBarWidth = 0;
            this.percentageCount = 0;
            const index = this.rows.findIndex(
              (item) => item.id == this.selectedRow.id
            );
            this.rows[index].image = response.data.path;
            this.selectedRow = null;
          });
      }
    },
    handleEdit(product) {
      this.selectedProduct = product;
      this.toggleCrudMode();
    },
    handleDestroy(product, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${product.name} from list of products?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http
            .get(`stock/products/destroy/${product.id}`)
            .then((response) => {
              if (response.data.status) {
                this.rows.splice(i, 1);
                this.$notify({
                  type: "success",
                  message: response.data.message,
                });
              }
            });
        },
      });
    },
    handleSavedRow(row) {
      if (this.selectedProduct) {
        let index = this.rows.findIndex(
          (item) => item.id == this.selectedProduct.id
        );
        this.rows[index] = row;
        this.selectedProduct = 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 products",
          content: "Are you sure you want to proceed?",
          actionText: "Yes",
          closeText: "Cancel",
          classes: "btn btn-danger",
          action: () => {
            this.$http
              .get(`stock/products/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: "Products deleted successfully",
                  });
                }
              });
          },
        });
      }
    },
    handleFileUpload() {
      const productFile = this.$refs.productFile;
      const selectedFile = productFile.files[0];

      if (selectedFile) {
        const fileName = selectedFile.name;
        const fileExtension = fileName.split(".").pop().toLowerCase();
        if (fileExtension === "xls" || fileExtension === "xlsx") {
          const fd = new FormData();
          fd.append("excel_file", selectedFile);
          this.$http
            .all([
              this.$http.post("stock/imports", fd),
              this.$http.get("stock/units"),
              this.$http.get("stock/categories"),
            ])
            .then(
              this.$http.spread((responseOne, responseTwo, responseThree) => {
                this.$notify({
                  type: "success",
                  message: responseOne.data.message,
                });
                this.units = responseTwo.data.rows;
                this.categories = responseThree.data.rows;
                this.uploadedData = responseOne.data.importedData;
                this.ModifiedData = this.uploadedData.map((item) => ({
                  ...item,
                }));
                this.MissedProData = responseOne.data.getMissingColumns;
                this.uploadingProModal.hide();
                this.offCanvas.show();
                productFile.value = "";
              })
            )
            .catch((error) => {
              this.$notify({
                type: "danger",
                message: response.data.message,
              });
            });
        } else {
          this.$notify({
            type: "danger",
            message:
              "Please Upload only Excel Files 97-2003 (.xls) OR Excel Files 2007+ (.xlsx)",
          });
          productFile.value = "";
        }
      } else {
        this.$notify({
          type: "danger",
          message: "Please Product File Can't be Empty!",
        });
        productFile.value = "";
      }
    },
    deleteItem(i) {
      this.uploadedData.splice(i, 1);
    },
    saveModifiedData() {
      this.$http
        .post(
          "stock/imports/store",
          this.$helper.generateFormData(this.ModifiedData)
        )
        .then((response) => {
          if (response.data.status) {
            this.$notify({
              type: "success",
              message: response.data.message,
            });
            this.offCanvas.hide();
            this.resetFilters();
          }
        });
    },
  },
};
</script>
