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

<div class="content-padding">

	<h1 class="left title"><i class="fa fa-dashboard"></i>Dashboard (work in progress)</h1>

	<div class="divider"></div>
	<div class="bar-loader bar-loader-search" ng-class="{'bar-loader-loading': loading}"></div>

	<div class="support-box-wrap box-content2">

		<div class="no-box-content-color">

			<ul class="ul-inputs">
				<li class="li-input" ng-if="communities.length">
					<div class="label">Communities:</div>
					<div class="input">
						<ui-select multiple ng-model="options.communities" theme="select2" close-on-select="true" title="Select a community">
							<ui-select-match placeholder="Select a community...">{{$item.name}}</ui-select-match>
							<ui-select-choices repeat="community.permalink as community in communities | propsFilter: {name: $select.search}">
								{{community.name}}
							</ui-select-choices>
						</ui-select>
					</div>
				</li>
				<li class="li-input">
					<button ng-click="selectNoneCommunity();" class="button button-small button-empty button-border light-gray"><i class="fa fa-minus-circle"></i>&nbsp;&nbsp;Select None</button>
					<button ng-click="selectAllCommunities();" class="button button-small button-empty button-border button-blue"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Select All</button>
					<button ng-click="selectCommunitiesWithShift();" class="button button-small button-empty button-border button-orange"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Communities with shifts</button>
					<button name='refresh' ng-if="options.communities.length" ng-click='loadCommunities()' class="button button-small button-empty button-border button-green"><i class="fa fa-refresh"></i>&nbsp;&nbsp;Load</button>
					<input type="checkbox" name="autoreload" ng-model="options.autoreaload"> Auto reload every 20 seconds
				</li>
			</ul>
		</div>
	</div>

	<div class="support-box-wrap box-content2">
		<div class="support-box-wrap-header">
			<h1>Communities overview</h1>
			<div class="divider"></div>
		</div>
		<div class="no-box-content-color">
			<table class="basic-table tb-zebra table-dashboard">
				<tr>
					<th>Community</th>
					<th>Timezone</th>
					<th>Current time</th>
					<th class="center">Unaccepted<br>Orders</th>
					<th class="center">Undelivered<br>Orders</th>
					<th class="center">Pre Orders</th>
					<th class="center">Orders in<br>Transit</th>
					<th class="center">1st Party<br>Delivery Orders</th>
					<th class="center">Drivers<br>working</th>
					<th>Shifts today</th>
					<th class="center">Drivers Actively<br>Delivering</th>
				</tr>
				<tr ng-repeat="community in dashboard">
					<td><a href="/community/{{community.community.permalink}}">{{community.community.name}}</a></td>
					<td>{{community.community.timezone}}</td>
					<td>{{clock | convertimeformat:community.community.timezone:'h:mm a'}}</td>
					<td ng-click="modalOrders(community.orders.unaccepted, community.community.name  + ': Unaccepted Orders')" class="dashboard-light" ng-class="{'dashboard-warning':community.total_unaccepted_orders}">{{community.total_unaccepted_orders}}</td>
					<td ng-click="modalOrders(community.orders.undelivered, community.community.name  + ': Undelivered Orders', true)" class="dashboard-light" ng-class="{'dashboard-warning':community.total_undelivered_orders}">{{community.total_undelivered_orders}}</td>
					<td ng-click="modalOrders(community.orders.pre_order, community.community.name  + ': Pre Orders', true)" class="dashboard-light" ng-class="{'dashboard-warning':community.total_pre_orders}">{{community.total_pre_orders}}</td>

					<td ng-click="modalOrders(community.orders.in_transit, community.community.name  + ': Orders in Transit', true)" class="dashboard-light" ng-class="{'dashboard-ok':community.total_in_transit_orders}">{{community.total_in_transit_orders}}</td>

					<td ng-click="modalOrders(community.orders.first_party_orders, community.community.name  + ': 1st Delivery Orders')" class="dashboard-light" ng-class="{'dashboard-ok':community.total_first_party_orders}">{{community.total_first_party_orders}}</td>
					<td ng-click="modalDrivers(community.current_drivers, community.community.name  + ': Drivers working')" class="dashboard-light" ng-class="{'dashboard-ok':community.total_current_drivers}">{{community.total_current_drivers}}</td>
					<td ng-click="modalDrivers(community.shifts_today, community.community.name  + ': Shifts today')"class="dashboard-light" ng-class="{'dashboard-ok':community.total_shifts_today}">{{community.total_shifts_today}}</td>
					<td ng-click="modalDrivers(community.actively_delivering_drivers, community.community.name  + ': Drivers Actively Delivering')"class="dashboard-light" ng-class="{'dashboard-ok':community.total_actively_delivering_drivers}">{{community.total_actively_delivering_drivers}}</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="support-box-wrap box-content2">
		<div class="support-box-wrap-header">
			<h1>Pre-orders</h1>
			<div class="divider"></div>
		</div>
		<div class="no-box-content-color">
			<table class="basic-table tb-zebra table-dashboard">
				<tr>
					<th>#</th>
					<th>Community</th>
					<th>Restaurant</th>
					<th>Customer</th>
					<th>Desired Delivery Time</th>
					<th>Status</th>
					<th>Driver</th>
				</tr>
				<!-- aqui -->
				<tr ng-repeat="order in preorders">
					<td><a href="/order/{{order.id_order}}">{{order.id_order}}</a></td>
					<td><a href="/community/{{order.community_permalink}}">{{order.community}}</a><br>{{order.timezone}}</td>
					<td><a href="/restaurant/{{order.restaurant_permalink}}">{{order.restaurant}}</a></td>
					<td><a href="/customer/{{order.id_user}}">{{order.name}}</a><br><a href ng-click="callText(order.phone)" class="listview-smaller">{{order.phone | formatPhone}}</td>
					<td>
						<span ng-if="order.timezone != account.user.timezone">
							{{order.date_delivery | convertimeformat:order.timezone:'MMMM Do YYYY, h:mm:ss a'}}
							&nbsp;(<span class="listview-bold">{{order.date_delivery | convertimeformat:order.timezone:'z'}}</span>)
							<br>
						</span>
						{{order.date_delivery | convertimeformat:account.user.timezone:'MMMM Do YYYY, h:mm:ss a'}}
						&nbsp;(<span class="listview-bold">{{order.date_delivery | convertimeformat:account.user.timezone:'z'}}</span>)
					</td>
					<td>
						<span ng-if="order.delivery_service">
							<span class="tag tag-black" ng-if="order.status == 'delivery-canceled'">Canceled</span>
							<span class="tag tag-red" ng-if="!order.status || order.status == 'delivery-new'">Not&nbsp;yet&nbsp;accepted</span>
							<span class="tag tag-green" ng-if="order.status == 'delivery-accepted'">Accepted</span>
							<span class="tag tag-blue" ng-if="order.status == 'delivery-pickedup'">Pickedup</span>
							<span class="tag tag-purple" ng-if="order.status == 'delivery-delivered'">Delivered</span>
						</span>
						<span ng-if="!order.delivery_service && order.restaurant_confirmation">
							<span class="tag tag-red" ng-if="!order.confirmed">Unconfirmed</span>
							<span class="tag tag-green" ng-if="order.confirmed">Confirmed</span>
						</span>
						<span ng-if="!order.delivery_service && !order.restaurant_confirmation">
							<span class="tag tag-grey">Placed</span>
							<span class="tag tag-black" ng-if="order.status == 'delivery-canceled'">Canceled</span>
						</span>
					</td>
					<td>
						<a href="/staff/{{order.driver_login}}">{{order.driver}}</a>
						<br><a href ng-click="callText(order.driver_phone)" class="listview-smaller">{{order.driver_phone | formatPhone}}
					</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="support-boxes">
		<div class="support-box-wrap box-content2">
			<div class="support-box-wrap-header">
				<h1>Drivers working</h1>
				<div class="divider"></div>
			</div>
			<div class="no-box-content-color">
				<table class="basic-table tb-zebra table-dashboard">
					<tr>
						<th>Community</th>
						<th>Driver</th>
						<th>Action</th>
						<th class="tb-small"></th>
					</tr>

					<tr ng-repeat="driver in current_driver_status">
						<td>
							<a href="/community/community_permalink">{{driver.community}}</a>
						</td>
						<td>
							<a href="/staff/{{driver.login}}">{{driver.name}}</a>
							<br>
							<a href ng-click="closeModalAndCallText(driver.phone)" class="listview-smaller">{{driver.phone | formatPhone}}</a>
						</td>
						<td>
							<span class="tag tag-black" ng-if="driver.last_action.type == 'delivery-canceled'">Canceled</span>
							<span class="tag tag-green" ng-if="driver.last_action.type == 'delivery-accepted'">Accepted</span>
							<span class="tag tag-blue" ng-if="driver.last_action.type == 'delivery-pickedup'">Pickedup</span>
							<span class="tag tag-purple" ng-if="driver.last_action.type == 'delivery-delivered'">Delivered</span>
						</td>
						<td>
							<span ng-if="driver.last_action.date">{{driver.last_action.date | localtime:'h:mm a'}}</span>
							<a ng-if="driver.last_action.id_order" href="/order/{{driver.last_action.id_order}}">#{{driver.last_action.id_order}}</a>
						</td>

					</tr>
				</table>
			</div>
		</div>
				<div class="support-box-wrap box-content2">
			<div class="support-box-wrap-header">
				<h1>Orders by Hour for Last 24 Hours</h1>
				<div class="divider"></div>
			</div>
			<div class="no-box-content-color">
			<canvas
				class="chart chart-line"
				data="chart_last_orders.data"
				labels="chart_last_orders.labels"
				series="chart_last_orders.series"
				legend="true"></canvas>
			</div>
		</div>
</div>

	<div class="support-boxes">
		<div class="support-box-wrap box-content2">
			<div class="support-box-wrap-header">
				<h1>Opened Tickets</h1>
				<div class="divider"></div>
			</div>
			<div class="no-box-content-color">
				<table class="basic-table tb-zebra table-dashboard">
					<tr>
						<th>Contact</th>
						<th>Last Messages</th>
						<th class="tb-small"></th>
					</tr>
					<tr ng-repeat="ticket in tickets">
						<td nowrap>
							<span ng-if="ticket.type == 'WARNING'">
								<i>System</i>
							</span>
							<span ng-if="ticket.type != 'WARNING'">
								<span ng-if="ticket.order_id_user">
									<a href="/customer/{{ticket.order_id_user}}">{{ticket.order_name}}</a>
								</span>
								<span ng-if="!ticket.order_id_user && ticket.client_id_admin">
									<a href="/staff/{{ticket.client_id_admin}}">{{ticket.client_admin_name}}</a>
								</span>
								<span ng-if="!ticket.order_id_user && !ticket.client_id_admin">
									Unknown
								</span>
								<br><a href ng-click="callText(ticket.support_phone)" class="listview-smaller">{{ticket.support_phone | formatPhone}}</a>
								<div ng-if="ticket.id_order">
									<a href="/order/{{ticket.id_order}}">Order #{{ticket.id_order}}</a>
								</div>
							</span>
						</td>
						<!-- message -->
						<td>
							<span class="listview-smaller">
								<!-- client -->
								<div ng-if="ticket.client_last_message">
									<span class="tag tag-empty tag-red">Client</span>
										<span ng-class="{ 'text-danger': ticket.recent_from == 'client' || ticket.recent_type == 'auto-reply', 'text-muted': ticket.recent_from != 'client' && ticket.recent_type != 'auto-reply' }" >
										<span ng-bind-html="ticket.client_last_message"></span>
									</span>
									<i class="listview-smaller" ng-if="ticket.client_message_timestamp">{{ticket.client_message_timestamp * 1000| date:'EEE MM/dd @ h:mm a'}}</i>
								</div>
								<!-- rep -->
								<div ng-if="ticket.rep_last_message">
									<span class="tag tag-empty tag-green">CS: {{ticket.rep_name}}</span>
									<span class="text-muted" ng-bind-html="ticket.rep_last_message"></span>
									<i class="listview-smaller" ng-if="ticket.rep_timestamp">{{ticket.rep_timestamp * 1000| date:'EEE MM/dd @ h:mm a'}}</i>
								</div>
								<!-- system -->
								<div ng-if="ticket.system_last_message">
									<span class="tag tag-empty tag-blue">System</span>
									<span class="text-muted" ng-bind-html="ticket.system_last_message"></span>
									<i class="listview-smaller" ng-if="ticket.system_timestamp">{{ticket.system_timestamp * 1000| date:'EEE MM/dd @ h:mm a'}}</i>
								</div>
							</span>
						</td>
						<td nowrap class="tb-v-center tb-right">
							<button ng-if="ticket.status == 'open'" ng-click="closeTicket(ticket.id_support);" class="button button-small button-empty button-green"><i class="fa fa-times-circle"></i>&nbsp;&nbsp;Close</button>
							<a href="/ticket/{{ticket.id_support}}"><button class="button button-small button-empty button-green">
							<i class="fa fa-eye"></i>
							&nbsp;&nbsp;View</button></a>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<div class="support-box-wrap box-content2">
			<div class="support-box-wrap-header">
				<h1>Closed Communities</h1>
				<div class="divider"></div>
			</div>
			<div class="no-box-content-color">
				<table class="basic-table tb-zebra table-dashboard">
					<thead>
						<tr>
							<th>Community</th>
							<th>Closed Since</th>
							<th>Closed</th>
							<th>Message</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="community in closed_communities track by $index" ng-attr-tabindex="{{$index+1}}" tab-select="/community/{{community.permalink || community.id_community}}" ng-init="$last ? ngRepeatFinished() : null">
							<td><a class="listview-smaller" href="/community/{{community.permalink}}">{{community.name}}</a></td>
							<td><span class="listview-smaller">{{community.log.how_long}}</span></td>
							<td nowrap="">
								<span class="tag tag-orange" ng-if="community.is_auto_closed">Is Auto Closed</span>
								<span ng-if="community.is_auto_closed && community.close_3rd_party_delivery_restaurants"><br></span>
								<span class="tag tag-purple" ng-if="community.close_3rd_party_delivery_restaurants">3rd Party Restaurants</span>
								<span ng-if="( community.is_auto_closed && community.close_all_restaurants && !community.close_3rd_party_delivery_restaurants ) || (community.close_all_restaurants && community.close_3rd_party_delivery_restaurants )"><br></span>
								<span class="tag tag-red" ng-if="community.close_all_restaurants">All Restaurants</span>
							</td>
							<td><span class="listview-smaller">{{community.log.note}}</span></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

	</div>
</div>

<div class="dashboard-drivers-dialog-container dashboard-dialog-container zoom-anim-dialog mfp-hide dialog">
	<div class="support-box-wrap box-content2">
		<div class="support-box-wrap-header">
			<h1>{{modal.title}}</h1>
			<div class="divider"></div>
		</div>
		<div class="no-box-content-color">
			<div class="field-container">
				<table class="dashboard-modal-table tb-zebra">
					<tr>
						<th>Driver</th>
						<th>Shift</th>
						<th></th>
						<th>Last Action</th>
					</tr>
					<tr ng-repeat="driver in modal.drivers">
						<td>
							<a href="/staff/{{driver.login}}">{{driver.name}}</a>
							<br>
							<a href ng-click="closeModalAndCallText(driver.phone)" class="listview-smaller">{{driver.phone | formatPhone}}</a>
						</td>
						<td>
							<span ng-bind="formatDate(driver.date_start) |  date:'MM/d h:mm a'"></span> - <span ng-bind="formatDate(driver.date_end) |  date:'MM/d h:mm a'"></span>
						</td>
						<td>
							<span class="tag tag-green" ng-if="driver.confirmed">Confirmed</span>
							<span class="tag tag-blue" ng-if="driver.current">Working</span>
						</td>
						<td>
							<span ng-if="driver.last_action">
								<span class="tag tag-green" ng-if="driver.last_action.type == 'delivery-accepted'">Accepted</span>
								<span class="tag tag-blue" ng-if="driver.last_action.type == 'delivery-pickedup'">Pickedup</span>
								<span class="tag tag-purple" ng-if="driver.last_action.type == 'delivery-delivered'">Delivered</span>
								#<a href="/order/{{driver.last_action.id_order}}">{{driver.last_action.id_order}}</a>
							</span>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>

<div class="dashboard-orders-dialog-container dashboard-dialog-container zoom-anim-dialog mfp-hide dialog">
	<div class="support-box-wrap box-content2">
		<div class="support-box-wrap-header">
			<h1>{{modal.title}}</h1>
			<div class="divider"></div>
		</div>
		<div class="no-box-content-color">
			<div class="field-container">
				<table class="dashboard-modal-table tb-zebra">
					<tr>
						<th>#</th>
						<th>Customer</th>
						<th>Restaurant</th>
						<th ng-if="modal.driver">Driver</th>
						<th>Status</th>
						<th>Date</th>
					</tr>
					<tr ng-repeat="order in modal.orders">
						<td><a href="/order/{{order.id_order}}">{{order.id_order}}</a></td>
						<td>{{order.customer}} <br> {{order.customer_phone | formatPhone}}</td>
						<td>
							<a href="/restaurant/{{order.restaurant_permalink}}">{{order.restaurant}}</a>
						</td>
						<td ng-if="modal.driver">
							<span ng-if="!order.driver">-</span>
							<a href="/staff/{{order.driver_login}}">{{order.driver}}</a>
							<br>
							{{order.driver_phone | formatPhone}}
						</td>
						<td>

							<span ng-if="order.delivery_service">
								<span class="tag tag-black" ng-if="order.order_status == 'delivery-canceled'">Canceled</span>
								<span class="tag tag-red" ng-if="order.order_status == 'delivery-new' || !order.order_status">Not&nbsp;yet&nbsp;accepted</span>
								<span class="tag tag-green" ng-if="order.order_status == 'delivery-accepted'">Accepted</span>
								<span class="tag tag-blue" ng-if="order.order_status == 'delivery-pickedup'">Pickedup</span>
								<span class="tag tag-purple" ng-if="order.order_status == 'delivery-delivered'">Delivered</span>
							</span>
							<span ng-if="!order.delivery_service && order.restaurant_confirmation">
								<span class="tag tag-red" ng-if="!order.confirmed">Unconfirmed</span>
								<span class="tag tag-green" ng-if="order.confirmed">Confirmed</span>
							</span>
							<span ng-if="!order.delivery_service && !order.restaurant_confirmation">
								<span class="tag tag-grey">Placed</span>
								<span class="tag tag-black" ng-if="order.order_status == 'delivery-canceled'">Canceled</span>
							</span>


						</td>
						<td>
							<span ng-if="order.order_date">{{order.order_date | localtime:'h:mm a'}}</span>
							<span ng-if="order.preordered_date">{{order.preordered_date | localtime:'h:mm a'}}</span>
							<span class="tag tag-green" ng-if="order.date_delivery">Pre order</span>
							<span ng-if="order.date_delivery">{{order.date_delivery | localtime:'h:mm a'}}</span>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>
