<div id="basketBuilder">
    <div class="basket-builder-scroll">
        <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"
                                       @input="debouncedSearchMembers"
                                />
                            </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>
                            <div v-if="stage === 'build'">
                                <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"
                                           @input="debouncedsearchItems"
                                    />
                                    <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>
                        <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" :key="(item.id || 'custom') + '-' + (item.size || index)">
                                    <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"
                                                v-model.number="item.quantity"
                                                @input="calculateTotals"
                                                min="0"
                                                step="1"
                                        />
                                    </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 && showBuilder"
                        >
                            <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>
</div>
