<html>
    <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Admin</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <link href='    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
  

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->

<!-- Sparkline -->
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--<script src="dist/js/pages/dashboard.js"></script>-->
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>

</head>
<body id="LoginForm">
<div class="container">
<!--    <img src='logo-kl.png'>-->
<div class="login-form">
<div class="main-div">
    <div class="panel">
   <h2>Amul Polymers Login</h2>
   <p>Please enter your User id and password</p>
   </div>
  

        <div class="form-group">
			<input type="text" class="form-control" id="uname" placeholder="User Id">
        </div>
        <div class="form-group">
			<input type="password" class="form-control" id="pwd" placeholder="Password">
        </div>
		<div id="contactdiv" style="display:none">
			<div class="form-group">
				<select name="msisdn" id="msisdn" class="form-control" required>
					<option value="">Select Contact number</option>
					<option value="9900963689">99XXXXXX89</option>
					<option value="7406011004">74XXXXXX04</option>
					<option value="7406011002">74XXXXXX02</option>
					<!--<option value="7829652092">74XXXXXX02</option>-->
                    
				</select>
				
				<br/>
				<input type="otp" class="form-control" id="otp" placeholder="Enter OTP">
			</div>
			<button type="submit" class="btn btn-primary" id='sendotp' style="display:none">Get OTP</button>
		</div>
		
        <button type="submit" class="btn btn-primary" id='login'>Login</button>
		
		<button type="submit" class="btn btn-primary" id='login1' style="display:none">Login</button>

   
    </div>

</div></div></div>

<script>
$("#login").click(function(){
	var uname=$("#uname").val();
    var pwd=$("#pwd").val();
    $.ajax({
	url:"checkuser.php" ,
	data:{uname:uname,pwd:pwd},
	type:"POST",
	dataType:"JSON",
	success:function(data)
	{	
		if(data==1)
		{
			$("#contactdiv").css("display", "block");
			$("#sendotp").css("display", "block");
			$("#login").css("display", "none");
			$("#uname").attr('readonly', true);
			$("#pwd").attr('readonly', true);
		}
		else if(data==0)
		{
			$("#contactdiv").css("display", "none");
			$("#sendotp").css("display", "none");
			$("#login").css("display", "block");
			alert("Invalid User!");
			
		}
	},
	error:function(xhr){
       alert("error");
	}
});
});

</script>



<script>
$("#sendotp").click(function(){
	var uname=$("#uname").val();
    var pwd=$("#pwd").val();
	var msisdn=$("#msisdn").val();
	
	if(msisdn == "")
	{
		alert("Select Contact no.");
	}
	else
	{
	
		$.ajax({
		url:"sendsms.php" ,
		data:{uname:uname,pwd:pwd,msisdn:msisdn},
		type:"POST",
		dataType:"JSON",
		success:function(data)
		{	
			if(data==1)
			{
				$("#sendotp").css("display", "none");
				$("#login").css("display", "none");
				$("#login1").css("display", "block");
				alert('OTP sent!');
			}
		},
		error:function(xhr)
		{
		   alert("error");
		}
		});
	}

});

</script>


<script>
$("#login1").click(function(){
    var uname=$("#uname").val();
    var pwd=$("#pwd").val();
	var msisdn=$("#msisdn").val();
	var otp=$("#otp").val();
    $.ajax({
	url:"login.php" ,
	data:{uname:uname,pwd:pwd,msisdn:msisdn,otp:otp},
	type:"POST",
	dataType:"JSON",
  
   success:function(data1)
   {
		if(data1==1)
		{
			window.location.href="admin.php";
		}
		else
		{
			alert("Invalid User");
		}
       
   },
   error:function(xhr){
       alert(xhr.responseText);
   }
});
});

</script>

</body>
</html>
<style>
body#LoginForm{ background-image:url("https://hdwallsource.com/img/2014/9/blur-26347-27038-hd-wallpapers.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; padding:10px;}
.form-heading { color:#fff; font-size:23px;}
.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;}
.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;}
.login-form .form-control {
  background: #f7f7f7 none repeat scroll 0 0;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
}
.main-div {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 2px;
  margin: 10px auto 30px;
  max-width: 38%;
  padding: 50px 70px 70px 71px;
}

.login-form .form-group {
  margin-bottom:10px;
}
.login-form{ text-align:center;}
.forgot a {
  color: #777777;
  font-size: 14px;
  text-decoration: underline;
}
.login-form  .btn.btn-primary {
  background: #f0ad4e none repeat scroll 0 0;
  border-color: #f0ad4e;
  color: #ffffff;
  font-size: 14px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0;
}
.forgot {
  text-align: left; margin-bottom:30px;
}
.botto-text {
  color: #ffffff;
  font-size: 14px;
  margin: auto;
}
.login-form .btn.btn-primary.reset {
  background: #ff9900 none repeat scroll 0 0;
}
.back { text-align: left; margin-top:10px;}
.back a {color: #444444; font-size: 13px;text-decoration: none;}

    
</style>

