@extends('layouts.app')
@section('content')
@section('style')
@stop
<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>&nbsp;
                <span class="caption-subject font-green-haze bold uppercase">@lang('layout.CommissionCreate')</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::open(array('route' => 'commission.store','method'=>'POST','class'=>'form-horizontal')) !!}
            {{ csrf_field() }}
            <div class="form-body">
                <div class="row"> 
                    <div class="col-md-3" style="margin-bottom: 10px;">
                        <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: 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: 10px;" 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: 10px;"  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: 10px;">
                         <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">
                            </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.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-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.SerialNum')</label>
                                <input type="text" class="form-control" name="serial_number" v-model="serial_number">
                            </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>@lang('layout.Number')</th>
                                <th>@lang('layout.Name') </th>
                                <th>@lang('layout.Unit') </th>
                                {{-- <th>@lang('layout.LastCost') </th>
                                <th>@lang('layout.StandardPrice') </th> --}}
                                <th>@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"></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+']'" class="form-control"></td>
                                <input type="hidden" :name="'inventory_id['+index+']'" class="form-control" :value="(!item)?null:item.inventories_id"> 
                            </tr>
                        </tbody>
                    </table>

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

            </div>
            <div class="col-xs-12 col-sm-12 col-md-11 text-center">
                <button @click="handleSubmit($event)" type="button" class="btn green">@lang('layout.Submit')</button>
                <a href="{{route('commission.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>

            </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 inventory_category = {!! $inventory_category !!}

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

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

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


                    category: inventory_category,
                    selectedAll: false,
                    serial_number: null,
                    selectedItem: null,
                    itemlist: [],
                    item_id: [],
                    searched_items: [],
                    items: [],
                    inventory_category_id: null

                },
                methods: {

                    onItemSearch(search, loading) {
                        loading(true);
                        this.searchItem(search, loading, this);
                    },
                    //ajax call to get items
                    searchItem(search, loading, vm) {
                        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,
                                    serial_number: this.serial_number,
                                }
                            })
                            .then(function(response) {
                                if (response.data.length > 0) { 
                                    for (var i = 0; i < response.data.length; i++) {  
                                        // console.log("Hello" , response.data);
                                        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,
                                            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);
                            }
                        });
                    },
                }
            })
    </script>
@endpush