@extends('layouts.app')
@section('content')
    <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.CreateNewReward')</span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">
                    
                </div>
            </div>
            <div id="app" class="portlet-body form" style="margin-bottom:50%;" v-cloak>
                <!-- BEGIN FORM-->
                {!! Form::open(array('route' => 'otherCargoInformation.update','method'=>'POST','class'=>'form-horizontal', 'id'=>'otherCargoInformation')) !!}
                {{ csrf_field() }}
                <div class="form-body">
                <input type="hidden" name="id" value="{{$otherCargoInformation->id}}">
                <div class="row">  
                    <div class="col-md-4" style="margin-bottom: 10px;"> 
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Number'):</label>
                            <div class="col-md-9">
                                <input type="number" value="{{$otherCargoInformation->number}}" name="number"  class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                     
                    <div class="col-md-4" style="margin-bottom: 10px;">       
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.OilItem'):</label>
                            <div class="col-md-9">
                                <input type="text" name="oil_item" value="{{$otherCargoInformation->oil_item}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4" style="margin-bottom: 10px;">
                                            
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Ansa'):</label>
                            <div class="col-md-9">
                                <input type="text" name="ansa" value="{{$otherCargoInformation->ansa}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" style="margin-bottom: 10px;">       
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.ItemCodes'):</label>
                            <div class="col-md-9">
                                <input type="text" name="items_code" value="{{$otherCargoInformation->items_code}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4" style="margin-bottom: 10px;">
                                            
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.ExportCountry'):</label>
                            <div class="col-md-9">
                                <input type="text" name="export_country"  class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4" style="margin-bottom: 10px;">     
                        <div class="form-group">
                            <label class="control-label col-md-3">T.S.C:</label>
                            <div class="col-md-9">
                                <input type="text" name="tsc" value="{{$otherCargoInformation->tsc}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div> 
                </div>

                <div class="row">

                    <div class="col-md-4" style="margin-bottom: 10px;">   
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.ItemType'):</label>
                            <div class="col-md-9">
                                <input type="text" name="item_type"  value="{{$otherCargoInformation->item_type}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4" style="margin-bottom: 10px;">   
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Percent'):</label>
                            <div class="col-md-9">
                                <input type="text" name="percent"  value="{{$otherCargoInformation->percent}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
 
                    <div class="col-md-4" style="margin-bottom: 10px;"> 
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.RegDate'):</label>
                            <div class="col-md-9">
                                <input type="text" name="register_date" value="{{$otherCargoInformation->register_date}}" class="form-control date" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    
                   
                    <div class="col-md-4" 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 placeholder="@lang('layout.SelectCurrency')" label="code" @input="changeCurrency"
                                          v-model="selectedCurrency"
                                          :options="currency">
                                </v-select>
                                <input type="hidden" name="currency"
                                       v-model.number="(!selectedCurrency)?null:selectedCurrency.code">
                            </div>
                        </div> 
                    </div>  

                 
                    <div class="col-md-2" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Rate'):</label>
                            <div class="col-md-9">
                                <input type="number" step="any" value="{{$otherCargoInformation->rate}}" name="rate" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div> 

                    <div class="col-md-2" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Price'):</label>
                            <div class="col-md-9">
                                <input type="number" step="any"  name="price" value="{{$otherCargoInformation->price}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div> 
                    
                    <div class="col-md-2" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.ExchangeCurrency'):</label>
                            <div class="col-md-9">
                                <v-select placeholder="@lang('layout.SelectCurrency')" label="code"
                                          v-model="selectedCurrencyExchange"
                                          :options="currencyExchange">
                                </v-select>
                                <input type="hidden" name="exchange_currency"
                                       v-model.number="(!selectedCurrencyExchange)?null:selectedCurrencyExchange.code">
                            </div>
                        </div> 
                    </div> 

                    <div class="col-md-2" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Price'):</label>
                            <div class="col-md-9">
                                <input type="number" step="any"  name="exchange_price" value="{{$otherCargoInformation->exchange_price}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>  
                </div> 

              
 
                <div class="row"> 
                    <div class="col-md-4" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Measure'):</label>
                            <div class="col-md-9">
                                <v-select placeholder="@lang('layout.SelectMeasure')" label="name"
                                          v-model="selectedMeasure"
                                          :options="measure">
                                </v-select>
                                <input type="hidden" name="measure_id"
                                       v-model.number="(!selectedMeasure)?null:selectedMeasure.id">
                            </div>
                        </div> 
                    </div>  
                    <div class="col-md-4" 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" value="{{$otherCargoInformation->date}}" class="form-control date" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" style="margin-bottom: 10px;">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Description'):</label>
                            <div class="col-md-9">
                                <textarea name="description" class="form-control" placeholder="@lang('layout.Description')">{{$otherCargoInformation->description}}</textarea>
                            </div>
                        </div>
                        
                    </div>
                </div>
                   
                </div>
                <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                    <button type="button" @click="handleSubmit($event)"
                            class="btn green">@lang('layout.Submit')</button>
                    {{-- <button type="button" class="btn blue"
                            @click="saveAndNew($event)">@lang('layout.SaveAndNew')</button> --}}
                    <a href="{{route('otherCargoInformation.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

        $(document).ready(function () {
            $('#initial-value-example').persianDatepicker({
                observer: true,
                format: 'YYYY/MM/DD',
                altField: '#observer-example-alt',
                altFormat: 'u',
                autoClose: true,
            });
        });
        Vue.component("v-select", VueSelect.VueSelect);
        // var work_time = {!!getCompanyWorkAmount()['hourly']!!};
        var otherCargoInformation = {!! $otherCargoInformation !!};
        var currency = {!! json_encode($currency) !!};
        var measure = {!! json_encode($measure) !!};
        let vu = new Vue({
            el: '#app',
            data: {
                selectedCurrency: null,
                currency: currency,
                currencyExchange: currency,
                selectedCurrencyExchange: null,
                measure: measure,
                selectedMeasure: null,
                exchange_rate: "{!! $otherCargoInformation->rate !!}",
            }, 

            mounted: function(){   
                if (otherCargoInformation.measure_id) {
                    this.selectedMeasure =_.find(measure,(v)=>v.id==otherCargoInformation.measure_id);
                }
                if (otherCargoInformation.currency) {
                    this.selectedCurrency =_.find(currency,(v)=>v.code==otherCargoInformation.currency);
                }
                if (otherCargoInformation.exchange_currency) {
                    this.selectedCurrencyExchange =_.find(currency,(v)=>v.code==otherCargoInformation.exchange_currency);
                } 
                // this.exchange_rate = otherCargoInformation.rate;
            },

            methods: {
                handleSubmit(e) {
                    this.$validator.validate().then(valid => {
                        if (valid) {
                            regForm(e.target);
                        }
                    });
                },

                changeCurrency(){
                    this.exchange_rate = this.selectedCurrency.exchange_rate;
                },
 
                saveAndNew() {
                    this.$validator.validate()
                        .then(valid => {
                            if (valid) {

                                var url = "{{route('otherCargoInformation.store')}}";
                                form_id = 'otherCargoInformation';
                                var data = $('#' + form_id).serialize();

                                axios.post(url, data)
                                    .then(function (response) {
                                        if (response.data.result == 1) {
                                            $('#' + form_id).trigger('reset');
                                            toastr.success('', response.data.message);
                                            vu.selectedEmployee = null;
                                            vu.selectedOvertimeType = null;
                                        }
                                        else {
                                            var message = "{{__('message.Warning')}}";
                                            //$('#error-sound')[0].play();
                                            toastr.warning('', message);
                                        }
                                    })
                                    .catch(function (error) {
                                        console.log(error);
                                        var message = "{{__('message.Warning')}}";
                                        //$('#error-sound')[0].play();
                                        toastr.warning('', message);
                                    }); 
                            }
                        })
                },
            }
        })

    </script>
@endpush