@extends('layouts.app')
@section('style')
<style>
.v-select input[type=search], .v-select input[type=search]:focus {
    width: 50% !important;
}
</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.AddNewService')</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' => 'service.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.ServiceName') </label>
                            {{Form::text('name',null,['class' => 'form-control','placeholder' => __('layout.EnterServiceName'),'v-validate' =>'"required"','data-vv-as' => __('layout.EnterServiceName')])}}
                            <span class="required">@{{ errors.first('name') }}</span>
                            {{--<span class="help-block"> This is inline help </span>--}}
                        </div>
                        <div class="col-md-4">
                            <label class="control-label ">@lang('layout.ServiceCode')</label>
                            {{Form::number('number',$number,['class' => 'form-control','min' =>'0','placeholder' => __('layout.ServiceCode')])}}
                            <span class="required">@{{ errors.first('number') }}</span>
                            {{--<label class="control-label col-md-3">Rate1</label>--}}
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">@lang('layout.U_M_Set')</label>
                            <div class="input-group">
                                <v-select placeholder="@lang('layout.SelectUnitMeasure') " label="name"  :options="measureList" v-model="measureSelected" ></v-select>
                                <input type="hidden" name="um_id" v-validate="'required'" data-vv-as="@lang('layout.U_M_Set')" :value="(measureSelected)?measureSelected.id:null">
                                <span class="required">@{{ errors.first('um_id') }}</span>
                                <span class="btn btn-success input-group-addon " title="@lang('button.AddMeasure')" type=button id="show-modal" v-on: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-md-4">
                            <label class="control-label ">@lang('layout.ServiceClass')</label>
                            {{-- <v-select label="name"  :options="serviceClass" v-model="selected_serviceClass" ></v-select>
                            <input type="hidden" name="service_class" :value="(selected_serviceClass)?selected_serviceClass.id:null"> --}}
                            <v-select label="name" v-model="selected_serviceClass" :options="serviceClass"></v-select>
                            <input type="hidden" name="service_class" v-model.number="(!selected_serviceClass)?null:selected_serviceClass.id">
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">@lang('layout.Account')</label>
                            {{Form::select('income_account',$income,null,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Account')])}}
                            <span class="required">@{{ errors.first('income_account') }}</span>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">@lang('layout.Rate')</label>
                            {{Form::number('rate',null,['class' => 'form-control','v-validate' =>'','data-vv-as' => __('layout.Rate')])}}
                            <span class="required">@{{ errors.first('rate') }}</span>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label ">@lang('layout.ServiceDescription')</label>
                            {{Form::textarea('description',null,['class' => 'form-control','rows' => '2'])}}
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" style="margin-top: 5%;"></label>
                                <label class="mt-checkbox">
                                    <input type="checkbox" v-model="iscost"> @lang('layout.IfServiceHasCost')
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4" v-if="iscost">
                            <label class="control-label">@lang('layout.Cost')</label>
                            {{Form::number('cost',null,['class' => 'form-control','v-model'=>'cost','v-validate' =>'','data-vv-as' => __('layout.Cost')])}}
                            <span class="required">@{{ errors.first('cost') }}</span>
                        </div>
                        <div class="col-md-4" v-if="iscost">
                            <label class="control-label">@lang('layout.ExpenseAccount')</label>
                            {{Form::select('cost_account',$cost,null,['class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.ExpenseAccount')])}}
                            <span class="required">@{{ errors.first('cost_account') }}</span>
                        </div>
                        <div class="col-md-12" v-if="iscost">
                            <label class="control-label">@lang('layout.ServiceCostDescription')</label>
                            {{Form::textarea('description',null,['class' => 'form-control','rows' => '2'])}}
                        </div>
                        {{-- <div class="col-md-4">
                            <label class="control-label">@lang('layout.U_M_Set')</label>
                            <v-select placeholder="@lang('layout.SelectUnitMeasure') " label="name"  :options="measureList" v-model="measureSelected" ></v-select>
                            <input type="hidden" name="um_id" v-validate="'required'" data-vv-as="@lang('layout.U_M_Set')" :value="(measureSelected)?measureSelected.id:null">
                            
                            <span class="required">@{{ errors.first('um_id') }}</span>
                        </div> --}}
                    </div>
                </div>
                <div class="row">
                    {{-- <div class="row">
                        
                        
                    </div> --}}
                    <div class="col-md-6">
                        <div class="row">
                            {{-- <div class="col-md-8">
                                
                                <label class="control-label">@lang('layout.U_M_Set')</label>
                                
                                <select name="um_id" id="" class="form-control" placeholder="@lang('layout.SelectUnitMeasure')">
                                    <optgroup label="Measure">
                                       <option v-for="(meas,key) in measures" :value="meas.id">@{{ meas.name}}</option>
                                   </optgroup>

                               </select>
                            </div> --}}
                           
                            {{-- <div class="col-md-4"> --}}
                                <!-- <label></label> -->
                                <!-- <button class="btn default" type=button id="show-modal"
                                    v-on:click="showModal = true"  style="margin-top: 9%;">@lang('layout.AddNewMeasure')
                                </button> -->
                                {{-- <div class="form-group">
                                    <button class="btn green" type=button id="show-modal"v-on:click="showModal = true" style="margin-top: 15%;"> @lang('layout.AddMeasure') 
                                        <i class="fa fa-plus"> </i>
                                    </button>
                                </div> --}}
                            {{-- </div> --}}
                        </div>
                    </div>
                    {{-- <div class="col-md-6">
                        <div class="row">
                            
                            



                        </div>
                    </div> --}}
                    <div class="row">

                        {{-- <div class="col-md-6" v-if="iscost"> --}}
                            
                            
                            
                            
                            {{--<label class="control-label col-md-3">Rate1</label>--}}
                            
                            

                        {{-- </div> --}}
                        {{-- <div class="col-md-6">
                            






                            
                        </div> --}}
                    
                </div>
                        <!--/span-->
                        
                        <!--/span-->
                    </div>
                </div>

                <!-- <div class="form-section"></div> -->
                <div class="row">

                    <div class="col-md-6">
                        <div class="form-group">
                                <!-- <label class="control-label col-md-3">@lang('layout.U_M_Set')</label>
                                <div class="col-md-6">
                                    <select name="um_id" id="" class="form-control" placeholder="@lang('layout.SelectUnitMeasure')">
                                        <optgroup label="Measure">
                                            <option v-for="(meas,key) in measures" :value="meas.id">@{{ meas.name}}</option>
                                        </optgroup>

                                    </select>

                                </div> -->
                                <div class="col-md-3">

                                    <!-- <button class="btn default" type=button id="show-modal"
                                            v-on:click="showModal = true">@lang('layout.AddNewMeasure')
                                        </button> -->

                                        
                                        {{-- <div id="measure">

                                            <modal v-if="showModal" @close="showModal = false">

                                                <div slot="body">
                                                    <div class="row">
                                                        <div class="col-md-10">
                                                            <p class="disgrace">@{{ errorMessage }}</p>
                                                            <div class="form-group">

                                                                <label class=" col-md-4">@lang('layout.MeasureType')
                                                                </label>
                                                                <label class=" col-md-4">@lang('layout.MeasureName')
                                                                </label>

                                                                <div class="col-md-4">
                                                                    <br>

                                                                    <span v-for="met in metric">
                                                                       <div class="mt-radio-list">

                                                                        <label class="mt-radio"> @{{ met.name }}

                                                                            <input name="typename" type="radio"
                                                                            v-bind:value="met " v-model="measureType"
                                                                            v-on:change="measure = {}">

                                                                            <span></span>
                                                                        </label>

                                                                    </div>



                                                                    <div class="mt-radio-list ddd">
                                                                      <span v-if="measureType.name == met.name"
                                                                      v-for=" mea in met.measure">

                                                                      <label class="mt-radio"> @{{ mea.name }}
                                                                          <input name="measure" type="radio"
                                                                          v-bind:value="mea"
                                                                          v-model="measure">
                                                                          <span></span>
                                                                      </label>

                                                                  </span>

                                                              </div>
                                                          </span>


                                                      </div>

                                                  </div>


                                              </div>


                                          </div>
                                      </div>
                                      <h3 slot="header">@lang('layout.AddNewMeasure')
                                      </h3>
                                      <div slot="footer">
                                        <button :disabled="Object.keys(measure).length == 0 || Object.keys(measureType).length == 0"
                                        type=button class="modal-default-button" v-on:click="addMeasure">
                                        @lang('layout.OK')
                                    </button>
                                    <button type=button class="modal-default-button"
                                    v-on:click="showModal = false ,measure = {} , measureType={} ,errorMessage =''">
                                    @lang('layout.Cancel') 
                                </button>
                            </div>
                        </modal>
                    </div> --}}
                    <div id="measure">
                        <modal v-if="showModal" @close="showModal = false">
                            <div slot="body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <h4>@lang('layout.MetricType')</h4>
                                        <span v-for="metric in metricList">
                                            <div class="mt-radio-list">
                                                <label class="mt-radio"> @{{ metric.name }}

                                                    <input name="metric" type="radio" v-bind:value="metric"
                                                    v-model="selectedMetric" v-on:change="selectedMeasure = {}">

                                                    <span></span>
                                                </label>
                                            </div>
                                        </span>
                                    </div>
                                    <div class="col-md-3">
                                        <h4>@lang('layout.Measure') </h4>

                                        <span v-for="measure1 in selectedMetric.measure">
                                            <div class="mt-radio-list">
                                             <span v-if="measure1.text=='Other'">@lang('layout.OtherMeasure') </span>
                                             <span v-if="measure1.text !='Other'">@{{ measure1.text }} </span>
                                             <label class="mt-radio"> 


                                                <input name="measureds" type="radio" v-bind:value="measure1"
                                                v-model="selectedMeasure">

                                                <span></span>
                                            </label>
                                        </div>
                                    </span>

                                </div>
                                <div class="col-md-6">
                                    <span v-if="selectedMeasure.text == 'Other'">
                                        <h4 class="text-center">@lang('layout.OtherMeasure') </h4>
                                        <div>
                                            <div class="form-group">
                                                <label class="control-label col-md-5">
                                                @lang('layout.MeasureName')</label>
                                                <div class="col-md-7">
                                                    <input type="text" class="form-control"
                                                    placeholder="@lang('layout.EnterMeasureName')"
                                                    v-model.trim="selectedMeasure.name">
                                                    <span class="help-block">  </span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-5">
                                                    @lang('layout.MeasureName')
                                                </label>
                                                <div class="col-md-7">
                                                    <input type="number" class="form-control"
                                                    placeholder="@lang('layout.EnterMeasureuint')"
                                                    v-model.number="selectedMeasure.unit">
                                                    <span class="help-block">  </span>
                                                </div>
                                            </div>
                                            <div class="form-group ">
                                                <label class="control-label col-md-5">
                                                    @lang('layout.MeasureSymbol')
                                                </label>
                                                <div class="col-md-7">
                                                    <input type="text" class="form-control"
                                                    placeholder="@lang('layout.EnterMeasureSymbol')"
                                                    v-model.trim="selectedMeasure.symbol">
                                                    <span class="help-block">  </span>
                                                </div>
                                            </div>
                                        </div>

                                    </span>
                                </div>

                            </div>

                            </div>
                            <h3 slot="header">
                                <div class="col-md-4">
                                    <h3>
                                        @lang('layout.AddNewMeasure')
                                    </h3>
                                </div>
                                <div class="col-md-4">
                                    <div v-if="fieldErrors.length > 0">
                                        <p class="text-danger" fieldErrors>
                                            <spna v-text="fieldErrors"></spna>
                                        </p>
                                    </div>
                                </div>
                            </h3>
                            <div slot="footer">
                                <button type=button class="modal-default-button btn btn-success" v-on:click="addMeasure">
                                    @lang('layout.OK')
                                </button>
                                <button type=button class="modal-default-button btn btn-danger"
                                v-on:click="showModal = false ,measure = null , type=null">
                                @lang('layout.Cancel')
                            </button>
                            </div>
                        </modal>
                    </div>

            </div>

        </div>

    </div>
    <div class="col-md-6">
                            <!-- <div class="form-group">
                                <label class="col-md-3 control-label"></label>
                                <div class="col-md-9">
                                    <label class="mt-checkbox">
                                        <input type="checkbox" v-model="iscost"> @lang('layout.IfServiceHasCost')
                                        <span></span>
                                    </label>
                                </div>
                            </div> -->
                        </div>

                    </div>

                    <!--/row-->
                    


                    <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>
            </div>
        <!-- </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'

            })

            let serviceClass = {!! json_encode($serviceClass) !!};

            Vue.component('v-select', VueSelect.VueSelect)
            var vu= new Vue({
                el: '#item-service',
                data: {
                    type: 'inventoryPart',
                    iscost: false,
                    isAssembly: false,
                    isInventory: false,
                    isDisabled: true,
                    serviceClass: serviceClass,
                    selected_serviceClass : null,
                    measures: {!! json_encode($measure) !!},
                    measureType: {},
                    measure: {},
                    incomeAccount:null,
                    costAccount:null,
                    assetAccount:null,
                    measureSelected:null,
                    measureList:{!! json_encode($measure) !!},
                    cost: 0,
                    total: 0,
                    errorMessage: '',
                    showModal: false,
                    fieldErrors: [],
                    selectedMetric: {},
                    senddata: {},
                    selectedMeasure: {},
                    metricList: {!!json_encode(getMeasures())!!},




                },

                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!');
},
//                     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