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

<div class="content-padding">

	<h1 class="title"><i class="fa fa-credit-card"></i>Pex Card: Report</h1>

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

		<form name="form" novalidate>

		<ul ng-class="{'submitted':submitted}" class="ul-inputs box-content2">

			<li class="li-input" ng-class="{'error':form.rangeStart.$invalid}">
				<div class="label">Date start:</div>
				<div class="input"><input type="date" name="rangeStart" ng-model="range.start" required placeholder=""></div>
				<div class="box-error">
					<small ng-show="form.rangeStart.$error.required">Required.</small>
					<small ng-show="form.rangeStart.$error.date">Enter a valid start date!</small>
				</div>
			</li>

			<li class="li-input" ng-class="{'error':form.rangeEnd.$invalid}">
				<div class="label">Date end:</div>
				<div class="input"><input type="date" name="rangeEnd" ng-model="range.end" required placeholder=""></div>
				<div class="box-error">
					<small ng-show="form.rangeEnd.$error.required">Required.</small>
					<small ng-show="form.rangeEnd.$error.date">Enter a valid end date!</small>
				</div>
			</li>

			<li class="li-input">
				<div class="label">Driver:</div>
				<ui-select ng-model="driver.id_admin" theme="select2" close-on-select="true" style="width: 200px;" title="Select a driver">
					<ui-select-match placeholder="Select a driver">{{$select.selected.name}}</ui-select-match>
					<ui-select-choices repeat="driver.id_admin as driver in drivers | propsFilter: {name: $select.search}">
						{{driver.name}}
					</ui-select-choices>
				</ui-select>
			</li>

			<li class="li-input" ng-show="dates">
				<div class="notes">
					Pre processed period from <strong>{{dates.min}}</strong> to <strong>{{dates.max}}</strong>.
				</div>
			</li>

			<li class="li-input" ng-show="!isProcessing">
				<button class="button save" ng-click="report();">Report</button>
				<button ng-if="!newReport" class="button save" ng-click="import_data();">Import data and Report</button>
			</li>

			<li class="li-input" ng-show="isProcessing">
				<span><i class="fa fa-circle-o-notch fa-spin"></i> Processing</span>
			</li>

		</ul>

	</form>

	<div ng-if="result">

		<div ng-if="newReport">

			<h2 class="title">
				<span>Summary</span>
			</h2>
			<table class="tb-grid tb-zebra summary">
				<tbody>
					<tr>
						<td>Pex Card<br>Spent</td>
						<td positive-or-negative-color="{{result.pexcard_amount}}">$ {{result.pexcard_amount | formatPrice}}</td>
					</tr>
					<tr>
						<td>Card Orders</td>
						<td positive-or-negative-color="{{result.card_amount}}">$ {{result.card_amount | formatPrice}}</td>
					</tr>
					<tr>
						<td>Diff</td>
						<td positive-or-negative-color="{{result.diff}}">$ {{result.diff | formatPrice}}</td>
					</tr>
					<tr>
						<td>Card and Cash<br>Orders Total Price</td>
						<td positive-or-negative-color="{{result.card_cash_amount}}">$ {{result.card_cash_amount | formatPrice}}</td>
					</tr>
					<tr>
						<td>Total Orders</td>
						<td>{{result.orders}}</td>
					</tr>
				</tbody>
			</table>

			<br><br>

		</div>

		<h2 class="title">
			<span>Report</span>
		</h2>


		<table class="tb-grid tb-zebra">
			<thead>
				<tr>
					<td>Driver Name</td>
					<td ng-if="!newReport">Serial</td>
					<td ng-if="!newReport">Last Four</td>
					<td>Email</td>
					<td>Orders</td>
					<td>Pex Card<br>Spent</td>
					<td>Should Have<br> Spent</td>
					<td>Card and Cash<br>Orders Total Price</td>
					<td>Diff</td>
					<td></td>
				</tr>
			</thead>
			<tbody ng-repeat="driver in result.drivers_expenses">
				<tr>
					<td>
						<span ng-if="driver.login">
							<a href="/staff/{{driver.login}}">{{driver.driver}}</a>
						</span>
					</td>
					<td ng-if="!newReport">{{driver.card_serial}}</td>
					<td ng-if="!newReport">{{driver.last_four}}</td>
					<td>
						<span ng-if="driver.login"><a target="_system" href="mailto:{{driver.email}}">{{driver.email}}</a></span>
					</td>
					<td>{{driver.orders}}</td>
					<td positive-or-negative-color="{{driver.pexcard_amount}}">$ {{driver.pexcard_amount | formatPrice}}</td>
					<td positive-or-negative-color="{{driver.card_amount}}">$ {{driver.card_amount | formatPrice}}</td>
					<td positive-or-negative-color="{{driver.card_cash_amount}}">$ {{driver.card_cash_amount | formatPrice}}</td>
					<td positive-or-negative-color="{{driver.diff}}">$ {{driver.diff | formatPrice}}</td>
					<td>
						<span class="link icon-bigger" ng-click="driver.details=!driver.details"><i class="fa fa-info-circle"></i></span>
					</td>
				</tr>

				<tr class="tb-mini-grid title" ng-show="driver.details && driver.transactions.length">
					<th colspan="10"><strong>Spent with Pex Card</strong></th>
				</tr>
				<tr class="tb-mini-grid subtitle" ng-show="driver.details && driver.transactions.length">
					<th colspan="3"><strong>Date</strong></th>
					<th colspan="3"><strong>Description</strong></th>
					<th colspan="4"><strong>Amount</strong></th>
				</tr>
				<tr class="tb-mini-grid" ng-repeat="transaction in driver.transactions" ng-show="driver.details">
					<td colspan="3">{{transaction.date | localtime:'MM/DD h:mm a'}}</td>
					<td colspan="3">{{transaction.description}}</td>
					<td colspan="4" positive-or-negative-color="{{transaction.amount}}">$ {{transaction.amount | formatPrice}}</td>
				</tr>

				<tr ng-if="driver.card_orders" class="tb-mini-grid title" ng-show="driver.details && driver.delivered_orders.length">
					<th colspan="10">Orders Where Pex Should've Been Used</th>
				</tr>
				<tr ng-if="driver.card_orders" class="tb-mini-grid subtitle" ng-show="driver.details && driver.delivered_orders.length">
					<th colspan="1"><strong>#</strong></th>
					<th colspan="1"><strong>Date</strong></th>
					<th colspan="2"><strong>Restaurant</strong></th>
					<th colspan="2"><strong>Amount</strong></th>
					<th colspan="1"><strong>Type</strong></th>
					<th colspan="3"><strong>Status</strong></th>
				</tr>
				<tr class="tb-mini-grid" ng-repeat="order in driver.delivered_orders" ng-if="driver.card_orders && order.pay_type=='card'" ng-show="driver.details">
					<td colspan="1">
						<a href="/order/{{order.id_order}}">{{order.id_order}}</a>
					</td>
					<td colspan="1">{{order.date | localtime:'MM/DD h:mm a'}}</td>
					<td colspan="2">{{order.restaurant}}</td>
					<td colspan="2" positive-or-negative-color="{{order.amount}}">$ {{order.amount | formatPrice}}</td>
					<td colspan="1">
						<span class="tag tag-blue" ng-if="order.pay_type=='card'">card</span>
						<span class="tag tag-grey" ng-if="order.pay_type=='cash'">cash</span>
					</td>
					<td colspan="3">
						<div ng-if="!newReport">
							<span class="tag tag-green" ng-if="order.status=='delivered'">delivered</span>
							<span class="tag tag-red" ng-if="order.status!='delivered'">{{order.status}}</span>
						</div>
						<div ng-if="newReport">
							<span class="tag tag-green" ng-if="order.status=='delivery-delivered'">delivered</span>
							<span class="tag tag-red" ng-if="order.status!='delivery-delivered'">{{order.status}}</span>
						</div>
						<span class="tag tag-black" ng-if="order.refunded">refunded</span>
					</td>
				</tr>

				<tr ng-if="driver.cash_orders" class="tb-mini-grid title" ng-show="driver.details && driver.delivered_orders.length">
					<th colspan="10">Orders Where Pex Should not have Been Used</th>
				</tr>
				<tr ng-if="driver.cash_orders" class="tb-mini-grid subtitle" ng-show="driver.details && driver.delivered_orders.length">
					<th colspan="1"><strong>#</strong></th>
					<th colspan="1"><strong>Date</strong></th>
					<th colspan="2"><strong>Restaurant</strong></th>
					<th colspan="2"><strong>Amount</strong></th>
					<th colspan="1"><strong>Type</strong></th>
					<th colspan="3"><strong>Status</strong></th>
				</tr>
				<tr class="tb-mini-grid" ng-repeat="order in driver.delivered_orders" ng-if="driver.cash_orders && order.pay_type=='cash'" ng-show="driver.details">
					<td colspan="1">
						<a href="/order/{{order.id_order}}">{{order.id_order}}</a>
					</td>
					<td colspan="1">{{order.date | localtime:'MM/DD h:mm a'}}</td>
					<td colspan="2">{{order.restaurant}}</td>
					<td colspan="2" positive-or-negative-color="{{order.amount}}">$ {{order.amount | formatPrice}}</td>
					<td colspan="1">
						<span class="tag tag-blue" ng-if="order.pay_type=='card'">card</span>
						<span class="tag tag-grey" ng-if="order.pay_type=='cash'">cash</span>
					</td>
					<td colspan="3">
						<div ng-if="!newReport">
							<span class="tag tag-green" ng-if="order.status=='delivered'">delivered</span>
							<span class="tag tag-red" ng-if="order.status!='delivered'">{{order.status}}</span>
						</div>
						<div ng-if="newReport">
							<span class="tag tag-green" ng-if="order.status=='delivery-delivered'">delivered</span>
							<span class="tag tag-red" ng-if="order.status!='delivery-delivered'">{{order.status}}</span>
						</div>
					</td>
				</tr>

				<tr ng-show="driver.details">
					<th style="border-bottom:1px solid #CCC;" colspan="10"><br>&nbsp;<br></th>
				</tr>

			</tbody>
		</table>

	</div>

</div>
