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

<div class="content-padding">

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

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

		<form name="form" novalidate>

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

				<li class="li-input" ng-class="{'error':form.crunchbuttonCardId.$invalid}">
					<div class="label">Card Serial (e.g. Crunchbutton XXXXX):</div>
					<div class="input"><input type="number" ignore-mouse-wheel name="crunchbuttonCardId" ng-model="crunchbutton_card_id" required placeholder="Card Serial (e.g. Crunchbutton XXXXX)"></div>
					<div class="box-error">
						<small ng-show="form.crunchbuttonCardId.$error.required">Required.</small>
						<small ng-show="form.crunchbuttonCardId.$error.minlength">Crunchbutton Id is too short. It is required to be at least 3 characters.</small>
					</div>
				</li>

				<li class="li-input" ng-show="!isSearching">
					<button class="button save" ng-click="search();">Card info</button>
				</li>
				<li class="li-input" ng-show="isSearching">
					<i class="fa fa-circle-o-notch fa-spin"></i> Searching
				</li>
			</ul>
		</form>

		<form name="formAssign" novalidate>

		<div ng-if="card">

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

			<h2 class="title">Card Info</h2>

			<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">Status:</div>
					<div class="data">{{card.status}}</div>
				</li>
				<li class="li-info" ng-if="card.admin_name">
					<div class="label">Assigned to:</div>
					<div class="data">
						<span class="link" ng-click="payinfo();">{{card.admin_name}}</span>
						&nbsp;&nbsp;&nbsp;<span class="orange link" ng-click="remove_assignment()"><i class="fa fa-times"></i> Remove assignment</span>
					</div>
				</li>
			</ul>

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

			<ul class="ul-info box-content2" ng-repeat="_card in card.cards">
				<li class="li-info">
					<div class="label">Card Id:</div>
					<div class="data">{{_card.CardId}}</div>
				</li>
				<li class="li-info">
					<div class="label">Card Number:</div>
					<div class="data">{{_card.Last4CardNumber}}</div>
				</li>
				<li class="li-info">
					<div class="label">Status:</div>
					<div class="data">
						{{_card.CardStatus}}
						&nbsp;&nbsp;&nbsp;
						<span ng-if="_card.CardStatus == status.OPEN" class="orange link" ng-click="block_card( _card.id )">Block card</span>
						<span ng-if="_card.CardStatus == status.BLOCKED" class="orange link" ng-click="open_card( _card.id )">Open card</span>
					</div>
				</li>
			</ul>

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

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

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

					<li class="li-input" ng-class="{'error':formAssign.cardIdAdmin.$invalid}">

						<div class="label">Driver:</div>

						<div class="input">
							<select name="cardIdAdmin" required ng-model="card.id_admin" ng-options="opt.id_admin as opt.name for opt in drivers" ></select>
						</div>

						<div class="box-error">
							<small ng-show="formAssign.cardIdAdmin.$error.required">Required.</small>
						</div>

					</li>

					<li class="li-input" ng-show="!isSaving">
						<button class="button save" ng-click="assign();">Assign driver</button>
					</li>

					<li class="li-input" ng-show="isSaving">
						<i class="fa fa-circle-o-notch fa-spin"></i> Saving
					</li>

				</ul>

	</div>

	</form>

</div>
