@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.AddNewBlock')</span>
                {{--<span class="caption-helper">some info...</span>--}}
            </div>
        </div>
        <div class="portlet-body form" id="item-service" v-cloak>
            <!-- BEGIN FORM-->
            {{Form::open(['route' => 'blocks.store','method' => 'POST','class' => 'form-horizontal','id'=>'service-form'])}}
            <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-4">
                            <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-4">
                            <label class="control-label ">@lang('layout.Number')</label>
                            <input type="number" name="number" class="form-control" v-model="number">
                            <span class="required">@{{ errors.first('number') }}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Address')</label>
                            {{Form::text('address',null,['class' => 'form-control','min' =>'0','placeholder' => __('layout.Address')])}}
                            <span class="required">@{{ errors.first('address') }}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Employee')</label>
                            <v-select :class="selectMem + ' vue-select2 '" v-model="selectedMember" @input="getSummary()" label="name" :options="member" @search="MemberSearch"></v-select>
                            <input type="hidden" name="employee_id" :value="(!selectedMember)?null:selectedMember.id" v-validate="'required'" data-vv-as="@lang('layout.Member')">
                            <span class="required">@{{ errors.first('employee_id') }}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Contract')</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" />
                            <span class="required">@{{ errors.first('contract_id') }}</span>
                        </div>
                        {{-- <div class="col-md-4">
                            <label class="control-label ">@lang('layout.BlockStatus')</label>
                            <v-select class="vue-select2" placeholder="@lang('layout.Select')" v-model="selectedblocksStatus" label="name" :options="{{$blocksStatus}}"></v-select>
                            <input type="hidden" name="block_status_id" v-model.number="(!selectedblocksStatus)?null:selectedblocksStatus.id" />
                            <span class="required">@{{ errors.first('block_status_id') }}</span>
                        </div> --}}
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.Date')</label>
                            <input type="text" id="date" class="form-control date" autocomplete="off" name="date" placeholder="@lang('layout.Date')">
                            <span class="required">@{{ errors.first('date') }}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.BuildDate')</label>
                            <input type="text" id="date" class="form-control date" autocomplete="off" name="build_date" placeholder="@lang('layout.BuildDate')">
                            <span class="required">@{{ errors.first('address') }}</span>
                        </div>
                        <div class="col-md-4">
                            <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 class="col-md-4">
                            <label class="control-label">@lang('layout.ListNumber')</label>
                            {{Form::text('listNumber',null,['class'=>'form-control','min'=>'0','placeholder'=>__('layout.ListNumber')])}}
                        </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('blocks.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 blocksStatus =  {!!$blocksStatus!!}; 

            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,
                    blocksStatus:blocksStatus,
                    selectedblocksStatus:null,
                    cost: 0,
                    total: 0,
                    errorMessage: '',
                    showModal: false,
                    fieldErrors: [],
                    selectedMetric: {},
                    senddata: {},
                    selectedMeasure: {},
                    selectedMember: null,
                    selectMem:'',
                    member: [],
                    selectedContract: null,
                    number: "{{$number}}",
                    old_number: "{{$number}}",
                },

                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 () {

// //                 var sendMeasure =  this.measureType;
// //                 sendMeasure.measure = this.measure;

//                         this.$http.post("{{route('measure.store')}}", {
//                             type: this.measureType,
//                             measure: this.measure
//                         }).then(function (success) {

//                             this.$http.get("{{route('inventory.create')}}").then(function (response) {


//                                 this.measures = response.body;
//                                 this.showModal = false;

// //
//                             }),
//                                 this.errorMessage = '';

// //
//                         }, function (response) {

//                             this.errorMessage = response.body

//                         });

//                     },
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