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

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

	<h1 class="title left"><i class="fa fa-credit-card"></i><span>Pexcard: #{{payInfo.id_admin}} - {{payInfo.name}}</span></h1>

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

	<div>

		<div ng-if="payInfo.cards.length">

			<h2 class="title">Cards</h2>

			<div ng-repeat="card in payInfo.cards">

				<ul class="ul-info box-content2">
					<li class="li-info">
						<div class="label">Pex Id:</div>
						<div class="data">{{card.id}}</div>
					</li>
					<li class="li-info">
						<div class="label">First Name:</div>
						<div class="data">{{card.firstName}}</div>
					</li>
					<li class="li-info">
						<div class="label">Last Name:</div>
						<div class="data">{{card.lastName}}</div>
					</li>
					<li class="li-info">
						<div class="label">Ledger Balance:</div>
						<div class="data">$ {{card.ledgerBalance | formatPrice}}</div>
					</li>
					<li class="li-info">
						<div class="label">Available Balance:</div>
						<div class="data">$ {{card.availableBalance | formatPrice}}</div>
					</li>
					<li class="li-info">
						<div class="label">Status:</div>
						<div class="data">{{card.status}}</div>
					</li>
					<li class="li-info">
						<div class="label">Assignment:</div>
						<div class="data"><span class="orange link" ng-click="remove_assignment( card.id )"><i class="fa fa-times"></i> Remove assignment</span></div>
					</li>
					<li>
						<hr/>
						<h2 class="title">Cards</h2>
						<ul class="ul-info" ng-repeat="_card in card.cards">
							<li class="li-info">
								<div class="label">Card Id:</div>
								<div class="data">{{_card.id}}</div>
							</li>
							<li class="li-info">
								<div class="label">Card Number:</div>
								<div class="data">{{_card.cardNumber}}</div>
							</li>
							<li class="li-info">
								<div class="label">Status:</div>
								<div class="data">
									{{_card.status}}
									&nbsp;&nbsp;&nbsp;
									<span ng-if="_card.status == status.OPEN" class="orange link" ng-click="block_card( _card.id )">Block card</span>
									<span ng-if="_card.status == status.BLOCKED" class="orange link" ng-click="open_card( _card.id )">Open card</span>
								</div>
							</li>
						</ul>
					</li>
				</ul>

			</div>

		</div>

		<form name="form" novalidate ng-show="payInfo.cards.length">

			<h2 class="title">Add funds</h2>

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

				<li class="li-input" ng-class="{'error':form.IdPexcard.$invalid}">
					<div class="label">Card Serial</div>
					<div class="input">
						<select name="IdPexcard" required ng-model="pexcard.id_pexcard" ng-options="opt.id as opt.lastName for opt in payInfo.cards" ></select>
					</div>
					<div class="box-error">
						<small ng-show="form.IdPexcard.$error.required">Required.</small>
					</div>
				</li>

				<li class="li-input" ng-class="{'error':form.amount.$invalid}">
					<div class="label">Amount</div>
					<div class="input">
						<input type="number" step="any" ignore-mouse-wheel name="amount" required ng-model="pexcard.amount" placeholder="0.00">
					</div>
					<div class="box-error">
						<small ng-show="form.amount.$error.required">Required.</small>
					</div>
				</li>

				<li class="li-input" ng-class="{'error':form.note.$invalid}">
					<div class="label">Description</div>
					<div class="input"><input type="text" name="note" required ng-model="pexcard.note" placeholder="Description"></div>
					<div class="box-error">
						<small ng-show="form.note.$error.required">Required.</small>
					</div>
				</li>

				<li class="li-input" ng-show="!isAdding">
					<button class="button orange" ng-click="add_funds();">Add</button>
					<span ng-show="saved" class="green">Funds Added!</span>
				</li>

				<li class="li-input" ng-show="isAdding">
					<span><i class="fa fa-circle-o-notch fa-spin"></i> Adding funds</span>
				</li>

			</ul>

		</form>

		<div ng-if="!payInfo.cards.length">
			This user has no pexcard.
			<br/><br/>
			<a href="/pexcard/card/driver/{{payInfo.id_admin}}">Assign a Pexcard</a>
		</div>

	</div>
</div>

<spinner-loading></spinner-loading>
<hack-expand-content></hack-expand-content>