@extends('layouts.app')
@section('content')
@section('style')
@stop
    <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.ProfitEdit')</span>
                <!-- <span class="caption-helper">some info...</span> -->
            </div>
            <div class="tools"></div>
        </div>
        <div class="portlet-body form" style="margin-bottom:50%;" id="profit">
            <!-- BEGIN FORM-->
            {!! Form::model($profit, ['method' => 'PATCH','class'=>'form-horizontal','route' => ['profit.update',$profit->id]]) !!}
                <div class="row" style="margin-bottom: 20px; padding: 10px;">
                    <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: 15px 50px;">
                        <div class="col-md-4">
                            <label class="control-label">@lang('layout.Name')</label>
                            {{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 class="col-md-4">
                            <label class="control-label">@lang('layout.Type')</label>
                            <select name="type" class="form-control" id="" v-model="type">
                                <option value="Yearly">@lang('layout.Yearly')</option>
                                <option value="Montly">@lang('layout.Montly')</option>
                                <option value="Weekly">@lang('layout.Weekly')</option>
                                <option value="Daily">@lang('layout.Daily')</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">@lang('layout.Percent')</label>
                            {{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 class="col-md-4">
                            <label class="control-label">@lang('layout.Amount')</label>
                            {{Form::number('amount',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 class="col-md-4">
                            <label class="control-label">@lang('layout.Currency')</label>
                            <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 class="col-md-4">
                            <label class="control-label">@lang('layout.Date')</label>
                            <input type="text" name="date" class="form-control date" autocomplete="off" value="{{convertDate($profit->date)}}">
                        </div>
                        <div class="col-md-12">
                            <label class="control-label">@lang('layout.Description')</label>
                            {!! Form::textarea('description', null, array('placeholder' => __('layout.Description'),'class' => 'form-control','rows' => 2, 'cols' => 60)) !!}
                        </div>
                    </div>    
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <button type="button" onclick="regForm(this)" class="btn green">@lang('layout.Submit')</button>
                    <button href="{{url('profit.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</button>
                </div>
            {!! Form::close() !!}
        </div>
        <!-- END FORM-->
    </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 profit = {!! $profit !!};
        var currency = {!! $currency !!};
        let vu = new Vue({
            el: '#profit',
            data: {
                type: 'percent',
                selected_expense_account:null,
                selected_userData_account:null,
                currency:currency,
                selected_currency: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, 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);
                    })
                },
                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 = profit.type;
                @if($profit->currency)
                    this.selected_currency   = _.find(currency, (o) => o.code == "{{$profit->currency}}");
                @endif
            }
        })
    </script>
@endpush