<div id="basketBuilder">
    <basket-builder-form :member-data="patient"
                         :parent-id="orderParentId"
                         :is-inline="showBasketBuilder"
                         :events="events"
                         inline-template
    >
        <div v-show="showBuilder">
            <form action="" method="GET" class="style">
                <fieldset class="show">
                    <template v-if="showMemberSearch">
                        <h3>
                            Member:
                        </h3>
                        <div class="row">
                            <label for="memberQuery">
                                Select Member
                            </label>
                            <input type="text"
                                   name="id"
                                   id="memberQuery"
                                   value=""
                                   v-model="memberQuery"
                                   @keyup="searchMembers"
                            />
                        </div>
                        <div v-if="members.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="member in members"
                                    @click="selectMember(member)"
                                    class="pointerCursor"
                                >
                                    <td class="center" v-html="member.id"></td>
                                    <td>
                                        <span v-html="member.firstname"></span>
                                        <span v-html="member.lastname"></span>
                                    </td>
                                    <td v-html="member.email"></td>
                                    <td v-html="member.contact_no"></td>
                                    <td>
                                        <span v-html="member.address1"></span>,
                                        <span v-html="member.address2 ? member.address2 + ',' : ''"></span>
                                        <span v-html="member.city"></span>,
                                        <span v-html="member.postcode"></span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </template>
                    <div v-if="member.id > 0">
                        <div class="memberDetails" v-if="showMemberSearch">
                            <table>
                                <tr>
                                    <td>ID</td>
                                    <td v-html="member.id"></td>
                                </tr>
                                <tr>
                                    <td>Name</td>
                                    <td v-html="member.firstname + ' ' + member.lastname"></td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td v-html="member.email"></td>
                                </tr>
                                <tr>
                                    <td>Phone</td>
                                    <td v-html="member.contact_no"></td>
                                </tr>
                                <tr>
                                    <td>Billing Address</td>
                                    <td>
                                        <span v-html="member.address1"></span>,
                                        <span v-html="member.address2 ? member.address2 + ',' : ''"></span>
                                        <span v-html="member.city"></span>,
                                        <span v-html="member.postcode"></span>
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <h3>
                            Basket Items:
                        </h3>
                        <div class="row positionRelative" v-if="!customItemMode">
                            <label for="memberQuery">
                                Search Items
                            </label>
                            <input type="text"
                                   name="id"
                                   id="itemQuery"
                                   value=""
                                   v-model="itemQuery"
                                   @keyup="searchItems"
                            />
                            <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 v-if="!customItemMode">
                            <button type="button"
                                    class="button btn"
                                    @click="showCustomItem"
                            >
                                Add Custom Item
                            </button>
                        </div>
                        <div v-else>
                            <div class="row">
                                <label for="customItemName">
                                    Product Name
                                </label>
                                <input type="text"
                                       name="customItemName"
                                       id="customItemName"
                                       v-model="customItem.name"
                                       placeholder=""
                                />
                            </div>
                            <div class="row">
                                <label for="customItemStrength">
                                    Strength
                                </label>
                                <input type="text"
                                       name="customItemStrength"
                                       id="customItemStrength"
                                       v-model="customItem.strength"
                                       placeholder=""
                                />
                            </div>
                            <div class="row">
                                <label for="customItemQuantity">
                                    Quantity
                                </label>
                                <input type="number"
                                       name="customItemQuantity"
                                       id="customItemQuantity"
                                       v-model="customItem.qty"
                                       placeholder=""
                                />
                            </div>
                            <div class="row">
                                <label for="customItemPrice">
                                    Price (£)
                                </label>
                                <input type="text"
                                       name="customItemPrice"
                                       id="customItemPrice"
                                       v-model="customItem.size_price"
                                       placeholder=""
                                />
                            </div>
                            <div>
                                <button type="button"
                                        class="button btn"
                                        @click="addCustomItem"
                                >
                                    Add To Basket
                                </button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <table class="manage-items" v-if="items.length > 0">
                            <tr>
                                <th class="center">ID</th>
                                <th>Name</th>
                                <th>Size</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Total</th>
                                <th class="center">Remove</th>
                            </tr>
                            <tbody class="tabular">
                            <tr v-for="(item, index) in items">
                                <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>
                                    <input type="number"
                                           :value="item.quantity"
                                           @keyup="amendQuantity(index, $event)"
                                    >
                                </td>
                                <td v-html="'&pound;' + item.total"></td>

                                <td class="center">
                                    <i class="fa fa-close red pointerCursor"
                                       @click="removeItem(index)"
                                    ></i>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" class="textRight">
                                    <strong>Total:</strong>
                                </td>
                                <td colspan="2"
                                    v-html="'&pound;' + itemsTotal"
                                    class="bold"
                                ></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div v-if="items.length > 0">
                        <h3>
                            Delivery:
                        </h3>

                        <div class="row">
                            <label for="deliveryMethod">
                                Delivery Method
                            </label>
                            <select id="deliveryMethod"
                                    v-model="deliveryMethodId"
                            >
                                <option value="0">--- Please select ---</option>
                                <option v-for="method in deliveryMethods"
                                        v-html="method.name + ' (&pound;' + method.cost + ')'"
                                        :value="method.id"
                                ></option>
                            </select>
                        </div>
                        <div class="row">
                            <label for="shippingFirstname">
                                First Name
                            </label>
                            <input type="text"
                                   name="shippingFirstname"
                                   id="shippingFirstname"
                                   v-model="member.address_shipping.firstname"
                                   placeholder="First Name"
                            />
                        </div>
                        <div class="row">
                            <label for="shippingLastname">
                                Last Name
                            </label>
                            <input type="text"
                                   name="shippingLastname"
                                   id="shippingLastname"
                                   v-model="member.address_shipping.lastname"
                                   placeholder="Last Name"
                            />
                        </div>
                        <div class="row">
                            <label for="shippingAddress1">
                                Address 1
                            </label>
                            <input type="text"
                                   name="shippingAddress1"
                                   id="shippingAddress1"
                                   v-model="member.address_shipping.address1"
                                   placeholder="Address 1"
                            />
                        </div>
                        <div class="row">
                            <label for="shippingAddress2">
                                Address 2
                            </label>
                            <input type="text"
                                   name="shippingAddress2"
                                   id="shippingAddress2"
                                   v-model="member.address_shipping.address2"
                                   placeholder="Address 2"
                            />
                        </div>
                        <div class="row">
                            <label for="shippingCity">
                                City
                            </label>
                            <input type="text"
                                   name="shippingCity"
                                   id="shippingCity"
                                   v-model="member.address_shipping.city"
                                   placeholder="City"
                            />
                        </div>
                        <div class="row">
                            <label for="shippingPostcode">
                                Postcode
                            </label>
                            <input type="text"
                                   name="shippingPostcode"
                                   id="shippingPostcode"
                                   v-model="member.address_shipping.postcode"
                                   placeholder="Postcode"
                            />
                        </div>
                        <div class="search-button">
                            <button type="button"
                                    class="button btn"
                                    @click="submitBasket"
                            >
                                Create Basket
                            </button>
                        </div>
                    </div>
                    <div class="successBlock"
                         v-if="success"
                    >
                        <div v-html="successText"></div>
                        <div>
                            Link for payment:
                            <a :href="'{{ settings.SITE_URL }}/shop/checkout/basket_overview.php?order_id=' + orderId"
                               v-html="'{{ settings.SITE_URL }}/shop/checkout/basket_overview.php?order_id=' + orderId"
                            ></a>
                        </div>
                        <div class="clearBoth">
                            <a type="button"
                               class="button btn"
                               :href="'/shop/admin/orders/manage.order.php?id=' + orderId"
                               target="_blank"
                            >
                                View order
                            </a>
                            <button type="button"
                                    class="button btn"
                                    @click="sendToMember"
                            >
                                Send link to member
                            </button>
                            <button type="button"
                                    class="button btn"
                                    @click="copyURL"
                            >
                                Copy Payment URL
                            </button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </basket-builder-form>
</div>