<div id="editReviewForm">
    <edit-review-form :routes="routes"
                      :events="events"
                      :patient-data="patient"
                      :review-id="reviewId"
                      :is-inline="showReview"
                      :parent="component"
                      inline-template
    >
        <div v-show="showReview">
            <form class="style">
                <fieldset class="show">
                    <h1>
                        <a class="show el">
                            Details
                            <i class="fa fa-caret-right"></i>
                        </a>
                    </h1>

                    <template v-if="!review.id">
                        <div class="row">
                            <label for="review_type_id">
                                Use Review Type
                            </label>
                            <select id="review_type_id"
                                    v-model="reviewTypeIndex"
                            >
                                <option :value="null">
                                    -
                                </option>
                                <option v-for="(reviewType, index) in reviewTypes"
                                        v-html="reviewType.name"
                                        :value="index"
                                ></option>
                            </select>
                        </div>
                        <template v-if="parent === 'edit-review'">
                            <div class="row">
                                <label for="patientQuery">
                                    Select Patient
                                </label>
                                <input type="text"
                                       name="id"
                                       id="patientQuery"
                                       value=""
                                       v-model="patientQuery"
                                       @keyup="searchPatients"
                                />
                            </div>
                            <div v-if="patients.length">
                                <table class="manage-items">
                                    <tbody class="tabular">
                                    <tr>
                                        <th class="center">ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Address</th>
                                    </tr>
                                    <tr v-for="patient in patients"
                                        @click="selectPatient(patient)"
                                        class="pointerCursor"
                                    >
                                        <td class="center" v-html="patient.id"></td>
                                        <td>
                                            <span v-html="patient.firstname"></span>
                                            <span v-html="patient.lastname"></span>
                                        </td>
                                        <td v-html="patient.email"></td>
                                        <td v-html="patient.contact_no"></td>
                                        <td>
                                            <span v-html="patient.address1"></span>,
                                            <span v-html="patient.address2 ? patient.address2 + ',' : ''"></span>
                                            <span v-html="patient.city"></span>,
                                            <span v-html="patient.postcode"></span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </template>
                    </template>
                    <div v-if="parent === 'edit-review' && patient && patient.id > 0">
                        <div class="patientDetails">
                            <table>
                                <tr>
                                    <td>ID</td>
                                    <td v-html="patient.id"></td>
                                </tr>
                                <tr>
                                    <td>Name</td>
                                    <td>
                                        <a :href="getPatientProfileURL(patient.id)"
                                           v-html="patient.firstname + ' ' + patient.lastname"
                                        ></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td v-html="patient.email"></td>
                                </tr>
                                <tr>
                                    <td>Phone</td>
                                    <td v-html="patient.contact_no"></td>
                                </tr>
                                <tr>
                                    <td>Billing Address</td>
                                    <td>
                                        <span v-html="patient.address1"></span>,
                                        <span v-html="patient.address2 ? patient.address2 + ',' : ''"></span>
                                        <span v-html="patient.city"></span>,
                                        <span v-html="patient.postcode"></span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.medium}"
                    >
                        <label for="medium">
                            Medium
                        </label>
                        <select id="medium"
                                v-model="review.medium"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="(medium, key) in mediums"
                                    v-html="medium"
                                    :value="key"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.medium"
                             v-html="errors.medium"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.status}"
                         v-show="showStatus"
                    >
                        <label for="status">
                            Status
                        </label>
                        <select id="status"
                                v-model="review.status"
                        >
                            <option v-for="(status, key) in statuses"
                                    v-html="status"
                                    :value="key"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.status"
                             v-html="errors.status"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.user_id}"
                    >
                        <label for="user_id">
                            Assigned to
                        </label>
                        <select id="user_id"
                                v-model="review.user_id"
                        >
                            <option :value="null">-</option>
                            <option v-for="user in users"
                                    v-html="user.name"
                                    :value="user.id"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.user_id"
                             v-html="errors.user_id"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.form_id}"
                    >
                        <label for="form_id">
                            Assessment Form
                        </label>
                        <select id="form_id"
                                v-model="review.form_id"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="form in forms"
                                    v-html="form.name"
                                    :value="form.id"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.form_id"
                             v-html="errors.form_id"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.type}"
                    >
                        <label for="type">
                            Type
                        </label>
                        <select id="type"
                                v-model="review.type"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="(type, key) in types"
                                    v-html="type"
                                    :value="key"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.type"
                             v-html="errors.type"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.category_id}"
                    >
                        <label for="category_id">
                            Category
                        </label>
                        <select id="category_id"
                                v-model="review.category_id"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="category in categories"
                                    v-html="category.intended_name"
                                    :value="category.id"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.category_id"
                             v-html="errors.category_id"
                        ></div>
                    </div>
                    <div class="row"
                         :class="{'errorWrap showError' : errors.notes}"
                    >
                        <label for="notes">
                            Notes
                        </label>
                        <textarea type="text"
                               id="notes"
                               v-model="review.notes"
                        ></textarea>
                        <div class="validationMessage"
                             v-if="errors.notes"
                             v-html="errors.notes"
                        ></div>
                    </div>
                    <div class="row"
                         v-if="!review.id"
                    >
                        <label for="">
                            Due in
                        </label>
                        <table class="multiRadio">
                            <tr v-for="(option, date, index) in dateOptions">
                                <td>
                                    <input type="radio"
                                           :id="'dateOption' + index"
                                           :value="date"
                                           v-model="dateOption"
                                    />
                                </td>
                                <td>
                                    <label :for="'dateOption' + index"
                                           v-html="option"
                                    ></label>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="row"
                         :class="{'errorWrap showError' : errors.due_date}"
                    >
                        <label for="due_date">
                            Due date
                        </label>
                        <input type="text"
                               id="due_date"
                               class="datepicker short"
                               v-model="review.due_date"
                               placeholder="DD/MM/YYYY"
                        >
                        <div class="validationMessage"
                             v-if="errors.due_date"
                             v-html="errors.due_date"
                        ></div>
                    </div>
                </fieldset>
                <div class="success" v-if="success" v-html="success"></div>

                <input type="submit" value="Save" @click.prevent="store()" />
            </form>
            <div v-show="review.id > 0">
                <div class="card">
                    {% include 'admin/patients/includes/patientBpTrack.twig' %}
                </div>
                <div class="card">
                    {% include 'admin/patients/includes/patientWeightTrack.twig' %}
                </div>
                <div class="card">
                    {% include 'admin/patients/includes/patientAssessments.twig' %}
                </div>
            </div>
        </div>
    </edit-review-form>
</div>