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

<div class="content-padding">

	<h1 class="title"><i class="fa fa-bank"></i>Scheduled Driver Payments<div class="title-loader" ng-if="loading"><i class="fa fa-refresh fa-spin"></i></div></h1>

	<div class="box-content2 box-content-table">
		<table>
			<tr>
				<td colspan="4"><i class="fa fa-search"></i>&nbsp;&nbsp;<input type="text" ng-model="query.search" id="search" tabindex="1"></td>
			</tr>
			<tr>
				<th>Type</th>
				<td>
					<select ng-model="query.type" ng-options="opt.type as opt.label for opt in pay_types" class="cart-customize-select"></select>
				</td>
				<th>Status</th>
				<td>
					<select ng-model="query.status" ng-options="opt.type as opt.label for opt in payment_statuses" class="cart-customize-select"></select>
				</td>
			</tr>
		</table>
	</div>
	<div class="bar-loader bar-loader-search" ng-class="{'bar-loader-loading': loading}"></div>


	<div ng-if="count">

		<div class="box-content2 box-content-table">
			<table class="tb-zebra">
				<tr>
					<th>ID</th>
					<th>Driver</th>
					<th>Type</th>
					<th>Amount</th>
					<th>Status</th>
					<th>Scheduled at</th>
					<th></th>
				</tr>

				<tr ng-repeat="payment in payments">
					<td>
					<!-- link auqi -->
						<a ng-if="payment.id_payment_schedule" href="/settlement/drivers/scheduled/{{payment.id_payment_schedule}}">
							{{payment.id_payment_schedule}}
						</span>
					</td>
					<td>{{payment.driver}}</td>
					<td>{{payment.pay_type}}</td>
					<td>$ {{payment.amount | formatPrice}}</td>
					<td>

						<span class="tag tag-red" ng-if="payment.status == 'error'">Error</span>
						<span class="tag tag-orange" ng-if="payment.status == 'scheduled'">Scheduled</span>
						<span class="tag tag-lightgrey" ng-if="payment.status == 'processing'">Processing</span>
						<span class="tag tag-blue" ng-if="payment.status == 'deleted'">Deleted</span>
						<span class="tag tag-purple" ng-if="payment.status == 'archived'">Archived</span>

					</td>
					<td>{{payment.date}}</td>
					<td>

						<button ng-click="archive( payment.id_payment_schedule );" class="button button-small button-empty button-green"><i class="fa fa-archive"></i>&nbsp;&nbsp;Archive</button>

						<button ng-click="delete( payment.id_payment_schedule );" class="button button-small button-empty button-green"><i class="fa fa-trash"></i>&nbsp;&nbsp;Delete</button>

					</td>
				</tr>

			</table>
		</div>

		<table class="tb-pagination right" ng-if="pages > 1" page-key>
			<tbody>
				<tr>
					<td class="td-prev"><button class="button orange" ng-if="query.page > 1" ng-click="setPage(query.page-1)">prev</button></td>
					<td class="td-info">Page {{query.page}} of {{pages}}</td>
					<td class="td-next"><button class="button orange" ng-if="query.page < pages" ng-click="setPage(query.page+1)">next</button></td>
				</tr>
			</tbody>
		</table>
		<div class="divider"></div>

	</div>

</div>
