<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('header.php');
if(isset($_GET['phone'])){

 $booking = rand(111111,999999);
   $bookno = $booking;
    $phone = $_GET['phone']; //  required
$api_key = '55F6205B9C262A';
$contact = $phone;
 
$from = 'Egroceryboy';
$sms_text ='Your one time password is '.$bookno.' from egroceryboy ';


$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=10445&routeid=30&type=text&contacts=".$contact."&senderid=".$from."&msg=%20%20%20%20%20".$sms_text);
$response = curl_exec($ch);
curl_close($ch);
}
?>
    <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">
              <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="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">
                <button type="submit" value="login" name="btnregister" 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>

   <?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;
    }
  })
    });
  }

</script>


<style type="text/css">
.abcRioButton.abcRioButtonLightBlue {
    background: #dd4b39;
}
.abcRioButtonContents {
    color: white !important;
    font-weight: 500 !important;
}
.sgin {
    margin-top: 21px !IMPORTANT;
}
.mr-ten{
  margin-top: 10px;
}
  .loginBtn {
  box-sizing: border-box;
  position: relative;
  /* width: 13em;  - apply for fixed size */
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #FFF;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
  background-color: #4C69BA;
  background-image: linear-gradient(#4C69BA, #3B55A0);
  /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
  text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background-color: #5B7BD5;
  background-image: linear-gradient(#5B7BD5, #4864B1);
}
.loginBtn--google {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #DD4B39;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
}
</style><div class="error"></div>
<div class="success"></div>
<form id="frm-mobile-verification">
	<div class="form-row">
		<label>OTP is sent to Your Mobile Number</label>		
	</div>

	<div class="form-row">
		<input type="number"  id="mobileOtp" class="form-input" placeholder="Enter the OTP">		
	</div>

	<div class="row">
		<input id="verify" type="button" class="btnVerify" value="Verify" onClick="verifyOTP();">		
	</div>
</form>