@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.EditService')</span>
                {{--<span class="caption-helper">some info...</span>--}}
            </div>
        </div>
        <div class="portlet-body form" id="item-service" v-cloak>
            <!-- BEGIN FORM-->
            {!! Form::model($service,['method' => 'PATCH','route' => ['service.update',$service->id],'files'=> true])!!}
            <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',null,['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="selected_measure"  ></v-select>
                                <input type="hidden" name="um_id" :value="(selected_measure)?selected_measure.id:null" v-validate="'required'"  data-vv-as="@lang('layout.U_M_Set')">
                                <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>
                            <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 class="col-md-4">
                            <label class="control-label ">@lang('layout.ServiceClass')</label>
                            <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,$serviceInfo->AccountId,['class' => 'form-control'])}}
                        </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>
                            <v-select placeholder="@lang('layout.SelectCostAccount')" label="name"  :options="costAccountList" v-model="cost_account" ></v-select>
                            <input type="hidden" name="cost_account" :value="(cost_account)?cost_account.id:null">
                        </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>
                </div>
                {{-- <div class="row"> --}}
                    {{-- <div class="row"></div> --}}
                    {{-- <div class="col-md-6"> --}}
                        {{-- <div class="row"> --}}
                            {{-- <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="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">
                                    <div id="measure">
                                        
                                    </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> --}}
                    <!--/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

    var serviceInfo1      = {!! $serviceInfo1 !!};



    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)


    let serviceClass = {!! json_encode($serviceClass) !!};
 
    var vu = new Vue({
        el: '#item-service',
        data: {
            type: 'inventoryPart',
            iscost: true,
            cost:serviceInfo1.cost,
            infoMeasure:serviceInfo1.um_id,
            infoCostAccount:serviceInfo1.CostAcountId,
            selected_measure:null,
            cost_account:null,
            isAssembly: false,
            isInventory: false,
            isDisabled: true,
            measureSelected:null,
            cost_account:null, 
            serviceClass: serviceClass,
            selected_serviceClass : null,
            measureList:{!! json_encode($measure) !!},
            costAccountList:{!! json_encode($expense)!!},
            measures: {!! json_encode($measure) !!},
            errorMessage: '',
            showModal: false,
            measureType: {},
            measure: {},
            fieldErrors: [],
            selectedMetric: {},
            senddata: {},
            selectedMeasure: {},
            metricList: {!!json_encode(getMeasures())!!},

        },
        mounted(){
            if(serviceInfo1.service_class_id){
                this.selected_serviceClass = _.find(serviceClass, (s) => s.id == serviceInfo1.service_class_id);
            }
        },

        created:function(){

            for(i=0;i<this.measures.length;i++)
            {
                if(this.measures[i].id==this.infoMeasure)
                {

                    this.selected_measure=this.measures[i];
                }
                
            }
            for(i=0;i<this.costAccountList.length;i++)
            {
                if(this.costAccountList[i].id==this.infoCostAccount)
                {
                    this.cost_account=this.costAccountList[i];
                }
            }
        },
        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 () {
            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