@extends('layouts.app')
<link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">
@section('style')
<style>
</style>
@stop
@section('content')
@include("layouts.Cmodal")
@include("invoices.modal")
<div class="row">
  <div class="portlet light bg-inverse" style="min-height: 100%;">
    <div class="portlet-title">
      <div class="caption">
        <i class="icon-equalizer font-green-haze"></i>
        <span class="caption-subject font-green-haze bold uppercase">@lang('layout.AddToCodeCreate') </span>
        <!-- <span class="caption-helper">some info...</span> -->
      </div>
      <div class="tools">
        <!-- <a href="" class="collapse" data-original-title="" title=""> </a>
        <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
        <a href="" class="reload" data-original-title="" title=""> </a>
        <a href="" class="remove" data-original-title="" title=""> </a> -->
      </div>
    </div>
    <div id="appInvoice" v-cloak class="portlet-body form" style="margin-bottom:50%;">
      <!-- begin sale order modal -->
      <!-- end sale order modal -->
      <!-- BEGIN FORM-->
      {{Form::open(['route' => 'add_stock_code.store','method' => 'POST','class' => 'form-horizontal','id'=>'sales-form'])}}
      {{ csrf_field() }}
      <div class="form-body">
        <div class="row">
          <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 10px;padding-bottom: 10px;">
            <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.Number')</label>
                  <input type="number" name="number" value="{{$number}}" class="form-control" autocomplete="off" />
                </div>
              </div>
            </div>
            <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.Date')</label>
                  <input type="text" name="date" class="form-control date" autocomplete="off" />
                </div>
              </div>
            </div>
            <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.Description')</label>
                  <textarea name="description" class="form-control" rows="1"></textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px;margin-bottom: 1em;">
              <div class="dashboard-stat2 ">
                <table class="dashboard-tabel" width="100%">
                  <tr>
                    <td>
                      <small>@lang('layout.Total') :</small>
                    </td>
                    <td class="text-right"><span data-counter="counterup" data-value="7800">@{{ Number.parseFloat((subtotal))}}</span>
                    </td>
                  </tr>
                </table>
              </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-responsive table-full-width .met">
            <thead>
              <tr>
                <th class="text-center" style="min-width: 8px;"> # </th>
                <th class="text-center" style="min-width: 80px;"> @lang('layout.ItemName')</th>
                <th class="text-center" style="min-width: 80px;"> @lang('layout.Code')</th>
                <th class="text-center" style="min-width: 60px;"> @lang('layout.Measure')</th>
                <th class="text-center" style="min-width: 60px;"> @lang('layout.Quantity')</th>
                <!-- <th class="text-center hidden-print" style="min-width: 80px;"> @lang('layout.Length')</th> -->
                <th class="text-center hidden-print" style="min-width: 80px;"> @lang('layout.OnHand')</th>
                <th class="text-center" style="min-width: 80px;"> @lang('layout.Width')</th>
                @if(getShowWing()!="false")
                <th class="text-center" style="min-width: 80px;">@lang('layout.Wing')</th>
                @endif
                <th v-show="showWhat('other_measure')=='yes'" style="min-width: 50px">@lang('layout.OMeasureValue') 1</th>
                <th v-show="showWhat('other_measure')=='yes'" style="min-width: 50px">@lang('layout.OMeasureValue') 2</th>
                <th class="text-center" style="min-width: 80px;"> @lang('layout.Price')</th>
                <th class="text-center" style="min-width: 40px;">@lang('layout.Total')</th>
                <th class="text-center" style="width: 10px;"></th>
              </tr>
            </thead>
            <tbody>
              <!--/row-->
              <tr v-for="(service,index) in inventories">
                <td>@{{index+1}}</td>
                <td>
                  <v-select label="name" v-model="service.selected_sub_item_name" :options="FormilaItemsName" @search="onItemSearchName" @input="change_name(index)" @click.native="addNew('inventory',index)" placeholder="@lang('layout.Name')" style=""></v-select>
                </td>
                <td>
                  <v-select label="name" v-model="service.item" :options="temp_itemes" @click.native="getdata(index)" @search="onItemSearchFormila" placeholder="@lang('layout.Code')" style="width: 150px;"></v-select>
                  <input type="hidden" id="item_id" name="m_stocks_in_id[]" :value="(!service.item)?null:service.item.id">
                  <input type="hidden" name="inventory_id[]" :value="(!service.item)?null:service.item.inventory_id">
                </td>
                <td>
                  <input :value="(!service.item)?null:service.item.Measure" class="form-control" placeholder="@lang('layout.Measure')">
                </td>
                <td>
                  <input name="quantity[]" id="item_quantity" ref="OnHand1" type="number" @input="change_qut(index)" :value="(!service.item)?null:service.item.OnHand1"  class="form-control" placeholder="@lang('layout.Quantity')">
                </td>
                <!-- <td>
                  <input name="lengths_out" ref="lengths" type="number" @input="change_lengths(index)" :value="(!service.item)?null:service.item.lengths" class="form-control" placeholder="@lang('layout.Length')">
                </td> -->
                <td>
                  <input type="number" name="quantityall[]" :value="(!service.item)?null:service.item.OnHand" placeholder="@lang('layout.OnHand')" class='form-control' readonly>
                </td>
                <td>
                  <input type="number" name="width[]" class="form-control" placeholder="@lang('layout.Width')">
                </td>
                @if(getShowWing()!="false")
                <td>
                  <input type="number" name="wing[]" class="form-control" placeholder="@lang('layout.Wing')">
                </td>
                @endif
                <td v-show="showWhat('other_measure')=='yes'">
                  <input type="number" name="other_measure[]" class="form-control input-style input-number " placeholder="@lang('layout.OMeasureValue') 1" >
                </td>
                <td v-show="showWhat('other_measure')=='yes'">
                  <input type="number" name="other_measure2[]" class="form-control input-style input-number " placeholder="@lang('layout.OMeasureValue') 2" >
                </td>
                <td>
                  <input name="cost[]" type="number" :value="(!service.item)?null:service.item.expenseCost" ref="expenseCost" @input="setNewRate(index)" readonly class="form-control" placeholder="@lang('layout.Price')">
                </td>
                <td>
                  <input type="number" class="form-control inner_input" :value="(service.item==null)?null:(service.item.expenseCost)*((service.item==null)?null:service.item.OnHand1)" placeholder="@lang('layout.Total')" disabled>
                </td>
                <td>
                  <span v-if="index != 0" v-on:click="deleteItem('inventory',index)"><i class="paddint-both glyphicon glyphicon-trash"></i></span>
                </td>
              </tr>
            </tbody>
          </table>
          <hr>
          <!-- begin service -->
          <!-- end service -->
          <hr>
          <!-- begin payments -->
          <!-- end payments -->
        </div>
        <div class="row">
          <div class="col-md-offset-3 col-md-9">
            <button v-if="!isError" type="button" onclick="regForm(this)" class="btn green">@lang('layout.Submit')</button>
            <a href="{{route('add_stock_code.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
          </div>
        </div>
      </div>
      {!! Form::close() !!}
    </div>
    <!-- END FORM-->
  </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
  Vue.component('v-select', VueSelect.VueSelect);
  var v = new Vue({
    el: '#appInvoice',
    data: {
      temp_items: [],
      temp_itemes: [],
      selected_index: null,
      FormilaItemsName: [],
      newCost: [
        null,
        null,
        null,
        null
      ],
      inventories: [{
          item: null,
          selected_sub_item_name: null
        },
        {
          item: null,
          selected_sub_item_name: null
        },
        {
          item: null,
          selected_sub_item_name: null
        },
        {
          item: null,
          selected_sub_item_name: null
        },
      ],

    },
    computed: {


      // calculate subtotal
      subtotal: function() {
        var sum = 0;
        for (var i = 0; i < this.inventories.length; i++) {
          if (this.inventories[i].item && this.inventories[i].item != null) {
            var quantity = this.inventories[i]['item']['OnHand1'];
            var rate = this.inventories[i]['item']['expenseCost'];
            var new_rate = this.inventories[i]['item']['expenseCost'];
            // var smeasure_unit=this.inventories[i]['item']['measure']['measure_unit'];
            // var measure_unit=this.inventories[i]['item']['measure_unit'];
            if (new_rate != rate && quantity > 0) {
              sum += new_rate * quantity;
            } else {
              sum += new_rate * quantity;
              // sum +=quantity*((rate*smeasure_unit/measure_unit));
            }

          }

        }
        return sum;
      },

      // check payed amount

      // check data validation
      isError: function() {
        var isError = false;
        var flag = false;
        for (var i = 0; i < this.inventories.length; i++) {

          if (this.inventories[i].item) {
            flag = true;
            if (((this.inventories[i]['item']['per_price'] <= 0))) {
              rate = this.inventories[i]['item']['per_price'];
              new_rate = this.inventories[i]['item']['per_price'];
              @if(getAddItemWithZeroRate() != 'true')
              if (rate <= 0 && new_rate <= 0) {
                isError = true;
              }
              @endif
            }
          }
        }
        if (this.inventories.length == 0 || flag == false) {
          isError = true;
        }
        return isError;


      },
    },
    methods: {
      // set new price
      setNewRate(index) {
        if (this.inventories[index].item) {
          this.inventories[index].item.expenseCost = this.$refs.expenseCost[index].value;
          this.inventories[index].item.lengths = this.$refs.lengths[index].value;
          this.inventories[index].item.OnHand1 = this.$refs.OnHand1[index].value;

        }

      },
      // calculate item price based on measure change
      measureChange(index) {

        if (this.inventories[index].item != null) {
          var item = this.inventories[index].item;

          var temp = ((item.rate * item.measure.measure_unit / item.measure_unit));
          result = Number.parseFloat(temp).toFixed(precision());

          this.inventories[index].item.new_rate = result;

          // this.inventories[index].item.new_rate = this.$refs.in[index].value/this.selected_currency.rate;

        }
      },

      change_lengths(index) {
        if (this.inventories[index].item) {
          var per_qut_in = this.inventories[index].item.per_qut_in;
          var lengths = this.$refs.lengths[index].value;
          this.inventories[index].item.lengths = this.$refs.lengths[index].value;
          // this.inventories[index].item.OnHand = (per_qut_in * lengths).toFixed(1);
        }
        // setTimeout(function(){ sales.deleteItem_roll(100); }, 30);
      },
      change_qut(index) {

        if (this.inventories[index].item) {
          // var per_qut_in = this.inventories[index].item.per_qut_in;
          var OnHand = this.$refs.OnHand1[index].value;
          this.inventories[index].item.OnHand1 = this.$refs.OnHand1[index].value;
          // this.inventories[index].item.lengths = (OnHand / per_qut_in).toFixed(1);
        }

        // setTimeout(function(){ sales.deleteItem_roll(100); }, 30);
      },
      // calculate item price based on measure change

      // detect member change and searh



      //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[this.selected_index] = [];
            if (response.data.length > 0) {
              v.temp_items[this.selected_index] = response.data;
            }
            loading(false);
          })
          .catch(function(error) {
            console.log(error);
          });
      }, getDebounceTime()),

      addItems(type) {
        if (type != null) {
          if (type == "adjustment") {
            this.temp_items[this.selected_index] = [];
            this.inventories.push({
              item: null
            });
          }

        }

      },

      // end item search

      // contract search



      //ajax call to get items code
      onItemSearchName: _.debounce((search, loading) => {
        item_id = '';
        loading(true);
        axios.get("{{route('callMethod.search')}}", {
            params: {
              method_name: 'itemSearchPurchaseRoll',
              keyword: search,
              item_id: item_id,
            }
          })
          .then(function(response) {
            v.FormilaItemsName = [];
            if (response.data.length > 0) {
              v.FormilaItemsName = response.data;
              console.log('FormilaItemsName', v.FormilaItemsName);
            }
            loading(false);
          })
          .catch(function(error) {
            console.log(error);
          });
      }, getDebounceTime()),


      //ajax call to get items code
      change_name(index) {
        // console.log('in num',index,'aa',v.inventories[index]);
        this.selected_index = index;
        item_id = '';
        axios.get("{{route('callMethod.search')}}", {
            params: {
              method_name: 'getAssebmliesSubSite',
              item_id: v.inventories[index].selected_sub_item_name.id,
              onhand: 'no'
            }
          })
          .then(function(response) {
            v.temp_items[index] = [];
            if (response.data.length > 0) {
              v.temp_items[index] = response.data;
              v.inventories[index].item = null;
              // console.log('temp_items', v.temp_items[index]);
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },




      //ajax call to get items code
      onItemSearchFormila: _.debounce((search, loading) => {
        // console.log('in num',v.selected_index,'aauuuu',v.inventories[v.selected_index]);
        loading(true);
        axios.get("{{route('callMethod.search')}}", {
            params: {
              method_name: 'getAssebmliesSubSite',
              keyword: search,
              item_id: v.inventories[v.selected_index].selected_sub_item_name.id,
              onhand: 'no'
            }
          })
          .then(function(response) {
            if (response.data.length > 0) {
              v.temp_itemes = [];
              v.temp_items[v.selected_index] = [];
              v.temp_items[v.selected_index] = response.data;
              v.temp_itemes = response.data;
              // console.log('temp_items', v.temp_items[v.selected_index]);
            }
            loading(false);
          })
          .catch(function(error) {
            console.log(error);
          });
      }, getDebounceTime()),

      // end contract search

      // generic function for adding item to list
      addNew(type = null, index) {
        // this.temp_items=[];
        this.selected_index = index;
        if (type != null) {
          if (type == 'inventory') {
            if (this.inventories[index + 1] == undefined) {
              // this.temp_items=[];
              this.inventories.push({
                item: null
              });
            }
          }


        }

      },

      // generic function for adding item to list
      getdata(index) {
        this.selected_index = index;
        this.temp_itemes = this.temp_items[index];

      },

      // in here you can check and decide to allow duplicate bank for payment or not


      // delete item from list
      deleteItem(type = null, index) {
        if (type != null) {
          console.log(type);
          if (type == 'inventory') {
            this.inventories.splice(index, 1);
          }

        }

      },
      // submit the form

    },


  });
</script>



@endpush