@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-group-input-text v-model="fData.title" :name="'title'" label_class="col-2" input_class="col-10" :is_required="true" v-validate="'required'" :form_errors="errors" :trans="'{{ __("main.title") }}'"></form-group-input-text>
        <!-- Title -->
        <div class="form-group row validated">
            <label class="col-2 col-form-label required" :for="'description'">{{ __('main.description') }}</label>
            <div class="col-10">
                <textarea v-model="fData.description" :name="'description'" class="form-control" placeholder="{{ __('main.description') }}" v-validate="'required'" data-vv-as="{{ __('main.description') }}" :form_errors="errors" :id="'description'"></textarea>
                <span v-if="errors.has('description')" class="invalid-feedback">
                      @{{ errors.first('description') }}
                </span>
            </div>
        </div>

        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.to') }}</label>
            <div class="col-10">
                <Select2 @change="getSendsTo()"  v-validate="'required'"  :options="sends_to" v-model="fData.to" :name="'to'" data-vv-as="{{ __('main.to') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.to') }}'}" />
            </div>
        </div>

        <!-- sendsto -->
        <template v-if="fData.to=='patient'">
            <div class="form-group row validated" >
                <label class="col-3 col-form-label">{{ __('main.select_all') .'  '. __('main.patients') }}:</label>
                <div class="col-3">
                    <span class="kt-switch kt-switch--icon">
                        <label>
                            <input class="form-check-input" type="checkbox" @click="selectAll" v-model="allSelected">
                            <span></span>
                        </label>
                    </span>
                </div>
                <label class="col-1 col-form-label required" v-text="'{{ __("main.search") }}'"></label>
                <input-component input_type="text" input_class="col-5" :name="'search'" v-model="search" :trans="'{{ __("main.search") }}'" :form_errors="errors"></input-component>
            </div><!-- Select All Users -->

            <div class="form-group row validated">
            <label class="col-2 col-form-label">{{ __('main.patients') }}:</label>
            <div class="row col-10 form-group">
                <div class="row col-4" v-for="(user, index) in filteredList" :key="index" :id='user.id'>
                    <label class="col-7 col-form-label" v-text="user.text"></label>
                    <div class="col-5">
                        <span class="kt-switch kt-switch--icon">
                            <label>
                                <input class="form-check-input" type="checkbox" name="users" v-model="fData.users" @click="select" :value="user.id">
                                <span></span>
                            </label>
                        </span>
                    </div>
                </div>
            </div>
        </div><!-- All Users-->
        </template>
        <template v-if="fData.to=='patient_type'">
            <div class="form-group row validated">
                <label class="col-2 col-form-label required">{{ __('main.patient_type') }}</label>
                <div class="col-10">
                    <Select2  :options="patient_types"  v-validate="'required'" v-model="fData.patient_type" :name="'patient_type'" data-vv-as="{{ __('main.patient_type') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.patient_type') }}'}" />
                </div>
            </div><!-- patient_type -->
        </template>
        <template v-if="fData.to=='location'">
            <div class="form-group row validated">
                <label class="col-2 col-form-label required">{{ __('main.location') }}</label>
                <div class="col-10">
                    <Select2  :options="locations"  v-validate="'required'" v-model="fData.location" :name="'location'" data-vv-as="{{ __('main.location') }}" :form_errors="errors" :settings="{placeholder: '{{ __('main.location') }}'}" />
                </div>
            </div><!-- patient_type -->
        </template>
        <template v-if="fData.to=='booking_date'">
            <div class="form-group row validated">
                <label class="col-2 col-form-label required">{{ __('main.booking_date') }}</label>
                <input-component v-validate="'required'" v-model="fData.booking_date" :name="'booking_date'" input_type="date"   input_class="col-10" :form_errors="errors" :trans="'{{ __("main.booking_date") }}'"></input-component>
            </div><!-- booking date -->
        </template>





        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        Payload
                    </h3>
                </div>
            </div>
            <div class="kt-portlet__body">
                <div class="form-group row">
                    <label class="col-2 col-form-label">Payload Entity</label>
                    <div class="col-10">
                        <Select2  :options="payload_entities" v-model="fData.payload_entity" :name="'payload_entity'" data-vv-as="payload_entity" :form_errors="errors" :settings="{placeholder: 'Payload Entity'}" />
                    </div>
                </div>
                <div class="form-group row text-center">
                    <label class="col-lg-2 col-form-label text-left">{{ trans('main.image') }}</label>

                    <div class="col-lg-1">
                        <div class="kt-avatar kt-avatar--outline" id="kt_user_avatar_2">
                            <div class="kt-avatar__holder" :style="'background-image:url({{asset('/storage')}}/'+fData.entity_image+')'"></div>
                            <label class="kt-avatar__upload" data-toggle="kt-tooltip" data-original-title="Change image">
                                <i class="fa fa-pen"></i>
                                <input type="file" id="entity_image" name="entity_image" accept=".png, .jpg, .jpeg">
                            </label>
                        </div>
                    </div>
                </div><!-- Idenities -->
                Image size must be not bigger than 1MB.
                <br>
                Image width must be at least 300px, height at least 200px. Avoid using images wider than 2000 pixels.
            </div>
        </div><!-- Identity Images -->



    </div>
</div>