<script>
import { tableMixin } from "@/helpers/tables.mixin";
import ZohoSearch from "@/components/ZohoSearch.vue";
export default {
  name: "TrackerReport",
  mixins: [tableMixin],
  components: {
    ZohoSearch,
  },
  data: () => ({
    dataUrl: "stock/reports/store-status",
    task: "GETTING_PRODUCT_TRACKER",
    searchKey: null,
    detailModal: null,
    selectedProduct: null,
  }),
  computed: {
    isFetchingTracker() {
      this.$store.commit("SET_AJAX_TASK", this.task);
      return (
        this.$store.state.isLoading &&
        this.$store.state.loadingTask == this.task
      );
    },
    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: {
    getOpenQty(row) {
      let a = row.currentQty - row.receiveQty;
      return a + row.transferedQty;
    },
    detailsCMM(row) {
      this.selectedProduct = row;
      this.detailModal = new bootstrap.Modal(
        document.getElementById("detail-modal")
      );
      setTimeout(this.detailModal.show(), 1);
    },
  },
};
</script>
<template>
  <div class="row">
    <div class="col-lg-12">
      <h4 id="Title">{{ $trans("Stock status report") }}</h4>
      <div class="w-100 justify-content-between d-flex align-items-center my-2">
        <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
              placeholder="Select Product"
              url="stock/products/search"
              label="name"
              :load-defaults="true"
              style="z-index: 999"
              v-model="dataFilter.product"
            ></ZohoSearch>
          </div>
          <div class="ms-2">
            <ZohoSearch
              placeholder="Select Category"
              url="stock/categories"
              label="name"
              :load-defaults="true"
              style="z-index: 999"
              v-model="dataFilter.category"
            ></ZohoSearch>
          </div>

          <div class="ms-2">
            <ZohoSearch
              placeholder="Select Sub-Category"
              url="stock/categories/subcategory"
              label="name"
              :load-defaults="true"
              style="z-index: 999"
              v-model="dataFilter.scategory"
            ></ZohoSearch>
          </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-success btn btn-icon ms-1"
            type="button"
            :disabled="!rows.length"
            @click="handleExcelExport('stock-status', 'Stock status 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>
          <button
            class="btn-dark btn btn-icon ms-1"
            type="button"
            :disabled="!rows.length"
            @click="handlePrint('#stock-status', [], 'Stock status 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>
        </div>
      </div>
      <div class="w-100 justify-content-between d-flex align-items-center my-2">
        <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
        class="d-flex justify-content-center loader-container"
        v-if="isFetchingTracker && !products.length"
      >
        <div class="lds-ellipsis">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="table-responsive" v-else>
        <table
          class="table font-size-13 table-light table-hover table-striped align-middle table-check"
          id="stock-status"
        >
          <thead>
            <tr>
              <th scope="col">№</th>
              <th scope="col">{{ $trans("Category") }}</th>
              <th scope="col">{{ $trans("Product") }}</th>
              <th scope="col">{{ $trans("Expiry") }}</th>
              <th scope="col">{{ $trans("Open. Qty") }}</th>
              <th scope="col">{{ $trans("Received. Qty") }}</th>
              <th scope="col">{{ $trans("Sold. Qty") }}</th>
              <th scope="col">{{ $trans("Close. Qty") }}</th>
              <th scope="col">{{ $trans("MAC (CMM)") }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, i) in products" :key="i" @click="detailsCMM(row)">
              <td>{{ i + 1 }}</td>
              <td>
                <i class="uil uil-external-link-alt"></i>
                {{ $helper.capitalizeFirstLetter(row.category.name || "N/A") }}
              </td>
              <td>
                <i class="uil uil-arrow-right"></i>
                <span class="fw-bold font-size-12"
                  >{{ row.name.toUpperCase() }}
                  <span class="fw-lighter">{{
                    row.packaging || ""
                  }}</span></span
                >
              </td>
              <td class="text-purple text-nowrap">
                {{
                  row.expiry
                    ? $helper.shortDate(row.expiry.expiration_date)
                    : "N/A"
                }}
              </td>
              <td class="fw-bolder">
                {{ $helper.formatNumber(getOpenQty(row)) }}
              </td>
              <td>{{ $helper.formatNumber(row.receiveQty) }}</td>
              <td>{{ $helper.formatNumber(row.transferedQty) }}</td>
              <td>
                <span class="text-purple fw-bolder">{{
                  $helper.formatNumber(row.currentQty)
                }}</span>
              </td>
              <td>
                {{ row.averageQty.average_quantity || 0 }}
              </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="detail-modal"
    tabindex="-1"
    aria-labelledby="detail-modalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" v-if="selectedProduct != null">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-white" id="detail-modalLabel">
            Details about how products solds
          </h5>
        </div>
        <div class="modal-body p-2">
          <div class="row g-gs align-items-center">
            <div class="col-12">
              <div class="table-responsive">
                <table
                  class="table font-size-13 table-light table-hover table-striped align-middle table-nowrap table-check"
                  id="pagination-table"
                >
                  <tbody>
                    <tr>
                      <td class="fw-bold">Product:</td>
                      <td class="fw-bold text-purple">
                        {{ selectedProduct.name.toUpperCase() || "---" }}
                      </td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Sold Qty:</td>
                      <td class="fw-bold text-purple">
                        {{ selectedProduct.transferedQty || "---" }}
                      </td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Transactions:</td>
                      <td class="fw-bold text-purple">
                        {{
                          selectedProduct.averageQty.transactions_nbers || "---"
                        }}
                        Transactions
                      </td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Period:</td>
                      <td class="fw-bold text-purple">
                        Sold in {{ selectedProduct.averageQty.months || "---" }}
                        Month<label v-if="selectedProduct.averageQty.months > 1"
                          >s</label
                        >
                      </td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Average:</td>
                      <td class="fw-bold text-purple">
                        {{ selectedProduct.averageQty.average_quantity || "---" }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
