@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" :class="{'validated' : errors.has('date')}">
            <label class="col-2 col-form-label required">{{ __('main.date') }}</label>
            <div class="col-9">
                <input  type="date" class="form-control" v-model="fData.date" :name="'date'" :id="'date'" :class="{'is-invalid' : errors.has('date')}" v-validate="'required'"   data-vv-as="{{ __('main.date') }}"  :placeholder="'{{ __('main.date') }}'">
                <div v-if="errors.has('enabled_date')" class="invalid-feedback">@{{ errors.first('date') }}</div>
            </div>
        </div>
        <div class="form-group row validated">
            <label class="col-2 col-form-label required">{{ __('main.clinics') }}</label>
            <div class="col-9">
                <Select2  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">
            <div class="col-5"></div>
            <div class="col-7">
                <button class="btn btn-brand btn-elevate" @click="send()">{{__('main.report')}}</button>
            </div>
        </div>
        <template v-if="return_data">
            <div class="form-group row validated">
                <label class="col-5 col-form-label"></label>
                <label class="col-2 col-form-label">
                    <h3>Result</h3>
                </label>
            </div><!-- result -->
            <div class="form-group row validated">
                <label class="col-2 col-form-label"></label>
                <div class="col-9">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <td>Clinic</td>
                            <td>Date</td>
                            <td>Total Fees</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                @{{ return_data.clinic }}
                            </td>
                            <td>
                                @{{ return_data.date }}
                            </td>
                            <td>
                                @{{ return_data.total_fees }}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div><!-- result -->
        </template>
    </div>
</div>