@extends('layouts.app')
@section('style')
<link href="{{url('css/custome-table.css')}}" rel="stylesheet">
@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.FixAssetSaleEdit') </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($fixAssetSale,['method' => 'PATCH','route' => ['fixAssetSale.update',$fixAssetSale->id],'class'=>'form-horizontal','id'=>'sales-form']) !!}
            {{ csrf_field() }}
            <div class="form-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.FixedAsset')</label>
                            <v-select class="vue-select2" v-model="selectedAsset" label="name" @input="get_depreciation_amount()" @Click.native="get_depreciation_amount()" @search="searchFixedAsset" :options="fixedAsset">
                            </v-select>
                            <input type="hidden" name="fixed_asset_id" v-model.number="(!selectedAsset)?null:selectedAsset.id" v-validate="'required'" data-vv-as="@lang('layout.FixedAsset')">
                            <span class="required">@{{ errors.first('fixed_asset_id') }}</span>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.Amount')</label>
                            <input :value="!selected_currency?fixedAssetAmount:(selected_currency.rate * fixedAssetAmount)" class="form-control" placeholder="@lang('layout.Amount')" readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.ExpenseAccount')</label>
                            <v-select class="vue-select2" v-model="selectedExpense" label="name" :options="{{$expense}}">
                            </v-select>
                            <input type="hidden" name="expense_id" v-model.number="(!selectedExpense)?null:selectedExpense.id" v-validate="'required'" data-vv-as="@lang('layout.ExpenseAccount')" >
                            <span class="required">@{{ errors.first('expense_id') }}</span>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.IncomeAccount')</label>
                            <v-select class="vue-select2" v-model="selectedIncome" label="name" :options="{{$income}}">
                            </v-select>
                            <input type="hidden" name="income_id" v-model.number="(!selectedIncome)?null:selectedIncome.id" v-validate="'required'" data-vv-as="@lang('layout.IncomeAccount')" >
                            <span class="required">@{{ errors.first('income_id') }}</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.Amount')</label>
                            <input type="number" name="amount" value="{{$fixAssetSale->amount}}" class="form-control" step="any" placeholder="@lang('layout.Amount')" v-validate="'required'" data-vv-as="@lang('layout.Amount')">
                            <span class="required">@{{ errors.first('amount') }}</span>
                        </div>
                        <div class="col-md-3">
                            <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" v-validate="'required'" data-vv-as="@lang('layout.Currency')">
                            <span class="required">@{{ errors.first('currency') }}</span>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.Rate')</label>
                            <input type="number" name="rate" v-model="!selected_currency?0:selected_currency.rate" class="form-control" :class="{'has-error':rate<=0}">
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.Number')</label>
                            <input type="text" name="number" value="{{$fixAssetSale->number}}" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <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.Customer')</label>
                                    <v-select label="name" :options="customer" v-model="selected_customer" @search="MemberSearch"></v-select>
                                    <input type="hidden" name="customer" :value="!selected_customer?null:selected_customer.id" required v-validate="'required'" data-vv-as="@lang('layout.Customer')">
                                    <span class="required">@{{ errors.first('customer') }}</span>
                                </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.Type')</label>
                                    <select name="receive_type" v-model="selected_receive_type" class="form-control">
                                        <option value="factor">@lang('layout.Factor')</option>
                                        <option value="sale">@lang('layout.Sale')</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" v-if="selected_receive_type =='sale'">
                            <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"></v-select>
                                    <input type="hidden" name="bank_account" :value="(this.selected_banks==null)?null:selected_banks.id">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">@lang('layout.Date')</label>
                            <input type="text" class="form-control date" name="date" value="{{$fixAssetSale->date}}" autocomplete="off" placeholder="@lang('layout.Date')">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-6">
                            <label class="control-label">@lang('layout.Description')</label>
                            {!! Form::textarea('description', null, array('placeholder' => __('layout.Description'),'class' => 'form-control','rows' => 2, 'cols' => 30)) !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                <button type="button" class="btn green" @click="handleSubmit($event)" > @lang('layout.Update') </button>
                <button href="{{url('fixAssetSale.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>

    @if(App::getLocale())
    Vue.use(VeeValidate, {
        locale: '{{App::getLocale()}}',
    });
    @else
    Vue.use(VeeValidate, {
        locale: 'en',
    });
    @endif

    Vue.component('v-select', VueSelect.VueSelect);

    var currency = {!! $currency !!};
    var banks = {!! $banks !!};
    var selected_customer = {!! $selected_customer !!};
    var selected_fixedAsset = {!! $selected_fixedAsset !!};
    let expense = {!! $expense !!};
    let income = {!! $income !!};
    var selectedCurrency = {!! $selectedCurrency !!};

    let vu = new Vue({
        el: '#app',
        data: {
            fixedAsset: [],
            selectedAsset: selected_fixedAsset,
            expense: expense,
            selectedExpense: null,
            income: income,
            selectedIncome: null,
            amount: 0,
            fixedAssetAmount: 0,
            selected_receive_type: "{{$fixAssetSale->receive_type}}",
            currency: currency,
            selected_currency: selectedCurrency,
            banks: banks,
            customer: [],
            selected_customer: selected_customer,
            selected_banks: null,
            defuilt_banks: null,
            rate: 0,
        },
        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];
                    }
                }
                return tempBank;
            },
        },
        mounted: function () {
            if ("{{$fixAssetSale->expense_id}}") {
                this.selectedExpense=_.find(this.expense,(v)=>v.id=="{{$fixAssetSale->expense_id}}");
            }
            if ("{{$fixAssetSale->income_id}}") {
                this.selectedIncome=_.find(this.income,(v)=>v.id=="{{$fixAssetSale->income_id}}");
            }
            if ("{{$account_id}}") {
                this.selected_banks = _.find(this.banks, (v) => v.id == "{{$account_id}}");
            }
        },
        methods: {
            handleSubmit(e) {
                this.$validator.validate().then(valid => {
                    if (valid) {
                        regForm(e.target);
                    }
                });
            },
            MemberSearch: _.debounce((search, loading) => {
                loading(true);
                
                axios.get("{{route('callMethod.search')}}", {
                    params: {
                        method_name: 'SearchMember', 
                        keyword: search,
                        type: 'Customer'
                    }
                })
                .then(function(response) {
                    if (response.data.length > 0) {
                        vu.customer = [];
                        vu.customer = response.data;
                    }
                    loading(false);
                })
                .catch(function(error) {
                    loading(false);
                    console.log(error);
                })
            }, getDebounceTime()),

            //ajax call to get items
            searchFixedAsset(search, loading) {
                loading(true);
                axios.get("{{route('callMethod.search')}}", {
                    params: {
                        method_name: 'anyTable',
                        'search_column': 'name',
                        'filterColumn': 'status',
                        'filterValue': 'on',
                        'table_name': 'fixed_asset_management',
                        keyword: search,
                    }
                })
                .then(function (response) {
                    vu.fixedAsset = [];
                    if (response.data.length > 0) {
                        vu.fixedAsset = response.data;
                    }
                    loading(false);
                })
                .catch(function (error) {
                    console.log(error);
                })
            },
            
            get_depreciation_amount() {
                // console.log(444, vu.selectedAsset);
                if (vu.selectedAsset != null) {
                    let selectedAsset_id = vu.selectedAsset.id
                    // console.log(333, selectedAsset_id);
                    axios.get("{{route('callMethod.search')}}", {
                        params: {
                            method_name: 'getDepreciationAmount',
                            selectedAsset_id: selectedAsset_id
                        }
                    })
                    .then(function(response) {
                        if (response.data) {
                            vu.fixedAssetAmount = response.data.data.fixedAssetAmount;
                            // console.log(3334, response.data.data);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
                }

            },
        }
    });
</script>

@endpush