@extends('layouts.app')
@section('style')
<style>
    .v-select input[type=search], .v-select input[type=search]:focus {
        width: 50% !important;
    }
    .v-select.searchable .dropdown-toggle{
        height: 27px;
    }
</style>
@stop
@section('content')
@include('inventories.modal')
<!-- BEGIN CONTENT BODY -->
<!-- END PAGE BAR -->
<!-- <div class="row"> -->  
    <div class="portlet light bg-inverse">
        <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.ResidenialUnitCategoryEdit')</span>
                {{--<span class="caption-helper">some info...</span>--}}
            </div>
        </div>
        <div class="portlet-body form" id="item-service" v-cloak>
            <!-- BEGIN FORM-->
            {!! Form::model($residenialUnitCategory, ['method' => 'PATCH','class'=>'form-horizontal','route' => ['residenialUnitCategory.update',$residenialUnitCategory->id]]) !!}
            <div class="form-body">
                <div class="row">
                    <div class="col-lg-12 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-bottom: 10px;">
                        <div class="col-md-6">
                            <label class="control-label ">@lang('layout.Name') </label>
                            {{Form::text('name',null,['class' => 'form-control','placeholder' => __('layout.Name'),'v-validate' =>'"required"','data-vv-as' => __('layout.Name')])}}
                            <span class="required">@{{ errors.first('name') }}</span>
                        </div>
                        <div class="col-md-6">
                            <label class="control-label ">@lang('layout.Description')</label>
                            {{Form::text('description',null,['class' => 'form-control','min' =>'0','placeholder' => __('layout.Description')])}}
                            <span class="required">@{{ errors.first('description') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="form-section"></div> -->
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button type="button" class="btn green" @click="handleSubmit($event)" >@lang('layout.Submit')</button>
                                <a href="{{route('service.index')}}" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>
            {{Form::close()}}
            <!-- END FORM-->
        </div>
        @endsection
        @push('scripts')
        <script src="{{url('/vue/sweetalert1.min.js')}}"></script>
        <script src="{{url('/vue/vue-resource.js')}}"></script>
        <script>
            @if(App::getLocale())
            Vue.use(VeeValidate, {
                locale: '{{App::getLocale()}}',
            });
            @else
            Vue.use(VeeValidate, {
                locale: 'en',
            });
            @endif
            Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
            Vue.component('modal', {
                template: '#vendor-template'
            })
            Vue.component('modal', {
                template: '#modal-template'
            })
            Vue.component('v-select', VueSelect.VueSelect)
            var vu= new Vue({
                el: '#item-service',
                data: {
                    type: 'inventoryPart',
                    iscost: false,
                    isAssembly: false,
                    isInventory: false,
                    isDisabled: true,
                    selected_serviceClass : null,
                    measureType: {},
                    measure: {},
                    incomeAccount:null,
                    costAccount:null,
                    assetAccount:null,
                    measureSelected:null,
                    cost: 0,
                    total: 0,
                    errorMessage: '',
                    showModal: false,
                    fieldErrors: [],
                    selectedMetric: {},
                    senddata: {},
                    selectedMeasure: {},
                    selectMem:'',
                    member: [],
                    selectedBlocks: null
                },
                mounted() {
                },
                methods: {
                    getSummary() {
                        if (vu.selectedMember) {
                            var id = vu.selectedMember.id;
                            axios.get("{{route('callMethod.search')}}", {
                                    params: {
                                        method_name: 'memberStatment',
                                        member_id: id,
                                    }
                                })
                                .then(function(response) {
                                    if (response.data.length > 0) {
                                        vu.summary = response.data;
                                    } else {
                                        vu.summary = [];
                                    }
                                })
                                .catch(function(error) {
                                    vu.summary = [];
                                    console.log(error);
                                });
                        }
                    },
                    MemberSearch: _.debounce((search, loading) => {
                        loading(true);
                        let class_id = (vu.selected_class != undefined) ? vu.selected_class.id : null;
                        axios.get("{{route('callMethod.search')}}", {
                            params: {
                                method_name: 'SearchMember', 
                                keyword: search,
                                class_id: class_id
                            }
                        })
                        .then(function(response) {
                            if (response.data.length > 0) {
                                // console.log(response.data);
                                vu.member = [];
                                vu.member = response.data;
                            }
                            loading(false);
                        })
                        .catch(function(error) {
                            loading(false);
                            console.log(error);
                        })
                    }, getDebounceTime()),
                    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!');
                    },
                    addMeasure: function () {
                        let senddata = _.clone(vu.selectedMetric);
                        senddata.measure = _.clone(vu.selectedMeasure);
                        // console.log('NN',response.me);
                        var req = axios.post("{{route('measure.store')}}",senddata)
                        .then(function (response) {
                            vu.showModal = false;
                            vu.fieldErrors = [];
                            vu.selectedMetric = {};
                            vu.selectedMeasure = {};
                            if(response.data.me){
                                vu.measureSelected = response.data.me;
                            }
                            // console.log('wews',response.data.me);
                            axios.get("{{route('service.create')}}").then(function (response) {
                                // console.log('meauser',response.data.meauser);
                                // vu.measureList = response.data;
                                // vu.measureList.push({id:response.data.me.id,name:response.data.me.name});
                            });
                        })
                        .catch(function (error) {
                            axios.get("{{route('service.create')}}").then(function (response) {
                                // vu.measureList = response.data;
                            });
                            vu.fieldErrors = error.response.data
                        });
                    },
                    submit: function () {
                        swal({
                            title: "Are you sure?",
                            text: "",
                            icon: "info",
                            buttons: true,
                            dangerMode: true,
                        })
                        .then((willDelete) => {
                            if (willDelete) {
                                document.getElementById("service-form").submit()
                            } else {
                            }
                        });
                    },
                }
            });
        </script>
@endpush