@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">

        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.patients') }}</label>
            <div class="col-9">
                <Select2 v-validate="'required'" :options="patients" v-model="fData.patient_id" :name="'patients'" data-vv-as="{{ __('main.patients') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.patients') }}'}" />
            </div>
        </div><!-- Patients -->
        <div class="form-group row validated">
            <label class="col-2 col-form-label">{{ __('main.locations') }}</label>
            <div class="col-9">
                <Select2  :options="locations" v-model="fData.operation_location_id" :name="'location'" data-vv-as="{{ __('main.location') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.locations') }}'}" />
            </div>
        </div><!-- Locations -->
        <div class="form-group row validated" :class="{'validated' : errors.has('date_of_birth')}">
            <label class="col-2 col-form-label required">{{ __('main.date') }} & {{trans('main.time')}}</label>
            <div class="col-3">
                <date-pick  v-model="fData.operation_date" :value="fData.operation_date" ></date-pick>
                <div v-if="errors.has('operation_date')" class="invalid-feedback">@{{ errors.first('date_of_birth') }}</div>
            </div>
            <label class="col-2 col-form-label required">{{trans('main.time')}}</label>
            <input-component v-validate="'required'" v-model="fData.operation_time" :name="'fData.operation_time'" input_type="time" input_class="col-4" :form_errors="errors" :trans="'{{ __("main.time") }}'"></input-component>
        </div><!-- operation_date & operation_time-->
        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.notes') }}</label>
            <div class="col-9">
                <quill-editor v-model="fData.notes" :name="'notes'" data-vv-as="{{ __('main.notes') }}" :form_errors="errors" :id="'notes'" ref="myQuillEditor" :options="{}"></quill-editor>
                <span v-if="errors.has('notes')" class="invalid-feedback">
                          @{{ errors.first('notes') }}
                    </span>
            </div>
        </div><!-- notes -->
    </div>
</div>