@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">
        @if ($action != 'edit')
            <div class="form-group row validated">
                <label class="col-2 col-form-label">{{ __('main.booking_before') }}</label>
                <div class="col-2">
                     <span class="kt-switch kt-switch--icon">
                           <label>
                                 <input class="form-check-input" v-model="fData.booking_before" type="checkbox">
                                 <span></span>
                           </label>
                     </span>
                </div>
            </div><!-- booking_before -->
        @endif
        <template v-if="fData.booking_before">
            <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="'patient_id'" data-vv-as="{{ __('main.patient') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.patient') }}'}" />
                </div>
            </div>
        </template>
        <template v-if="!fData.booking_before">
            <form-group-input-text v-model="fData.name"  :name="'name'" label_class="col-2" input_class="col-9" :is_required="true" v-validate="'required'" :form_errors="errors" :trans="'{{ __("main.name") }}'"></form-group-input-text>
            <form-group-input-text v-model="fData.phone"  :name="'phone'" label_class="col-2" input_class="col-9" :is_required="true" v-validate="'required'" :form_errors="errors" :trans="'{{ __("main.phone") }}'"></form-group-input-text>
            <form-group-input-text v-model="fData.secondary_phone"  :name="'secondary_phone'" label_class="col-2" input_class="col-9" :is_required="false" :form_errors="errors" :trans="'{{ __("main.secondary_phone") }}'"></form-group-input-text>
            <form-group-input-text v-model="fData.occupation"  :name="'occupation'" label_class="col-2" input_class="col-9" :form_errors="errors" :trans="'{{ __("main.occupation") }}'"></form-group-input-text>
            <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.location_id" :name="'location'" data-vv-as="{{ __('main.location') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.locations') }}'}" />
                </div>
            </div><!-- Locations -->
        </template>
        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.clinics') }}</label>
            <div class="col-9">
                <Select2 @change="getPateintTypes()"  v-validate="'required'" :options="clinics" v-model="fData.clinic_id" :name="'clinic_id'" data-vv-as="{{ __('main.clinic') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.clinics') }}'}" />
            </div>
        </div><!-- clinics -->
        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.date') }}</label>
            <input-component v-validate="'required'" v-model="fData.appointment_date" :name="'appointment_date'" input_type="date" input_class="col-9" :form_errors="errors" :trans="'{{ __("main.appointment_date") }}'"></input-component>

            <div class="col-9">
            </div>
            {{--
            <input-component v-validate="'required'" v-model="fData.appointment_time" :name="'appointment_time'" input_type="time" input_class="col-3" :form_errors="errors" :trans="'{{ __("main.appointment_time") }}'"></input-component>
            --}}
        </div><!-- days -->
        <template >
            <div class="form-group row validated">
                <label class="col-2 col-form-label required">{{ __('main.patient_type') }}</label>
                <div class="col-9">
                    <Select2 @change="getClinicPatientTypePrice()"   :options="patient_types" v-model="fData.patient_type_id" :name="'patient_type_id'" data-vv-as="{{ __('main.patient_type') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.patient_type') }}'}" />
                </div>
            </div><!-- patient_types -->
            <div class="form-group row validated" v-if="fData.patient_type_id">
                <label class="col-2 col-form-label">{{ __('main.price') }}</label>
                <input-component :disabled="fData.discount_added" v-validate="'required|numeric'" v-model="fData.price" :name="'price'"   input_type="number"   input_class="col-3" :form_errors="errors" :trans="'{{ __("main.price") }}'"></input-component>
                <label class="col-1 col-form-label">{{ __("main.new_price") }}</label>
                <div class="col-2">
                 <span class="kt-switch kt-switch--icon">
                       <label>
                             <input class="form-check-input"  v-model="fData.discount_added" type="checkbox"  @click="addNewPrice">
                             <span></span>
                       </label>
                 </span>
                </div>
                <input-component v-if="fData.discount_added" v-validate="'required|numeric'" v-model="fData.new_price" :name="'new_price'"   input_type="number"   input_class="col-3" :form_errors="errors" :trans="'{{ __("main.new_price") }}'"></input-component>
            </div><!-- price -->
            {{--
            <div class="form-group row validated">
                <label class="col-2 col-form-label required">{{ __('main.attendance_status') }}</label>
                <div class="col-9">
                    <Select2 v-validate="'required'" :options="attendance_statuses" v-model="fData.attendance_status_id" :name="'attendance_status'" data-vv-as="{{ __('main.attendance_status') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.attendance_status') }}'}" />
                </div>
            </div><!-- Attendance Status -->
            --}}
        </template><!-- PatientTypes & price & attendance -->

        <div class="form-group row validated">
            <label class="col-2 col-form-label">{{ __('main.comments') }}</label>
            <div class="col-9">
                <textarea v-model="fData.comments" :name="'comments'" class="form-control" placeholder="{{ __('main.comments') }}" data-vv-as="{{ __('main.comments') }}" :form_errors="errors" :id="'comments'"></textarea>
                <span v-if="errors.has('comments')" class="invalid-feedback">
                      @{{ errors.first('comments') }}
                </span>
            </div>
        </div><!-- comments -->
    </div>
</div>