<!DOCTYPE html>
<html lang="en">

<head>
<style>
	.bottomOption {
		display: none;
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 200px;
		z-index: 1;
		top: calc(100vh - 300px);
	}

	input[type="text"],
	select.form-control {
		background: transparent;
		border: none;
		border-bottom: 1px solid #000000;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 0;
	}

	input[type="text"]:focus,
	select.form-control:focus {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
</style>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=0.7">
	<link rel="icon" href="img/favicon.png" type="image/x-icon" />
	<link rel="apple-touch-icon" href="img/favicon.png">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title><?php echo APP_NAME;  ?></title>

	<!-- Google font -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">

	<!-- Custom stlylesheet -->
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<!-- <link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> -->
	<link type="text/css" rel="stylesheet" href="css/style1.css" />
	<!-- <link type="text/css" rel="stylesheet" href="css/fontawesome-free/css/all.min.css">
	<link rel="stylesheet" type="text/css" href="css/datatables.min.css"/> -->
	
	<!-- Plugin JavaScript -->
	<!-- <script type="text/javascript" src="js/javascript.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script> -->
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script> -->
	<!-- <script type="text/javascript" src="js/datatables.min.js"></script> -->
	<script type="text/javascript" src="js/sbg-util.min.js"></script>
	<script type="text/javascript" src="js/sbg-upload.js"></script>
</head>

<body>
	<div id="main">
		<div id="wrapper">
			<div id="content-wrapper">
				<div class="container-fluid" >
					<table class='table' id='dataTable' style='width:100%;' cellspacing='0'>
						<tr>
							<td align="left">
								<img src="<?php echo Util::getLogo() ; ?>" style="width: 225px;height: 80px;" />
								<!-- <h1>LOGO</h1> -->
							</td>
							<td>
								<h2 style="font-weight:bold; text-align:center;padding-top: 15px;">Welcome to</h2>
								<h2 style="padding-bottom: 10px; font-weight:bold; text-align:center">AO Plus Pte Ltd</h2>
							</td>
						</tr>
					</table>
					<div style="text-align: center;padding-bottom: 10px;">
						<h5 style="font-size: 25px;">For the quotation request,</h5>
						<h5 style="font-size: 25px;">please fill up the details</h5>
					</div>
					<div class="mb-3" id="div-main" style="margin-top: 10px;">
						<form id="form_add" name="form_add">
						<div class="card-body" style="padding-top: 0.5rem;">
							<div class="form-group row">
								<div class="col-lg-6">
									<div class="col-lg-12" style="padding-top: 10px;display: flex;">
										<input id="txtCompanyName" style="padding-right: 10px; display:inline-block" name="txtCompanyName" class="form-control" type="text" placeholder="Company Name">
										<span style="color:red">*</span>
									</div>
								</div>								
								<div class="col-lg-6" style="display: flex;">
									<div class="col-lg-3" style="display: flex;width: 145%;">
										<input style="display:inline-block; padding-left:10px" id="txtCompanyUEN" name="txtCompanyUEN" class="form-control" type="text" maxlength="10" placeholder="Company UEN">
										<span style="color:red">*</span>
									</div>
									<div class="col-lg-3" style="display: flex;"> 
										<input style="display:inline-block; padding-left:10px"  id="txtCompanyPhone" name="txtCompanyPhone" class="form-control" type="text" maxlength="15" placeholder="Company Phone">
										<span style="color:red">*</span>
									</div>
								</div>
								<div class="col-lg-6" style="display: flex;">
									<div class="col-lg-6" style="display: flex;width: 145%;">
										<input id="txtContactName" name="txtContactName" style="padding-right: 10px; display:inline-block" class="form-control" type="text" placeholder="Contact Name">
										<span style="color:red">*</span>
									</div>
									<div class="col-lg-3" style="display: flex;"> 
										<input style="display:inline-block; padding-left:10px"  id="txtContactNumber" name="txtContactNumber" class="form-control" type="text" maxlength="15" placeholder="Contact Number">
										<span style="color:red">*</span>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="col-lg-6" style="display: flex;">
										<input id="txtContactEmail" name="txtContactEmail" style="padding-right: 10px; display:inline-block" class="form-control" type="text" placeholder="Contact Email">
										<span style="color:red">*</span>
									</div>
								</div>
							</div>
							<div class="form-group row" style="margin-bottom: 0;">
								<div class="col-lg-4" style="text-align:left;">
									<label>1. What item that you are selling?</label>
									<textarea id="txtItemSelling" name="txtItemSelling" class="form-control"></textarea>
								</div>
								<div class="col-lg-4" style="text-align:left; padding-top:12px">
									<labe>2. How long the event will be held?</label>
									<input type="text" id="txtEventPeriod" name="txtEventPeriod" class="form-control" />
								</div>
								<div class="col-lg-4" style="text-align:left; padding-top:12px">
									<label>3. What is the equipment that you are required?</label>
									<textarea id="txtEquipments" name="txtEquipments" class="form-control"></textarea>
								</div>
							</div>
							<div class="tab-content" id="nav-tabContent">
								<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
									<div class="form-group row" style="margin-bottom: 0;">
										<div class="col-lg-4" style="text-align:left; padding-top:15px;">
											<label>Attach Supporting Document: </label>
										</div>
										<div class="col-lg-4" style="display: inline-flex;">
											<input type="file" style="height:50px; display:inline; margin-right: 5px;" class="form-control" id="txtAddProspectAttachment" name="txtAddProspectAttachment" onchange="encodeImageFileAsURLAddProspect(event);" />											
											<input type="hidden" class="form-control" id="txtAddProspectAttachmentFilename"/>
											<input type="hidden" class="form-control" id="txtAddProspectAttachmentFileExt"/>
											<textarea style="display: none;" id="txtAddProspectAttachmentFileBase64" cols="30" rows="10"></textarea>
											<!-- <button type='button' class='btn btn-success btn-lg' id='btnUpload' onclick="saveImageToServer();">Upload</button> -->
										</div>
										<div class="col-lg-6" id="view_doc">
											<a id="viewDoc" name="viewDoc" href="#" onclick="openPreview()"></a>
										</div>
										<div style="display:none;">
											<iframe  id="frame" width="100%"; height="100%"
												src="" frameBorder="0"></iframe>
										</div>
									</div>	
								</div>
							</div>
						</div>
						<div>
							<div class="row">
								<div class="col-lg-12" style="text-align: right;">
									<button type="reset" class="btn btn-secondary btn-lg" id='btnCancel' onclick="clearEntry();">Cancel</button>
									<button type="reset" class="btn btn-primary btn-lg mr-2" id='btnNew' onclick="addRecord();">Submit</button>
								</div>
								<div class="col-lg-12" style="text-align: center;">
									<span style="font-size: 80%;">Version 1.0.0</span>
								</div>
							</div>
						</div>
					</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		var add_url = "<?php echo Util::convertLink("AddProspect") ; ?>" ;
		<?php include (PATH_CODE . "js/prospect/addprospect.js") ; ?>
	</script>
</body>
</html>