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

<div class="content-padding content-padding-notop">

	<div ng-show="ready">

		<div class="dialog-message dialog-message-nice">
			<b>In order to get paid, please:</b>
			<div class="docs-list-spacer"></div>
			<div class="dialog-subtext">
				<i class="fa fa-check-circle" ng-class="{'documents-check-bad': !status.docs, 'documents-check-green': status.docs}"></i>&nbsp;&nbsp;Sign and upload all documents<br>
				<i class="fa fa-check-circle" ng-class="{'documents-check-bad': !status.identification, 'documents-check-green': status.identification}"></i>&nbsp;&nbsp;Upload identification cards<br>
				<i class="fa fa-check-circle" ng-class="{'documents-check-bad': !status.paymentinfo, 'documents-check-green': status.paymentinfo}"></i>&nbsp;&nbsp;Fill out your payment information.

			</div>
				<span ng-if="status.docs && status.identification && status.paymentinfo"><br>You're all set!</span>
		</div>
		<br>

		<h1 class="title"><i class="fa fa-briefcase"></i>Documents (Max file size 2MB)</h1>

		<h2 class="title driver-docs-text">
			To complete the documents section, please visit <a href="https://cockpit.la" target="_system">https://cockpit.la</a> from a computer using Chrome as your browser. Download the docs, fill them out and then upload them back to this page. We recommend signing them with <a href="https://www.hellosign.com/" target="_system">Hellosign</a>.
		</h2>

		<table class="tb-grid driver-docs-grid">
			<tr ng-repeat="doc in documents" ng-if="doc.url">
				<td class="documents-check ">
					<i class="fa fa-check-circle documents-check-good" ng-show="doc.status && doc.status.file.substring(9, 14) !== 'blank'"></i>
					<i class="fa fa-check-circle documents-check-bad" ng-show="!doc.status || doc.status.file.substring(9, 14) == 'blank'"></i>
				</td>
				<td ng-click="edit(driver.id_admin)" class="td-medium driver-docs-name">
					<h2 class="driver-docs-name"><b>{{doc.name}} </b></h2>
					<a class="docs-download-form" href="{{doc.url}}" target="_blank"><b>Download Form</b></a>
					<!-- if he already have this doc, show the download link -->
					<span ng-show="1==2 && doc.status && doc.status.file.substring(9, 14) !== 'blank'" title="Sent at {{doc.status.date_formated}}">
						<a class="docs-download" href="/api/driver/documents/download/{{doc.status.id_driver_document_status}}" target="_blank">Download Doc</a>
					</span>
				</td>
				<td class="td-download">
					<div ng-class="{'upbutton':!isMobile}" driver-docs-upload>
						<button class="ladda-button upload" data-color="mint" data-style="zoom-in" ng-show="!isMobile">
							<span ng-show="!isMobile" class="ladda-label"><b>UPLOAD</b></span>
						</button>
						<input ng-if="init" type="file" nv-file-select="" uploader="uploader" name="file" ng-class="{'file-hidden':!isMobile};" class="file" options="{ formData: [{ id_driver_document: doc.id_driver_document, id_admin: account.user.id_admin }]}">
						<div class="upbutton-status" ng-show="isMobile"></div>
					</div>
				</td>
			</tr>
		</table>

		<h1 class="title" ><i class="fa fa-picture-o"></i><span>Identification (Max file size 2MB)</span></h1>

		<h2 class="title driver-docs-text">
			Upload a clear picture of your Drivers License and Insurance card. You can do this from most smartphones if you have already taken a picture. If that doesn't work, please use Chrome on your computer.
		</h2>

		<table class="tb-grid driver-docs-grid">
			<tr ng-repeat="doc in documents" ng-if="!doc.url">
				<td class="documents-check">
					<i class="fa fa-check-circle documents-check-good" ng-show="doc.status"></i>
					<i class="fa fa-check-circle documents-check-bad" ng-show="!doc.status"></i>
				</td>
				<td class="td-medium driver-docs-card" ng-click="edit(driver.id_admin)">
					<h2 class="driver-docs-card driver-docs-name"><b>{{doc.name}}</b></h2>
					<span ng-show="doc.status" title="Sent at {{doc.status.date_formated}}"><a class="docs-download-card" href="/api/driver/documents/download/{{doc.status.id_driver_document_status}}" target="_blank"><b>Download Doc</b></a></span>
				</td>
				<td class="td-download">
					<!-- upload directive -->
					<div ng-class="{'upbutton':!isMobile}" driver-docs-upload>
						<button class="ladda-button upload" data-color="mint" data-style="zoom-in" ng-show="!isMobile">
							<span ng-show="!isMobile" class="ladda-label"><b>UPLOAD</b></span>
						</button>
						<input ng-if="init" type="file" nv-file-select="" uploader="uploader" name="file" ng-class="{'file-hidden':!isMobile};" class="file" options="{ formData: [{ id_driver_document: doc.id_driver_document, id_admin: account.user.id_admin }]}">
						<div class="upbutton-status" ng-show="isMobile"></div>
					</div>
				</td>
			</tr>
		</table>

<div class="content-padding">

	<div ng-class="{'box-red':!status.paymentinfo}">
		<h1 class="title" ><span class="contrast" style="font-size: 1.5em;"><i class="fa fa-bank"></i><strong>MOST IMPORTANT: Payment Information</strong></span></h1>
		<h2 class="title driver-docs-text">
			<span class="contrast">IN ORDER TO GET PAID YOU MUST FILL THIS OUT</span>
		</h2>
	</div>

	<ng-include src="'/assets/view/drivers-payment-info-form.html'"></ng-include>

</div>

		<div>
			<div class="divider"></div><br/><br/>
			<h1 class="title" ><i class="fa fa-credit-card"></i><span>Pex Card</span></h1>
			<div class="support-box-wrap box-content2">
				<div class="box-content-table">
					<p ng-show="account.user.has_pexcard">
						Your PEX card is active and will be loaded with money to spend at restaurants when orders come in.
					</p>
					<p ng-show="!account.user.has_pexcard">
						<a href="/drivers/docs/pexcard">Activate your Pex Card</a>.
					</p>
				</div>
			</div>

		</div>

	</div>
