<can-import from="bit-tabs/unstyled"/>
<can-import from="~/components/order/details.component" />

<div class="order-form">
  {{#if(this.restaurantPromise.isPending)}}
    <div class="loading"></div>
  {{else}}
    {{#if(this.saveStatus.isResolved)}}
      <pmo-order-details order:from="this.saveStatus.value"></pmo-order-details>
      <p><a href="javascript://" on:click="this.startNewOrder()">
        Place another order
      </a></p>
    {{else}}
      <h3>Order from {{this.restaurant.name}}</h3>

      <form on:submit="this.placeOrder(scope.event)">
        <bit-tabs tabsClass:raw="nav nav-tabs">
          <p class="info {{^if(this.order.items.length)}}text-error{{else}}text-success{{/if}}">
            {{^if(this.order.items.length)}}
              Please choose an item
            {{else}}
              {{this.order.items.length}} selected
            {{/if}}
          </p>
          <bit-panel title:raw="Lunch menu">
            <ul class="list-group">
              {{#for(item of this.restaurant.menu.lunch)}}
                <li class="list-group-item">
                  <label>
                    <input type="checkbox"
                      on:change="this.order.items.toggle(item)"
                      {{#if(this.order.items.has(item))}}checked{{/if}}>
                    {{item.name}} <span class="badge">${{item.price}}</span>
                  </label>
                </li>
              {{/for}}
            </ul>
          </bit-panel>
          <bit-panel title:raw="Dinner menu">
            <ul class="list-group">
              {{#for(item of restaurant.menu.dinner)}}
                <li class="list-group-item">
                  <label>
                    <input type="checkbox"
                      on:change="this.order.items.toggle(item)"
                      {{#if(this.order.items.has(item))}}checked{{/if}}>
                    {{item.name}} <span class="badge">${{item.price}}</span>
                  </label>
                </li>
              {{/for}}
            </ul>
          </bit-panel>
        </bit-tabs>

        <div class="form-group">
          <label class="control-label">Name:</label>
          <input name="name" type="text" class="form-control"
            value:bind="this.order.name">
          <p>Please enter your name.</p>
        </div>
        <div class="form-group">
          <label class="control-label">Address:</label>
          <input name="address" type="text" class="form-control"
            value:bind="this.order.address">
          <p class="help-text">Please enter your address.</p>
        </div>
        <div class="form-group">
          <label class="control-label">Phone:</label>
          <input name="phone" type="text" class="form-control"
            value:bind="this.order.phone">
          <p class="help-text">Please enter your phone number.</p>
        </div>
        <div class="submit">
          <h4>Total: ${{this.order.total}}</h4>
          {{#if(this.saveStatus.isPending)}}
            <div class="loading"></div>
          {{else}}
            <button type="submit"
                {{^if(this.canPlaceOrder)}}disabled{{/if}} class="btn">
              Place My Order!
            </button>
          {{/if}}
        </div>
      </form>
    {{/if}}
  {{/if}}
</div>
