@include('backend.layout.globals.vue_validation')

<div class="kt-section kt-section--last" :class="{'kt-section--first': !(validation_errors.length > 0)}">
    <div class="kt-section__body">
        <form-wizard @on-complete="send()" ref="wizard" title="" subtitle="" activateAll='true' back-button-text="{{ __('main.back') }}" next-button-text="{{ __('main.next') }}" finish-button-text="{{ __('main.save') }}" color="#34495e">
            <tab-content title="{{ __('main.info') }}" icon="fa fa-info">

                <form-group-input-text v-model="fData.name[lang]" v-for="lang in $languages" :name="'name-' + lang" label_class="col-2" input_class="col-10" :is_required="true" v-validate="'required'" :form_errors="errors" :trans="'{{ __("main.name") }}' + ' (' + lang + ')'"></form-group-input-text>

                <div class="form-group row validated" v-for="lang in $languages">
                    <label class="col-2 col-form-label" :for="'description-' + lang">{{ __('main.description') }} (@{{ lang }})</label>
                    <div class="col-10">
                        <textarea v-model="fData.description[lang]" :name="'description-' + lang" class="form-control" placeholder="{{ __('main.description') }}" data-vv-as="{{ __('main.description') }}" :form_errors="errors" :id="'description-' + lang"></textarea>
                        <span v-if="errors.has('description-' + lang)" class="invalid-feedback">
                            @{{ errors.first('description-' + lang) }}
                        </span>
                    </div>
                </div><!-- Description -->

                <div class="form-group row" :class="{'validated' : errors.has('logo')}">
                    <label class="col-2 col-form-label">{{ __('main.logo') }}</label>
                    <div class="col-lg-10">
                        <div class="kt-avatar kt-avatar--outline" id="kt_user_avatar_4">
                            <div class="kt-avatar__holder" :style="'background-image:url({{asset('/storage')}}/'+fData.logo+')'"></div>
                            <label class="kt-avatar__upload" data-toggle="kt-tooltip" data-original-title="Change avatar">
                                <i class="fa fa-pen"></i>
                                <input id='logo' type="file" name="logo" class="form-control" :class="{'is-invalid' : errors.has('logo')}" data-vv-as="{{ __('main.logo') }}" ref="logo" placeholder="{{ __('main.image') }}" accept=".png, .jpg, .jpeg">
                            </label>
                        </div>
                        <span class="form-text text-muted">{{ __('main.logo') }}</span>
                        <span class="form-text text-muted">{{ __('main.allowed_extensions') }}: .png, .jpg, .jpeg, .svg</span>
                    </div>
                </div><!--logo -->
            </tab-content><!-- info -->
            <tab-content title="{{ __('main.contacts') }}" icon="fa fa-phone">
                <div class="form-group row validated">
                    <label class="col-2 col-form-label">{{ trans('main.mobile') }} :</label>
                    <input-component input_type="number" input_class="col-10" :name="'mobile'" v-model="fData.mobile"  trans="{{ __("main.mobile") }}" :form_errors="errors"></input-component>
                </div><!-- mobile -->

                <div class="form-group row validated">
                    <label class="col-2 col-form-label">{{ trans('main.whats') }} :</label>
                    <input-component input_type="number" input_class="col-10" :name="'whats'" v-model="fData.whats"  trans="{{ __("main.whats") }}" :form_errors="errors"></input-component>
                </div><!-- whats -->

                <div class="form-group row validated">
                    <label class="col-2 col-form-label">{{ trans('main.facebook') }} :</label>
                    <input-component input_type="url" input_class="col-10" :name="'facebook'" v-model="fData.facebook"  trans="{{ __("main.facebook") }}" :form_errors="errors"></input-component>
                </div><!-- facebook -->

                <div class="form-group row validated">
                    <label class="col-2 col-form-label">{{ trans('main.youtube') }} :</label>
                    <input-component input_type="url" input_class="col-10" :name="'youtube'" v-model="fData.youtube" trans="{{ __("main.youtube") }}" :form_errors="errors"></input-component>
                </div><!-- youtube -->

                <div class="form-group row validated">
                    <label class="col-2 col-form-label">{{ trans('main.instgram') }} :</label>
                    <input-component input_type="url" input_class="col-10" :name="'instgram'" v-model="fData.instgram"  trans="{{ __("main.instgram") }}" :form_errors="errors"></input-component>
                </div><!-- instgram -->

            </tab-content><!-- contacts -->

            <tab-content title="{{ __('main.location') }}" icon="fa fa-map">

                <form-group-input-text label_class="col-2" input_class="col-10" v-for="lang in $languages" :name="'address-' + lang" :form_errors="errors" :trans="'{{ __("main.address") }}' + ' (' + lang + ')'" v-model="fData.address[lang]"></form-group-input-text>
                <div class="form-group row validated">
                    <label class="col-2 col-form-label">{{ trans('main.location') }} :</label>
                    <input-component input_type="text" input_class="col-10" :name="'location'" v-model="fData.location" trans="{{ __("main.location") }}" :form_errors="errors"></input-component>
                </div><!-- youtube -->
                <google-map/>

            </tab-content><!-- location -->


            <tab-content title="{{ __('main.working_days') }}" icon="fa fa-times">
                <div class="form-group row validated" v-for="(meta, index) in fData.working_days">
                    <label class="col-2 col-form-label">{{ __('main.working_days') }}</label>
                    <div class="col-3">
                        <Select2 v-validate="'required'" :options="days" v-model="meta.day" :name="'day'+index" data-vv-as="{{ __('main.day') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.day') }}'}" />
                    </div>
                    <input-component v-validate="'required'" v-model="meta.from_time" :name="'from_time'+index"   input_type="time"   input_class="col-3" :form_errors="errors" :trans="'{{ __("main.from_time") }}'"></input-component>
                    <input-component v-validate="'required'" v-model="meta.to_time"   :name="'to_time'+index"     input_type="time"   input_class="col-3" :form_errors="errors" :trans="'{{ __("main.to_time") }}'"></input-component>

                    <div v-if='index ==0' class="col-1">
                        <button type="button" @click="addOtherMeta('working_days')" class="btn btn-block btn-success btn-elevate">
                            <span class="la la-plus"></span>
                        </button>
                    </div>
                    <div v-if='index !=0'  class="col-1">
                        <button type="button" @click="deleteOtherMeta('working_days', index)" class="btn btn-block btn-danger btn-elevate">
                            <span class="la la-trash"></span>
                        </button>
                    </div>
                </div><!-- working_days -->
            </tab-content><!-- working_days -->

            <tab-content title="{{ __('main.patient_types') }} & {{trans('main.price')}}" icon="fa fa-ad">
                <div class="form-group row validated" v-for="(meta, index) in fData.patient_type_price">
                    <label class="col-2 col-form-label">{{ __('main.patient_type') }} & {{trans('main.price')}}</label>
                    <div class="col-5">
                        <Select2 v-validate="'required'" :options="patient_types" v-model="meta.patient_type_id" :name="'patient_type_id'+index" data-vv-as="{{ __('main.patient_type') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.patient_type') }}'}" />
                    </div>
                    <input-component v-validate="'required|min:0'" v-model="meta.price" :name="'price'+index" input_type="number"   input_class="col-4" :form_errors="errors" :trans="'{{ __("main.price") }}'"></input-component>
                    <div v-if='index ==0' class="col-1">
                        <button type="button" @click="addOtherMeta('patient_type_price')" class="btn btn-block btn-success btn-elevate">
                            <span class="la la-plus"></span>
                        </button>
                    </div>
                    <div v-if='index !=0'  class="col-1">
                        <button type="button" @click="deleteOtherMeta('patient_type_price', index)" class="btn btn-block btn-danger btn-elevate">
                            <span class="la la-trash"></span>
                        </button>
                    </div>
                </div><!-- working_days -->
            </tab-content><!-- patient_types -->

        </form-wizard>
    </div>
</div>