<!-- <script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="47908997252-1u4lc6vkc93sfmljir50158argbc68mf.apps.googleusercontent.com">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0&appId=2794681217418973&autoLogAppEvents=1" nonce="uW82cSp2"></script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v8.0" nonce="Q2bnwXzE"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0&appId=2794681217418973&autoLogAppEvents=1" nonce="sUyhn1QY"></script> -->
<?php
include 'connect.php';
include('header.php');
$msg=""; 
if(isset($_POST['btnregister']))
{
  $name=$_POST['txtname'];  
  $email=$_POST['txtemail'];  
  $pass=$_POST['txtpass'];  
  $pass=md5($pass);

  $phone=$_POST['txtphone'];  
  $query="SELECT * FROM users WHERE email='$email'";
  $res=mysqli_query($con,$query);
  $num=mysqli_num_rows($res);
  if($num>=1){ 
    $row=mysqli_fetch_array($con,$res);
    if($row['otp']!=''){
     $booking = rand(111111,999999);
     $bookno =$booking;
     $otp=$bookno;

    // $address = "Dehradun"; // required
    // $to = "Masoori"; // required
    $phone = $phone; //  required
   // $email = "piyushdhodiyal@gmail.com"; // required
    
    // $date = "22-09-2020"; 
    // $time = "04:00"; 
    // $cartype = "Delux"; 
    // $way = "One way";
    $api_key = '360E6956915C71';
    $contact = $phone;
    $template_id = "1207162529040099518";
    $from = 'CREDII';
    $sms_text ='Dear Customer, '.$bookno.' is your one time password (OTP) - CDI';

    $ch = curl_init();
    curl_setopt($ch,CURLOPT_URL, "https://sms.creativedigitalinfotech.com/app/smsapi/index.php");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, "key=".$api_key."&campaign=13047&routeid=30&type=text&contacts=".$contact."&senderid=".$from."&msg=%20%20%20%20%20".$sms_text."&template_id=".$template_id);
    $response = curl_exec($ch);
    curl_close($ch);


    $text = base64_encode(md5($sms_text)); 

    echo $sms_text;
    $res=mysqli_query($con,"UPDATE users SET otp='$otp' WHERE email='$email'");
    $msg="Otp has been sent to your mobile !";
  }
  else{
    $msg ='Already Registered.'; 
  }   
}else{

  $query= "insert into users (name,email,mobile,password)values('$name','$email','$phone','$pass')";
  $res=mysqli_query($con,$query);
  if($res)
  {


   $otp = rand(111111,999999);

   $api_key = '360E6956915C71';
   $contact = $phone;
   $template_id = "1207162529040099518";
   $from = 'CREDII';
   $sms_text ='Dear Customer, '.$otp.' is your one time password (OTP) - CDI';

   $ch = curl_init();
        curl_setopt($ch,CURLOPT_URL, "https://sms.creativedigitalinfotech.com/app/smsapi/index.php");
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, "key=".$api_key."&campaign=13047&routeid=30&type=text&contacts=".$contact."&senderid=".$from."&msg=".$sms_text."&template_id=".$template_id);
        //$response = curl_exec($ch);
         curl_exec($ch);
         curl_close($ch); 


   // $text = base64_encode(md5($sms_text)); 
   $res=mysqli_query($con,"UPDATE users SET otp='$otp' WHERE email='$email'");
//echo $sms_text;
$msg="Otp has been sent to your mobile !";   //header("loaction:https://www.egroceryboy.com/verification-form.php?email=$email");
}
else
{
  $msg= "please try again later".mysqli_error($con);

}
}
}
if(isset($_POST['btnotp'])){
  $email=$_POST['vremail'];
  $otp=$_POST['otp'];
  $res=mysqli_query($con,"SELECT * FROM users WHERE email='$email'");
  $row=mysqli_fetch_array($res);
  $tbl_otp=$row['otp'];
  if($otp==$tbl_otp){
   $_SESSION['id']=$row['id'];
   $_SESSION['userid']=$row['id'];
   $_SESSION['name']=$row['name'];
//   print_r($row);
   echo $otp;
   header('location:index.php');
 }
 else{
    // print_r($row);
       //echo $otp;
  $msg="Otp did not match !";
}
}
if(($msg=='Otp has been sent to your mobile !') or $msg=="Otp did not match !"){ ?>
  <div class="hero-wrap hero-bread" style="background-image: url('images/bg_1.jpg');">
    <div class="container">
      <div class="row no-gutters slider-text align-items-center justify-content-center">
        <div class="col-md-9 ftco-animate text-center">
          <p class="breadcrumbs"></p>
          <h1 class="mb-0 bread">Otp Verification</h1>
        </div>
      </div>
    </div>
  </div>

  <section class="ftco-section contact-section bg-light">
    <div class="container">

      <div class="row block-9">
        <div class="col-md-6 order-md-last d-flex">
          <form method="post" class="bg-white p-5 contact-form">
            <input type="hidden" name="vremail" value="<?php echo $email; ?>">
            <div class="form-group">
              <?php
              if($msg!="")
              {
                echo "<p class='alert alert-success'>$msg</p>";
              }
              ?>


              <div class="form-group">
               <!--  <label>Otp has been sent to your mobile !</label> -->
               <input name="otp" placeholder="Otp" class="common-input mb-20 form-control" required="" type="text">
             </div>

             
             <div class="form-group">
              <button type="submit" value="login" name="btnotp" class="btn btn-primary py-3 px-5">Submit</button>
            </div>


            <div class="sgin"><span>Already have anccount? <a href="login.php">Log IN </a> </span></div>
          </form>
        </div>
      </div>

      <div class="col-md-6 d-flex">
        <div ><img src="logo.png"></div>
      </div>
    </div>
  </div>
</section>

<? }
else{
  ?>

  <?php 

  ?>
  <div class="hero-wrap hero-bread" style="background-image: url('images/registration-banner.jpg');">
    <div class="container">
      <div class="row no-gutters slider-text align-items-center justify-content-center">
        <div class="col-md-9 ftco-animate text-center">
         <p class="breadcrumbs"></p>
         <h1 class="mb-0 bread">Sign Up</h1>
       </div>
     </div>
   </div>
 </div>

 <!--<section class="ftco-section contact-section bg-light">-->
 <!-- <div class="container">-->

 <!--   <div class="row block-9">-->
 <!--     <div class="col-md-6 order-md-last d-flex">-->
 <!--       <form method="post" class="bg-white p-5 contact-form">-->
 <!--         <div class="form-group">-->
            <?php
            if($msg!="")
            {
              echo "<p class='alert alert-success'>$msg</p>";
            }
            ?>
    <!--        <input name="txtname" placeholder="Enter full name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'user name'" class="common-input mb-20 form-control" required="" type="text">-->
    <!--      </div>-->
    <!--      <div class="form-group">-->
    <!--        <input name="txtemail" placeholder="Enter email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" class="common-input mb-20 form-control" required="" type="email">-->

    <!--      </div>-->
    <!--      <div class="form-group">-->
    <!--        <input name="txtphone" placeholder="Phone" onfocus="this.placeholder = ''" onblur="this.placeholder = 'phone'" class="common-input mb-20 form-control" required="" type="text">-->
    <!--      </div>-->

    <!--      <div class="form-group">-->
    <!--        <input name="txtpass" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'" class="common-input mb-20 form-control" required="" type="password">-->
    <!--      </div>-->
    <!--      <div class="row">-->
    <!--      <div class="col-md-5 form-group">-->
    <!--        <button type="submit" value="login" name="btnregister" class="btn btn-primary py-3 px-5">SignUp</button>-->
    <!--      </div>-->
    <!--      <div class="col-md-7">-->
    <!--        <div class="sgin"><span>Already have anccount? <a href="login.php">Log IN </a> </span></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--        </form>-->

    <!--      </div>-->

    <!--      <div class="col-md-6 d-flex">-->
    <!--      	<div ><img src="logo.png"></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->
    <!--</section>-->

    <div class="log_in my-4">
<!--<img class="wave" src="https://raw.githubusercontent.com/sefyudem/Responsive-Login-Form/master/img/wave.png">-->
	<div class="container">
		<div class="img">
			<!--<img src="https://raw.githubusercontent.com/sefyudem/Responsive-Login-Form/master/img/bg.svg">-->
			<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets10.lottiefiles.com/packages/lf20_kdCeeh2u4M.json"  background="transparent"  speed="1" loop autoplay></lottie-player>
		</div>
		<div class="login-content">
			<form method="post" class="contact-form">
				<img src="logo.png">
				<h2 class="title">Sign Up</h2>
				<?php
            if($msg!="")
            {
              echo "<p class='alert alert-success'>$msg</p>";
            }
            ?>
           		<div class="input-div one">
           		   <div class="i">
           		   		<i class="fas fa-user"></i>
           		   </div>
           		   <div class="div">
           		   		<h5>Full Name</h5>
           		   	<input type="text" name="txtname" class="input" required>
           		   </div>
           		</div>
           		<div class="input-div one">
           		   <div class="i">
           		   		<i class="fas fa-envelope"></i>
           		   </div>
           		   <div class="div">
           		   		<h5>Email ID</h5>
           		   		<input type="email" name="txtemail" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="input" required>
           		   </div>
           		</div>
           		<div class="input-div one">
           		   <div class="i">
           		   		<i class="fas fa-phone-alt"></i>
           		   </div>
           		   <div class="div">
           		   		<h5>Phone Number</h5>
           		   		<input type="number" name="txtphone" class="input" required>
           		   </div>
           		</div>
           		<div class="input-div pass">
           		   <div class="i"> 
           		    	<i class="fas fa-lock"></i>
           		   </div>
           		   <div class="div">
           		    	<h5>Password</h5>
           		    	<input type="password" name="txtpass" class="input" required>
            	   </div>
            	</div>
            	<div class="sgin"><span>Already have anccount? <a href="login.php">Log IN </a> </span></div>
            	<input type="submit" name="btnregister" class="btn" value="SignUp">
            </form>
        </div>
    </div>
</div>


  <?php } include('footer.php');
  ob_flush();
  ?>


  <script type="text/javascript">

    function onSignIn(googleUser) {
      var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

  var email=profile.getEmail();

  var name=profile.getName();
  $.ajax({
    url:'social_login.php',
    method:'POST',
    data:{name:name,email:email,social:'google'},
    success:function(data){
      function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
          console.log('User signed out.');
        });
      }
      signOut();
      var word="https://egroceryboy.com/social_login.php?email="+email+"&password="+data;

      window.location.href = "https://egroceryboy.com/social_login.php?email="+email+"&password="+data;
    }
  })
}
</script>

<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
      'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
    //  console.log(response);

    document.getElementById('status').innerHTML =
    'Thanks for logging in, ' + response.name + '!';
    var email=(response.name).split(" ")[0]+"@fb.com";

    var name=response.name;
  //alert(email);
  $.ajax({
    url:'social_login.php',
    method:'POST',
    data:{name:name,email:email,social:'Facebook'},
    success:function(data){

      var word="https://egroceryboy.com/social_login.php?email="+email+"&password="+data;

      window.location.href = "https://egroceryboy.com/social_login.php?email="+email+"&password="+data;
    }
  })
});
  }


const inputs = document.querySelectorAll(".input");


function addcl(){
	let parent = this.parentNode.parentNode;
	parent.classList.add("focus");
}

function remcl(){
	let parent = this.parentNode.parentNode;
	if(this.value == ""){
		parent.classList.remove("focus");
	}
}


inputs.forEach(input => {
	input.addEventListener("focus", addcl);
	input.addEventListener("blur", remcl);
});
</script>


<style type="text/css">
  .log_in .wave{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100%;
	z-index: -1;
}

.log_in .container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
}

.log_in .img{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.log_in .login-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}

.log_in .img img{
	width: 500px;
	filter: invert(1);
}

.log_in form{
	width: 360px;
}

.login-content img{
    height: 100px;
}

.log_in .login-content h2{
	margin: 15px 0;
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 2.9rem;
    font-weight: 600;
}

.log_in .login-content .input-div{
	position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 2px solid #d9d9d9;
}

.login-content .input-div.one{
	margin-top: 0;
}

.log_in .i{
	color: #d9d9d9;
	display: flex;
	justify-content: center;
	align-items: center;
}

.log_in .i i{
	transition: .3s;
}

.log_in .input-div > div{
    position: relative;
	height: 45px;
}

.log_in .input-div > div > h5{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	transition: .3s;
}

.log_in .input-div:before, .input-div:after{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 0%;
	height: 2px;
	background-color: var(--main-color);
	transition: .4s;
}

.log_in .input-div:before{
	right: 50%;
}

.log_in .input-div:after{
	left: 50%;
}

.log_in .input-div.focus:before, .input-div.focus:after{
	width: 50%;
}

.log_in .input-div.focus > div > h5{
	top: -5px;
	font-size: 15px;
}

.log_in .input-div.focus > .i > i{
	color: var(--main-color);
}

.log_in .input-div > div > input{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background: none;
	padding: 0.5rem 0.7rem;
	font-size: 1.2rem;
	color: #555;
	font-family: 'poppins', sans-serif;
}

.log_in .input-div.pass{
	margin-bottom: 4px;
}

.log_in a{
	/*display: block;*/
	text-align: right;
	text-decoration: none;
	color: #999;
	font-size: 0.9rem;
	transition: .3s;
}

.log_in a:hover{
	color: var(--main-color);
}

.log_in .btn{
	display: block;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	outline: none;
	border: none;
	background-color: var(--main-color);
	background-size: 200%;
	font-size: 1.2rem;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
	margin: 1rem 0;
	cursor: pointer;
	transition: .5s;
}
.log_in .btn:hover{
	background-position: right;
}


@media screen and (max-width: 1050px){
	.log_in .container{
		grid-gap: 5rem;
	}
}

@media screen and (max-width: 1000px){
	.log_in form{
		width: 290px;
	}

	.log_in .login-content h2{
        font-size: 2.4rem;
        margin: 8px 0;
	}

	.log_in .img img{
		width: 400px;
	}
}

@media screen and (max-width: 900px){
	.log_in .container{
		grid-template-columns: 1fr;
	}

	.log_in .img{
		display: none;
	}

	.log_in .wave{
		display: none;
	}

	.log_in .login-content{
		justify-content: center;
	}
}
</style>