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

     <!-- Reciept Pos Settings -->
    <validation-observer ref="Submit_Pos_Settings" v-if="!isLoading">
      <b-form @submit.prevent="Submit_Pos_Settings">
        <b-row class="mt-5">
          <b-col lg="12" md="12" sm="12">
            <b-card no-body :header="$t('Pos_Settings')">
              <b-card-body>
                <b-row>

                   <!-- Note to customer  -->
                  <b-col lg="12" md="12" sm="12">
                    <validation-provider
                      name="note"
                      :rules="{ required: true}"
                      v-slot="validationContext"
                    >
                      <b-form-group :label="$t('Note_to_customer') + ' ' + '*'">
                        <b-form-input
                          :state="getValidationState(validationContext)"
                          aria-describedby="note-feedback"
                          label="Note to customer"
                          :placeholder="$t('Note_to_customer')"
                          v-model="pos_settings.note_customer"
                        ></b-form-input>
                        <b-form-invalid-feedback
                          id="note-feedback"
                        >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                      </b-form-group>
                    </validation-provider>
                  </b-col>

                 

                   <!-- Show Phone-->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_Phone')}}
                          <input  type="checkbox" v-model="pos_settings.show_phone">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                     <!-- Show Address -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_Address')}}
                          <input  type="checkbox" v-model="pos_settings.show_address">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                      <!-- Show Email  -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_Email')}}
                          <input  type="checkbox" v-model="pos_settings.show_email">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                    <!-- Show Customer  -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_Customer')}}
                          <input  type="checkbox" v-model="pos_settings.show_customer">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                     <!-- Show_Warehouse  -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_Warehouse')}}
                          <input  type="checkbox" v-model="pos_settings.show_Warehouse">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                     <!-- Show Tax & Discount  -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_Tax_and_Discount')}}
                          <input  type="checkbox" v-model="pos_settings.show_discount">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                     <!-- Show barcode  -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_barcode')}}
                          <input  type="checkbox" v-model="pos_settings.show_barcode">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                      <!-- Show Note_to_customer  -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Show_Note_to_customer')}}
                          <input  type="checkbox" v-model="pos_settings.show_note">
                          <span class="slider"></span>
                        </label>
                    </b-col>

                      <!-- Enable_Print_Invoice -->
                    <b-col md="4" class="mt-3 mb-3">
                       <label class="switch switch-primary mr-3">
                         {{$t('Enable_Print_Invoice')}}
                          <input  type="checkbox" v-model="pos_settings.is_printable">
                          <span class="slider"></span>
                        </label>
                    </b-col>


                  <!-- products_per_page  -->
                  <b-col lg="4" md="4" sm="12">
                    <validation-provider
                      name="products_per_page"
                      :rules="{ required: true}"
                      v-slot="validationContext"
                    >
                      <b-form-group label="How many items do you want to display *">
                        <b-form-input
                          :state="getValidationState(validationContext)"
                          aria-describedby="products_per_page-feedback"
                          label="How many items do you want to display."
                          placeholder="How many items do you want to display."
                          v-model="pos_settings.products_per_page"
                          type="number"
                        ></b-form-input>
                        <b-form-invalid-feedback
                          id="products_per_page-feedback"
                        >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
                      </b-form-group>
                    </validation-provider>
                  </b-col>

                  <b-col md="12">
                    <b-form-group>
                      <b-button variant="primary" type="submit"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
                    </b-form-group>
                  </b-col>
                </b-row>
              </b-card-body>
            </b-card>
          </b-col>
        </b-row>
      </b-form>
    </validation-observer>

  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import NProgress from "nprogress";

export default {
  metaInfo: {
    title: "POS Settings"
  },
  data() {
    return {
      
      isLoading: true,
     
      pos_settings:{
        note_customer:"",
        show_note:"",
        show_barcode:"",
        show_discount:"",
        show_phone:"",
        show_email:"",
        show_address:"",
        show_customer:"",
        show_Warehouse:"",
        is_printable:'',
        products_per_page:'',
      },

    };
  },

  methods: {
    ...mapActions(["refreshUserPermissions"]),

     //------------- Submit Validation Pos Setting
    Submit_Pos_Settings() {
      this.$refs.Submit_Pos_Settings.validate().then(success => {
        if (!success) {
          this.makeToast(
            "danger",
            this.$t("Please_fill_the_form_correctly"),
            this.$t("Failed")
          );
        } else {
          this.Update_Pos_Settings();
        }
      });
    },

    //------ Toast
    makeToast(variant, msg, title) {
      this.$root.$bvToast.toast(msg, {
        title: title,
        variant: variant,
        solid: true
      });
    },

    getValidationState({ dirty, validated, valid = null }) {
      return dirty || validated ? valid : null;
    },


      //---------------------------------- Update_Pos_Settings ----------------\\
    Update_Pos_Settings() {
      NProgress.start();
      NProgress.set(0.1);
      axios
        .put("pos_settings/" + this.pos_settings.id, {
          note_customer: this.pos_settings.note_customer,
          show_note: this.pos_settings.show_note,
          show_barcode: this.pos_settings.show_barcode,
          show_discount: this.pos_settings.show_discount,
          show_phone: this.pos_settings.show_phone,
          show_email: this.pos_settings.show_email,
          show_address: this.pos_settings.show_address,
          show_customer: this.pos_settings.show_customer,  
          show_Warehouse: this.pos_settings.show_Warehouse,  
          is_printable: this.pos_settings.is_printable,      
          products_per_page: this.pos_settings.products_per_page,      
        })
        .then(response => {
          Fire.$emit("Event_Pos_Settings");
          this.makeToast(
            "success",
            this.$t("Successfully_Updated"),
            this.$t("Success")
          );
          NProgress.done();
        })
        .catch(error => {
          NProgress.done();
          this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
        });
    },


 //---------------------------------- Get_pos_Settings ----------------\\ 
    get_pos_Settings() {
      axios
        .get("get_pos_Settings")
        .then(response => {
          this.pos_settings = response.data.pos_settings;
          this.isLoading = false;
        })
        .catch(error => {
          this.isLoading = false;
        });
    },

   
  }, //end Methods

  //----------------------------- Created function-------------------

  created: function() {
    this.get_pos_Settings();

     Fire.$on("Event_Pos_Settings", () => {
      this.get_pos_Settings();
    });

  }
};
</script>