@extends('layouts.app')
@section('style')
    <style type="text/css" href="{{url('vue/select2/select2.min.css')}}"></style>
@stop
@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>
                    <span class="caption-subject font-green-haze bold uppercase">@lang('layout.CreateNewSendMoney') </span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">
                    <a href="" class="collapse" data-original-title="" title=""> </a>
                    <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
                    <a href="" class="reload" data-original-title="" title=""> </a>
                    <a href="" class="remove" data-original-title="" title=""> </a>
                </div>
            </div>
            <div class="portlet-body form" style="margin-bottom:50%;" id="app">
                <!-- BEGIN FORM-->
                {!! Form::open(array('route' => 'sendMoney.store','method'=>'POST','class'=>'form-horizontal')) !!}
                {{ csrf_field() }}
                <div class="form-body" v-cloak>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="col-md-12">
                                <label class="control-label">@lang('layout.ContractName')</label>
                                <v-select class="vue-select2" placeholder="@lang('layout.Select')"
                                          v-model="selectedContract" label="company_name"
                                          :options="{{json_encode($contract)}}">
                                </v-select>
                                <input type="hidden" name="contract_id"
                                       v-model.number="(!selectedContract)?null:selectedContract.id"
                                       v-validate="'required'" data-vv-as="@lang('layout.ContractName')">
                                <span class="required">@{{ errors.first('contract_id') }}</span>
                            </div>

                            <div class="col-md-6">
                                <label class="control-label">@lang('layout.Currency')</label>
                                <select class="form-control" v-model="selectedCurrency">
                                    <option v-for="curre in currency" :value="curre">@{{ curre.code }}</option>
                                </select>
                                <input type="hidden" name="currency" :value="selectedCurrency.code"/>
                            </div>

                            <div class="col-md-6">
                                <label class="control-label">@lang('layout.Account')</label>
                                <select class="form-control" name="account_id">
                                    <option v-for="Account in accountUpdate" :value="Account.id">@{{
                                        Account.name }}
                                    </option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="control-label">@lang('layout.Rate')</label>
                                <div class="input-group">
                                    <input v-model="selectedCurrency.rate" class="form-control"
                                           type="number" min="0">
                                    <span class="input-group-addon">@{{selectedCurrency.symbol}}</span>
                                </div>
                                <input type="hidden" name="rate" :value="selectedCurrency.rate">
                            </div>

                            @if(auth()->user()->company()->first()->tag != 1)
                                <div class="col-md-6">
                                    <label class="control-label">@lang('layout.ExchangeRateHQ')</label>
                                    <div class="input-group">
                                        <input v-model="selectedCurrency.hq_rate" class="form-control"
                                               type="number" min="0">
                                        <span class="input-group-addon">@{{selectedCurrency.symbol}}</span>
                                    </div>
                                    <input type="hidden" name="rate_hq" :value="selectedCurrency.hq_rate">
                                </div>
                            @endif

                            <div class="col-md-6">
                                <label class="control-label">@lang('layout.Amount')</label>
                                {{Form::number('amount',null,['class' => 'form-control',"v-validate"=>"'required'","data-vv-as"=>__('layout.Amount')])}}
                                <span class="required">@{{ errors.first('amount') }}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="col-md-12">
                                <label class="control-label">@lang('layout.Date')</label>
                                <input class="form-control date" id="range-from-example" name="date" autocomplete="off">
                            </div>
                            <div class="col-md-12">
                                <label class="control-label">@lang('layout.Type')</label>
                                <select class="form-control" name="type">
                                    <option value="send">@lang('layout.SendTheMoney')</option>
                                    <option value="return">@lang('layout.ReturnTheMoney')</option>
                                </select>
                            </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' => 4, 'cols' => 4)) !!} --}}
                                <textarea name="description" class="form-control" rows="4" cols="4"
                                          placeholder="@lang('layout.Description')"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                        <div class="col-md-6">
                            <label class="control-label">@lang('layout.Expense') </label>
                            <v-select label="name" :options="expense"
                                        v-model="selectedExpense" ></v-select>
                            <input type="hidden" name="expense_id" v-bind:value="(!selectedExpense)?null:selectedExpense.id" />
                        </div> 
                            <div class="col-md-6">
                                <label class="control-label">@lang('layout.Commission')</label>
                                {{Form::number('Commission_amount',null,['class' => 'form-control',"placeholder"=>__('layout.Amount')])}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-md-offset-4 text-center">

                    <button type="button" @click="handleSubmit($event)"
                            class="btn green">@lang('layout.Submit')</button>
                    <a href="{{route('sendMoney.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 src="{{url('/vue/sweetalert1.min.js')}}"></script>

    <script>

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

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

        var Banks = {!! $bank!!};
        var Currency = {!! $currency !!};

        let homeCurrency = {!! $homeCurrency !!};
        let ratesFetched = {!! $rates !!};
        let expense = {!! $expense !!};

            new Vue({
                el: '#app',
                data: {

                    selectedCurrency: homeCurrency,
                    currency:Currency,
                    listAccounts: [],
                    selectedContract: null,
                    expense: expense,
                    selectedExpense: null,
                    currencyList: Currency,
                    type: 'bank',
                    account: {},
                },
                computed: {
                    setRates(){

                        let rates = [];
                         
                        return rates;

                    },
                    accountUpdate() {
                        var b = _.clone(Banks)
                        return this.accounts = b.filter((account) => {
                            return (new RegExp(this.selectedCurrency.code.toLowerCase())).test(account.code.toLowerCase())
                        })
                    },
                },
                methods: {
                    handleSubmit(e) {

                        this.$validator.validate().then(valid => {
                            if (valid) {
                                // alert(e.target);
                                regForm(e.target);
                            }
                        });
                    },
                    onComplete: function () {
                        document.getElementById("account-form").submit()
//                this.$emit('on-complete')
//                alert('Yay. Done!');
                    },
                }
            });
    </script>
@endpush