<!DOCTYPE html>
<html lang="en">
	<head>
		<title>uBus | Admin System</title>
		<meta charset="utf-8">
		<meta name="description" content="uBus Ticket Reservation System administrator tools.">
		<link rel="icon" type="image/x-icon" href="img/favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">		
		<link rel="stylesheet" type="text/css" href="css/rolling.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
		<script src="js/parse-1.6.7.js"></script>
		<script type="text/javascript" src="js/moment.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
	</head>
	<body>
		<header class="header">
			<a href="index.html" class="header__logo"><img src="img/logo.png" width="40px"></a>
			<nav class="header__nav" id="navigation">
				<a href=""></a>
				<a href=""></a>
			</nav>
		</header>
		<main class="container">
			<div id="loader" style="position: fixed; z-index: 100; width: 100%; height: 100%; display: block; background-color: gray;top: 80px;left: 0;-webkit-opacity: 0.5;">
				<div class='uil-rolling-css' style='margin:20vh auto; -webkit-transform:scale(0.6);'><div><div></div><div></div></div></div>	
			</div>
			<p id="successMessage" style="display:none; color: white; font-weight: 500; background-color:darkgreen; padding: 20px;">Trip created successfully!</p>
			<div class="createTrip card">
				<form class="createTrip__form">
					<h1 class="createTrip__header">Create Trip</h1>
					<label class="createTrip__selectLabel">
						<span>Day: </span>
						<select class="createTrip__select" id="selectScheduleDay">
							<option>--</option>
						</select>
					</label>
					<label class="createTrip__selectLabel">
						<span>Time: </span>
						<select class="createTrip__select" id="selectScheduleTime">
							<option>--</option>
						</select>
					</label>
					<hr>
					<hr>
					<label class="createTrip__selectLabel">
						<span>Plate Number: </span>
						<select class="createTrip__select" id="selectPlate">
							<option>--</option>
						</select>
					</label>
					<label class="createTrip__information">
						<span>Bus Type: </span>
						<input type="text" id="busType" disabled="true" size="10">
					</label>			
					<label class="createTrip__submit" >
						<button id="createTrip__btn">Create Trip</button>
					</label>
				</form>
			</div>
			<div class="card">
					<label for="startDate">
						<span>Start Date</span>
						<input type="month" id="startDate">
					</label>
					<label for="endDate">
						<span>End Date</span>
						<input type="month" id="endDate">
					</label>
					<button class="generateTrips__btn">Generate Trips</button>	
				</form>
			</div>
		</main>
	</body>
</html>