@extends('layouts.app')
<link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">
@section('style')
  <style>
    .modal-container {
      width: 50%;
    }
  </style>
@stop
@section('content')
@include("layouts.Cmodal")
@include("invoices.modal")
<div class="row">
  <div class="portlet light bordered">
    <!-- BEGIN TAB PORTLET-->
    <div class="portlet light bordered">
      <div class="portlet-title">
        <div class="caption">
          <i class="icon-anchor font-green-sharp"></i>
          <span class="caption-subject font-green-sharp bold uppercase">@lang('layout.CreateNewRateForCustomer')</span>
        </div>
        <div class="actions"></div>
      </div>
      <div id="appInvoice" class="portlet-body">
        <div class="tabbable tabbable-tabdrop">
          <div>
            {{Form::open(['route' => 'costItems.store','method' => 'POST','class' => 'form-horizontal','id'=>'sales-form'])}}
            {{ csrf_field() }}
            <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <div v-cloak class="portlet-body form" style="margin-bottom:50%;">
                  <!-- begin sale order modal -->
                  <div id="salOrderApp" v-cloak>
                    <!-- {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}} -->
                    <input type="hidden" name="type" value="invoicelist" />
                    <!-- use the modal component, pass in the prop -->
                    <!-- {{Form::close()}} -->
                  </div>
                  <!-- end sale order modal -->
                  <!-- BEGIN FORM-->
                  <div class="form-body">
                    <div class="row">
                      <div class="col-lg-12 col-md-12 col-sm-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 10px; padding: 20px !important;">
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                          <div class="form-group">
                            <div class="col-md-12">
                              <label class="control-label">@lang('layout.Customer')</label>
                              <v-select label="name" @input="memberChange()" :options="customer" v-model="selected_customer"></v-select>
                              <input type="hidden" name="customer" v-validate="'required'" data-vv-as="@lang('layout.Customer')" :value="!selected_customer?null:selected_customer.id" required>
                              <span class="required">@{{ errors.first('customer') }}</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                          <div class="form-group"></div>
                        </div>
                      </div>
                    </div>
                    <div class="row" v-if="inventories.length>0" style="overflow-x: scroll;">
                      <table id="table_content" class="table table-bordered table-advance">
                        <thead>
                          <tr>
                            <th>#</th>
                            <th style="min-width: 130px">@lang('layout.ItemName') </th>
                            <th style="min-width: 100px">@lang('layout.Measure') </th>
                            <th style="min-width: 100px">@lang('layout.NewPrice') </th>
                            <th><i class="fa fa-ellipsis-h"></i></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(item,index) in inventories">
                            <td class="text-center">@{{index+1}}</td>
                            <td class="highlight">
                              <!-- @click.native="addNew('inventory',index)" -->
                              <v-select label="name" v-model="item.item" :options="temp_items" @search="onItemSearch"></v-select>
                              <input type="hidden" :name="'inventory_id['+index+']'" :value="(!item.item)?null:item.item.id">
                              <span class="required">@{{ errors.first('inventory_id['+index+']') }}</span>
                            </td>
                            <td class="highlight">
                              <select v-model="(item.item == null)?null:item.item.measure" class="form-control" @change="measureChange(index)">
                                <option value="null">@lang('layout.Select')</option>
                                <span v-if="(item.item ==null)?false:true">
                                  <option v-for="measure in (item.item==null)?null:item.item.measure_list" :value="measure">
                                    @{{measure.measure_name}}
                                  </option>
                                </span>
                              </select>
                              <input type="hidden" name="inventory_measure[]" :value="(item.item==null)?null:item.item.measure.measure_id">
                            </td>
                            <td>
                              <div class="input-group">
                                <input type="number" name="inventory_price[]" placeholder="@lang('layout.NewPrice')" v-bind:value="(item.item==null)?null:saleNewRate(item.item,selected_currency.rate)" ref='in' @input="setNewRate('inventory',index)" class="form-control">
                                <span class="input-group-addon">
                                  @{{selected_currency.symbol}}
                                </span>
                              </div>
                            </td>
                            <td style="text-align: center;cursor: pointer;">
                              <span v-if="index >= 0" v-on:click="deleteItem('inventory',index)" ><i class="paddint-both glyphicon glyphicon-trash"></i></span>
                            </td>
                          </tr>
                          <tr style="background-color: #ffffff;">
                            <td></td>
                            <td>
                              <center>
                                <button type="button" @click="addNew('inventory',100)" class="btn btn-success"><i class="fa fa-plus"></i></button>
                              </center>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                    <button type="button" @click="handleSubmit($event)" class="btn green">@lang('layout.Submit')</button>
                    <button type="button" class="btn blue" @click="saveAndNew($event)">@lang('layout.SaveAndNew')</button>
                    <a href="{{route('costItems.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                  </div>
                </div>
              </div>
              {!! Form::close() !!}
            </div>
          </div>
        </div>
        <p> &nbsp; </p>
        <p> &nbsp; </p>
      </div>
    </div>
    <!-- END TAB PORTLET-->
  </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
  @if(App::getLocale())
  Vue.use(VeeValidate, {
    locale: '{{App::getLocale()}}',
  });
  @else
  Vue.use(VeeValidate, {
    locale: 'en',
  });
  @endif
  Vue.component('v-select', VueSelect.VueSelect);
  Vue.component("modal", {
    template: "#modal-template",
    props: ['show'],
  });
  //begin new member
  Vue.component("cmodal", {
    template: '#cmodal-template',
    props: ['show'],
    data() {
      return {
        types: [],
        classes: [],
        receivables: [],
        payables: [],
        code: null,
        selectType: null,
        selectPay: null,
        selectedClass: null,
        selectReceive: null,
      }
    },
  });
  // end new member
  var customer={!! $member !!};
  var v = new Vue({
    el: '#appInvoice',
    data: {
      showModalSaleOrder: false,
      showModal: false,
      invoiceDescription: null,
      saleOrderList: [],
      selected_sale_order: null,
      setDatas: [],
      customer: customer,
      selected_customer: null,
      selected_banks: null,
      selected_currency: defaultCurrency(),
      rate: 0,
      discountFiled: 0,
      discountIsAmount: false,
      temp_items: [],
      totalAmountes: [],
      types: null,
      newCost: [
        null,
        null,
        null,
        null
      ],
      inventories: [{
        item: null
      }],
    },
    methods: {
      // calculate item price based on measure change
      measureChange(index) { 
        if (this.inventories[index].item != null) {
          var item = this.inventories[index].item; 
          var selected_unit = item.measure ? item.measure.measure_unit : 1;
          var base_unit = item.measure_unit ? item.measure_unit : 1;
          var price = item.rate ? item.rate : 0;
          var selected_price = (selected_unit * price)/base_unit;
          var base_price = (base_unit * price)/selected_unit;
          item.new_rate_selected = Number.parseFloat(selected_price.toFixed(10));
          item.new_rate = Number.parseFloat(base_price.toFixed(10));
          this.inventories[index].item.new_rate_selected = base_price;
          this.inventories[index].item.new_rate = selected_price;
          
          // var item = this.inventories[index].item; 
          // var selected_price = (item.measure.measure_unit * item.rate) / item.measure_unit;
          // var base_price = (item.measure_unit * item.rate) / item.measure.measure_unit;
          // var result = base_price;
          // this.inventories[index].item.new_rate = result;

          // var temp = ((item.measure_unit * item.rate) / item.measure.measure_unit);
          // result = Number.parseFloat(temp).toFixed(precision());
          // // console.log(1231232323, temp, result);
          // //Begin static_item_prices
          // @if(salePriceCalculate() == "static_item_price")
          //   // "AAAA"  
          //   var changed_rate_by_static_item_price = 0;
          //   if(this.inventories[index].item.static_item_prices && this.inventories[index].item.static_item_prices.length>0 && this.selected_currency){
          //     for (var j = 0; j < this.inventories[index].item.static_item_prices.length; j++) {
          //       if (this.inventories[index].item.static_item_prices[j].currency == this.selected_currency.code && this.inventories[index].item.static_item_prices[j].amount1) {
          //         changed_rate_by_static_item_price = this.inventories[index].item.static_item_prices[j].amount1;
          //         var temp = ((changed_rate_by_static_item_price * item.measure.measure_unit / item.measure_unit));
          //         result = Number.parseFloat(temp).toFixed(precision());
          //         this.inventories[index].item.static_item_prices[j].amount = result
          //         this.inventories[index].item.cost = result;
          //         @if(systemConfig()[30] == 1)
          //         result = result / this.selected_currency.static_rate * this.selected_currency.rate;
          //         @else 
          //         result = result / this.selected_currency.rate;
          //         @endif
          //       }
          //     }
          //   }
          // @endif
          // this.inventories[index].item.new_rate = result;
          // // console.log(12321213213, this.inventories[index].item.new_rate);
          // if (this.inventories[index].item.quantity > 0 && this.inventories[index].sub_price > 0) {
          //   if (this.inventories[index].item.measure2) {
          //     var item = this.inventories[index].item;
          //     var sub_quantity = v.subMQuantity(item, item.quantity);
          //     var sub_price = this.inventories[index].sub_price;
          //     var total_price = (sub_quantity * sub_price);
          //     var quantity = item.quantity;
          //     if (quantity > 0) {
          //       if (this.selected_currency.rate > 0) {
          //         @if(systemConfig()[30] == 1)
          //         item.new_rate = Number.parseFloat((total_price / quantity) / this.selected_currency.static_rate * this.selected_currency.rate).toFixed(7);
          //         @else 
          //         item.new_rate = Number.parseFloat((total_price / quantity) / this.selected_currency.rate).toFixed(7);
          //         @endif
          //       } else {
          //         item.new_rate = Number.parseFloat(total_price / quantity).toFixed(7);
          //       }
          //     }
          //   }
          // }
          // this.inventories[index].item.new_rate = this.$refs.in[index].value/this.selected_currency.rate;
          // var temp1 = ((item.LasCost * item.measure.measure_unit / item.measure_unit));
          // var LasCost = Number.parseFloat(temp1).toFixed(precision());
          // this.inventories[index].item.LasCost = LasCost;
        }
      },
      // set new price
      setNewRate(type = null, index = null) {
        if (type == 'inventory') {
          if (this.inventories[index].item) {
            this.inventories[index].item.new_rate = this.$refs.in[index].value / this.selected_currency.rate;
          }
        }
        if (type == 'service') {
          if (this.services[index].item) {
            console.log('service changed');
            this.services[index].item.new_rate = this.$refs.ser[index].value / this.selected_currency.rate;
          }
        }
      },
      // detect member change and searh
      memberChange() {
        if (this.selected_customer) {
          // get member contract
          this.saleOrderSearch(this.selected_customer.id, this);
        }
      },
      handleSubmit(e) {
        this.$validator.validate().then(valid => {
          if (valid) {
            // alert(e.target);
            v.submitForm(e.target);
          }
        });
      },
      // generic function for adding item to list
      addNew(type = null, index) {
        this.temp_items = [];
        if (type != null) {
          if (type == 'inventory') {
            if (this.inventories[index + 1] == undefined) {
              this.temp_items = [];
              this.inventories.push({
                item: null
              });
            }
          }
          if (type == 'service') {
            if (this.services[index + 1] == undefined) {
              this.checkExistingService(index, '');
              this.services.push({
                items: this.all_services,
                item: null,
              });
            }
          }
          if (type == 'payment') {
            if (this.payments[index + 1] == undefined) {
              this.checkExistingPayment(index, '');
              this.payments.push({
                items: this.banks,
                item: null,
              });
            }
          }
        }
      },
      // submit the form
      submitForm() {
        if (this.isError == true) {
          alert('there is no item');
          return false;
        }
        swal({
          title: "@lang('layout.AreYouSure?')",
          buttons: ["@lang('layout.Cancel')", "@lang('layout.Submit')"],
          text: "",
          icon: "info",
          dangerMode: true,
        }).then((willDelete) => {
          if (willDelete) {
            document.getElementById("sales-form").submit()
          } else {
          }
        });
      },
      //ajax call to get items
      onItemSearch: _.debounce((search, loading) => {
        loading(true);
        axios.get("{{route('callMethod.search')}}", {
          params: {
            method_name: 'itemSearchSale',
            keyword: search,
          },
        })
        .then(function(response) {
          v.temp_items = [];
          if (response.data.length > 0) {
            v.temp_items = response.data;
          }
          loading(false);
        })
        .catch(function(error) {
          console.log(error);
        });
      }, getDebounceTime()),
      saveAndNew() {
        this.$validator.validate()
        .then(valid => {
          if (valid) {
            var url = "{{route('costItems.store')}}";
            form_id = 'sales-form';
            var data = $('#' + form_id).serialize();
            // console.log(444, data);
            toggleBlock(true);
            axios.post(url, data)
            .then(function(response) {
              toggleBlock(0);
              if (response.data.result == 1) {
                $('#' + form_id).trigger('reset');
                toastr.success('', response.data.message);
                location.reload();
              } else {
                var message = "{{__('message.Warning')}}";
                //$('#error-sound')[0].play();
                toastr.warning('', message);
              }
            })
            .catch(function(error) {
              toggleBlock(0);
              console.log(error);
              var message = "{{__('message.Warning')}}";
              //$('#error-sound')[0].play();
              toastr.warning('', message);
            });
          }
        })
      },
    },
  });
</script>
@endpush