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

<div class="content-padding">

	<h1 class="title"><i class="fa fa-bank"></i>Payments - Drivers<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 ng-disabled="query.id_driver!=0" type="text" ng-model="query.search" id="search" tabindex="1"></td>
				<td>
					<td><i title="More options" class="fa fa-search-plus link no-underline" ng-class="{'orange':show_more_options}" ng-click="show_more_options=!show_more_options"></i></td>
				</td>
			</tr>
			<tr ng-if="show_more_options">
				<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>
				<td></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>Payment Status</th>
					<th>Date</th>
				</tr>

				<tr ng-repeat="payment in payments">
					<td>
						<a ng-if="payment.id_payment_schedule" href="/settlement/drivers/payment/{{payment.id_payment}}">
							{{payment.id_payment}}
						</span>
						<span ng-if="!payment.id_payment_schedule">
							{{payment.id_payment}}
						</span>
					</td>
					<td>{{payment.driver}}</td>
					<td>{{payment.pay_type}}</td>
					<td>$ {{payment.amount | formatPrice}}</td>
					<td ng-class="payment.payment_status">
						<span ng-if="payment.payment_failure_reason">
							<i title="{{payment.payment_failure_reason}}" class="fa fa-warning"></i>&nbsp;
						</span>
						{{payment.payment_status}}
						<i ng-if="!payment.payment_status">new</i>
						&nbsp;&nbsp;
						<span title="Check payment status" class="link no-underline" ng-if="payment.payment_status != 'succeeded'" ng-click="payment_status( payment.id_payment );"> <i class="fa fa-refresh" ng-class="{'fa-spin': balancedRefresh == payment.id_payment}"></i> </span>
					</td>
					<td>{{payment.date}}</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>
