<div id="editPatientTreatment">
    <edit-patient-treatment :routes="routes"
                            :edit-treatment="editTreatment"
                            :treatment-data="treatment"
                            inline-template
    >
        <div v-show="editTreatment">
            <h3>
                <span v-html="treatment.id ? 'Edit' : 'Add'"></span>
                treatment
            </h3>
            <div class="newForm">
                <div v-if="product" class="row">
                    <strong>Treatment: </strong>
                    <span v-html="product.name"></span>
                    <i class="fa fa-pencil"
                       @click="resetProduct"
                    ></i>
                </div>
                <div class="row"
                     :class="{'errorWrap showError' : errors.item_id}"
                     v-else
                >
                    <label for="treatmentNotes"
                           class="formLabel"
                    >
                        Treatment
                    </label>
                    <div class="inputWrap relative">
                        <input type="text"
                               name="id"
                               id="itemQuery"
                               value=""
                               v-model="itemQuery"
                               @keyup="searchItems"
                               autocomplete="off"
                        />
                        <div class="searchResults" v-if="foundItems.length > 0">
                            <table class="manage-items">
                                <tr>
                                    <th class="center">Product ID</th>
                                    <th>Name</th>
                                    <th>Size</th>
                                    <th>Price</th>
                                    <th>Stock</th>
                                </tr>
                                <tbody class="tabular">
                                <tr v-for="item in foundItems"
                                    @click="selectItem(item)"
                                    class="pointerCursor"
                                >
                                    <td v-html="item.id"></td>
                                    <td v-html="item.name"></td>
                                    <td v-html="item.size"></td>
                                    <td v-html="'&pound;' + (item.size ? item.size_price : item.price)"></td>
                                    <td v-html="item.size ? item.size_stock : item.stock"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="clearItemSearch"
                             v-if="itemQuery.length > 0"
                        >
                            <i class="fa fa-close red"
                               @click="clearItemSearch"
                            ></i>
                        </div>
                    </div>
                    <div class="validationMessage"
                         v-if="errors.item_id"
                         v-html="errors.item_id"
                    ></div>
                </div>
                <div class="row"
                     :class="{'errorWrap showError' : errors.date_from}"
                >
                    <label for="treatmentDateFrom"
                           class="formLabel"
                    >
                        Date From
                        <span class="formRequired">*</span>
                    </label>
                    <div class="inputWrap">
                        <input type="text"
                               class="datepicker short"
                               id="treatmentDateFrom"
                               placeholder="DD/MM/YYYY"
                               autocomplete="off"
                        >
                    </div>
                    <div class="validationMessage"
                         v-if="errors.date_from"
                         v-html="errors.date_from"
                    ></div>
                </div>
                <div class="row"
                     :class="{'errorWrap showError' : errors.date_to}"
                >
                    <label for="treatmentDateTo"
                           class="formLabel"
                    >
                        Date To
                    </label>
                    <div class="inputWrap">
                        <input type="text"
                               class="datepicker short"
                               id="treatmentDateTo"
                               placeholder="DD/MM/YYYY"
                               autocomplete="off"
                        >
                    </div>
                    <div class="validationMessage"
                         v-if="errors.date_to"
                         v-html="errors.date_to"
                    ></div>
                </div>
                <div class="row">
                    <label for="treatmentNotes"
                           class="formLabel"
                    >
                        Note
                    </label>
                    <div class="inputWrap">
                        <input type="text"
                               id="treatmentNotes"
                               v-model="treatment.notes"
                        >
                    </div>
                </div>
                <div class="row">
                    <div v-if="errors['general']"
                         class="validationMessage"
                    >
                        <span v-html="errors['general']"></span>
                    </div>
                </div>
                <div class="row btn-section">
                    <input type="button"
                           class="btn button"
                           value="Save"
                           @click="store"
                    >
                    <input type="button"
                           class="btn button"
                           value="Cancel"
                           id="btn_cancel"
                           @click="cancel()"
                    >
                    <input type="button"
                           class="btn delete floatRight"
                           :value="deletePrompt ? 'Confirm deletion' : 'Delete'"
                           id="btn_delete"
                           v-if="treatment.id"
                           @click="deleteAction()"
                    >
                </div>
            </div>
        </div>
    </edit-patient-treatment>
</div>