<!-- Contact Upload Widget Start -->
<div class="fullscreen-overlay contactupload-overlay">
	<div class="inner-fullscreen-offset">
		<a href="#" class="close-overlay icon-cross"></a>
		<div class="fullscreen-overlay-header-buttons">
			<a href="#" class="master-logout">Logout</a>
			<a href="#" class="u-WaitroseButton">MOTO</a>
		</div>
		<!--div class="navigation-overlay">
			<a href="#" class="icon-arrow-up1" data-navigation='up'></a>
			<a href="#" class="icon-arrow-down1" data-navigation='down'></a>
			<a href="#" class="u-gotOSummary"><span class="u-gotOSummary-Span1"><span class="u-gotOSummary-Span2">SKIP TO SUMMARY</span></span></a>
		</div-->
		<div class="navigation-overlay">
			<a href="#" data-set="one" class="u-navigationCircle active"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">Download Template</span></span></a>
			<a href="#" data-set="two" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">Upload Template</span></span></a>
			<a href="#" data-set="three" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">Contacts</span></span></a>
			<a href="#" data-set="four" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">Assign</span></span></a>
		</div>

		<div class="overlay-item csvcontactupload">


			<div class="options set-one c-Setone-Option-Selection" data-set="one">
				<div class="option-container">
					<a href="download.php" class="option option-center c-option-csvDownload" data-option="download">
						<div class="option-icon icon-person1"></div>
						<div class="option-text addperson-text">DOWNLOAD TEMPLATE</div>
					</a>
				</div>
				<div class="c-Footer c-ContactTemplateDownload-Footer" data-step="one">
					<a class="c-Footer-Button" href="#">I HAVE DOWNLOADED THIS TEMPLATE - SKIP</a>
				</div>
			</div>
			<div class="options set-two" data-set="two">
				<div class="option-container">
					<div class="option option-center c-option-csvUpload" data-option="upload">
						<div class="option-icon icon-person1"></div>
						<div class="option-text addperson-text" data-text="UPLOAD TEMPLATE">UPLOAD TEMPLATE</div>
						<label class="c-CSV-Upload-Input c-upload-absolute" title="Upload csv file" for="inputcsv">
							<input id="inputcsv" class="sr-only" type="file" name="file" accept="text/csv">
						</label>
					</div>
				</div>
			</div>
			<div class="options set-three" data-set="three">
				<div class="set-box c-option-person">
					<h2>CONTACTS</h2>
					<div class="option-container">
						<div class="ContactUpload-Box">
							<div class="c-ContactUpload-FirstBox option-container-firstbox active">
								<span class="option-container-firstbox-Text">Contacts Uploaded Below</span>
								<a href="#" class="btn-save option-container-firstbox-BtnGo">ADD NEW CONTACT</a>
							</div>
							<div class="option-container-secondbox">
								<div class="c-ContactUpload-ContactSelection">
									<input class="c-add-input" type="text" name="contact-add-name" id="contact-add-name" placeholder="First name" data-tip="PLEASE ENTER CONTACT NAME"/>
									<input class="c-add-input" type="text" name="permit-add-surname" id="contact-add-surname" placeholder="Surname" data-tip="PLEASE ENTER CONTACT SURNAME"/>
									<input class="c-add-input" type="text" name="permit-add-vehiclenumber" id="contact-add-vehiclenumber" placeholder="Vehicle Reg." data-tip="PLEASE ENTER VEHICLE REGISTER NUMBER"/>

									<a href="#" class="c-Clear-Handle c-ContactUpload-ContactSelection-BtnClear icon-cross"></a>
									<a href="#" class="btn-save c-ContactUpload-ContactSelection-BtnSave" data-action="add">ADD</a>
								</div>
							</div>
							<div class="ContactUpload-Box-overlay"><div class="c-Iconsbox"><span class="icon-caution"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div><div class="c-Contentbox"><span>Oops! We Can't add nothing, please try valid dates..</span></div></div>
						</div>
						<div class="existing-div">
							<h5>UPLOADED CONTACTS</h5>
							<div class="existing-names">
								<a data-name="ELLI" data-surname="MORRIS" data-vehiclenumber="J1 RTW" href="#">ELLI MORRIS <span href="#" class="c-contact-delete icon-cross c-circle"></span></a>
								<a data-name="JOHN" data-surname="MOSS" data-vehiclenumber="H1 RON"  href="#">JOHN MOSS <span href="#" class="c-contact-delete icon-cross c-circle"></span></a>
								<a data-name="GRAHAME" data-surname="ROSE" data-vehiclenumber="KNL4 6TR"  href="#">GRAHAME ROSE <span href="#" class="c-contact-delete icon-cross c-circle"></span></a>
							</div>
						</div>
						<div class="tooltip">
							<div class="tooltip-title"><span class="tooltip-title-tip">TIP</span></div>
							<div class="tooltip-content">PLEASE ENTER IN 2 DIGITS i.e. 01 for {date_text}.</div>
							<div class="tooltip-arrow bottom center"></div>
						</div>
					</div>

				</div>
				<div class="c-Footer c-ContactDownload-Footer " data-step="two">
					<a class="c-Footer-Button" href="#">UPLOAD</a>
				</div>
			</div>
			<div class="options set-four c-Widget-Content" data-set="four">
				<div class="set-box c-option-person">
					<h2 class="c-Widget-Content-Title">WOULD YOU LIKE TO ASSIGN YOUR CONTACTS TO GROUPS?</h2>
					<div class="c-Widget-Content-Container">
						<p>A group is a predefined set of parameters that you can apply to multiple contacts. le. You can create a group of people under the name of STUDENTS and you can assign parameters like their location to park, their permit duration etc & you can then select a range of contacts and add them to that group so that they are all automatically assigned to those preset parameters. It's a quicker way of bulk adding all your contacts to preset groups with predefined parameters.</p>
						<p>Click Yes to assign to Groups and NO to skip and do this later</p>
					</div>
				</div>
				<div class="c-Footer c-Done-Footer c-ContactDownload-Assign-Footer">
					<a class="c-Footer-Button" href="#">YES</a>
					<a class="c-Footer-Cancel-Button" href="#">NO</a>
				</div>
			</div>
			<div class="options set-four c-option-done">
				<div class="option-container">
					<div class="option">
						<div class="option-icon icon-tick_circle1"></div>
						<div class="option-text Done-text">UPLOADED</div>
					</div>
				</div>
			</div>
			<div class="options set-six c-Option-ContactPending" data-set="six">
				<h2>CONTACTS PENDING</h2>
				<div class="option-container">
					<div class="c-Option-ContactPending-Text">
						<span class="c-Option-ContactPending-Text-Span">You have not added <span class="c-Option-ContactPending-Number">4</span> contacts to a group.  They will be added to your PENDING list awaiting assignment. You can assign these contact to groups anytime you choose.</span>
					</div>
					<div class="c-Option-ContactPending-Img"><img src="img/pending.png" /></div>
					<div class="c-Footer c-AssignPending-Footer c-Done-Footer">
						<a class="c-Footer-Button" href="#">ASSIGN CONTACTS TO GROUP NOW</a>
						<a class="c-Footer-Cancel-Button" href="#">FINISH</a>
					</div>
				</div>
			</div>
		</div>


	</div>
</div>
<!-- Contact Upload Widget End -->