@extends('layouts.app')
<link href="{{URL::asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" rel="stylesheet" type="text/css" />
@section('style')
<link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">
@stop
@section('content')
<!-- BEGIN CONTENT BODY -->
@include("layouts.Invmodal")
@include("bills.modal")
<!-- END PAGE BAR -->
<div class="row">
  <div class="portlet light bg-inverse">
    <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.LaboratoryTestEdit')</span>
        {{--<span class="caption-helper"></span>--}}
      </div>
      <div class="tools">
        <a href="" class="collapse"> </a>
        <a href="#portlet-config" data-toggle="modal" class="config"> </a>
        <a href="" class="reload"> </a>
        <a href="" class="remove"> </a>
      </div>
    </div>
    <div class="portlet-body form" id="builds_statistic" v-cloak>
      <!-- BEGIN FORM-->
      {!! Form::model($productLaboratory, ['method' => 'PATCH','class'=>'form-horizontal','route' => ['productLaboratory.update',$productLaboratory->id]]) !!}
      <div class="form-body">
        <div class="row">
          <input type="hidden" name="temp_type" value="assembly">
          <div class="col-md-12">
            <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;">
              <div class="row" style="padding: 0.5% 1%;">
                
                <div class="row" style="padding: 0.5% 1%;">
                  <div class="col-lg-2">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label"> @lang('layout.Builds')</label>
                      <v-select class="vue-select2" v-model="selected_build" label="number" @search="buildSearch" :options="temp_build" ></v-select>
                      <input type="hidden" name="build_id"  :value="selected_build ? selected_build.id : ''">
                    {{-- </div> --}}
                  </div>
                  <div class="col-lg-4">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label"> @lang('layout.ItemName')</label>
                      <v-select label="name" v-model="selected_assembly_item" :options="temp_items" @search="onItemsSearch" ></v-select>
                      <input type="hidden" name="item_id" v-validate="'required'" data-vv-as="@lang('layout.ItemName')" :value="(!selected_assembly_item)?null:selected_assembly_item.id">
                      <span class="required">@{{ errors.first('item_id') }}</span>
                    {{-- </div> --}}
                  </div>
                  <div class="col-lg-2">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label ">@lang('layout.Date')</label>
                      <date_picker name="date" placeholder="@lang('layout.Date')" value="{{$productLaboratory->date}}" ></date_picker>
                    {{-- </div> --}}
                  </div>
                  <div class="col-lg-2">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label ">@lang('layout.BuildDate')</label>
                      <date_picker name="build_date" value="{{$productLaboratory->build_date}}" placeholder="@lang('layout.BuildDate')"></date_picker>
                    {{-- </div> --}}
                  </div>
                  <div class="col-lg-2">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label ">@lang('layout.ExpireDate')</label>
                      <date_picker name="expire_date" value="{{$productLaboratory->expire_date}}" placeholder="@lang('layout.ExpireDate')"></date_picker>
                    {{-- </div> --}}
                  </div>
                </div>
                <div class="row" style="padding: 0.5% 1%;">
                  <div class="col-lg-2">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label">@lang('layout.Number')</label>
                      <input type="number" name="number" value="{{$productLaboratory->number}}" class="form-control">
                    {{-- </div> --}}
                  </div>
                  <div class="col-lg-2">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label">@lang('layout.BatchNo')</label>
                      <input type="text" name="batch_number" v-model="build_number" class="form-control">
                    {{-- </div> --}}
                  </div>
                  <div class="col-lg-4">
                    {{-- <div class="form-group"> --}}
                      <label class="control-label ">@lang('layout.Description')</label>
                      <textarea name="description" id="" cols="3" rows="1" class="form-control">{{$productLaboratory->description}}</textarea>
                    {{-- </div> --}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="assemlby_items.length >0 " class="">
          <table id="table_content" class="table table-bordered">
           <thead>
             <tr>
               <th class="text-center" style="width: 25px;"> # </th>
               <th class="text-center" style="min-width: 100px;"> @lang('layout.Name')</th>
               <th class="text-center" style="min-width: 80px;"> @lang('layout.AlertDate')</th>
               <th class="text-center" style="min-width: 80px;"> @lang('layout.Date')</th>
               <th class="text-center" > @lang('layout.Status')</th>
               <th class="text-center" style="min-width: 100px;"> @lang('layout.Description')</th>
               <th style="width: 20px;"></th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="(inventory,index) in assemlby_items" class="even">
               <td class="td_one"> <span class="badge badge3 badge-success badge-roundless"> @{{index+1}} </span>
               </td>
               <td>
                 <input type="text" :name="'name['+index+']'" v-model="inventory.name" v-validate="'required'" data-vv-as="@lang('layout.Name')" class="form-control input-style" placeholder="@lang('layout.Name')">
                 <span class="required">@{{ errors.first('name['+index+']') }}</span>
               </td>
               <td>
                 <date_picker :name="'alert_date['+index+']'" v-model="inventory.alert_date" placeholder="@lang('layout.AlertDate')" ></date_picker>
               </td>
               <td>
                 <date_picker :name="'row_date['+index+']'" v-model="inventory.date" placeholder="@lang('layout.Date')" ></date_picker>
               </td>
               <td>
                   <div class="mt-checkbox" style="padding-left: 0px;">
                       <label class="mt-checkbox mt-checkbox-outline">
                           <input type="checkbox" :name="'status['+index+']'" v-model="inventory.status" />
                           <span></span>
                       </label>
                   </div>
               </td>
               <td>
                 <input type="text" :name="'row_description['+index+']'" v-model="inventory.description" class="form-control input-style" placeholder="@lang('layout.Description')">
               </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>
                   <span @click="addNew('inventory',100)" class="btn btn-success"><i class="fa fa-plus"></i></span>
                 </center>
               </td>
               <td></td>
               <td></td>
               <td></td>
             </tr>

           </tbody>
         </table> 
       </div>
        <div class="row">
          <div class="col-md-12 text-center">
            <button type="button" @click="handleSubmit($event)" class="btn green">@lang('layout.Edit')</button>
            <a href="{{route('productLaboratory.index')}}" @click="clearTemp" 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 src="{{url('/vue/sweetalert1.min.js')}}"></script>
<script src="{{URL::asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js')}}" type="text/javascript"></script>
<script src="{{URL::asset('assets/pages/scripts/components-date-time-pickers.min.js')}}" type="text/javascript"></script>
<script>
  Vue.component('v-select', VueSelect.VueSelect);

  @if(App::getLocale())
    Vue.use(VeeValidate, {
        locale: '{{App::getLocale()}}',
    });
    @else
  Vue.use(VeeValidate, {
    locale: 'en',
  });
  @endif
  
  Vue.component("modal", {
      template: "#modal-template",
      props: ['show'],
      created() {
          console.log('rrrrr');
      }

  });  

    /// inventory model
    var invm = null;
    Vue.component("invmodal", {
        template: '#invmodal-template',

        props: ['show'],
        data() {
            return {
                dynamic_time:'',
                measureList: [],
                categories: [],
                income: [],
                cost: [],
                asset: [],
                rate: 0,
                description: null,
                number: null,
                category: null,
                selectMeasure: null,
                incomeAccount: null,
                costAccount: null,
                assetAccount: null,
                length: null,
                width: null,
                height: null,
                cbm: null,
                userChangeCbms: false,
                percentage_price: false,
            }
        },
        created() {

            axios.get('{{route("inventory.create")}}', {
                    params: {
                        add_item: 'on'
                    }
                }).then(
                response => {
                    this.measureList = response.data.measure;
                    this.categories = response.data.category;
                    this.number = response.data.number;
                    this.income = response.data.income;
                    this.cost = response.data.cost;
                    this.asset = response.data.asset;
                    this.length = response.data.length;
                    this.width = response.data.width;
                    this.height = response.data.height;
                    this.percentage_price = response.data.percentage_price;
                    this.cbm = response.data.cbm;

                    if(this.measureList.length>0)
                    {
                        this.selectMeasure=this.measureList[0];
                    }
                    if(this.income.length>0)
                    {
                        this.incomeAccount=this.income[0];
                    }
                    if(this.cost.length>0)
                    {
                        this.costAccount=this.cost[0];
                    }
                    if(this.asset.length>0)
                    {
                        this.assetAccount=this.asset[0];
                    }

                }).catch(error => console.log(error));
        },
        methods: {
            calculateCbm(){
                if(this.userChangeCbms) return;
                let l = parseFloat(this.length) || 0;
                let w = parseFloat(this.width) || 0;
                let h = parseFloat(this.height) || 0;
                if(l === 0 && w === 0 && h === 0){
                    this.cbm = '';
                }
                else{
                    this.cbm = (l * w * h);
                }
            },
            handleCbmInput(){
                this.userChangeCbms = true;
                if(this.cbm === ''){
                    this.calculateCbm();
                }
            },
            showMeasureModal() {
                invm = this;
                sales.showMeasureModal = true;
                sales.showInvModal = false;
            },

            onSubmit() {
                var ivn = this;
                sales.showInvModal = false;
                var datas = $("#modalFormInv").serializeArray();
                // console.log(123,datas);
                $.ajax({
                    headers: {'X-CSRF-TOKEN': "{{csrf_token()}}"},
                    url: '{{route("inventory.store")}}',
                    method: 'post',
                    data: {
                        "name": datas[0]['value'],
                        'type': datas[1]['value'],
                        'number': datas[2]['value'],
                        'gauge': datas[3]['value'],
                        'rate': datas[4]['value'],
                        'description': datas[5]['value'],
                        'asset_account': this.assetAccount.id,
                        'um_id': this.selectMeasure.id,
                        'income_account': this.incomeAccount.id,
                        'cost_account': this.costAccount.id,
                        'cost': 1,
                        'category': (this.category) ? this.category.id : null
                    },
                    dataType: 'json',

                }).done(function (response) {
                    // console.log(123, response);
                    if (response) {
                      response.item.id = response.item.item_id;
                      sales.selected_assembly_item = null;
                      sales.selected_assembly_item = response.item;
                    }
                    axios.get('{{route("inventory.create")}}', {
                        params: {
                            saveAndNew: 'on'
                        }
                    }).then(response => {
                        // console.log(1239, response);
                        ivn.number = response.data;
                        document.getElementById("modalFormInv").reset();
                    }).catch(error => console.log(error));

                }).fail(function (error) {
                    console.log('error', error);
                });

            }
        }
    });
    /// inventory model

  var selectedItem = {!! $selectedItem !!};
  var selectedBuild = {!! $selectedBuild !!};
  var productLaboratoryTest = {!! $productLaboratoryTest !!};

  function callSaveTemp() {
    @if(saveTempData() == 'true')
    setTimeout((function() {
      sales.saveTemp();
      // console.log(12);
    }), 4e4)
    @endif
  }

  var sales = new Vue({
    el: '#builds_statistic',
    data: {
      type: null,
      dynamic_time:'',
      selected_assembly_item: selectedItem,
      showInvModal: false,
      assembly_item: [],
      temp_items: [],
      temp_build: [],
      selected_build: selectedBuild,
      build_number: null,
      productLaboratoryTest: productLaboratoryTest,
      formula_items: [],
      assemlby_items: [],
      otherBuild: [{
          item: null
        },
        {
          item: null
        },
        {
          item: null
        },
        {
          item: null
        },
      ],
      otherBuildIndex: 0,
      inventoryIndex: 0,
      description: null,
      date: null,
      name: null,
      inventoryItem: null,
      expense_account: [],
      expenses: [{
          expense_account: null,
          description: null,
          amount: null
        },
        {
          expense_account: null,
          description: null,
          amount: null
        },
        {
          expense_account: null,
          description: null,
          amount: null
        },
      ],

      showMeasureModal: false,
      fieldErrors: [],
      selectedMetric: {},
      senddata: {},
      selectedMeasure: {},
      metricList:{!!json_encode(getMeasures())!!},

    },

    computed: {
      isError: function() {
        var isError = false;
        if (this.selected_assembly_item == null) {
          isError = true;
        }
        return isError;
      }
    },
    mounted: function() {
      
      this.build_number = "{{$productLaboratory->batch_number}}";
      // console.log(12, this.productLaboratoryTest);
      if (this.productLaboratoryTest.length > 0) {
        this.assemlby_items = [];
        for (var r = 0; r < this.productLaboratoryTest.length; r++) {
          this.assemlby_items.push({
            name: this.productLaboratoryTest[r].name,
            status: this.productLaboratoryTest[r].status,
            date: this.productLaboratoryTest[r].date,
            alert_date: this.productLaboratoryTest[r].alert_date,
            description: this.productLaboratoryTest[r].description
          });
        }
      }
    },
    methods: {


       //BEGIN - Used for dynamic input time
       dynamicTime()
              {
                  this.time_interval = setInterval(() => {
                      const now = new Date()
                      @if(getHourType() == 24)
                          const hours = now.getHours().toString().padStart(2,'0')
                          const minutes = now.getMinutes().toString().padStart(2,'0') 
                          // const seconds = now.getSeconds().toString().padStart(2,'0')
                          this.dynamic_time = `${hours}:${minutes}`
                      @else
                          const timeString = now.toLocaleTimeString('en-US',{hour:'numeric',minute:'numeric',hour12:true});
                          this.dynamic_time = `${timeString}`
                      @endif
                      
                  },1000);
              },
              stopDynamicTime()
              {
                  clearInterval(sales.time_interval)
              },
              changeTime()
              {
                sales.dynamic_time = sales.$refs.time_input.value
              },
          //END - Used for dynamic input time




      handleSubmit(e) {
        this.$validator.validate().then(valid => {
          if (valid) {
            // alert(e.target);
            regForm(e.target);
          }
        });
      },

      addMeasure: function () {
          let senddata = _.clone(this.selectedMetric);
          senddata.measure = _.clone(this.selectedMeasure);
          var req = axios.post("{{route('measure.store')}}",senddata)
          .then(function (response) {
              if (response) {
                  if (response.data) {
                      // var measure_id = response.data.me.id;
                      invm.selectMeasure = response.data.me;
                      // console.log(444, response, measure_id);
                  }
              }
              sales.showMeasureModal = false;
              sales.fieldErrors = [];
              sales.selectedMetric = {};
              sales.selectedMeasure = {};

              axios.get("{{route('inventory.create')}}").then(function (response) {
                  invm.measureList = response.data;
                  sales.showInvModal = true;
              });
          })
          .catch(function (error) {
              axios.get("{{route('inventory.create')}}").then(function (response) {
                  invm.measureList = response.data;
                  sales.showInvModal = true;
              });

              sales.fieldErrors = error.response.data

          });

      },

      // begin item search

      onItemSearch: _.debounce((search, loading) => {
        loading(true);
        axios.get("{{route('callMethod.search')}}", {
            params: {
              method_name: 'anyTable',
              'search_column': 'name',
              'table_name': 'items',
              keyword: search,
              'formula': 'formula',
              'limit_type': 'item'
            }
          })
          .then(function(response) {
            sales.formula_items = [];
            if (response.data.length > 0) {
              sales.formula_items = response.data;

              console.log(sales.formula_items);
            }
            loading(false);
          })
          .catch(function(error) {
            console.log(error);
          })
      }, getDebounceTime()),


      // end item search
      // items serarch method

      onItemsSearch: _.debounce((search, loading) => {
        loading(true);
        axios.get("{{route('callMethod.search')}}", {
            params: {
              method_name: 'items_search_assebley',
              'type': 'builds_statistic',
              keyword: search,
            }
          })
          .then(function(response) {
            sales.temp_items = [];
            if (response.data.length > 0) {
              
              sales.temp_items = response.data;
            }
            loading(false);
          })
          .catch(function(error) {
            console.log(error);
          })
      }, getDebounceTime()),


      setNumber() {
        this.build_number = (sales.selected_build != undefined) ? sales.selected_build.number : sales.build_number;
      },

      // items serarch method

      buildSearch: _.debounce((search, loading) => {
        loading(true);
        axios.get("{{route('callMethod.search')}}", {
            params: {
              method_name: 'search_build',
              keyword: search,
            }
          })
          .then(function(response) {
            sales.temp_build = [];
            if (response.data.length > 0) {
              
              sales.temp_build = response.data;
            }
            loading(false);
          })
          .catch(function(error) {
            console.log(error);
          })
      }, getDebounceTime()),

      setIndex() {
        this.temp_items = [];
      },

      addNew(type = null, index) {
        this.temp_items = [];
        if (type != null) {
          if (type == 'inventory') {
            if (this.assemlby_items[index + 1] == undefined) {
              this.assemlby_items.push({
                name: null,
                status: null,
                date: null,
                alert_date: null,
                description: null
              });
            }
          }
          if (type == 'otherBuilds') {
            if (this.otherBuild[index + 1] == undefined) {
              this.otherBuild.push({
                item: null
              });
            }
          }
          if (type == 'expense') {
            if (this.expenses[index + 1] == undefined) {
              this.expenses.push({
                expense_account: null,
                description: null,
                amount: null
              });
            }
          }



        }

      },
      deleteItem(type = null, index) {
        if (type != null) {
          console.log(type);
          if (type == 'inventory') {
            this.assemlby_items.splice(index, 1);
          }
          if (type == 'otherBuild') {
            this.otherBuild.splice(index, 1);
          }
          if (type == 'expense') {
            this.expenses.splice(index, 1);
          }

        }

      },

      addItems(type) {
        if (type != null) {
          if (type == "otherBuilds") {
            this.temp_items = [];
            this.otherBuild.push({
              item: null
            });
          }
          if (type == "inventory") {
            this.temp_items = [];
            this.assemlby_items.push({
              name: null,
              status: null,
              date: null,
              alert_date: null,
              description: null
            });
          }
          if (type == "expense") {
            this.expenses.push({
              expense_account: null,
              description: null,
              amount: null
            });
          }
        }

      },
      saveTemp() {
        var url = "{{route('temp.assembly.store')}}";
        form_id = 'assembly-form';
        var data = $('#' + form_id).serialize();
        axios.post(url, data)
          .then(function(response) {
            // console.log('sss11', response);
            callSaveTemp();
          })
          .catch(function(error) {
            console.log(error);
            callSaveTemp();
          });
      },
      clearTemp() {
        axios.get("{{route('temp.clear')}}", {
            params: {
              type: 'assembly'
            }
          })
          .then(function(response) {
            // console.log('sss11', response);
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      saveAndNew()
      {
          this.$validator.validate()
          .then(valid =>{
              if(valid)
              { 
                  var url="{{route('assembly.store')}}";
                  form_id='assembly-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