<patient-orders :routes="routes"
                :events="events"
               inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>Orders</h3>
            <div class="actions">
                <i class="fa fa-plus mtcOverlay addOrderButton"
                   title="Create an order"
                   @click="addOrderAction(0)"
                   href="#basketBuilder"
                   data-no-ajax="1"
                ></i>
            </div>
        </div>
        <div class="row" v-if="orders.length">
            <table class="detailsTable">
                <tr>
                    <th>ID</th>
                    <th>Total</th>
                    <th>Actions</th>
                    <th>Details</th>
                    <th>Items</th>
                    <th>Variation</th>
                    <th>Flags</th>
                </tr>
                <template v-for="(order, index) in orders"
                          v-if="index < display"
                >
                    <tr>
                        <td colspan="10"
                            v-if="order.parent_id === null && index"
                            class="dividerRow"
                        ></td>
                    </tr>
                    <tr v-for="(orderItem, itemIndex) in order.items"
                        :class="{
                            'odd' : order.parent_id !== null,
                            'firstRow' : !itemIndex && order.parent_id === null
                        }"
                    >
                        <td v-html="order.id"
                            v-if="itemIndex === 0"
                            :rowspan="order.items.length"
                        ></td>
                        <td v-if="itemIndex === 0"
                            :rowspan="order.items.length"
                        >
                            <div v-html="'&pound;' + order.cost_total"></div>
                            <div v-if="!order.paid"
                                  class="red smallText"
                            >
                                (Not Paid)
                            </div>
                        </td>
                        <td  v-if="itemIndex === 0"
                             :rowspan="order.items.length"
                             class="actions"
                        >
                            <i class="fa fa-plus-circle mtcOverlay addOrderButton"
                               title="Add sub-order"
                               @click="addOrderAction(order.id)"
                               href="#basketBuilder"
                               data-no-ajax="1"
                            ></i>
                            <i class="fa fa-eye mtcOverlay viewOrderButton"
                               :href="'/shop/admin/orders/manage.order.doctor.php?id=' + order.id"
                               title="View order"
                            ></i>
                            <a :href="'/shop/admin/orders/manage.order.php?id=' + order.id"
                               target="_blank"
                            >
                                <i class="fa fa-pencil"
                                   title="Edit order"
                                ></i>
                            </a>
                            <a :href="'/shop/checkout/basket_overview.php?order_id=' + order.id"
                               target="_blank"
                               v-if="!order.paid"
                            >
                                <i class="fa fa-credit-card"
                                   title="Pay"
                                ></i>
                            </a>
                            <i class="fa fa-sticky-note-o mtcOverlay addPatientNoteButton"
                               title="Add a note"
                               @click="addNoteAction(order.id)"
                               href="#addPatientNote"
                               data-no-ajax="1"
                            ></i>
                        </td>
                        <td v-if="itemIndex === 0"
                            :rowspan="order.items.length"
                        >
                            <div v-html="order.status"></div>
                            <div class="detailsText">
                                @ <span v-html="order.datetime"></span>
                            </div>
                        </td>
                        <td>
                            <span v-html="orderItem.quantity"></span> x <span v-html="orderItem.item_name"></span>
                        </td>
                        <td v-html="orderItem.size"></td>
                        <td>
                            <i v-if="orderItem.approved === 1"
                               class="fa fa-check green"
                               title="Approved"
                            ></i>
                            <i v-if="orderItem.approved === 2"
                               class="fa fa-ban red"
                               title="Rejected"
                            ></i>
                            <i v-if="order.status === 8"
                               class="fa fa-info-circle beige"
                               title="Waiting for response"
                            ></i>
                            <i v-if="orderItem.clinic_checked"
                               class="fa fa-check-circle green"
                               title="Clinically Checked"
                            ></i>
                        </td>
                    </tr>
                </template>
            </table>
            <div class="loadMore" v-if="canLoadMore">
                <a href="#" @click.prevent="loadMore">
                    Load more... (<span v-html="display"></span> of <span v-html="orders.length"></span>)
                </a>
            </div>
        </div>
        <p class="textMuted" v-else>
            <em>Patient has no orders</em>
        </p>
    </div>
</patient-orders>