@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::model($info,['route' => ['costItems.update',$info->id],'method' => 'PATCH','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" :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></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-model="(item.item==null)?null:item.item.rate" class="form-control">
                                <span class="input-group-addon">
                                  @{{selected_currency.symbol}}
                                </span>
                              </div>
                            </td>
                            <td>
                              <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 selectedCustomer={!! json_encode($selectedCustomer) !!};
  var result={!! json_encode($result) !!};

  var v = new Vue({
    el: '#appInvoice',
    data: {

      showModalSaleOrder: false,
      showModal: false,
      invoiceDescription: null,
      saleOrderList: [],
      selected_sale_order: null,
      result: result,
      setDatas: [],
      customer: customer,
      selected_customer: selectedCustomer,
      selected_banks: null,
      selected_currency: defaultCurrency(),
      rate: 0,
      discountFiled: 0,
      discountIsAmount: false,
      temp_items: [],
      totalAmountes: [],
      types: null,
      newCost: [
        null,
        null,
        null,
        null
      ],
      inventories: [],

    },

    mounted: function () {   
      for (var i = 0; i < this.result.length; i++) { 
        this.inventories.push({ 
          item: this.result[i],       
        });  
      }
      console.log("Any", this.inventories);
      },

    methods: {
      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;
        }
      },
      // 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
      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 = [];
            // console.log(12312342134,response.data);
            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