@extends('layouts.app')
@section('style')
    <link href="{{URL::asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">
    <style>
        .v-select.searchable .dropdown-toggle{
            /* border: 1px solid red; */
            height: 27px;
        }
    </style>
@stop
@section('content')
@include("layouts.Cmodal")
    <div class="">
        <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.MemberTransfer') </span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools"></div>
            </div>
            <div class="portlet-body form" style="margin-bottom:50%;" id="member-transfer" v-cloak>
                <!-- BEGIN FORM-->
                {!! Form::open(array('route' => 'memberTransfer.store','method'=>'POST','class'=>'form-horizontal','id'=>'member-transfer-form')) !!}
                {{ csrf_field() }}
                <div class="form-body">
                    <div class="row" style="margin-bottom: 20px; padding-bottom: 20px;">
                        <input type="hidden" name="position_status" v-model="position_status" >
                        <div class="col-lg-8 col-md-12 col-sm-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 10px; padding: 15px 0px;">
                            <div class="row" style="padding: 0.5% 1%;">
                                <div class="col-lg-6">
                                    <div class="col-lg-12">
                                        <label class="control-label">@lang('layout.FromMember')</label>
                                        <v-select @input="getSummary" v-model="selectedFromMember" label="name" @search="MemberSearch" :options="fromMember">
                                        </v-select>
                                        <input type="hidden" name="from_member_id" v-model.number="(!selectedFromMember)?null:selectedFromMember.id" v-validate="'required'" data-vv-as="@lang('layout.FromMember')">
                                        <span class="required">@{{errors.first('from_member_id')}}</span>
                                    </div>
                                    <div class="col-lg-12" style="padding: 0px !important;">
                                        <div class="col-lg-6">
                                            <label class="control-label">@lang('layout.Currency')</label>
                                           <v-select label="code" :options="currency" v-model="selected_currency" @input="setAmount()"></v-select>
                                           <input type="hidden" name="currency" v-validate="'required'" data-vv-as="@lang('layout.Currency')" :value="selected_currency.code">
                                           <span class="required">@{{ errors.first('currency') }}</span>
                                        </div>
                                        <div class="col-lg-6">
                                            <label class="control-label">@lang('layout.Rate')</label>
                                            <input type="number" name="currency_rate" v-validate="'required'"
                                                data-vv-as="@lang('layout.Rate')" @input="setAmount1()"
                                                v-model="!selected_currency?0:selected_currency.rate"
                                                class="form-control">
                                            <span class="required">@{{ errors.first('currency_rate') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="control-label">@lang('layout.Payable')</label>
                                        <vue-numeric
                                            class="form-control"
                                            v-model="payable"
                                            :readonly="payable < receivable"
                                            :max="99999999999999" inputmode="decimal"
                                            :currency="(selected_currency)?selected_currency.code:''"
                                            :precision="precision()"
                                            @input="setAmount1()"
                                            >
                                        </vue-numeric>
                                        <input type="hidden" v-validate="" data-vv-as="@lang('layout.Payable')" class="form-control" name="payable" v-model="payable" />
										<span class="required">@{{ errors.first('payable') }}</span>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="control-label">@lang('layout.Payable')</label>
                                        <input type="number" readonly v-validate="" data-vv-as="@lang('layout.Payable')" class="form-control" name="payable2"  v-model="payable2" />
                                        <span class="required">@{{ errors.first('payable2') }}</span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="col-lg-12">
                                        <label class="control-label">@lang('layout.ToMember')</label>
                                        <div class="input-group">
                                            <v-select v-model="selectedToMember" label="name" @input="getSummary2(), setAmount1()" @search="MemberSearch" :options="toMember"> </v-select>
                                            <input type="hidden" name="to_member_id" v-model.number="(!selectedToMember)?null:selectedToMember.id" v-validate="'required'" data-vv-as="@lang('layout.ToMember')">
                                            <span class="required">@{{errors.first('to_member_id')}}</span>
                                            <span class="btn btn-success input-group-addon " title="@lang('button.AddNewCustomer')" @click="showModal = true" style="background-color:  rgb(84, 199, 211)">
                                                <i class="fa fa-plus" style="color: white"></i>
                                            </span> 
                                        </div>
                                    </div>
                                    <div class="col-lg-12" style="padding: 0px !important;">
                                        <div class="col-lg-6">
                                            <label class="control-label">@lang('layout.ToCurrency2')</label>
                                            <v-select label="code" :options="currency" v-model="selected_currency2" @input="setAmount1()"></v-select>
                                            <input type="hidden" name="currency2" v-validate="'required'" data-vv-as="@lang('layout.Currency')" :value="selected_currency2.code">
                                            <span class="required">@{{ errors.first('currency2') }}</span>
                                       </div>
                                       <div class="col-lg-6">
                                           <label class="control-label">@lang('layout.ToRate')</label>
                                           <input type="number" name="currency_rate2" v-validate="'required'"
                                                  data-vv-as="@lang('layout.Rate')" @input="setAmount1()"
                                                  v-model="!selected_currency2?0:selected_currency2.rate"
                                                  class="form-control">
                                           <span class="required">@{{ errors.first('currency_rate2') }}</span>
                                       </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="control-label">@lang('layout.Receivable')</label>
                                        <vue-numeric
                                            class="form-control"
                                            v-model="receivable"
                                            :readonly="payable > receivable"
                                            :max="99999999999999" inputmode="decimal"
                                            :currency="(selected_currency)?selected_currency.code:''"
                                            :precision="precision()"
                                            @input="setAmount1()"
                                            >
                                        </vue-numeric>
                                        <input type="hidden" class="form-control" name="receivable" v-model="receivable" v-validate="" data-vv-as="@lang('layout.Receivable')" />
										<span class="required">@{{ errors.first('receivable') }}</span>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="control-label">@lang('layout.Receivable')</label>
                                        <input type="number" readonly class="form-control"
                                               name="receivable2" v-model="receivable2" v-validate=""
                                               data-vv-as="@lang('layout.Receivable')" />
										<span class="required">@{{ errors.first('receivable2') }}</span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="col-lg-3 @if(!getCustomeForm('memberTransfer','ReferenceName')) displayNone @endif">
                                        <label class="control-label">@lang('layout.ReferenceName')</label>
                                        <input type="text" name="referencen_name" class="form-control">
                                    </div>
                                    <div class="col-lg-3 @if(!getCustomeForm('memberTransfer','ReferenceNumber')) displayNone @endif">
                                        <label class="control-label">@lang('layout.ReferenceNumber')</label>
                                        <input type="text" name="referencen_number" class="form-control"> 
                                    </div>
                                    <div class="col-lg-3 @if(!getCustomeForm('memberTransfer','date')) displayNone @endif">
                                        <label class="control-label">@lang('layout.Date')</label>
                                        <input type="text" class="form-control date" autocomplete="off" name="date">
                                    </div>
                                    <div class="col-lg-3 @if(!getCustomeForm('memberTransfer','hour')) displayNone @endif">
                                        <label class="control-label">@lang('layout.Hour')</label>
                                        <div class="input-group" @click="stopDynamicTime" @mousemove="changeTime"> 
                                            @if(getHourType() == 24)
                                            <input type="text" class="form-control timepicker timepicker-24" v-model="dynamic_time" ref="time_input" name="hour" @keyup="changeTime">
                                            @else
                                            <input type="text" class="form-control timepicker timepicker-no-seconds" v-model="dynamic_time" ref="time_input" name="hour" @keyup="changeTime">
                                            @endif
                                            <span class="input-group-btn">
                                                <button class="btn default" type="button">
                                                    <i class="fa fa-clock-o"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="control-label">@lang('layout.Number')</label>
                                        <input type="number" class="form-control" name="number" v-validate="'required'" value="{{ $number }}"
                                               data-vv-as="@lang('layout.Number')" />
										<span class="required">@{{ errors.first('number') }}</span>
                                    </div>
                                    @if(systemConfig()[20] == 1)
                                    <div class="col-lg-4 @if(!getCustomeForm('memberTransfer','contractName')) displayNone @endif">
                                        <label class="control-label">@lang('layout.ContractName')</label>
                                        <v-select class="vue-select2" placeholder="@lang('layout.Select')"
                                                v-model="selectedContract" label="company_name"
                                                :options="{{$contract}}">
                                        </v-select>
                                        <input type="hidden" name="contract_id" v-model.number="(!selectedContract)?null:selectedContract.id" />
                                    </div>
                                    @endif
                                    <div class="col-lg-4 @if(!getCustomeForm('memberTransfer','monetarySource')) displayNone @endif">
                                        <label class="control-label">@lang('layout.MonetarySource')</label>
                                        {!! Form::text('monetary_source', null, array('placeholder' => __('layout.MonetarySource'),'class' => 'form-control')) !!}
                                    </div>
                                    <div class="col-lg-4 @if(!getCustomeForm('memberTransfer','transactionType')) displayNone @endif">
                                        <label class="control-label">@lang('layout.TransactionType')</label>
                                        {!! Form::text('trans_type', null, array('placeholder' => __('layout.TransactionType'),'class' => 'form-control')) !!}
                                    </div>
                                    @if(systemConfig()[29] == 1)
                                    <div class="col-lg-4">
                                        <label class=" control-label">@lang('layout.TransactionConfirm')</label>
                                        <div class="col-md-12 mt-checkbox">
                                            <label class="mt-checkbox mt-checkbox-outline"> 
                                                <input type="checkbox" name="transaction_confirm" value="On" v-validate="'required'" data-vv-as="@lang('layout.TransactionConfirm')" >
                                                <span></span>
                                            </label>
                                        </div>
                                        <span class="required">@{{ errors.first('transaction_confirm') }}</span>
                                    </div>
                                    @endif
                                    <div class="col-lg-3">
                                        <label class="control-label">@lang('layout.BilanceDate')</label>
                                        <input type="text" class="form-control date" autocomplete="off" name="bilance_date" placeholder="@lang('layout.BilanceDate')">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 @if(!getCustomeForm('memberTransfer','telegramFromMember')) displayNone @endif" style="margin-top: 10px;">
                                        <table style="border: 1px solid rgba(186, 186, 186, 0.505);padding: 0px 10px !important;border-collapse: separate;border-radius: 5px; display: flex; justify-content: center; align-items: center;">
                                            <tr style="padding: 0px;display: flex; justify-content: center; align-items: center;">
                                                <td class="t_body" style="padding: 0px 30px !important;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
                                                    @if(getTelegramBot()=="true")
                                                    <span>
                                                        <label class="mt-checkbox mt-checkbox-outline">
                                                            <i class="fa fa-telegram" style="color:rgb(14 177 177); font-size:20px"> @{{(selectedFromMember)?selectedFromMember.name:null}}</i>
                                                            <input type="checkbox" name="from_telegram" value="ok">
                                                            <span></span>
                                                        </label>
                                                    </span>
                                                    @endif
                                                    @if(getWhatsApp() =='true' && (getWhatsAppType() == 'direct' || getWhatsAppType() == 'simpleMessage'))
                                                    <span>
                                                        <label class="control-label"> <span class="fa fa-whatsapp" style="color:green;"></span> @lang('layout.Whatsapp')</label>
                                                        <div class="col-md-12 mt-checkbox">
                                                            <label class="mt-checkbox mt-checkbox-outline">
                                                                <input type="checkbox"  name="from_whatsapp" value="40" />
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </span>
                                                    @endif
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 @if(!getCustomeForm('memberTransfer','telegramToMember')) displayNone @endif" style="margin-top: 10px;">
                                        <table style="border: 1px solid rgba(186, 186, 186, 0.505);padding: 0px 10px !important;border-collapse: separate;border-radius: 5px; display: flex; justify-content: center; align-items: center;">
                                            <tr style="padding: 0px;display: flex; justify-content: center; align-items: center;">
                                                <td class="t_body" style="padding: 0px 30px !important;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
                                                    @if(getTelegramBot()=="true")
                                                    <span>
                                                        <label class="mt-checkbox mt-checkbox-outline">
                                                            <i class="fa fa-telegram" style="color:rgb(14 177 177); font-size:20px"> @{{(selectedToMember)?selectedToMember.name:null}}</i>
                                                            <input type="checkbox" name="to_telegram" value="ok">
                                                            <span></span>
                                                        </label>
                                                    </span>
                                                    @endif
                                                    @if(getWhatsApp() =='true' && (getWhatsAppType() == 'direct' || getWhatsAppType() == 'simpleMessage'))
                                                    <span>
                                                        <label class="control-label"> <span class="fa fa-whatsapp" style="color:green;"></span> @lang('layout.Whatsapp')</label>
                                                        <div class="col-md-12 mt-checkbox">
                                                            <label class="mt-checkbox mt-checkbox-outline">
                                                                <input type="checkbox"  name="to_whatsapp" value="50" />
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </span>
                                                    @endif
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    {{-- @if(getWhatsApp() =='true' && (getWhatsAppType() == 'direct' || getWhatsAppType() == 'simpleMessage'))                    
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                        <label class="control-label"> <span class="fa fa-whatsapp" style="color:green;"></span> @lang('layout.Whatsapp')</label>
                                        <div class="col-md-12 mt-checkbox">
                                            <label class="mt-checkbox mt-checkbox-outline">
                                                <input type="checkbox"  name="whatsapp" value="5" />
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                    @endif --}}
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12">
                            <div class="col-lg-12 col-md-12 col-sm-12 @if(!getCustomeForm('memberTransfer','description')) displayNone @endif" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px;padding: 0px !important;margin-bottom: 10px;">
                                <div class="col-lg-12">
                                    <label class="control-label">@lang('layout.Description') 1</label>
                                    <textarea name="description" rows="1" class="form-control"></textarea>
                                </div>
                                <div class="col-lg-12" style="padding-bottom: 10px;">
                                    <label class="control-label">@lang('layout.Description') 2</label>
                                    <textarea name="description2" rows="1" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding: 0px !important;margin-bottom: 0px;width: 100%;box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px;margin-bottom: 20px;">
                                <div class="dashboard-stat2 col-lg-6" v-if="selectedFromMember">
                                    <div v-if="selectedFromMember.photo" style="padding: 2px !important;">
                                        <ul class="list-unstyled profile-nav" style="margin: 0px !important;">
                                            <li>
                                                <div class="twPc-avatarLink">
                                                <a :href="url+selectedFromMember.photo" target='_blank'>
                                                    <img class=" twPc-avatarImg" :src="url+selectedFromMember.photo" :title="url+selectedFromMember.name" style=" width:200px; height:170px; border-radius: 10px;">
                                                </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="dashboard-stat2 col-lg-6" v-if="selectedToMember" style="margin-bottom: 0px;">
                                    <div v-if="selectedToMember.photo" style="padding: 2px !important;">
                                        <ul class="list-unstyled profile-nav" style="margin: 0px !important;">
                                            <li>
                                                <div class="twPc-avatarLink">
                                                <a :href="url+selectedToMember.photo" target='_blank'>
                                                    <img class=" twPc-avatarImg" :src="url+selectedToMember.photo" :title="url+selectedToMember.name" style=" width:200px; height:170px;border-radius: 10px;">
                                                </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-12">
                            <div class="col-lg-6">
                                <div class="panel panel-default" style="padding: 10px;">
                                    <h3>@lang('layout.FromMember')</h3>
                                    <div class="panel-body">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">@lang('layout.Currency') </th>
                                                    <th class="text-center">@lang('layout.Payable')</th>
                                                    <th class="text-center">@lang('layout.Receivable')</th>
                                                    <th class="text-center">@lang('layout.AverageRate')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <span v-if="selectedFromMember">
                                                    <tr v-for="summ in summary">
                                                        <td class="highlight text-center">
                                                            @{{ summ.currency }}
                                                        </td>
                                                        <td class="text-center"> 
                                                            @{{ member_format_number(Number(summ.payment)) }}
                                                        </td>
                                                        <td class="text-center">
                                                            @{{ member_format_number(Number(summ.invoice)) }}
                                                        </td>
                                                        <td class="text-center">
                                                            @{{member_format_number(Number(summ.rate))}}
                                                        </td>
                                                    </tr>
                                                </span>
                                            </tbody>
                                        </table>
                                        @if(systemConfig()[22] == 1) 
                                            <br/>
                                            <table class="dashboard-tabel table-bordered" width="100%">
                                                <thead>
                                                    <tr v-if="selectedFromMember">
                                                        <th style="background-color: #add8e6;text-align: center;" v-if="selectedFromMember.risk_step">
                                                            @lang('layout.RiskStep')
                                                        </th>
                                                        <th v-if="selectedFromMember.risk_step == 'High'" style="background-color: #ff5353;text-align: center;" > @lang('type.High')</th>
                                                        <th v-if="selectedFromMember.risk_step == 'Medium'" style="background-color: #ffe291;text-align: center;" > @lang('type.Medium')</th>
                                                        <th v-if="selectedFromMember.risk_step == 'Low'" style="background-color: #8aff9a;text-align: center;" > @lang('type.Low')</th>
                                                    </tr>
                                                </thead>
                                            </table>    
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="panel panel-default" style="padding: 10px;">
                                 <h3>@lang('layout.ToMember')</h3>
                                <div class="panel-body">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th class="text-center">@lang('layout.Currency') </th>
                                            <th class="text-center">@lang('layout.Payable')</th>
                                            <th class="text-center">@lang('layout.Receivable')</th>
                                            <th class="text-center">@lang('layout.AverageRate')</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <span v-if="selectedToMember">
                                                <tr v-for="summ in summary2">
                                                    <td class="highlight text-center">
                                                        @{{ summ.currency }}
                                                    </td>
                                                    <td class="text-center"> 
                                                        @{{ member_format_number(Number(summ.payment)) }}
                                                    </td>
                                                    <td class="text-center">
                                                        @{{ member_format_number(Number(summ.invoice)) }}
                                                    </td>
                                                    <td class="text-center">
                                                        @{{member_format_number(Number(summ.rate))}}
                                                    </td>
                                                </tr>
                                            </span>
                                        </tbody>
                                    </table>
                                    @if(systemConfig()[22] == 1) 
                                    <br/>
                                    <table class="dashboard-tabel table-bordered" width="100%">
                                        <thead>
                                            <tr v-if="selectedToMember">
                                                <th style="background-color: #add8e6;text-align: center;" v-if="selectedToMember.risk_step">
                                                    @lang('layout.RiskStep')
                                                </th>
                                                <th v-if="selectedToMember.risk_step == 'High'" style="background-color: #ff5353;text-align: center;" > @lang('type.High')</th>
                                                <th v-if="selectedToMember.risk_step == 'Medium'" style="background-color: #ffe291;text-align: center;" > @lang('type.Medium')</th>
                                                <th v-if="selectedToMember.risk_step == 'Low'" style="background-color: #8aff9a;text-align: center;" > @lang('type.Low')</th>
                                            </tr>
                                        </thead>
                                    </table>    
                                    @endif
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                    <button type="button" @click="handleSubmit($event)" class="btn green">@lang('layout.Submit')</button>
                    <button type="button" class="btn blue" @click="checkAmount($event)" >@lang('layout.SaveAndNew')</button>
                    <a href="{{route('memberTransfer.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                    <hr>
                </div>
                <cmodal :show='showModal' @close="showModal=false">
                </cmodal>
                {!! Form::close() !!}
            </div>
            <!-- END FORM-->
        </div>
    </div>
@endsection
@include('print.modal')
@include('layouts.setting_model')
@include('groupCompanyFilter.select')
@push('scripts')
    <script src="{{URL::asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js')}}" type="text/javascript"></script>
    <script src="{{URL::asset('assets/pages/scripts/components-date-time-pickers.min.js')}}" type="text/javascript"></script>
    <script>
        /**
         * for creating shortcuts
        */
        @if(App::getLocale())
        Vue.use(VeeValidate, {
            locale: '{{App::getLocale()}}',
        });
        @else
        Vue.use(VeeValidate, {
            locale: 'en',
        });
        @endif
        Vue.component('v-select', VueSelect.VueSelect);
        Vue.use(VueNumeric.default);
        var currency ={!! $currency !!};
        let vm = new Vue({
            el: '#member-transfer',
            data: {
                fromMember: [],
                toMember: [],
                selectedFromMember: null,
                selectedToMember: null,
                selectedContract: null,
                url: "{{asset('uploads/')}}/",
                summary: [],
                summary2: [],
                showModal: false,
                is_show: false,
                currency: currency,
                selected_currency: {!!json_encode(getHomeCurrency()) !!},
                selected_currency2: {!!json_encode(getHomeCurrency()) !!},
                // selected_currency: defaultCurrency(),
                // selected_currency2: defaultCurrency(),
                payable: 0,
                receivable: 0,
                payable2: 0,
                receivable2: 0,
                maxpayable: 0,
                maxreceivable: 0,
                payable_flag: false,
                receivable_flag: false,
                position_status: false,
                dynamic_time:'',
                time_interval:0
            },
            mounted() {
                this.dynamicTime();
            },
            methods: {
                closeModal: function() {
                    this.is_show = !this.is_show
                },
                //BEGIN - Used for dynamic input time
                dynamicTime()
                {
                    this.time_interval = setInterval(() => {
                        const now = new Date()
                        @if(getHourType() == 24)
                            const hours = now.getHours().toString().padStart(2,'0')
                            const minutes = now.getMinutes().toString().padStart(2,'0') 
                            // const seconds = now.getSeconds().toString().padStart(2,'0')
                            this.dynamic_time = `${hours}:${minutes}`
                        @else
                            const timeString = now.toLocaleTimeString('en-US',{hour:'numeric',minute:'numeric',hour12:true});
                            this.dynamic_time = `${timeString}`
                        @endif
                        
                    },1000);
                },
                stopDynamicTime()
                {
                    clearInterval(vm.time_interval)
                },
                changeTime()
                {
                    vm.dynamic_time = vm.$refs.time_input.value
                },
                //END - Used for dynamic input time
                MemberSearch: _.debounce((search, loading) => {
                    loading(true);
                    axios.get("{{route('callMethod.search')}}", {
                        params: {
                            method_name: 'SearchMember', 
                            keyword: search
                        }
                    })
                    .then(function(response) {
                        if (response.data.length > 0) {
                            // console.log(response.data);
                            vm.fromMember = [];
                            vm.fromMember = response.data;
                            vm.toMember = [];
                            vm.toMember = response.data;
                        }
                        loading(false);
                    })
                    .catch(function(error) {
                        loading(false);
                        console.log(error);
                    })
                }, getDebounceTime()),
                fillToMember() {
                    vm.selectedToMember = null;
                    var memberCopy = this.fromMember.slice();
                    var tempToMember = memberCopy.filter((member) => {
                        return member.id != this.selectedFromMember.id;
                    });
                    this.toMember = tempToMember;
                },
                setAmount() {
                    // console.log('rjj');
                    this.payable = 0;
                    this.receivable = 0;
                    this.maxpayable = 0;
                    this.maxreceivable = 0;
                    if (this.selected_currency && this.selectedFromMember) {
						this.selected_currency2 = this.selected_currency;
                        this.payable_flag = false; 
                        this.receivable_flag = false; 
                        if (this.summary.length > 0) {
                            for (var i = 0; i < this.summary.length; i++) {
                                if (this.summary[i].currency == this.selected_currency.code) {  
                                    this.payable = this.summary[i].payment;
                                    this.payable2 = this.summary[i].payment;
                                    this.receivable = this.summary[i].invoice;
                                    this.receivable2 = this.summary[i].invoice;
                                    if (this.payable > this.receivable) {
                                        this.payable_flag = true;
                                    }
                                    else {
                                        this.receivable_flag = true;
                                    }
                                    this.maxpayable = this.payable;
                                    this.maxreceivable = this.receivable;
                                }
                            } 
                        }
                    } 
                },
				setAmount1() {
                    var payable = 0;
                    var receivable = 0;
                    if (this.selected_currency2 && this.selectedToMember) {
						// console.log(this.selected_currency2 , this.selectedToMember);
                        if (this.payable > this.receivable) { 
                            if (this.selected_currency2.rate > 0 && this.selected_currency.rate > 0) {
                                @if(systemConfig()[30] == 1)
                                payable = myRound((this.payable / this.selected_currency.static_rate * this.selected_currency.rate) * this.selected_currency2.static_rate / this.selected_currency2.rate);
                                this.payable2 = payable; 
                                @else 
                                payable = myRound((this.payable / this.selected_currency.rate) * this.selected_currency2.rate);
                                this.payable2 = payable;
                                @endif
                            }    
                        }
                        if (this.receivable > this.payable) {
                            if (this.selected_currency2.rate > 0 && this.selected_currency.rate > 0) {
                                @if(systemConfig()[30] == 1)
                                receivable = myRound((this.receivable / this.selected_currency.static_rate * this.selected_currency.rate) * this.selected_currency2.static_rate / this.selected_currency2.rate);
                                this.receivable2 = receivable;
                                @else 
                                receivable = myRound((this.receivable / this.selected_currency.rate) * this.selected_currency2.rate);
                                this.receivable2 = receivable;
                                @endif 
                            }
                        }
                    }
                },
                getSummary() {
                    if (this.selectedFromMember) {
                        this.fillToMember();
                        this.getSummaryRecor(this.selectedFromMember.id, this);
                    }
                },
                getSummaryRecor(id, vm) {
                    axios.get("{{route('callMethod.search')}}", {
                        params: {
                            method_name: 'memberStatment',
                            member_id: id,
                        }
                    })
                    .then(function (response) {
                        if (response.data.length > 0) {
                            vm.summary = response.data;
                            if (vm.selected_currency != null) {
                                vm.setAmount();
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                getSummary2() {
                    if (this.selectedToMember) {
                        // this.fillToMember();
                        this.getSummaryRecor2(this.selectedToMember.id, this);
                    }
                },
                getSummaryRecor2(id, vm) {
                    axios.get("{{route('callMethod.search')}}", {
                        params: {
                            method_name: 'memberStatment',
                            member_id: id,
                        }
                    })
                    .then(function (response) { 
                        if (response.data.length > 0) { 
                            vm.summary2 = response.data;
                            // console.log(12222,response.data);
                            // if (vm.selected_currency != null) {
                            //     vm.setAmount();
                            // }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                handleSubmit(e) {
                    this.$validator.validate()
                        .then(valid => {
                            if (valid) {
                                if (Number.parseFloat(this.payable) > 0 || Number.parseFloat(this.receivable) > 0) {
                                    vm.disabled = true; 
                                    // var amount = vm.payable;
                                    if(Number.parseFloat(this.payable) > 0){
                                        var amount = vm.payable;
                                    }else{
                                        var amount = vm.receivable;
                                    }
                                    if (amount && vm.selected_currency) {
                                        var currencies = vm.selected_currency.code;
                                        var base_amount = 0;
                                        @if(systemConfig()[30] == 1)
                                            if (amount && vm.selected_currency.rate > 0 && vm.selected_currency.static_rate > 0) {
                                                base_amount = myRound((amount/ vm.selected_currency.static_rate * vm.selected_currency.rate));
                                            }
                                        @else
                                            if (amount && vm.selected_currency.rate > 0) {
                                                base_amount = myRound(amount / vm.selected_currency.rate);
                                            }
                                        @endif 
                                        // console.log(bank , currencies , expense , date_value , amount_check);
                                        axios.get("{{route('memberTransfer.checkAmount')}}", {
                                        params: {
                                            currencies: currencies,
                                            amount: amount,
                                            base_amount: base_amount,
                                        }}).then(function (response) {
                                        if (response.data) {
                                            if (response.data.position) {
                                                swal({
                                                title: "{{__('layout.AmountIsMoreThenYourPermission')}}",
                                                text: "",  
                                                icon: "warning",
                                                buttons: ["@lang('layout.Cancel')", "@lang('layout.Ok')"],
                                                warningMode: true,
                                                })
                                                .then((willDelete) => {
                                                    if (willDelete) {
                                                        vm.position_status = true;
                                                        vm.disabled = false; 
                                                        regForm(e.target);
                                                    } else {
                                                        vm.disabled = false; 
                                                    }
                                                });
                                            } else {
                                                vm.position_status = false;  
                                                regForm(e.target);   
                                                vm.disabled = false;
                                            }                                 
                                        }else{
                                            vm.position_status = false;                               
                                            regForm(e.target);   
                                            vm.disabled = false;       
                                        }
                                        }) .catch(function (error) {
                                            vm.disabled = false; 
                                            console.log(error);
                                        }) 
                                    } else {
                                        vm.disabled = false;
                                    } 
                                }
                                else {
                                    var message = "{{__('message.Warning')}}";
                                    toastr.warning('', message);
                                }
                            }
                        })
                },
                checkAmount() {
                    this.$validator.validate()
                        .then(valid => {
                            if (valid) {
                                if (Number.parseFloat(this.payable) > 0 || Number.parseFloat(this.receivable) > 0) {
                                    if(Number.parseFloat(this.payable) > 0){
                                        var amount = vm.payable;
                                    }else{
                                        var amount = vm.receivable;
                                    }
                                    console.log('Hello', vm.payable);
                                    if (amount && vm.selected_currency) {
                                        var currencies = vm.selected_currency.code;
                                        var base_amount = 0;
                                        @if(systemConfig()[30] == 1)
                                            if (amount && vm.selected_currency.rate > 0 && vm.selected_currency.static_rate > 0) {
                                                base_amount = myRound(amount / vm.selected_currency.static_rate * vm.selected_currency.rate);
                                            }
                                        @else
                                            if (amount && vm.selected_currency.rate > 0) {
                                                base_amount = myRound(amount / vm.selected_currency.rate);
                                            }
                                        @endif
                                        axios.get("{{route('memberTransfer.checkAmount')}}", {
                                        params: {
                                            currencies: currencies,
                                            base_amount: base_amount,
                                            amount: amount,
                                        }}).then(function (response) {
                                        if (response.data) {
                                            if (response.data.position) {
                                                swal({
                                                title: "{{__('layout.AmountIsMoreThenYourPermission')}}",
                                                text: "",  
                                                icon: "warning",
                                                buttons: ["@lang('layout.Cancel')", "@lang('layout.Ok')"],
                                                warningMode: true,
                                                })
                                                .then((willDelete) => {
                                                    if (willDelete) {
                                                        vm.position_status = true;
                                                        vm.disabled = false; 
                                                        vm.saveAndNew();  
                                                    } else {
                                                        vm.disabled = false; 
                                                    }
                                                });
                                            } else {
                                                vm.position_status = false;  
                                                vm.saveAndNew();   
                                                vm.disabled = false;
                                            }                                 
                                        }else{
                                            vm.position_status = false;   
                                            vm.saveAndNew();       
                                            vm.disabled = false;       
                                        }
                                        }) .catch(function (error) {
                                            vm.disabled = false; 
                                            console.log(error);
                                        }) 
                                    } else {
                                        vm.disabled = false;
                                    } 
                                }
                                else {
                                    var message = "{{__('message.Warning')}}";
                                    toastr.warning('', message);
                                }
                            }
                        })
                },
                saveAndNew()
                {
                    this.$validator.validate()
                    .then(valid =>{
                        if(valid)
                        {
                            if (Number.parseFloat(this.payable) > 0 || Number.parseFloat(this.receivable) > 0) { 
                                var url="{{route('memberTransfer.store')}}";
                                form_id='member-transfer-form';
                                var data= $('#'+form_id).serialize();
                                // console.log(444, data);
                                toggleBlock(true);
                                axios.post(url,data)
                                .then(function(response){
                                        toggleBlock(0);
                                        if(response.data.result==1)
                                        {
                                            $('#'+form_id).trigger('reset');                   
                                            toastr.success('',response.data.message); 
                                            location.reload();
                                        }
                                        else
                                        {
                                            var message="{{__('message.Warning')}}";
                                            //$('#error-sound')[0].play();
                                            toastr.warning('',message);
                                        }
                                })
                                .catch(function(error){
                                toggleBlock(0);
                                    console.log(error);
                                    var message="{{__('message.Warning')}}";
                                    //$('#error-sound')[0].play();
                                    toastr.warning('',message);
                                });
                            }
                        }
                    })
                },
            }
        })
        var cm = Vue.component("cmodal", {
            template: '#cmodal-template',
            props: ['show'],
            data() {
                return {
                    types: [],
                    classes: [],
                    receivables: [],
                    payables: [],
                    code: null,
                    selectType: null,
                    selectPay: null,
                    selectedClass: null,
                    selectReceive: null,
                }
            },
            created() {
                axios.get('{{route("customer.create")}}').then(
                    response => {
                        this.types = response.data.types;
                        if (this.types) {
                            for (var i = 0; i < this.types.length; i++) {
                                if (this.types[i].type == "Customer") {
                                    this.selectType = this.types[i];
                                }
                            }
                        }
                        this.receivables = response.data.receivable;
                        this.payables = response.data.payable;
                        this.code = response.data.code;
                        this.classes = response.data.member_class;
                        if (this.receivables.length > 0) {
                            this.selectReceive = this.receivables[0];
                        }
                        if (this.payables.length > 0) {
                            this.selectPay = this.payables[0];
                        }
                    }
                ).catch(error => console.log(error));
            },
            methods: {
                onSubmit() {
                    vm.showModal = false;
                    //this.member.type = this.member.type.id;
                    console.log(12121212, vm.showModal);
                    var datas = $("#modalForm").serializeArray();
                    var addfinger = '';
                    try {
                        addfinger = datas[5]['value']; 
                    } catch (error) {
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': "{{csrf_token()}}"
                        },
                        url: '{{route("customer.store")}}',
                        method: 'post',
                        data: {
                            "name": datas[0]['value'],
                            "code": datas[1]['value'],
                            'email': datas[2]['value'],
                            'phone': datas[3]['value'],
                            'address1': datas[4]['value'],
                            'addfinger': addfinger,
                            'type': this.selectType.id,
                            'receivable': this.selectReceive.id,
                            'payable': this.selectPay.id,
                            'class': (this.selectedClass) ? this.selectedClass.id : null
                        },
                        dataType: 'json',
                    }).done(function(response) {
                        if (response) {
                            if (addfinger) {
                                if (!response.addfinger) {
                                    swal({ title:"{{__('message.FDeviceNotConn')}}", dangerMode: true});
                                }else{
                                    swal("{{__('message.AddFingerprintSC')}}");
                                }
                            }
                            vm.selectedToMember = response.customer;
                        }
                    }).fail(function(error) {
                        console.log('error', error);
                    });
                }
            }
        });
    </script>
@endpush