<!-- Group Widget Start -->
<div class="fullscreen-overlay groupswidget-overlay widget-overlay">
	<div class="inner-fullscreen-offset">
		<a href="#" class="close-overlay icon-cross"></a>
		<a href="#" class="pin-logout">Logout</a>
		<div class="navigation-overlay">
			<a href="#" data-set="one" class="c-GroupsSummaryCircle u-navigationCircle active"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">GROUPS</span></span></a>
			<a href="#" data-set="two" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">PERMIT DURATION</span></span></a>
			<a href="#" data-set="three" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">DAY & TIME</span></span></a>
			<!--a href="#" data-set="four" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">PERSON</span></span></a>
			<a href="#" data-set="five" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">VEHICLE</span></span></a-->
			<a href="#" data-set="four" class="u-navigationCircle"><span class="u-navigationCircle-Span1"><span class="u-navigationCircle-Span2">LOCATION</span></span></a>
		</div>
		<div class="overlay-item done">
			<div class="centralised-tick icon-tick_circle"></div>
			<div class="centralised-text">DONE</div>
		</div>

		<div class="overlay-item groupswidget widgetpopup">

			<div class="options c-Confirmation-Option">
				<h2>Edit Group or Single Permit?</h2>
				<div class="option-container">
					<div class="c-Confirmation-left c-Confirmation-Box c-Confirmation-EditGroup">
						<div class="c-Confirmation-Box-Title">Edit Group</div>
						<div class="c-Confirmation-Box-Content">Would you like edit this group of 184 permits? Editing the group will affect all 184 permits associated with it.</div>
						<div class="c-Confirmation-Box-Footer"><a href="#" class="c-Confirmation-Box-Button">Edit Group</a></div>
					</div>
					<div class="c-Confirmation-right c-Confirmation-Box c-Confirmation-EditPermit">
						<div class="c-Confirmation-Box-Title">Edit Single Permit</div>
						<div class="c-Confirmation-Box-Content">Would you like to edit this as a single permit for Elli Morris of vehicle JHG LOG. Editing this single permit will only effect the permit of Elli Morris, not the group.</div>
						<div class="c-Confirmation-Box-Footer"><a href="#" class="c-Confirmation-Box-Button">Edit Single Permit</a></div>
					</div>
				</div>
				<div class="c-Footer c-Confirmation-Footer">
					<a class="c-Footer-Cancel-Button" href="#">CANCEL</a>
				</div>
			</div>

			<div class="options c-Pin-Option-Selection">
				<h2>PIN LOCK</h2>
				<div class="option-container">
					<div class="groupswidget-Box widgetpopup-Box widget-Box">
						<div class="option-container-singlebox">
							<input class="c-pin-input" type="password" name="pin" id="group-pin" maxlength="4" placeholder="ENTER PIN"/>
							<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
							<a href="#" class="btn-save c-BtnSave">GO</a>
						</div>
						<div class="groupswidget-Box-overlay widgetpopup-Box-overlay widget-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 again..</span></div></div>
						<div class="groupswidget-Success-Box-overlay widgetpopup-Box-overlay widget-Success-Box-overlay widget-Success-Box-overlay widget-Box-overlay "><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
					</div>
				</div>
				<div class="c-Footer c-Pin-Footer">
					<a class="c-Footer-Cancel-Button" href="#">CANCEL</a>
				</div>
			</div>

			<div class="options set-one c-Setone-Option-Selection" data-set="one">
				<h2>GROUP</h2>
				<div class="option-container">
					<div class="groupswidget-Box widgetpopup-Box widget-Box">
						<div class="option-container-singlebox">
							<input class="c-add-input" type="text" name="group" id="group-add" placeholder="ENTER GROUP NAME"/>
							<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
							<a href="#" class="btn-save c-BtnSave">SAVE</a>
						</div>
						<div class="groupswidget-Box-overlay widgetpopup-Box-overlay widget-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 again..</span></div></div>
						<div class="groupswidget-Success-Box-overlay widgetpopup-Box-overlay widget-Success-Box-overlay widget-Success-Box-overlay widget-Box-overlay "><div class="c-Iconsbox"><span class="icon-tick_circle1"></span></div><div class="c-Contentbox u-TextCenter"><span>GROUP NAME SAVED</span></div></div>
					</div>
				</div>

				<div class="option-container">
					<div class="c-CirclesOption c-PermitDuration-CirclesOption c-CircleOption-Empty">
						<div class="option-icon">
							<a href="#" data-step="two" class="c-Circles c-Circles-PermitDuration">
								<span class="c-CirclesText">
									<span class="c-CircleOption-Empty-Span">Enter<br/>Duration</span>
									<span class="c-CircleOption-Filled"><span class="groups-startDate"></span><span class="groups-endDate"></span></span>
								</span>
							</a>

							<a class="c-CircleOption-Clear c-CircleOption-Link icon-cross" data-step="permit" href="#"></a>
							<a class="c-CircleOption-Padlock c-CircleOption-Link icon-padlock1" data-step="permit" href="#"></a>
							<a class="c-CircleOption-Hide c-CircleOption-Link icon-hide1" data-step="permit" href="#"></a>
						</div>
						<div class="option-text addperson-text">PERMIT DURATION</div>
					</div>
					<div class="c-CirclesOption c-DayTime-CirclesOption c-CircleOption-Empty">
						<div class="option-icon">
							<a href="#" data-step="three" class="c-Circles c-Circles-DateTime">
								<span class="c-CirclesText">
									<span class="c-CircleOption-Empty-Span">ENTER<br/>DAY & TIME</span>
									<span class="c-CirclesText-DateTime-Day" data-day="all">ALL</span>
									<span class="c-CirclesText-DateTime-Day" data-day="mon">mo</span>
									<span class="c-CirclesText-DateTime-Day" data-day="tue">tu</span>
									<span class="c-CirclesText-DateTime-Day" data-day="wed">we</span>
									<span class="c-CirclesText-DateTime-Day" data-day="thur">th</span>
									<span class="c-CirclesText-DateTime-Day" data-day="fri">fr</span>
									<span class="c-CirclesText-DateTime-Day" data-day="sat">sa</span>
									<span class="c-CirclesText-DateTime-Day" data-day="sun">su</span>
								</span>
							</a>

							<a class="c-CircleOption-Clear c-CircleOption-Link icon-cross" data-step="daytime" href="#"></a>
							<a class="c-CircleOption-Padlock c-CircleOption-Link icon-padlock1" data-step="permit" href="#"></a>
							<a class="c-CircleOption-Hide c-CircleOption-Link icon-hide1" data-step="permit" href="#"></a>
						</div>
						<div class="option-text addvehicle-text">DAY & TIME</div>
					</div>
					<!--div class="c-CirclesOption c-Person-CirclesOption c-CircleOption-Empty">
						<div class="option-icon"><a href="#" data-step="four" class="c-Circles c-Circles-Person"><span class="c-CirclesText"><span class="c-CircleOption-Empty-Span">ENTER<br/>PERSON</span><span class="c-CircleOption-Filled"></span></span></a></div>
						<div class="option-text addpermit-text">PERSON</div>
						<a class="c-CircleOption-Hide icon-hide1" data-step="four" href="#"></a>
						<a class="c-CircleOption-Clear c-CircleOption-Link icon-cross" data-step="four" href="#"></a>
					</div>
					<div class="c-CirclesOption c-CircleOption-Empty">
						<div class="option-icon">
							<a href="#" data-step="five" class="c-Circles c-Circles-Vehicle">
								<span class="c-CirclesText c-VehicleText"><span class="c-CircleOption-Empty-Span">ENTER<br/>VEHICLE</span><span class="c-CircleOption-Filled"></span></span>
							</a>
							<a class="c-CircleOption-Hide icon-hide1" data-step="five" href="#"></a>
							<a class="c-CircleOption-Clear c-CircleOption-Link icon-cross" data-step="five" href="#"></a>
						</div>
						<div class="option-text addpermit-text">VEHICLE</div>
					</div-->
					<div class="c-CirclesOption c-Location-CirclesOption c-CircleOption-Empty">
						<div class="option-icon">
							<a href="#" data-step="four" class="c-Circles c-Circles-Location">
								<span class="c-CirclesText">
									<span class="c-CircleOption-Empty-Span">ENTER<br/>LOCATION</span>
									<span class="c-CircleOption-Filled"></span>
								</span>
							</a>

							<a class="c-CircleOption-Clear c-CircleOption-Link icon-cross" data-step="four" href="#"></a>
							<a class="c-CircleOption-Padlock c-CircleOption-Link icon-padlock1" data-step="four" href="#"></a>
							<a class="c-CircleOption-Hide c-CircleOption-Link icon-hide1" data-step="four" href="#"></a>
						</div>
						<div class="option-text addpermit-text">LOCATION</div>
					</div>
				</div>
				<div class="c-Footer c-Done-Footer">
					<a class="c-Footer-Button" href="#">SAVE</a>
					<a class="c-Footer-Delete-Button" href="#">DELETE GROUP</a>
					<a class="c-Footer-Cancel-Button" href="#">CANCEL</a>
				</div>
			</div>

			<div class="options set-two c-Permit-Options" data-set="two">
				<h2>PERMIT DURATION</h2>
				<?php
				$startDate = time();
				?>
				<div class="option-container c-PermitDuration-Container">
					<div class="c-Circle-Option-Box">
						<div class="c-Circle-Option" data-startdate="" data-enddate="" data-set="1"  data-float="left">
							<div class="option-icon">
								<span class="c-Circle icon-add c-Circle-NewAdd"><span>ADD CUSTOM DURATION</span></span>
							</div>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Day" data-date_number="1" data-date_filter="day"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 day", ($startDate)))) ?>" data-start="" data-end="" data-set="1"  data-float="center">
							<div class="option-icon"><span class="c-Circle">1 DAY</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Week" data-date_number="1" data-date_filter="week" data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 week", ($startDate)))) ?>" data-start="" data-end="" data-set="1"  data-float="right">
							<div class="option-icon"><span class="c-Circle">1 WEEK</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Month" data-date_number="1" data-date_filter="month"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 month", ($startDate)))) ?>" data-start="" data-end="" data-set="2" data-float="left">
							<div class="option-icon"><span class="c-Circle">1 MONTH</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-3Month" data-date_number="3" data-date_filter="month"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+3 month", ($startDate)))) ?>" data-start="" data-end="" data-set="2" data-float="center">
							<div class="option-icon"><span class="c-Circle">3 MONTH</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-6Month" data-date_number="6" data-date_filter="month"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+6 month", ($startDate)))) ?>" data-start="" data-end="" data-set="2" data-float="right">
							<div class="option-icon"><span class="c-Circle">6 MONTH</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
						<div class="c-Circle-Option c-Circle-Option-1Year" data-date_number="1" data-date_filter="year"  data-startdate="" data-enddate="<?= date("Y/m/d", (strtotime("+1 year", ($startDate)))) ?>" data-start="" data-end="" data-set="3" data-float="left">
							<div class="option-icon"><span class="c-Circle">1 YEAR</span></div>
							<span class="c-OptionTimer icon-calendar"></span>
						</div>
					</div>
					<div class="c-TimerSelectBox">
						<div class="c-TimerSelection-Inputs">
							<div class="c-TimerSelection-Inputs-Box">
								<span class="c-TimerSelection-Inputs-Spans">
									<input id="c-Groups-TimerSelect-StartTime" class="c-TimerSelect-StartTime c-TimerSelection-Input" type="text" placeholder="Enter Start Date" name="start_date">
								</span>
								<span class="c-TimerSelection-Inputs-Spans">
									<input id="c-Groups-TimerSelect-EndTime" class="c-TimerSelect-EndTime c-TimerSelection-Input" type="text" placeholder="Enter End Date" name="end_date">
								</span>
								<a class="c-TimerSelect-Save" href="#"><span>SAVE</span></a>
								<a class="c-TimerSelect-Close icon-cross" href="#"></a>
							</div>
							<div class="groupswidget-Box-overlay widgetpopup-Box-overlay widget-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 again..</span></div></div>
						</div>
					</div>
				</div>
				<!--div class="tooltip">
					<div class="tooltip-title"><span class="tooltip-title-tip">TIP</span></div>
					<div class="tooltip-content">Enter Date below.</div>
					<div class="tooltip-arrow bottom center"></div>
				</div-->
				<div class="c-Footer c-PermitDate-Footer" data-step="two">
					<a class="c-Footer-Button" href="#">SAVE</a>
					<a class="c-Footer-Done-Button" href="#">DONE</a>
				</div>
			</div>
			<div class="options set-three c-DayTime-Options" data-set="three">
				<h2>DAY & TIME</h2>
				<div class="option-container c-DayTimes">
					<div class="c-Circle-Option" data-day="all" data-start="00:00" data-end="00:00" data-set="1"  data-float="left">
						<div class="option-icon">
							<span class="c-Circle">ALL DAYS</span>
							<span class="c-OptionTimer icon-clock"></span>
						</div>
					</div>
					<div class="c-Circle-Option" data-day="mon" data-start="00:00" data-end="00:00" data-set="1"  data-float="center">
						<div class="option-icon"><span class="c-Circle">MON</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="tue" data-start="00:00" data-end="00:00" data-set="1"  data-float="right">
						<div class="option-icon"><span class="c-Circle">TUE</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="wed" data-start="00:00" data-end="00:00" data-set="2" data-float="left">
						<div class="option-icon"><span class="c-Circle">WED</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="thur" data-start="00:00" data-end="00:00" data-set="2" data-float="center">
						<div class="option-icon"><span class="c-Circle">THUR</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="fri" data-start="00:00" data-end="00:00" data-set="2" data-float="right">
						<div class="option-icon"><span class="c-Circle">FRI</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="sat" data-start="00:00" data-end="00:00" data-set="3" data-float="left">
						<div class="option-icon"><span class="c-Circle">SAT</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-Circle-Option" data-day="sun" data-start="00:00" data-end="00:00" data-set="3" data-float="center">
						<div class="option-icon"><span class="c-Circle">SUN</span></div>
						<span class="c-OptionTimer icon-clock"></span>
					</div>
					<div class="c-TimerSelectBox">
						<div class="c-TimerSelection-Inputs">
							<div class="c-TimerSelection-Inputs-Box">
								<span class="c-TimerSelection-Inputs-Spans">
									<span class="c-TimerSelection-Inputs-Spans-text">START TIME</span>
									<input id="c-Groups-TimerSelect-StartTime" class="c-TimerSelect-StartTime c-TimerSelection-Input" type="text" placeholder="00:00" name="start_time">
								</span>
								<span class="c-TimerSelection-Inputs-Spans">
									<span class="c-TimerSelection-Inputs-Spans-text">END TIME</span>
									<input id="c-Groups-TimerSelect-EndTime" class="c-TimerSelect-EndTime c-TimerSelection-Input" type="text" placeholder="00:00" name="end_time">
								</span>
								<a class="c-TimerSelect-AllDay" href="#"><span>ALL DAY</span></a>
								<a class="c-TimerSelect-Save" href="#"><span>SAVE</span></a>
								<a class="c-TimerSelect-Close icon-cross" href="#"></a>
							</div>

						</div>
					</div>
				</div>
				<div class="tooltip">
					<div class="tooltip-title"><span class="tooltip-title-tip">TIP</span></div>
					<div class="tooltip-content">This is a 24hr clock. enter time like this 0900 for 9AM.</div>
					<div class="tooltip-arrow bottom center"></div>
				</div>
				<div class="c-Footer c-DayTime-Footer" data-step="three">
					<a class="c-Footer-Button" href="#">SAVE</a>
					<a class="c-Footer-Done-Button" href="#">DONE</a>
				</div>
			</div>

			<div class="options set-four c-Options-Location" data-set="four">
				<div class="set-box c-option-location">
					<h2>LOCATION</h2>
					<div class="option-container">
						<div class="groupswidget-Box widgetpopup-Box widget-Box">
							<div class="option-container-firstbox active">
								<span class="option-container-firstbox-Text">Select A Location Below or </span>
								<a href="#" class="btn-save option-container-firstbox-BtnGo">ADD NEW LOCATION</a>
							</div>
							<div class="option-container-secondbox">
								<input class="c-add-input" type="text" name="person" placeholder="ENTER LOCATION"/>
								<a href="#" class="c-Clear-Handle c-BtnClear icon-cross"></a>
								<a href="#" class="btn-save c-BtnSave">ADD</a>
							</div>
							<div class="groupswidget-Box-overlay widgetpopup-Box-overlay widget-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 again..</span></div></div>
						</div>
						<div class="existing-div">
							<h5>SELECT LOCATION(S)</h5>
							<div class="existing-names">
								<a href="#">LIVERPOOL</a>
								<a href="#">LONDON</a>
								<a href="#">MANCHESTER</a>
							</div>
						</div>
					</div>
					<div class="c-Footer" data-step="four">
						<a class="c-Footer-Button" href="#">SAVE</a>
						<a class="c-Footer-Done-Button" href="#">DONE</a>
					</div>
				</div>
			</div>
			<div class="options set-seven c-option-done">
				<div class="option-container">
					<div class="option">
						<div class="option-icon icon-tick_circle1"></div>
						<div class="option-text Done-text">SAVED</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Group Widget End -->
