@extends('layouts.app')
@section('content')
@section('style')
@stop
<div class="row">

    <div class="portlet light bg-inverse">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-equalizer font-green-haze"></i>&nbsp;
                <span class="caption-subject font-green-haze bold uppercase">@lang('layout.CommissionEdit')</span>
                <!-- <span class="caption-helper">some info...</span> -->
            </div>
            <div class="tools">

            </div>
        </div>
        <div class="portlet-body form" style="margin-bottom:50%;" id="commission">
            <!-- BEGIN FORM-->
            {!! Form::model($commission, ['method' => 'PATCH','class'=>'form-horizontal','route' => ['commission.update',$commission->id]]) !!}
                            <div class="row">

                    <div class="col-md-3" style="margin-bottom: 30px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Name'):</label>
                            <div class="col-md-9">
                                {{Form::text('name',null,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Name'),'placeholder' => __('layout.Name'),'autofocus'=>'autofocus'])}}
                            <span class="required">@{{ errors.first('name') }}</span>
                            </div>
                        </div>
                    </div>     
                    
                    <div class="col-md-3" style="margin-bottom: 30px;" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Type'):</label>
                            <div class="col-md-9">
                                <select name="type" class="form-control" id="" v-model="type">
                                    <option value="percent">@lang('layout.Percentage')</option>
                                    <option value="value">@lang('layout.Value')</option>
                                </select>
                            </div>
                        </div>
                    </div>    

                    <div class="col-md-3" style="margin-bottom: 30px;" v-if="type == 'percent'">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Percent'):</label>
                            <div class="col-md-9">
                                {{Form::number('percent',null,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Percent'),'placeholder' => __('layout.Percent'),'autofocus'=>'autofocus'])}}
                            <span class="required">@{{ errors.first('percent') }}</span>
                            </div>
                        </div>
                    </div>      
                    
                    
                    <div class="col-md-3" style="margin-bottom: 30px;" v-if="type == 'value'">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Value'):</label>
                            <div class="col-md-9">
                                {{Form::number('percent',null,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Value'),'placeholder' => __('layout.Value'),'autofocus'=>'autofocus'])}}
                            <span class="required">@{{ errors.first('percent') }}</span>
                            </div>
                        </div>
                    </div>                    

                    <div class="col-md-3" style="margin-bottom: 30px;">
                         <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Date'):</label>
                            <div class="col-md-9">
                                <input type="text" name="date" class="form-control date" autocomplete="off" value="{{convertDate($commission->date)}}">
                            </div>
                        </div>
                    </div>
                     <div class="col-md-3" style="margin-bottom: 30px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Member'):</label>
                            <div class="col-md-9">
                                <v-select placeholder="@lang('layout.SelectMember')" label="name"
                                          v-model="selected_member"
                                          :options="members">
                                </v-select>
                                <input type="hidden" name="member_id"
                                       v-model.number="(!selected_member)?null:selected_member.id" v-validate="'required'" data-vv-as="@lang('layout.Member')">
    
                                    <span class="required">@{{ errors.first('member_id') }}</span>
 
                            </div>
                        </div>
                    </div> 

                    <div class="col-md-3" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Currency'):</label>
                            <div class="col-md-9">
                                <v-select label="code" :options="currency" v-model="selected_currency"></v-select>
                                <input type="hidden" name="currency" :value="(selected_currency)?selected_currency.code:null">
                            </div>
                        </div>
                    </div> 
                
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="form-group">
                                <label class="control-label col-md-3">@lang('layout.Expense') </label>
                                <div class="col-md-9">
                                <v-select label="name" :options="expenses" v-model="selected_expense_account" @change="setAmount(selected_expense_account)"></v-select>
                                <input type="hidden" name="expense_id" v-bind:value="(!selected_expense_account)?null:selected_expense_account.id"/>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="form-group">
                                <label class="control-label col-md-3">@lang('layout.User') </label>
                                <div class="col-md-9">
                                <v-select label="name" :options="userData" v-model="selected_userData_account"></v-select>
                                <input type="hidden" name="user_commission" v-bind:value="(!selected_userData_account)?null:selected_userData_account.id"/>
                            </div>
                        </div>
                    </div>

                     <div class="col-md-6"> 
                        <div class="form-group">
                            <label class="control-label col-md-2">@lang('layout.Description'):</label>
                            <div class="col-md-10">
                                   {!! Form::textarea('description', null, array('placeholder' => __('layout.Description'),'class' => 'form-control','rows' => 3, 'cols' => 60)) !!}

                            </div>
                        </div>
                        
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="form-group">

                            <div class="col-md-12">
                                <label class="control-label">@lang('menu.InventoryCategory')</label>
                                <select class="list-style form-control" @change="changeCategory(this)" v-model="inventory_category_id">
                                    <option value="">@lang('layout.Select')</option>
                                    <option v-for="cat in category" :value="cat.id">@{{cat.name}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="form-group"> 
                            <div class="col-md-12">
                                <label class="control-label">@lang('layout.SelectItem')</label>
                                <v-select class="vue-select2" v-model="selectedItem" label="name" @search="onItemSearch" :options="itemlist">
                                </v-select>
                                <input type="hidden" name="item_id" :value="item_id.length > 0 ? item_id:null">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <br>
                        <button type="button" @click="searchType" class="btn btn-info" style="background-color: rgb(80, 129, 141) !important;border: 1px solid rgb(80, 129, 141) !important;"><i class="fa fa-search"></i>@lang('layout.Search')</button>

                    </div>
                </div>

                <!-- begin items -->
                <div class="row" v-if="searched_items.length>0" style="overflow-x: scroll;">
                    <table id="table_content" class="table table-bordered table-advance">
                        <thead>
                            <tr>
                                <th> <i class="fa fa-check" style="font-size: 25px;color: green"></i> </th> 
                                <th style="color: #000000 !important;">@lang('layout.Number')</th>
                                <th style="color: #000000 !important;">@lang('layout.Name') </th>
                                <th style="color: #000000 !important;">@lang('layout.Unit') </th>
                                {{-- <th>@lang('layout.LastCost') </th>
                                <th>@lang('layout.StandardPrice') </th> --}}
                                <th style="color: #000000 !important;">@lang('layout.Amount') </th> 
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in searched_items">
                                <td><input type="checkbox" :name="'selected_item['+index+']'" class="form-control" v-model="(!item)?null:item.checked" ></td> 
                                <td>@{{(!item)?null:item.number}}</td>
                                <td>@{{(!item)?null:item.name}}</td>
                                <td>@{{(!item)?null:item.measure}}</td>
                                {{-- <td>@{{(!item)?null:item.cost}}</td>
                                <td>@{{(!item)?null:item.rate}}</td> --}}
                                <td><input type="number" :name="'amount['+index+']'" v-model="(!item)?null:item.custome_rate " class="form-control">
                                    <input type="hidden" :name="'inventory_id['+index+']'" class="form-control" :value="(!item)?null:item.inventories_id"> 
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <!-- end items --> 

            <div class="col-xs-12 col-sm-12 col-md-11 text-center">
                <button type="button" onclick="regForm(this)" class="btn green">@lang('layout.Submit')</button>

                <button href="{{url('commission.index')}}" class="btn default"><i
                            class="fa fa-mail-reply"></i> @lang('layout.Cancel')</button>
            </div>
            {!! Form::close() !!}
        </div>
        <!-- END FORM-->
    </div>
</div>
@endsection


@push('scripts')

    <script>

        @if(App::getLocale())
    Vue.use(VeeValidate, {
        locale: '{{App::getLocale()}}',
    });
    @else
        Vue.use(VeeValidate, {
            locale: 'en',
        });
        @endif

Vue.component("v-select", VueSelect.VueSelect);

        var members = {!! $members !!};
        var selected_member = {!! $selected_member !!};
        var expense = {!! $expense !!};
        var userData = {!! $userData !!};
        var commission = {!! $commission !!};
        var currency = {!! $currency !!};

        var inventory_category = {!! $inventory_category !!}
        var commissionDetail  = {!!$commissionDetail!!}

        let vu = new Vue({
                el: '#commission',
                data: {

                    members: members,
                    selected_member: selected_member,
                    type: 'percent',
                    expenses: expense,
                    selected_expense_account:null,
                    userData: userData,
                    selected_userData_account:null,
                    currency:currency,
                    selected_currency:null,

                    category:inventory_category,
                    selectedItem: null,
                    itemlist: [],
                    item_id: [],
                    searched_items: [],
                    items: [],
                    commissionDetail:commissionDetail,
                    inventory_category_id:null

                },
                methods: {

                    onItemSearch(search, loading) {
                        loading(true);
                        this.searchItem(search, loading, this);
                    },
                    //ajax call to get items
                    searchItem(search, loading, vu) {
                        axios.get("{{route('callMethod.search')}}", {
                            params: {
                                method_name: 'anyTable',
                                'search_column': 'name',
                                'table_name': 'items',
                                keyword: search,
                            }
                        })
                            .then(function (response) {
                                this.itemlist = [];
                                if (response.data.length > 0) {
                                    vu.itemlist = response.data;
                                    console.log('data', vu.itemlist);
                                }
                                loading(false);
                            })
                            .catch(function (error) {
                                console.log(error);
                            })
                    },


                    searchType() {
                            if (vu.inventory_category_id) {
                                vu.searched_items = [];
                            }
                            axios.get("{{route('callMethod.search')}}", {
                                params: {
                                    method_name: 'priceLevelItems',
                                    category: vu.inventory_category_id,
                                    item: (!vu.selectedItem)?null:vu.selectedItem.id
                                }
                            })
                                .then(function (response) {
                                        if (response.data.length > 0) {

                                            for(var i=0;i<response.data.length;i++)
                                            {
                                                var selected = false;
                                                for (var ii = 0; ii < vu.commissionDetail.length; ii++) {
                                                    if (response.data[i].id == vu.commissionDetail[ii].id) {
                                                        vu.searched_items.push({
                                                            id:vu.commissionDetail[ii].id,
                                                            inventories_id:vu.commissionDetail[ii].inventories_id,
                                                            number:vu.commissionDetail[ii].number,
                                                            name:vu.commissionDetail[ii].name,
                                                            cost:vu.commissionDetail[ii].cost,
                                                            rate:vu.commissionDetail[ii].rate,
                                                            custome_rate:vu.commissionDetail[ii].custome_rate,
                                                            measure:vu.commissionDetail[ii].measure,
                                                            checked:vu.commissionDetail[ii].checked
                                                        });
                                                        selected = true;
                                                    }
                                                }
                                                if (selected) {
                                                    selected = false;
                                                }else{
                                                vu.searched_items.push({
                                                    id:response.data[i].id,
                                                    inventories_id:response.data[i].inventories_id,
                                                    number:response.data[i].number,
                                                    name:response.data[i].name,
                                                    cost:response.data[i].cost,
                                                    rate:response.data[i].rate,
                                                    custome_rate:0,
                                                    measure:response.data[i].measure
                                                });
                                                }
                                            }
                                    }
                                    
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        // }

                    },
                    changeCategory(e)
                    {
                        var value=e.event.target.value;
                        for(var i=0;i<this.items.length;i++)
                        { 
                        this.items[i].selected=null;
                        if(this.items[i].inventory_category_id==value)
                        {
                            this.items[i].selected=true;
                        }
                        }
                    },

                    handleSubmit(e) {
                        this.$validator.validate().then(valid => {
                            if (valid) {
                                // alert(e.target);
                                regForm(e.target);
                            }
                        });
                    },
                },
                mounted: function() {
                    this.type = commission.type;
                    @if($commission->expense_id)
                        this.selected_expense_account   = _.find(expense, (o) => o.id == {{$commission->expense_id}});
                    @endif
                    @if($commission->user_commission)
                        this.selected_userData_account   = _.find(userData, (o) => o.id == {{$commission->user_commission}});
                    @endif
                    @if($commission->currency)
                        this.selected_currency   = _.find(currency, (o) => o.code == "{{$commission->currency}}");
                    @endif

                    if (this.commissionDetail) {
                        for (var i = 0; i < this.commissionDetail.length; i++) {
                            this.searched_items.push({
                                id:this.commissionDetail[i].id,
                                inventories_id:this.commissionDetail[i].inventories_id,
                                number:this.commissionDetail[i].number,
                                name:this.commissionDetail[i].name,

                                cost:this.commissionDetail[i].cost,
                                rate:this.commissionDetail[i].rate,
                                custome_rate:this.commissionDetail[i].custome_rate,
                                measure:this.commissionDetail[i].measure,
                                checked:this.commissionDetail[i].checked

                            });
            
                        }
                    }
                }
            })
    </script>
@endpush