<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">
                <!-- Selected product summary -->
                <div v-if="product" class="row">
                    <strong>Treatment: </strong>
                    <span v-html="product.name"></span>
                    <i class="fa fa-pencil" @click="resetProduct"></i>
                </div>

                <!-- Product search -->
                <div class="row" :class="{'errorWrap showError' : firstError('item_id')}" v-else>
                    <label for="treatmentNotes" class="formLabel">Treatment</label>
                    <div class="inputWrap relative">
                        <input type="text"
                               id="itemQuery"
                               v-model="itemQuery"
                               @input="debouncedSearchItems"
                               autocomplete="off"
                        />

                        <!-- Results dropdown -->
                        <div class="resultsDropdown"
                             v-show="hasResults"
                             style="position:absolute; z-index:10000; background:#fff; border:1px solid #ddd; max-height:320px; overflow:auto; width:100%; box-shadow:0 6px 16px rgba(0,0,0,.12);">
                            <table class="manage-items" style="width:100%; border-collapse:collapse;">
                                <thead>
                                <tr>
                                    <th class="center">Product ID</th>
                                    <th>Name</th>
                                    <th>Size</th>
                                    <th>Price</th>
                                    <th>Stock</th>
                                </tr>
                                </thead>
                                <tbody class="tabular">
                                <tr v-for="item in foundItems"
                                    :key="item.id + '-' + (item.size_id || 'base')"
                                    @click="selectItem(item)"
                                    class="pointerCursor"
                                    style="cursor:pointer;">
                                    <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>

                        <!-- Clear search -->
                        <div class="clearItemSearch" v-if="(itemQuery || '').length > 0">
                            <i class="fa fa-close red" @click="clearItemSearch"></i>
                        </div>
                    </div>

                    <!-- Validation -->
                    <div class="validationMessage"
                         v-if="firstError('item_id')"
                         v-html="firstError('item_id')"
                    ></div>
                </div>

                <!-- Dates -->
                <div class="row" :class="{'errorWrap showError' : firstError('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="firstError('date_from')"
                         v-html="firstError('date_from')"
                    ></div>
                </div>

                <div class="row" :class="{'errorWrap showError' : firstError('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="firstError('date_to')"
                         v-html="firstError('date_to')"
                    ></div>
                </div>

                <!-- Notes -->
                <div class="row">
                    <label for="treatmentNotes" class="formLabel">Note</label>
                    <div class="inputWrap">
                        <input type="text" id="treatmentNotes" v-model="treatment.notes">
                    </div>
                </div>

                <!-- General error -->
                <div class="row">
                    <div class="validationMessage" v-if="firstError('_general')">
                        <span v-html="firstError('_general')"></span>
                    </div>
                </div>

                <!-- Actions -->
                <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>
