<template>
  <div class="main-content">
    <breadcumb :page="$t('Create_Damage')" :folder="$t('Damages')"/>
    <div v-if="isLoading" class="loading_page spinner spinner-primary mr-3"></div>

    <validation-observer ref="Create_damage" v-if="!isLoading">
      <b-form @submit.prevent="Submit_Damage">
        <b-row>
          <b-col lg="12" md="12" sm="12">
            <b-card>
              <b-row>

                <b-modal hide-footer id="open_scan" size="md" :title="$t('Scan_Barcode')">
                  <qrcode-scanner :qrbox="250" :fps="10" style="width: 100%; height: calc(100vh - 56px);" @result="onScan" />
                </b-modal>

                <!-- warehouse -->
                <b-col md="6" class="mb-3">
                  <validation-provider name="warehouse" :rules="{ required: true}">
                    <b-form-group slot-scope="{ valid, errors }" :label="$t('warehouse') + ' ' + '*'">
                      <v-select
                        :class="{'is-invalid': !!errors.length}"
                        :state="errors[0] ? false : (valid ? true : null)"
                        :disabled="details.length > 0"
                        @input="Selected_Warehouse"
                        v-model="damage.warehouse_id"
                        :reduce="label => label.value"
                        :placeholder="$t('Choose_Warehouse')"
                        :options="warehouses.map(warehouses => ({label: warehouses.name, value: warehouses.id}))"
                      />
                      <b-form-invalid-feedback>{{ errors[0] }}</b-form-invalid-feedback>
                    </b-form-group>
                  </validation-provider>
                </b-col>

                <!-- date  -->
                <b-col lg="6" md="6" sm="12">
                  <validation-provider name="date" :rules="{ required: true}" v-slot="validationContext">
                    <b-form-group :label="$t('date') + ' ' + '*'"><b-form-input :state="getValidationState(validationContext)" aria-describedby="date-feedback" type="date" v-model="damage.date"/></b-form-group>
                    <b-form-invalid-feedback id="OrderTax-feedback">{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                  </validation-provider>
                </b-col>

                <!-- Product -->
                <b-col md="12" class="mb-5">
                  <h6>{{$t('ProductName')}}</h6>
                  <div id="autocomplete" class="autocomplete">
                    <div class="input-with-icon">
                      <img src="/assets_setup/scan.png" :alt="$t('Scan')" class="scan-icon" @click="showModal">
                      <input :placeholder="$t('Scan_Search_Product_by_Code_Name')" @input='e => search_input = e.target.value' @keyup="search(search_input)" @focus="handleFocus" @blur="handleBlur" ref="product_autocomplete" class="autocomplete-input" />
                    </div>
                    <ul class="autocomplete-result-list" v-show="focused">
                      <li class="autocomplete-result" v-for="product_fil in product_filter" :key="product_fil.id + '_' + product_fil.product_variant_id" @mousedown="SearchProduct(product_fil)">{{getResultValue(product_fil)}}</li>
                    </ul>
                  </div>
                </b-col>

                <!-- Products -->
                <b-col md="12">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead class="bg-gray-300">
                        <tr>
                          <th scope="col">#</th>
                          <th scope="col">{{$t('CodeProduct')}}</th>
                          <th scope="col">{{$t('ProductName')}}</th>
                          <th scope="col">{{$t('CurrentStock')}}</th>
                          <th scope="col">{{$t('Qty')}}</th>
                          <th scope="col" class="text-center"><i class="fa fa-trash"></i></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-if="details.length <=0"><td colspan="6">{{$t('NodataAvailable')}}</td></tr>
                        <tr v-for="detail in details" :key="detail.detail_id">
                          <td>{{detail.detail_id}}</td>
                          <td>{{detail.code}}</td>
                          <td>({{detail.name}})</td>
                          <td>
                            <span class="badge badge-outline-warning">{{detail.current}} {{detail.unit}}</span>
                          </td>
                          <td>
                            <div class="quantity">
                              <b-input-group>
                                <b-input-group-prepend>
                                  <span class="btn btn-primary btn-sm" @click="decrement(detail ,detail.detail_id)">-</span>
                                </b-input-group-prepend>
                                <input class="form-control" @keyup="Verified_Qty(detail,detail.detail_id)" :min="0.00" :max="detail.current" v-model.number="detail.quantity">
                                <b-input-group-append>
                                  <span class="btn btn-primary btn-sm" @click="increment(detail ,detail.detail_id)">+</span>
                                </b-input-group-append>
                              </b-input-group>
                            </div>
                          </td>
                          <td>
                            <a @click="Remove_Product(detail.detail_id)" class="btn btn-icon btn-sm" :title="$t('Delete')"><i class="i-Close-Window text-25 text-danger"></i></a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </b-col>
                <b-col md="12">
                  <b-form-group :label="$t('Note')" class="mt-4">
                    <textarea v-model="damage.notes" rows="4" class="form-control" :placeholder="$t('Afewwords')"></textarea>
                  </b-form-group>
                </b-col>
                <b-col md="12">
                  <b-form-group>
                    <b-button variant="primary" :disabled="SubmitProcessing" @click="Submit_Damage"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
                    <div v-once class="typo__p" v-if="SubmitProcessing"><div class="spinner sm spinner-primary mt-3"></div></div>
                  </b-form-group>
                </b-col>

              </b-row>
            </b-card>
          </b-col>
        </b-row>
      </b-form>
    </validation-observer>
  </div>
</template>

<script>
import NProgress from "nprogress";

export default {
  metaInfo: { title: "Create Damage" },
  data() {
    return {
      focused: false,
      timer:null,
      search_input:'',
      product_filter:[],
      isLoading: true,
      SubmitProcessing:false,
      warehouses: [],
      products: [],
      details: [],
      damage: { id: "", notes: "", warehouse_id: "", date: new Date().toISOString().slice(0, 10) },
      product: { id: "", code: "", current: "", quantity: 1, name: "", product_id: "", detail_id: "", product_variant_id: "", unit: "" },
      symbol: ""
    };
  },
  methods: {
    handleFocus() { this.focused = true },
    handleBlur() { this.focused = false },
    showModal() { this.$bvModal.show('open_scan'); },
    onScan(decodedText) { const code = decodedText; this.search_input = code; this.search(); this.$bvModal.hide('open_scan'); },
    search(){
      if (this.timer) { clearTimeout(this.timer); this.timer = null; }
      if (this.search_input.length < 2) { return this.product_filter= []; }
      if (this.damage.warehouse_id != "" &&  this.damage.warehouse_id != null) {
        this.timer = setTimeout(() => {
          const product_filter = this.products.filter(product => product.code === this.search_input || product.barcode.includes(this.search_input));
          if(product_filter.length === 1){ this.SearchProduct(product_filter[0]) }
          else {
            this.product_filter =  this.products.filter(product => {
              return (
                product.name.toLowerCase().includes(this.search_input.toLowerCase()) ||
                product.code.toLowerCase().includes(this.search_input.toLowerCase()) ||
                product.barcode.toLowerCase().includes(this.search_input.toLowerCase())
              );
            });
            if (this.product_filter.length <= 0) { this.makeToast("warning", this.$t("Product_Not_Found"), this.$t("Warning")); }
          }
        }, 800);
      } else {
        this.makeToast("warning", this.$t("SelectWarehouse"), this.$t("Warning"));
      }
    },
    SearchProduct(result) {
      this.product = {};
      if (this.details.length > 0 && this.details.some(detail => detail.code === result.code)) {
        this.makeToast("warning", this.$t("AlreadyAdd"), this.$t("Warning"));
      } else {
        this.product.code = result.code;
        this.product.current = result.qte;
        this.product.quantity = result.qte < 1 ? result.qte : 1;
        this.product.product_variant_id = result.product_variant_id;
        this.Get_Product_Details(result.id, result.product_variant_id);
      }
      this.search_input= '';
      this.$refs.product_autocomplete.value = "";
      this.product_filter = [];
    },
    getResultValue(result) { return result.code + " " + "(" + result.name + ")"; },
    Submit_Damage() { this.$refs.Create_damage.validate().then(success => { if (!success) { this.makeToast("danger", this.$t("Please_fill_the_form_correctly"), this.$t("Failed")); } else { this.Create_Damage(); } }); },
    getValidationState({ dirty, validated, valid = null }) { return dirty || validated ? valid : null; },
    makeToast(variant, msg, title) { this.$root.$bvToast.toast(msg, { title: title, variant: variant, solid: true }); },
    Selected_Warehouse(value) { this.search_input= ''; this.product_filter = []; this.Get_Products_By_Warehouse(value); },
    Get_Products_By_Warehouse(id) {
      NProgress.start(); NProgress.set(0.1);
      axios.get("get_Products_by_warehouse/" + id + "?stock=" + 0 + "&product_service=" + 0 + "&product_combo=" + 1)
        .then(response => { this.products = response.data; NProgress.done(); })
        .catch(() => {});
    },
    add_product() { if (this.details.length > 0) { this.detail_order_id(); } else if (this.details.length === 0) { this.product.detail_id = 1; } this.details.push(this.product); },
    Verified_Qty(detail, id) {
      for (var i = 0; i < this.details.length; i++) {
        if (this.details[i].detail_id === id) {
          if (isNaN(detail.quantity)) { this.details[i].quantity = detail.current; }
          if (detail.type == "sub" && detail.quantity > detail.current) {
            this.makeToast("warning", this.$t("LowStock"), this.$t("Warning"));
            this.details[i].quantity = detail.current;
          } else { this.details[i].quantity = detail.quantity; }
        }
      }
      this.$forceUpdate();
    },
    increment(detail, id) {
      for (var i = 0; i < this.details.length; i++) {
        if (this.details[i].detail_id == id) {
          if (detail.type == "sub") {
            if (detail.quantity + 1 > detail.current) { this.makeToast("warning", this.$t("LowStock"), this.$t("Warning")); }
            else { this.formatNumber(this.details[i].quantity++, 2); }
          } else { this.formatNumber(this.details[i].quantity++, 2); }
        }
      }
      this.$forceUpdate();
    },
    decrement(detail, id) {
      for (var i = 0; i < this.details.length; i++) {
        if (this.details[i].detail_id == id) {
          if (detail.quantity - 1 > 0) {
            if (detail.type == "sub" && detail.quantity - 1 > detail.current) { this.makeToast("warning", this.$t("LowStock"), this.$t("Warning")); }
            else { this.formatNumber(this.details[i].quantity--, 2); }
          }
        }
      }
      this.$forceUpdate();
    },
    formatNumber(number, dec) { const value = (typeof number === "string" ? number : number.toString()).split("."); if (dec <= 0) return value[0]; let formated = value[1] || ""; if (formated.length > dec) return `${value[0]}.${formated.substr(0, dec)}`; while (formated.length < dec) formated += "0"; return `${value[0]}.${formated}`; },
    Remove_Product(id) { for (var i = 0; i < this.details.length; i++) { if (id === this.details[i].detail_id) { this.details.splice(i, 1); } } },
    verifiedForm() {
      if (this.details.length <= 0) { this.makeToast("warning", this.$t("AddProductToList"), this.$t("Warning")); return false; }
      var count = 0; for (var i = 0; i < this.details.length; i++) { if (this.details[i].quantity == "" || this.details[i].quantity === 0) { count += 1; } }
      if (count > 0) { this.makeToast("warning", this.$t("AddQuantity"), this.$t("Warning")); return false; }
      return true;
    },
    Create_Damage() {
      if (this.verifiedForm()) {
        this.SubmitProcessing = true; NProgress.start(); NProgress.set(0.1);
        axios.post("damages", { warehouse_id: this.damage.warehouse_id, date: this.damage.date, notes: this.damage.notes, details: this.details })
          .then(() => { NProgress.done(); this.SubmitProcessing = false; this.$router.push({ name: "index_damage" }); this.makeToast("success", this.$t("Successfully_Created"), this.$t("Success")); })
          .catch(error => { NProgress.done(); if(error.errors && error.errors.details && error.errors.details.length){ this.makeToast("danger", error.errors.details[0], this.$t("Failed")); } else { this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed")); } this.SubmitProcessing = false; });
      }
    },
    detail_order_id() { this.product.detail_id = 0; var len = this.details.length; this.product.detail_id = this.details[len - 1].detail_id + 1; },
    Get_Product_Details(product_id, variant_id) {
      axios.get("/show_product_data/" + product_id +"/"+ variant_id).then(response => {
        this.product.product_id = response.data.id;
        this.product.name = response.data.name;
        this.product.type = "sub"; // always subtract for damage
        this.product.unit = response.data.unit;
        this.add_product();
      });
    },
    Get_Elements() {
      axios.get("damages/create").then(response => { this.warehouses = response.data.warehouses; this.isLoading = false; })
        .catch(() => { setTimeout(() => { this.isLoading = false; }, 500); });
    }
  },
  created() { this.Get_Elements(); }
};
</script>

<style>
  .input-with-icon { display: flex; align-items: center; }
  .scan-icon { width: 50px; height: 50px; margin-right: 8px; cursor: pointer; }
</style>


