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

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

	<h1 class="title left"><i class="fa fa-paper-plane-o"></i><span>Community Manager/Brand Rep</span></h1>

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

	<div>

		<form name="form" novalidate>

			<div class="support-box-wrap box-content2">

				<div class="support-box-wrap-header">
					<h1>Basic Info</h1>
					<div class="divider"></div>
				</div>

				<div class="no-box-content-color">

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

						<li class="li-input" ng-class="{'error':form.staffName.$invalid}">
							<div class="label">Name:</div>
							<div class="input"><input type="text" name="staffName" ng-model="staff.name" required placeholder="Name" ng-minlength="5" ng-maxlength="40" ></div>
							<div class="box-error">
								<small ng-show="form.staffName.$error.required">Required.</small>
								<small ng-show="form.staffName.$error.minlength">Name is too short. Name is required to be at least 5 characters.</small>
								<small ng-show="form.staffName.$error.maxlength">Name cannot be longer than 40 characters.</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffLogin.$invalid}">
							<div class="label">Login:</div>
							<div class="input"><input type="text" name="staffLogin" ng-readonly="staff.id_admin" required placeholder="Login" ng-model="staff.login"></div>
							<div class="box-error">
								<small ng-show="form.staffLogin.$error.required">Required.</small>
								<small ng-show="form.staffLogin.$error.isUnique">This login is already in use!</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffPass.$invalid}">
							<div class="label">Password:</div>
							<div class="input"><input type="text" ng-required="!staff.id_admin" name="staffPass" ng-model="staff.pass"></div>
							<small  ng-if="staff.id_admin" class="tip">Leave it blank if you don't wanna change it.</small>
							<div class="box-error">
								<small ng-show="form.staffLogin.$error.required">Required.</small>
							</div>
						</li>

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

						<li class="li-input" ng-class="{'error':submitted && !staff.id_community}">
			 				<div class="label">Community:</div>
							<ui-select ng-model="staff.id_community" theme="select2" close-on-select="true" style="width: 300px;" title="Select a community">
								<ui-select-match placeholder="Select a community...">{{$select.selected.name}}</ui-select-match>
								<ui-select-choices repeat="community.id_community as community in communities | propsFilter: {name: $select.search}">
									{{community.name}}
								</ui-select-choices>
							</ui-select>
							<div class="box-error">
								<small ng-show="submitted && !staff.id_community">Required.</small>
							</div>
						</li>

						<li class="li-input">

							<label class="switch-wrap">
								<input type="checkbox" class="switch" ng-model="staff.isCampusManager"/><div></div>
							</label>

							<div class="label">Is Community Manager</div>

						</li>

						<li class="li-input" ng-show="staff.isCampusManager">
							<div class="label">Profit %:</div>
							<div class="input"><input type="number" ng-required="staff.isCampusManager" ignore-mouse-wheel ng-model="staff.profit_percent" placeholder=""></div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffEmail.$invalid}">
							<div class="label">Email:</div>
							<div class="input"><input type="email" name="staffEmail" ng-model="staff.email" placeholder="Email"></div>
							<div class="box-error">
								<small ng-show="form.staffEmail.$invalid">Enter a valid email.</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffDob.$invalid}">
							<div class="label">Date of Birth (YYYY-MM-DD):</div>
							<div class="input"><input type="text" name="staffDob" required ng-pattern="/[0-9]{4}-[0-9]{2}-[0-9]{2}/" ng-model="staff.dob"></div>
							<div class="box-error">
								<small ng-show="form.staffDob.$invalid">Enter a valid format (YYYY-MM-DD)</small>
							</div>
						</li>

						<li class="li-input">
							<div class="label">Address:</div>
							<div class="input">
								<textarea name="address" ng-model="staff.address"></textarea>
							</div>
						</li>

					</ul>

				</div>

			</div>

		<div class="support-box-wrap box-content2">

			<div class="support-box-wrap-header">
				<h1>Earnings - Referral Code</h1>
				<div class="divider"></div>
			</div>

			<div class="no-box-content-color">

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

					<li class="li-input" ng-class="{'error':form.staffInviteCode.$invalid}">
						<div class="label">Referral Code:</div>
						<div class="input"><input type="text" name="staffInviteCode" ng-model="staff.invite_code" placeholder="Referral Code"></div>
						<div class="box-error">
							<small ng-show="form.staffInviteCode.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.staffPayForNewCustomer.$invalid}">
						<div class="label">Pay for new customers?</div>
						<div class="input">
							<select name="staffPayForNewCustomer" required ng-model="staff.pay_for_new_customer" ng-options="opt.value as opt.label for opt in yesNo" ></select>
						</div>
					</li>


					<li class="li-input" ng-show="staff.pay_for_new_customer">
						<div class="label">How much a brand representative earns from new customer referrals:</div>
						<div class="input"><input type="number" ignore-mouse-wheel ng-model="staff.referral_admin_credit" placeholder=""></div>
					</li>

				</ul>

				</div>
			</div>
		</form>
	</div>

	<br><br><br>

	<div ng-if="staff.id_admin">

		<h1 class="title"><i class="fa fa-briefcase"></i>Documents</h1>

		<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(staff.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="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-medium driver-docs-card">

				<div ng-if="doc.status" class="pointer" ng-click="approve(doc.status)">
					<span ng-if="doc.status.approved">
						<i class="fa fa-check-square-o"></i> {{doc.status.approved}}
					</span>
					<span ng-if="!doc.status.approved">
						<i class="fa fa-square-o"></i> Approve
					</span>
				</div>

				</td>
				<td class="td-download">
				<!-- upload directive -->
				<div class="upbutton" driver-docs-upload>
					<button class="ladda-button upload" data-color="mint" data-style="zoom-in"><span class="ladda-label"><b>UPLOAD</b></span></button>
					<input ng-if="init" type="file" nv-file-select="" uploader="uploader" name="file" class="file file-hidden" options="{ formData: [{id_driver_document: doc.id_driver_document, id_admin: staff.id_admin}]}">
				</div>
				</td>
			</tr>
		</table>

	</div>

	<ul class="ul-inputs">
		<li class="li-input" ng-show="!isSaving">
			<button class="button save" ng-click="save();">Save</button>
		</li>
		<li class="li-input" ng-show="isSaving">
			<i class="fa fa-circle-o-notch fa-spin"></i>
		</li>
	</ul>

</div>

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