<div class="top-pad"></div>

<div class="content-padding" ng-show="ready">

	<? /* @todo: make this a diff date. write date diff in js */ ?>

	<h1 class="title left"><i class ="fa fa-truck"></i><span>Orders &nbsp;&nbsp;</span></h1>
	<div class="box-filter">
		<button class="button orange" ng-class="{ 'inactive' : !show.all }" ng-click="show.all = true">All</button>
		<button class="button orange" ng-class="{ 'inactive' : show.all }" ng-click="show.all = false">Mine</button>
	</div>

	<div class="divider"></div>

	<div ng-if="!showOrders">
		<div class="dialog-message dialog-message-nice">
			Hi! This is where you will see orders during your shift.
		</div>
	</div>

	<div ng-if="showOrders">

		<div class="dialog-message dialog-message-nice">
			&#x1F481;
			<b>In order to get paid</b></br> <div class="dialog-subtext">you MUST mark your orders as accepted & delivered and double check you received EXACTLY correct food at each restaurant.</div>
		</div>


		<div class="drivers-order-list">

			<div ng-if="driverorders.length">

				<div class="box-content item order-item-wrap {{order.status.status}}" ng-repeat="order in driverorders | filter:filterOrders" ng-class="{'pre-ordered': order.preordered && !order.preordered.could_be_accepted }">
					<div ng-class="{'notMyOrder': order.status.driver.id_admin !== account.user.id_admin, 'myOrder': order.status.driver.id_admin == account.user.id_admin}">
						<h6 class="row-status" ng-if="order.status.status == 'canceled' || ( order.status.driver.id_admin !== account.user.id_admin && order.status.status !== 'new' )">

							<span ng-switch="order.status.status">
								<span ng-switch-when="delivered">Delivered</span>
								<span ng-switch-when="pickedup">Picked up</span>
								<span ng-switch-when="accepted">Accepted</span>
								<span ng-switch-when="canceled">Canceled</span>
								<span> by <b>{{order.status.driver.name}}</b> @ {{order.status.timestamp | tsToHour}}</span>
							</span>
						</h6>

						<div class="order-item-content">
							<!-- action -->
							<div class="column-action" ng-if="!order.preordered || ( order.preordered && order.preordered.could_be_accepted )">

								<button class="button orange-on-orange button-pushable" ng-click="accept(order.id_order)" ng-if="order.status.status == 'new' || !order.status.status" > Accept </button>
								<button class="button green-on-green button-pushable" ng-click="pickedup(order.id_order)" ng-if="order.status.driver.id_admin == account.user.id_admin && order.status.status == 'accepted'"> Picked up </button>
								<button class="button dgray-on-dgray button-pushable" ng-click="delivered(order.id_order)" ng-if="order.status.driver.id_admin == account.user.id_admin && order.status.status == 'pickedup' && !order.require_signature "> Delivered </button>
								<a href="/drivers/order/signature/{{order.id_order}}" ng-if="order.status.driver.id_admin == account.user.id_admin && order.status.status == 'pickedup' && order.require_signature">
									<button class="button light-blue button-pushable"> Customer Signature </button>
								</a>
								<button class="button lgray-on-lgray button-pushable" ng-click="showOrder(order.id_order)" ng-if="order.status.driver.id_admin == account.user.id_admin && order.status.status == 'delivered' "> View </button>
							</div>

							<!-- date -->
							<div ng-if="!order.preordered || ( order.preordered && order.preordered.could_be_accepted )">
								<div ng-if="order.status.status != 'canceled'">

									<a ng-click="showOrder( order.id_order )">

										<div class="column-date" ng-click="showOrder( order.id_order )">
											<?//<h3 class="day">{{order._date | date:'MM/dd'}}</h3> ?>
											<div class="orderid">{{order.id_order | limitTo:-3:0}}</div>
											<div class="order-details">details</div>
											<div class="hour">{{order.timestamp | tsToHour}}</div>
										</div>

										<!-- vertical divider -->
										<div class="vert-divider"></div>
									</a>
								</div>

								<div ng-if="order.status.status == 'canceled'">
									<div class="column-date">
										<?//<h3 class="day">{{order._date | date:'MM/dd'}}</h3> ?>
										<div class="orderid">{{order.id_order | limitTo:-3:0}}</div>
										<div class="order-details">details</div>
										<div class="hour">{{order.timestamp | tsToHour}}</div>
									</div>

									<!-- vertical divider -->
									<div class="vert-divider"></div>
								</div>
							</div>

							<div ng-if="order.preordered && !order.preordered.could_be_accepted">

								<div>
									<div class="column-date">
										<div class="order-pre-order-title">
											Pre-order
										</div>
										<div class="order-pre-order-subtitle">
											Expected Delivery:
										</div>
										<div class="hour">{{order.preordered.date_delivery}}</div>
									</div>

									<!-- vertical divider -->
									<div class="vert-divider"></div>
								</div>

							</div>

							<!-- info -->

							<div class="column-info">

								<div ng-click="openMap( 'query', order.restaurant_address );" ng-if="iOS">
									<div class="restaurant-pointer">
										{{order.restaurant}}
									</div>
								</div>

								<a href="http://maps.google.com/maps?q={{order.restaurant_address}}" ng-if="!iOS" target="_system">
									<div class="restaurant-pointer">
										{{order.restaurant}}
									</div>
								</a>

								<div class="customer-pointer">
									{{order.name}}
									<div class="pre-order-text" ng-if="order.preordered && order.preordered.could_be_accepted">
										<i class="fa fa-clock-o"></i> Pre order. <br> Expected Delivery: {{order.preordered.date_delivery}}
									</div>
								</div>

								<div class="phone-pointer" ng-if="order.status.status == 'new' || order.status.driver.id_admin == account.user.id_admin">
									<a href ng-click="callText(order.phone)">{{order.phone | formatPhone}}</a>
								</div>

								<span ng-if="order.status.status == 'new' || order.status.driver.id_admin == account.user.id_admin">

									<div ng-if="iOS">
										<span>{{oc.order._restaurant_address}}</span>
									</div>

									<div ng-click="openMap( 'query', order.address );" ng-if="iOS && order.address" class="customer-address">
										{{order.addressFirstLine}}
									</div>

									<a href="http://maps.google.com/maps?q={{order.address}}" ng-if="!iOS" target="_system">
										<div ng-if="order.address" class="customer-address">
											{{order.addressFirstLine}}
										</div>
									</a>

								</span>
							</div>
							<div class="divider"></div>
						</div>
					</div>
				</div>
			</div>

			<div ng-if="!driverorders.length">
				<h3>You currently have no orders to deliver.</h3>
			</div>

			<div class="last-updated"><p>Updated <span class="last-updated-time" am-time-ago="newDriverOrders.time.getTime()"></span></p></div>

		</div>

	</div>

</div>
