<div class="page page-orders" ng-controller="OrdersListCtrl">

  <div class="pageheader">

    <h2>Manage Orders</h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a ui-sref="app.orders.list">Manage Orders</a>
        </li>
      </ul>

    </div>

  </div>

  <!-- row -->
  <div class="row">


    <div class="col-md-12">

      <!-- tile -->
      <section class="tile" fullscreen="isFullscreen01">

        <!-- tile header -->
        <div class="tile-header dvd dvd-btm">
          <h1 class="custom-font"><strong>Manage </strong>Orders</h1>
        </div>
        <!-- /tile header -->

        <!-- tile body -->
        <div class="tile-body">


          <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6">
              <input type="text" class="form-control underline-input w-md pull-right mb-20" placeholder="Search..." ng-model="searchText">
            </div>
          </div>

          <div class="table-responsive">
            <table ng-table="tableParams" class="table table-custom" template-pagination="custom/pager">
              <tr ng-repeat="order in $data">
                <td data-title="'ID'" sortable="'id'">
                  <a ui-sref="app.orders.show({id: order.$id})">{{order.id}}</a>
                </td>
                <td data-title="'Date'" sortable="'created_at'">
                  {{order.created_at | date: 'mediumDate'}}
                </td>
                <td data-title="'Customer'" sortable="'customer.name'">
                  {{order.customer.name}}
                </td>
                <td data-title="'Status'" sortable="'status'">
                  <span class="label" ng-class="{'bg-success' : order.status == 'approved','bg-warning' : order.status == 'pending','bg-lightred' : order.status == 'cancelled','bg-primary' : order.status == 'received'}">
                    {{ order.status }}
                  </span>
                </td>
                <td data-title="'Ship To'" sortable="'shipTo.name'">
                  {{ order.shipTo.name }}, {{ order.shipTo.street }}, {{ order.shipTo.city }} {{ order.shipTo.zip }}, {{ order.shipTo.country }}
                </td>
                <td data-title="'Total'" sortable="'subTotal'">
                  {{order.subTotal | currency }}
                </td>
                <td data-title="'Actions'" class="actions">
                  <div class="text-left rounded-dropdown" uib-dropdown>
                    <button type="button" class="btn btn-default btn-sm btn-rounded-20" uib-dropdown-toggle>
                      <span>
                        <span ng-class="{'text-success' : order.status == 'approved','text-warning' : order.status == 'pending','text-lightred' : order.status == 'cancelled','text-primary' : order.status == 'received'}">{{order.status}}</span>
                        <i class="fa fa-chevron-down"></i>
                      </span>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="single-button">
                      <li role="menuitem"><a href="javascript:;" ng-click="changeStatus(order, 'pending')">Pending</a></li>
                      <li role="menuitem"><a href="javascript:;" ng-click="changeStatus(order, 'approved')">Approved</a></li>
                      <li role="menuitem"><a href="javascript:;" ng-click="changeStatus(order, 'cancelled')">Cancelled</a></li>
                      <li role="menuitem"><a href="javascript:;" ng-click="changeStatus(order, 'received')">Received</a></li>
                    </ul>
                  </div>
                  <button class="btn-nostyle delete" ng-disabled="order.status !== 'cancelled'" ng-click="delete(order)">Delete</button>
                </td>

              </tr>
            </table>
            <script type="text/ng-template" id="custom/pager">
              <div class="ng-cloak ng-table-pager mt-20" ng-if="params.data.length">

                <div ng-if="params.settings().counts.length" class="ng-table-counts btn-group pull-right">

                  <select ng-options="count for count in params.settings().counts" ng-model="params.$params.count" class="form-control"></select>

                </div>

                <ul class="pagination pagination-xs pagination-custom">
                  <li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
                    <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">Previous</a>
                    <a ng-switch-when="first" ng-click="params.page(page.number)" href="">
                      <span ng-bind="page.number"></span>
                    </a>
                    <a ng-switch-when="page" ng-click="params.page(page.number)" href="">
                      <span ng-bind="page.number"></span>
                    </a>
                    <a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a>
                    <a ng-switch-when="last" ng-click="params.page(page.number)" href="">
                      <span ng-bind="page.number"></span>
                    </a>
                    <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next</a>
                  </li>
                </ul>
              </div>
            </script>

          </div>


        </div>
        <!-- /tile body -->

      </section>
      <!-- /tile -->

    </div>

  </div>
  <!-- /row -->

</div>


