@extends('layouts.app')
@section('content')
@section('style')
<style type="text/css">
    .v-select.searchable .dropdown-toggle{
        height: 27px;
    }
</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.OilPumpCreate')</span>
            </div>
            <div class="tools"></div>
        </div>
        <div class="portlet-body form" style="margin-bottom:50%;" id="oilPart">
            {!! Form::open(array('route' => 'oilPart.store','method'=>'POST','class'=>'form-horizontal')) !!}
            {{ csrf_field() }}
            <div class="form-body">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 10px;padding: 0px 0px 20px 0px;">
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <label class="control-label">@lang('layout.Number')</label>
                            {{Form::text('number',$number,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Number'),'placeholder' => __('layout.Number')])}}
                            <span class="required">@{{ errors.first('number') }}</span>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <label class="control-label">@lang('layout.SaleNumber')</label>
                            {{Form::number('sale_number',null,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.SaleNumber'),'placeholder' => __('layout.SaleNumber'),'autofocus'=>'autofocus'])}}
                            <span class="required">@{{ errors.first('sale_number') }}</span>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <label class="control-label">@lang('layout.Site')</label>
                            <v-select label="name" :options="inventorySites" v-model="selected_site" @change="setAmount(selected_site)"></v-select>
                            <input type="hidden" name="site_id" v-bind:value="(!selected_site)?null:selected_site.id"/>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <label class="control-label">@lang('layout.Counter')</label>
                            {{Form::number('counter',null,['class' => 'form-control','placeholder' => __('layout.Counter')])}}
                            <span class="required">@{{ errors.first('counter') }}</span>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <label class="control-label">@lang('menu.Employee')</label>
                            <v-select placeholder="@lang('layout.SelectMember')" label="name" v-model="selected_member" :options="members">
                            </v-select>
                            <input type="hidden" name="employee_id" v-model.number="(!selected_member)?null:selected_member.id" v-validate="''" data-vv-as="@lang('menu.Employee')">
                            <span class="required">@{{ errors.first('employee_id') }}</span>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <label class="control-label">@lang('layout.Item')</label>
                            <v-select label="name" v-model="selected_item" :options="itemlist" @search="onItemSearch" data-vv-as="@lang('layout.ItemName')"></v-select>
                            <input type="hidden" name="inventory_id" v-validate="'required'"  :value="(!selected_item)?null:selected_item.inventory_id">
                            <span class="required">@{{ errors.first('inventory_id') }}</span>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label class="control-label">@lang('layout.Description')</label>
                            {!! Form::textarea('description', null, array('placeholder' => __('layout.Description'),'class' => 'form-control','rows' => 1, 'cols' => 60)) !!}
                        </div>
                    </div>
                    {{-- <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label col-md-4">@lang('layout.Number'):</label>
                            <div class="col-md-8">
                                {{Form::text('number',$number,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Number'),'placeholder' => __('layout.Number')])}}
                                <span class="required">@{{ errors.first('number') }}</span>
                            </div>
                        </div>
                    </div>  --}}
                    {{-- <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label col-md-4">@lang('layout.SaleNumber'):</label>
                            <div class="col-md-8">
                                {{Form::number('sale_number',null,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.SaleNumber'),'placeholder' => __('layout.SaleNumber'),'autofocus'=>'autofocus'])}}
                            <span class="required">@{{ errors.first('sale_number') }}</span>
                            </div>
                        </div>
                    </div>  --}}
                    {{-- <div class="col-lg-4 col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-md-4">@lang('layout.Site') </label>
                            <div class="col-md-8">
                                <v-select label="name" :options="inventorySites" v-model="selected_site" @change="setAmount(selected_site)"></v-select>
                                <input type="hidden" name="site_id" v-bind:value="(!selected_site)?null:selected_site.id"/>
                            </div>
                        </div>
                    </div> --}}
                </div>
                <div class="row" style="margin-top: 25px;">
                    {{-- <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label col-md-4">@lang('layout.Counter'):</label>
                            <div class="col-md-8">
                                {{Form::number('counter',null,['class' => 'form-control','placeholder' => __('layout.Counter')])}}
                                <span class="required">@{{ errors.first('counter') }}</span>
                            </div>
                        </div>
                    </div>  --}}
                    {{-- <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label col-md-4">@lang('menu.Employee'):</label>
                            <div class="col-md-8">
                                <v-select placeholder="@lang('layout.SelectMember')" label="name" v-model="selected_member" :options="members">
                                </v-select>
                                <input type="hidden" name="employee_id" v-model.number="(!selected_member)?null:selected_member.id" v-validate="''" data-vv-as="@lang('menu.Employee')">
                                <span class="required">@{{ errors.first('employee_id') }}</span>
                            </div>
                        </div>
                    </div>  --}}
                    {{-- <div class="col-md-4"> 
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Description'):</label>
                            <div class="col-md-9">
                                {!! Form::textarea('description', null, array('placeholder' => __('layout.Description'),'class' => 'form-control','rows' => 3, 'cols' => 60)) !!}
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <button @click="handleSubmit($event)" type="button" class="btn green">@lang('layout.Submit')</button>
                <a href="{{route('oilPart.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
            </div>
            {!! Form::close() !!}
        </div>
    </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 inventorySite = {!! $inventorySite !!};
        let vu = new Vue({
            el: '#oilPart',
            data: {
                members: members,
                selected_member: null,
                inventorySites: inventorySite,
                selected_site:null,
                selectedItem: null,
                selected_item: null,
                temp_items: [],
                itemlist: [],
                inventory_id: []
            },
            computed: {
                isError: function() {
                    var isError = false;
                    if (this.selected_item == null) {
                        isError = true;
                    }
                    return isError;
                }
            },
            watch: {
                selectedItem: function(newVal, oldVal) {
                    let x = [];
                    newVal.forEach(function(e) {
                        x.push(e.id);
                    });
                    this.inventory_id = x;
                    console.log('x value');
                    console.log(x);
                },
            },
            methods: {
                handleSubmit(e) {
                    this.$validator.validate().then(valid => {
                        if (valid) {
                            // alert(e.target);
                            regForm(e.target);
                        }
                    });
                },
                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,
                            'limit_type': 'item'
                        }
                    })
                    .then(function(response) {
                        this.itemlist = [];
                        if (response.data.length > 0) {
                            // console.log(32, response.data);
                            vm.itemlist = response.data;
                        }
                        loading(false);
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
                },
            }
        })
    </script>
@endpush