<?php
	session_start();

    require('connect.php');
    require('functions.php');

    
	echo '<script>alert("before clicking the button");</script>';

if(isset($_REQUEST['customer_subt_btn'])){

echo '<script>alert("after clicking the button");</script>';
echo '<script type=\'text/javascript\'>'; 
    echo 'alert("hello'.$_POST['customer_name'].'");'; 
    echo '</script>';
	//echo $_POST['customer_name'];
	
  
}
?> 





<!DOCKTYPE html>
<html>
<head>
  <title>Sign Up</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	
	
		
	<script>
		function customer_submit_btn_onclick(){
		localStorage.setItem("user_type", "customer");

		var enteredEmail=document.getElementById("cemail").value;
		var enteredPassword=document.getElementById("cpassword").value;
		var enteredConfirmPassword=document.getElementById("cpasswordconfirm").value;
		var enteredName=document.getElementById("cname").value;
		var enteredmobile=document.getElementById("cmobile").value;
		
		alert(enteredmobile);
		if(enteredPassword=="" || enteredEmail=="" || enteredConfirmPassword=="" || enteredName==""){
			alert("Enter all fields");
		}
		else{
			//check for @gmail.com
			if(enteredEmail.substr(enteredEmail.length - 10)=="@gmail.com"){
				if(enteredPassword==enteredConfirmPassword){

				}
				else{
					alert("Passwords do not match");
				}
			}
			else{
				alert("Please use email provided by vit.edu");
			}
		}

	}	
	
	</script>
	
	
  <style>
  form {
      border: 3px solid #f1f1f1;
  }

  input[type=text], input[type=password] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
  }

  button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
  }

  button:hover {
      opacity: 5.0;
  }

  .cancelbtn {
      width:100%
      padding: 10px 18px;
      background-color: #f44336;
  }

  .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
  }

  img.avatar {
      width: 40%;
      border-radius: 50%;
  }

  .container {
  	  width:100%;
      padding: 16px;
  }

  span.psw {
      float: right;
      padding-top: 16px;
  }
  .footer {
    color: white;
    background-color: black;
    margin-left: 0px;
    text-align: center;
    position:fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    }

  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
      span.psw {
         display: block;
         float: none;
      }
      .cancelbtn {
         width: 70%;
      }
  }
  </style>
</head>


<body style="overflow-x:hidden;background-size:100% 100%;background-repeat: no-repeat;bottom: 0;background-attachment: fixed;" background="images/blogin.jpg">

<div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="padding: 0px margin:0px">
<div class="main" >
<div class="col-sm-6" >
<h1 align="left" style="margin-left:10px;" ><font color="white" size="15">   ABHI CAB</font>
  	<img src="images/logo.png" alt="google.com" width="100" height="50" align="left" style="margin-left:10px;">
  	</h1>
  	</div>
  	<div class="col-sm-6" style="margin-top:40px;">
    <ul class="nav navbar-nav navbar-right" style="margin-right:10px;">
    
      <li >
        <a href="index.html"> Home   <span class="glyphicon glyphicon-home"></span></a>
      </li>
		
        <li class="active" ><a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="caret"></span></a>
				<ul class="dropdown-menu" >
          <li align="right"><a href="index.html">Customer  <span class="glyphicon glyphicon-user"></span></a></li>
          <li align="right"><a href="index.html">Admin  <span class="glyphicon glyphicon-user"></span></a></li>
          <li align="right"><a href="index.html">Driver  <span class="glyphicon glyphicon-user"></span></a></li>
				</ul>
			</li>
		 
      <li><a href="main.html">Book Now  <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
      <li><a href="about_us">About Us</a></li>
      <li><a href="contact.html">Contact Us <span class="glyphicon glyphicon-earphone"></span></a></li>
	</ul>
	</div>
  </div>
</nav>
</div>

<div class="col-sm-2"></div>
<div class="col-sm-8">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" style="margin-top:100px; margin-bottom:100px" method="post">
    <div class="imgcontainer">
      <img src="images/login.png" alt="Avatar" class="avatar">
    </div>

    <div class="container">
    
      <h2 align="center"><font color="red"><b>CUSTOMER SIGN UP</b></font></h2>
      <label><b><font color="white" size="4">Name</font></b></label>
      <input type="text" placeholder="Enter Name" name="customer_name" id="cname" required>
	  <hr>
	  
	  
      
      <div class="col-sm-6">
      <button type="submit" name="customer_subt_btn" onClick="customer_submit_btn_onclick()">Submit</button>
      </div>
      
      <div class="col-sm-6">
      <a  href="index.html"><button type="button" class="cancelbtn">Cancel</button></a>
    </div>
	</div>

  </form>
	<div class="copy-right" style="padding:0px; bottom:true;">
  <p align="center">&copy; 2018 AbhiCab.com</p>
</div>
  

<div class="col-sm-2" ></div>

<!-- Footer -->
  <footer class="footer">
    <h5>Copyright &copy; 2018 AbhiCab.com</h5>
  </footer>



</body>

</html>





