@extends('layouts.app')
@section('style')
    <link href="{{url('css/custome-table.css')}}" rel="stylesheet">
    <style type="text/css">
        .v-select.searchable .dropdown-toggle{
            height: 27px;
            /* border: 1px solid red; */
        }
    </style>
@stop
@section('content')
    <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.FixedAssetAppreciationEdit') </span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
            </div>
            <div class="portlet-body form" style="margin-bottom: 50%;" id="app" >
                <!-- BEGIN FORM-->
                {!! Form::model($fixedAssetAppreciation,['method' => 'PATCH','route' => ['fixedAssetAppreciation.update',$fixedAssetAppreciation->id],'class'=>'form-horizontal']) !!}
                {{ csrf_field() }} 
                    <div class="form-body">
                        <div class="row"> 
                            <div class="col-lg-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 5px;padding: 20px;">
                                <div class="col-md-3">
                                    <label class="control-label">@lang('layout.Date')</label>
                                    <input type="text" class="form-control date" name="date" autocomplete="off" value="{{$fixedAssetAppreciation->date}}" placeholder="@lang('layout.Date')">
                                </div>
                                <div class="col-md-3">
                                    <label class="control-label">@lang('layout.FixedAsset')</label>
                                    <v-select class="vue-select2" v-model="selectedAsset" label="name" :options="fixedAsset">
                                    </v-select>
                                    <input type="hidden" name="fixed_asset_id" v-model.number="(!selectedAsset)?null:selectedAsset.id">
                                </div>
                                <div class="col-md-3">
                                    <label class="control-label">@lang('layout.Amount')</label>
                                    <input type="number" name="amount" v-model="amount" class="form-control" step="any" placeholder="@lang('layout.Amount')">
                                </div>
                                <div class="col-md-3">
                                    <label class="control-label">@lang('layout.ReferenceNumber')</label>
                                    <input type="number" name="ref_no" value="{{$fixedAssetAppreciation->ref_no}}" class="form-control" step="any" placeholder="@lang('layout.ReferenceNumber')">
                                </div>
                                <div class="col-md-3" style="height: 53px;">
                                    <label class="control-label">@lang('layout.FromDate')</label>
                                    <input type="text" class="form-control date" name="from_date" value="{{$fixedAssetAppreciation->from_date}}" autocomplete="off" placeholder="@lang('layout.FromDate')">
                                </div>
                                <div class="col-md-3" style="height: 53px;">
                                    <label class="control-label">@lang('layout.ToDate')</label>
                                    <input type="text" class="form-control date" name="to_date" value="{{$fixedAssetAppreciation->to_date}}" autocomplete="off" placeholder="@lang('layout.ToDate')">
                                </div>
                                <div class="col-md-3" style="height: 53px;">
                                    <label class="control-label">@lang('layout.ByName')</label>
                                    <input type="text" name="by_name" class="form-control" value="{{$fixedAssetAppreciation->by_name}}" step="any" placeholder="@lang('layout.ByName')">
                                </div>
                                <div class="col-md-3">
                                    <label class="control-label">@lang('layout.Description')</label>
                                    {!! Form::textarea('description', null, array('placeholder' => __('layout.Description'),'class' => 'form-control','rows' => 1, 'cols' => 30)) !!}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                    <label class="control-label">@lang('layout.Fine')</label>
                                    <select name="fine" v-model="fine" class="form-control">
                                        <option value="">@lang('layout.Select')</option>
                                        <option value="fine">@lang('layout.Fine')</option>
                                    </select>
                                </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.Type')</label>
                                            <select name="type" v-model="type" class="form-control">
                                                <option value="Direct">@lang('type.Direct')</option>
                                                <option value="Indirect">@lang('type.Indirect')</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2" v-if="type == 'Indirect'">
                                    <label class="control-label">@lang('layout.Currency')</label>
                                    <v-select label="code" @input="selectedRate" :options="currency" v-model="selected_currency"></v-select>
                                    <input type="hidden" name="currency" :value="selected_currency.code">
                                </div>
                                <div class="col-md-1" v-if="type == 'Indirect'">
                                    <label class="control-label">@lang('layout.Rate')</label>
                                    <input type="number" name="rate" v-model="!selected_currency?0:selected_currency.rate" class="form-control" :readonly="averageRate && selected_payment_type =='writeCheck'" :class="{'has-error':rate<=0}">
                                </div>
                                <div class="col-lg-1 col-md-1 col-sm-12 col-xs-12"  v-if="type == 'Indirect'">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label">@lang('layout.PaymentType')</label>
                                            <select name="payment_type" v-model="selected_payment_type" class="form-control">
                                                <option value="writeCheck">@lang('layout.Writecheck')</option>
                                                <option value="bill">@lang('layout.Bill')</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" v-if="type == 'Indirect' && selected_payment_type =='bill'">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label">@lang('layout.Vendor')</label>
                                            <v-select label="name" :options="vendor" v-model="selected_vendor" @search="MemberSearch" ></v-select>
                                            <input type="hidden" name="vendor" :value="!selected_vendor?null:selected_vendor.id" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" v-if="type == 'Indirect' && selected_payment_type =='writeCheck'">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label">@lang('layout.Account')</label>
                                            <v-select label="name" :options="approperiateBank" v-model="selected_banks" @input="(editKey)?test(selected_banks):''" @keyup.native="editKey = true" @Click.native="editKey = true" ></v-select>
                                            <input type="hidden" name="bank_account" :value="(this.selected_banks==null)?null:selected_banks.id">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <button type="button" class="btn green" onclick="regForm(this)"> @lang('layout.Update') </button>
                        <button href="{{url('fixedAssetAppreciation.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>

    Vue.component('v-select', VueSelect.VueSelect);
    let fixedAsset = {!! $fixedAsset !!};
    var currency = {!! $currency !!};
    var banks = {!! $banks !!};
    var selectedCurrency = {!! $selectedCurrency !!};
    let vu = new Vue({
    el: '#app',
    data:{
        selectedAsset: null,
        selectedExpense: null,
        amount: 0,
        fixedAsset: fixedAsset,
        fixedAssetAmount: 0,
        date: null,

        selected_payment_type: 'writeCheck',
        currency: currency,
        selected_currency: selectedCurrency,
        banks: banks,
        vendor: [],
        selected_vendor: {!!$selectedVendor!!},
        selected_banks: null,
        defuilt_banks: null,
        rate: 1,
        type: 'Direct',
        fine: '',
        averageRate: false,
        editKey: false,
    },
    computed: {
        selectedRate() {
            this.rate = (this.selected_currency) ? this.selected_currency.rate : 0;
        },

        // filter the banks according to selected currency
        approperiateBank: function () {
            this.selected_banks=null;
            var bankCopy = this.banks.slice();
            var tempBank = bankCopy.filter((account) => {
                return (new RegExp(this.selected_currency.code.toLowerCase())).test(account.code.toLowerCase())
            });
            if (tempBank.length > 0) {
                if (this.defuilt_banks) {
                    this.selected_banks = this.defuilt_banks;
                    this.defuilt_banks = null;
                }else{
                    this.selected_banks = tempBank[0];
                    @if(getAverageRate() =="true")
                    this.averageRate = false;
                    if (tempBank[0].avg_rate && this.selected_payment_type == 'writeCheck') {
                        this.set_avg_rate(tempBank[0].avg_rate);
                    }
                    @endif
                }
            }
            return tempBank;
        },
    },
    mounted: function () {
        if ("{{$fixedAssetAppreciation->fixed_asset_id}}") {
            this.selectedAsset=_.find(this.fixedAsset,(v)=>v.id=="{{$fixedAssetAppreciation->fixed_asset_id}}");
        }
        if ("{{$fixedAssetAppreciation->payment_type}}") {
            this.selected_payment_type="{{$fixedAssetAppreciation->payment_type}}";
        }
        if ("{{$bank_id}}") {
            this.defuilt_banks = _.find(this.banks, (v) => v.id == "{{$bank_id}}");
        }
        this.amount={{$fixedAssetAppreciation->amount}};
        this.type="{{$fixedAssetAppreciation->type}}";
        this.fine="{{$fixedAssetAppreciation->fine}}";
    },
    methods:{
        set_avg_rate(avg_rate) {
            setTimeout(() => {
                this.averageRate = true;
                this.rate = avg_rate;
                if (this.selected_currency) {
                    this.selected_currency.rate = avg_rate;
                }
            }, 300);
        },
        MemberSearch: _.debounce((search, loading) => {
            loading(true);
            axios.get("{{route('callMethod.search')}}", {
                params: {
                    method_name: 'SearchMember', 
                    keyword: search,
                    type: 'Vendor'
                }
            })
            .then(function(response) {
                if (response.data.length > 0) {
                    vu.vendor = [];
                    vu.vendor = response.data;
                }
                loading(false);
            })
            .catch(function(error) {
                loading(false);
                console.log(error);
            })
        }, getDebounceTime()),
        test(defaultAccount) {
            this.averageRate = false;
            if (defaultAccount && this.selected_currency && this.selected_payment_type == 'writeCheck') {
                @if(getAverageRate() =="true")
                if (defaultAccount.avg_rate) {
                    this.rate = defaultAccount.avg_rate;
                    this.selected_currency.rate = defaultAccount.avg_rate;
                    this.averageRate = true;
                }
                @endif
            }
        },

    }
    });


</script>

@endpush