@extends('layouts.app')

@section('style')
    <link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">
    
@stop

@section('content')
    <!-- BEGIN CONTENT BODY -->

    <!-- 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.UpdateAssembly')</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="assembaly" v-cloak>
                <!-- BEGIN FORM-->
                {{Form::open(['route' =>['assembly_m.update',$assembly->id],'method' => 'PATCH','class' => 'form-','id'=>'assembly-form'])}}
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label"> @lang('layout.ItemName')</label>
                                <v-select label="name" v-model="selected_assembly_item" :options="formula_items" @search="onItemSearch"></v-select>

                                <input type="hidden" name="item" :value="(!selected_assembly_item)?null:selected_assembly_item.id">

                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">@lang('layout.AssemblyName')</label>

                                    {{Form::text('name',$assembly->formula_name,['class' => 'form-control','placeholder' =>__('layout.EnterAssemblyName')])}}
                                    {{--<span class="help-block"> This is inline help </span>--}}

                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label ">@lang('layout.AssemblyCode')</label>

                                    {{Form::number('code',$assembly->code,['class' => 'form-control','min' =>'0','placeholder' =>__('layout.AssemblyCode')])}}

                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="col-md-4">
                              <div class="form-group">
                                  <label class="control-label ">@lang('layout.Date')</label>
                                      <input class="form-control date" value="{{$assembly->date}}" name="date" autocomplete="off" value="">
                              </div>
                          </div>

                           <div class="col-md-8">
                              <div class="form-group">
                                  <label class="control-label col-md-4">@lang('layout.Description') </label>
                                  <textarea  name="description" class="form-control" rows="2">
                                      {{$assembly->description}}
                                  </textarea>
                              </div>
                          </div> 
                        </div>
                    </div>

                    <li class="list-group-item bg-green bg-font-green"> @lang('layout.FormulaItems') </li>
                    <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: 160px;"> @lang('layout.ItemName')</th>
                                <th class="text-center" style="min-width: 120px;"> @lang('layout.Measure')</th>
                                <th class="text-center" style="min-width: 80px;"> @lang('layout.Quantity')</th>
                                <th style="width: 20px;"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(inventory,InventoryIndex) in assemlby_items" class="even">
                                <td class="td_one"> <span class="badge badge3 badge-success badge-roundless"> @{{InventoryIndex+1}} </span>
                                </td>
                                <td class="td_one"> 
                                      <v-select label="name" v-model="inventory.item" :options="temp_items" @search="onItemsSearch"></v-select>
                                      <input type="hidden" :name="'inventory_id['+InventoryIndex+']'" v-validate="'required'" data-vv-as="@lang('layout.ItemName')" :value="(inventory.item==null)?null:inventory.item.id">
									  <input type="hidden" :name="'type['+InventoryIndex+']'">
									  <span class="required">@{{ errors.first('inventory_id['+InventoryIndex+']') }}</span>
														
								</td> 
                                <td>
                                    <select v-if="(inventory.item !=null)" v-model="(inventory.item == null)?null:inventory.item.measure"  class="form-control input_style"
                                             placeholder="Measure"
                                            
                                             required="required">

                                       <span v-if="inventory.item.measure_list !=null">
                                            <option v-if="(inventory.item !=null)"
                                                v-for="measures in inventory.item.measure_list"
                                                :value="measures">@{{ measures.measure_name }}</option>
                                       </span>
                                    </select>

                                    <input type="hidden" :name="'inventory_measure['+InventoryIndex+']'" :value="(inventory.item==null)?null:(inventory.item.measure)?inventory.item.measure.measure_id:null">
                                </td>
                                <td > 
                                     <input type="number" :name="'inventory_qty['+InventoryIndex+']'" v-validate="'required'" data-vv-as="@lang('layout.Quantity')" v-model.number="(inventory.item==null)?null:inventory.item.qty" class="form-control input-style input-number"  placeholder="@lang('layout.Quantity')">
										<span class="required">@{{ errors.first('inventory_qty['+InventoryIndex+']') }}</span>
									</td>

                                <td>
                                    <span v-if="InventoryIndex > 0"  v-on:click="deleteItem('inventory',InventoryIndex)"><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>
                    <button v-if="assemlby_items.length <= 0 " type="button" class="btn default" @click="addItems('inventory')">@lang('layout.AddItem')
                    </button>
					
					<!-- base material -->
                    <li class="list-group-item bg-green bg-font-green"> @lang('layout.FormulaItems') </li>
                    <div 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: 160px;"> @lang('layout.ItemName')</th>
                                <th class="text-center" style="min-width: 120px;"> @lang('layout.Measure')</th>
                                <th class="text-center" style="min-width: 80px;"> @lang('layout.Quantity')</th>
                                <th style="width: 20px;"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(inventory,InventoryIndex) in assemlby_base_items" class="even">
                                <td class="td_one"> <span class="badge badge3 badge-success badge-roundless"> @{{InventoryIndex+1}} </span>
                                </td>
                                <td class="td_one"> 
                                      <v-select label="name" v-model="inventory.item" :options="temp_itemes" @search="onItemsSearch_m"></v-select>
                                      <input type="hidden" :name="'inventory_id['+Indexbase+']'" v-validate="''" data-vv-as="@lang('layout.ItemName')" :value="(inventory.item==null)?null:inventory.item.id">
                                      <input type="hidden" :name="'type['+Indexbase+']'" value="base">
									  <span class="required">@{{ errors.first('inventory_id['+Indexbase+']') }}</span>
														
								</td> 
                                <td>
                                    <select v-if="(inventory.item !=null)" v-model="(inventory.item == null)?null:inventory.item.measure"  class="form-control input_style"
                                             placeholder="Measure"
                                            
                                             required="required">

                                       <span v-if="inventory.item.measure_list !=null">
                                            <option v-if="(inventory.item !=null)"
                                                v-for="measures in inventory.item.measure_list"
                                                :value="measures">@{{ measures.measure_name }}</option>
                                       </span>
                                    </select>

                                    <input type="hidden" :name="'inventory_measure['+Indexbase+']'" :value="(inventory.item==null)?null:(inventory.item.measure)?inventory.item.measure.measure_id:null">
                                </td>
                                <td > 
                                     <input type="number" :name="'inventory_qty['+Indexbase+']'" v-validate="''" data-vv-as="@lang('layout.Quantity')" v-model.number="(inventory.item==null)?null:inventory.item.qty" class="form-control input-style input-number"  placeholder="@lang('layout.Quantity')">
										<span class="required">@{{ errors.first('inventory_qty[100]') }}</span>
									</td>

                                <td>
                                    <span v-if="InventoryIndex > 0"  v-on:click="deleteItem('inventory',InventoryIndex)"><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="form-section"></div>
                    <li class="list-group-item bg-green bg-font-green"> @lang('layout.AdjastmentItems') </li>

                    <div v-if="otherBuild.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: 160px;">@lang('layout.ItemName')</th>
                                <th class="text-center" style="min-width: 120px;"> @lang('layout.Measure')</th>
                                <th class="text-center" style="min-width: 80px;"> @lang('layout.Quantity')</th>
                                <th style="width: 20px;"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(inventory,InventoryIndex) in otherBuild" class="even">
                                <td class="td_one"> <span class="badge badge3 badge-success badge-roundless"> @{{InventoryIndex+1}} </span>
                                </td>
                                <td class="td_one">
                                     
                                     <v-select label="name" v-model="inventory.item" :options="temp_items" @click.native="addNew('otherBuilds',InventoryIndex)" @search="onItemsSearch"></v-select>
                                      <input type="hidden" name="other_build_id[]" :value="(inventory.item==null)?null:inventory.item.id">

                                </td>
                                <td>
                                   <select v-if="(inventory.item !=null)" v-model="(inventory.item == null)?null:inventory.item.measure"   class="form-control input_style"
                                             placeholder="Measure"
                                            
                                             required="required">

                                       <span v-if="inventory.item.measure_list !=null">
                                            <option v-if="(inventory.item !=null)"
                                                v-for="measures in inventory.item.measure_list"
                                                :value="measures">@{{ measures.measure_name }}</option>
                                       </span>
                                    </select>

                                    <input type="hidden" name="other_build_measure[]" :value="(inventory.item==null)?null:(inventory.item.measure)?inventory.item.measure.measure_id:null">
                                </td>
                                <td >
                                    <input name="other_build_qty[]" class="form-control inpu-number-fild"  :class="" type="number" v-model.number="(!inventory.item)?null:inventory.item.qty" placeholder="@lang('layout.Quantity')" />
                                </td>
                                <td>
                                    <span  v-on:click="deleteItem('otherBuild',InventoryIndex)"><i class="paddint-both glyphicon glyphicon-trash"></i></span>

                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                  
                    <button v-if="otherBuild.length <= 0 " type="button" class="btn default" @click="addItems('otherBuilds')">@lang('layout.AddItem')
                    </button>


                    <!-- build expense -->
                    @if(getBuildExpense() == "true")
                    <div class="form-section"></div>
                    <li class="list-group-item bg-green bg-font-green"> @lang('layout.Expense') </li>

                    <div v-if="expenses.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: 160px;">@lang('layout.ExpenseAccount')</th>
                                <th class="text-center" style="min-width: 120px;"> @lang('layout.Description')</th>
                                <th class="text-center" style="min-width: 80px;"> @lang('layout.Amount')</th>
                                <th style="width: 20px;"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(expense,index) in expenses" class="even">
                                <td class="td_one"> <span class="badge badge3 badge-success badge-roundless"> @{{index+1}} </span>
                                </td>
                                <td class="td_one">
                                     
                                     <v-select label="name" v-model="expense.expense_account" :options="expense_account" @click.native="addNew('expense',index)" ></v-select>
                                      <input type="hidden" name="expense_id[]" :value="(expense.expense_account==null)?null:expense.expense_account.id">

                                </td>
                                <td>
                                  <input type="text" name="expense_description[]" v-model="expense.description" class="form-control" placeholder="@lang('layout.Description')">
                                </td>
                                <td >
                                    <input type="number" name="expense_amount[]" v-model="expense.amount" class="form-control" placeholder="@lang('layout.Amount')">
                                </td>
                                <td>
                                    <span  v-on:click="deleteItem('expense',index)"><i class="paddint-both glyphicon glyphicon-trash"></i></span>

                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                    <button v-if="expenses.length <= 0 " type="button" class="btn default" @click="addItems('expense')">@lang('layout.AddItem')
                    </button>
                    @endif

                    <!-- end build expense --> 

                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <button v-if="!isError" type="button"  @click="handleSubmit($event)" class="btn green">@lang('layout.Submit')</button>
                            <a href="{{route('assembly.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 src="{{url('/vue/sweetalert1.min.js')}}"></script>
    <script src="{{url('/vue/v-autocomplete.js')}}"></script>



<script>
     Vue.component('v-select', VueSelect.VueSelect);
  


    Vue.use(VAutocomplete.default)
    Vue.use(VeeValidate);

    var formulaItems={!! $formulaItems !!};
    var otherBuildItems= {!! $otherBuildItems !!};
    var item= {!! $item !!};
    var selectedAssemblyExpense= {!! $selectedAssemblyExpense !!};
    var expense_account = {!! $expense_account !!};
    var canUpdate ='{{ $canUpdate}}';
    var sales = new Vue({
        el:'#assembaly',
        data:{
            formulaItems:formulaItems,
            otherBuildItems:otherBuildItems,
            selected_assembly_item:null,
            assembly_item:[],
            item:item,
            canUpdate:canUpdate,
            btnDisable:true,
            temp_items:[],
            formula_items:[],
            temp_itemes:[],
            assemlby_items: [
            ],
            otherBuild: [
            ],
			assemlby_base_items: [
            ],
            expense_account:expense_account,
            selectedAssemblyExpense:selectedAssemblyExpense,
            expenses:[
            ],
			Indexbase: 1,
            otherBuildIndex:0,
            inventoryIndex:0,
            inventoryItem:null, 
        },

        computed:{
             isError:function()
             {
                var isError=false;
                if(this.selected_assembly_item==null || !this.selected_assembly_item)
                {
                  isError=true;
                }
                return isError;
             }
        },
        mounted:function()
        {            //begin formula item initialize
          if(this.item)
          {
            this.formula_items.push(this.item);
            this.selected_assembly_item=this.formula_items[0];
          }
          for(var i=0;i<this.formulaItems.length;i++)
          {
			  // console.log(formulaItems[i]);
			  if(formulaItems[i].type == "base"){
				this.assemlby_base_items.push({item:this.formulaItems[i]});
			}else{
				 this.assemlby_items.push({item:this.formulaItems[i]});
			  }
          }
		  console.log('ddd',this.assemlby_base_items);
            //// end formula item initialize

         //begin formula other item initialize
           
          for(var i=0;i<this.otherBuildItems.length;i++)
          {
            this.otherBuild.push({item:this.otherBuildItems[i]});
          }
          for(var m=4;m>this.otherBuildItems.length;m--)
          {
            this.otherBuild.push({item:null});
          }
            //// end formula other item initialize

            // begin assembly expense

          for(var i=0;i<this.selectedAssemblyExpense.length;i++)
          {
            this.expenses.push({expense_account:this.selectedAssemblyExpense[i].selected_account,description:this.selectedAssemblyExpense[i].description,amount:this.selectedAssemblyExpense[i].amount});

          }
          for (var m = 2; m > this.selectedAssemblyExpense.length; m--) {
          this.expenses.push({
              expense_account: null,
              description: null,
              amount: null
            });
          }
          // end assembly expense

        },
        methods:{
       
            // 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':'roll'
            }
          })
          .then(function(response){
            sales.formula_items = [];
            if(response.data.length >0)
            {
              sales.formula_items = response.data;
            }
            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':'assembaly',
              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()),
	   
	   
	   onItemsSearch_m:_.debounce((search,loading) =>{
          loading(true);
          axios.get("{{route('callMethod.search')}}",{
            params:{
               method_name:'items_search_assebley',
              'type':'material',
              'data_type':'material',
              keyword:search,
            }
          })
          .then(function(response){
            sales.temp_itemes = [];
            if(response.data.length >0)
            {
              sales.temp_itemes = response.data;
            }
            loading(false);
          })
          .catch(function(error){
            console.log(error);
          })
       },getDebounceTime()),
	   
	   
	   
           // end item search
           // items serarch method
        
            addNew(type=null,index)
            { 
              this.temp_items=[];
              if(type !=null)
              {
                 if(type=='inventory')
                 { 
                    if(this.assemlby_items[index+1]==undefined)
                    {
                      this.assemlby_items.push({item: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 && this.canUpdate=='can')
             {
                 
                 if(type=='inventory')
                 {
                    swal({
                      title: "@lang('layout.AreYouSure?')",
                      buttons: ["@lang('layout.Cancel')", "@lang('layout.yes')"],
                      text: "",
                      icon: "info",
                      dangerMode: true,
                  }).then((willDelete) => {
                      if (willDelete) {
                        this.assemlby_items.splice(index, 1);
                      }
                      else {
                          
                      }
                  }); 
                 }
                 if(type=='otherBuild')
                 {
                    swal({
                      title: "@lang('layout.AreYouSure?')",
                      buttons: ["@lang('layout.Cancel')", "@lang('layout.yes')"],
                      text: "",
                      icon: "info",
                      dangerMode: true,
                  }).then((willDelete) => {
                      if (willDelete) {
                        this.otherBuild.splice(index, 1);
                      }
                      else {
                          
                      }
                  });
                 }

                 if(type=='expense')
                 {
                    this.expenses.splice(index, 1);
                 }
                   
             }
              
           },
		   
		   			
			handleSubmit(e) {
				this.Indexbase = this.assemlby_items.length;
                this.$validator.validate().then(valid => {
                    if (valid) {
						// alert(e.target);
                        regForm(e.target);
                    }
                });
            },

           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({item:null});
                    }
                    if(type=="expense")
                    { 
                      this.expenses.push({item:null});
                    }
                }
                     
           },

        }
    });



</script>


@endpush