<template>
<div>
    <div class="card card-tabs">
    <div class="card-header bg-gray"> {{ locales['New Estimate'] || "New Estimate"}}</div>
    <p>
      
    </p>
    <div class="card-body bg-light-gray">
      <div class="tab-content" id="custom-tabs-three-tabContent">
        <div class="tab-pane fade show active" id="lead-details-id" role="tabpanel" aria-labelledby="lead-details">
          <div class="row">
              <div class="col-md-3">
                <label for=""><span class="text-danger">*</span> {{ locales['Estimate Number'] || "Estimate Number" }}</label>
                <div class="input-group input-group-sm">
                      <div class="input-group-prepend">
                        <div class="input-group-text" >{{estimate_number_prefix}}</div>
                      </div>
                      <input type="number" class="form-control"
                          v-model="estimate_number"
                      />
                </div>  
                <label>
                  <span v-if="!estimate_number_status" class="text-danger">{{locales['This estimate number is occupied'] || "This estimate number is occupied"}}!</span>
                  <span v-if="estimate_number_status" class="text-success">{{locales['This estimate number is available'] || "This estimate number is available"}}!</span>
                </label>
              </div>
              <div class="col-md-9">
                <div class="form-group">
                    <label for=""><span class="text-danger">*</span> {{locales['Estimate Title'] || "Estimate Title"}} </label>
                    <input type="text" 
                    :value="estimate_title" 
                    @input="update_estimate_title"
                    class="form-control form-control-sm" />
                </div>
              </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for=""><span class="text-danger">*</span> {{locales['Customer/Lead'] || "Customer/Lead"}} </label>
                <v-selector 
                  v-model="estimate_relation"
                  :options="user_type" 
                  class="style-chooser"
                  >
                </v-selector>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for=""><span class="text-danger">*</span> {{locales['Select Lead/Customer'] || "Select Lead/Customer"}} </label>
                <v-selector 
                v-model="estimate_lead_customer_id"
                :options="estimate_clients" label="client_name" class="style-chooser">
                  <template  v-slot:option="option">
                    <span :class="option.id"></span>
                    {{option.client_name}} | {{option.client_email}}
                  </template>
                </v-selector>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for=""><span class="text-danger">*</span> {{locales['Estimate Date']|| "Estimate Date"}}
                  {{this.$store.state.createEstimateStore.estimate_date}}
                  </label>
                <input type="date" 
                :value="estimate_date"
                @input="update_estimate_date"
                class="form-control form-control-sm">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="">{{locales['Estimate Expiry Date']|| "Estimate Expiry Date"}} </label>
                <input type="date" 
                :value="estimate_due_date" 
                @input="update_estimate_due_date"
                class="form-control form-control-sm"/>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for=""><span class="text-danger">*</span> {{locales['Status'] || "Status"}} </label>
                <v-selector 
                v-model="estimate_status" 
                :options="statusList" label="name" class="style-chooser">
                  <template v-slot:option="item">
                    <span :class="item"></span>
                    {{item.name}}
                  </template>
                </v-selector>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for=""><span class="text-danger">*</span> {{locales['Currency'] || "Currency"}} </label>
                <v-selector 
                v-model='estimate_currency_id'
                :options="currencies" label="name" class="style-chooser">
                  <template v-slot:option="currency">
                    <span :class="currency"></span>
                     {{currency.name}}
                  </template>
                </v-selector>
              </div>
            </div>
      
            <div class="col-md-3">
              <div class="form-group">
                <label for=""><span class="text-danger">*</span> {{locales['Sales Agent']|| "Sales Agent"}}</label>
                <v-selector v-model="estimate_owner_id" :options="members" label="name" class="style-chooser">
                  <template v-slot:option="member">
                    <span :class="member"></span>
                    {{member.name}}
                  </template>
                </v-selector>
              </div>
            </div>
            
          </div>

          <div class="row">
              <div class="col-md-6">
              <div class="form-group">
                <label for="">{{locales['Terms and Conditions'] || 'Terms and Conditions'}} </label>
                <textarea 
                :value="estimate_termsandconditions"
                @input="update_estimate_termsandconditions"
                 class="form-control form-control-sm" rows="5"></textarea>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="">{{locales['Customer Notes'] || 'Customer Notes'}}</label>
                <textarea
                :value="estimate_customer_notes"
                @input="update_estimate_customer_notes"
                 class="form-control form-control-sm" rows="5"></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ProductSelector comptype="Estimate"></ProductSelector>

</div>

</template>

<script>

import ProductSelector from '../common/ProductSelectorComponent';
import { mapGetters } from 'vuex';

export default {
  components:{
    ProductSelector
  },
  name:"EstimateCreate",
  computed: {
    ...mapGetters({
      estimate_date:'estimate_date',
      estimate_number:'estimate_number',
      estimate_number_prefix:'estimate_number_prefix',
      estimate_title:'estimate_title',
      estimate_clients:'estimate_clients',
      estimate_due_date:'estimate_due_date',
      estimate_termsandconditions:'estimate_termsandconditions',
      estimate_customer_notes:'estimate_customer_notes',
      estimate_number_status:'estimate_number_status',
      locales: 'locales'
    }),
    estimate_number: {
      get () {
        return this.$store.state.createEstimateStore.estimate_data.estimate_number;
      },
      set (value) {
        this.$store.dispatch('update_estimate_number', {
          type: 'update_estimate_number',
          estimate_number: value
        })
      }
    },
    estimate_status: {
      get () {
        return this.$store.state.createEstimateStore.estimate_data.estimate_status;
      },
      set (value) {
        this.$store.dispatch('UPDATE_ESTIMATE_STATUS', {
          type: 'UPDATE_ESTIMATE_STATUS',
          estimate_status: value
        })
      }
    },
    estimate_relation: {
      get () {
        return this.$store.state.createEstimateStore.estimate_data.estimate_relation;
      },
      set (value) { 
        this.$store.dispatch('update_estimate_relation', value) 
      }
    },
    estimate_lead_customer_id: {
      get () {
        return this.$store.state.createEstimateStore.estimate_data.estimate_lead_customer_id;
      },
      set (value) {
        this.$store.dispatch('update_estimate_lead_customer_id', value)
      }
    },
    estimate_currency_id: {
      get () {
        return this.$store.state.createEstimateStore.estimate_data.estimate_currency_id;
      },
      set (value) {
        this.$store.dispatch('UPDATE_ESTIMATE_CURRENCY_ID', {
          type: 'UPDATE_ESTIMATE_CURRENCY_ID',
          estimate_currency_id: value
        })
      }
    },
    estimate_owner_id: {
      get () {
        return this.$store.state.createEstimateStore.estimate_data.estimate_owner_id;
      },
      set (value) {
        this.$store.dispatch('update_estimate_owner_id', {
          type: 'update_estimate_owner_id',
          estimate_owner_id: value
        })
      }
    },
    
  },
  data(){
    return {
      date: new Date().toISOString().substr(0, 10),
      user_type:['Lead','Customer'],
      statusList:[],
      currencies:[],
      members:[],
      product_groups:[],
    }
  },
  mounted(){
      this.getStatusList();
      this.getCurrencies();
      this.getMembers();
      this.getProducts();
      // this.$store.dispatch('getEstimateDefaultData');
      
      // Get Locales
      this.$store.dispatch('getAppLocale');
  },
  created(){
    if(this.$route.params.id !== null || true){
      this.page_type="edit";
      this.estimate_id = this.$route.params.id;
      this.get_edit_estimate_data();
    }
    //     Vue.$toast.success('You did it!', {
    //       position: 'top-right',
    //       duration: 5000,
    //       dismissible: true
    //     });
    // setInterval(()=>{
    //     Vue.$toast.success('You did it!', {
    //       position: 'top-right',
    //       duration: 5000,
    //       dismissible: true
    //     });
    // }, 2000);
  },
  methods: {
    // Get Edit Invoice Data
    get_edit_estimate_data(){
      this.$store.dispatch('get_edit_estimate_data', this.$route.params.id);
    },
    update_estimate_termsandconditions(e){
      this.$store.dispatch('update_estimate_termsandconditions', e.target.value);
    },
    update_estimate_customer_notes(e){
      this.$store.dispatch('update_estimate_customer_notes', e.target.value);
    },
    update_estimate_date (e) {
      this.$store.dispatch('update_estimate_date', e.target.value)
    },

    // update_estimate_number (e) {
    //   this.$store.commit('update_estimate_number', e.target.value)
    // },
    update_estimate_title (e) {
      this.$store.dispatch({
            type:'UPDATE_ESTIMATE_TITLE',
            payload: e.target.value
          }
      );
    },
    update_estimate_due_date (e) {
      this.$store.commit('UPDATE_ESTIMATE_DUE_DATE', e.target.value)
    },
    update_estimate_status (e) {
      this.$store.dispatch({
        type: 'UPDATE_ESTIMATE_STATUS',
        estimate_status: e.target.value
      })
    },
      


    async getStatusList(){
      await axios.get('/api/v1/estimate/statusList')
      .then((res) => {
        this.statusList = res.data;
      });
    },

    async getCurrencies(){
       axios.get('/api/v1/currencies')
      .then((res) => {
        this.currencies = res.data.currencies;
      });  
    },
    async getMembers(){
       axios.get('/api/v1/members')
      .then((res) => {
        this.members = res.data.members;
      });  
    },
    async getProducts(){
       axios.get('/api/v1/products')
      .then((res) => {
        this.product_groups = res.data.product_groups;
      });  
    },

  },

}
</script>


<style>
  .style-chooser .vs__search::placeholder,
  .style-chooser .vs__dropdown-toggle,
  .style-chooser .vs__dropdown-menu {
    background: #ffffff;
    color: #242121;
    text-transform:uppercase;
  }

  .style-chooser .vs__clear,
  .style-chooser .vs__open-indicator {
    fill: #394066;
  }
</style>