<style>
  * {
    box-sizing: border-box
  }

  /* Full-width input fields */
  input[type=text],
  input[type=email],
  input[type=password] {
    width: 100%;
    padding: 10px 15px;
    margin: 0px 0 8px 0;
    display: inline-block;
    border: 1px solid #ADB4C2;
    background: none;
    border-radius: 4px;
  }

  input[type=text]:focus,
  input[type=email]:focus,
  input[type=password]:focus {
    background-color: #ddd;
    outline: none;
  }

  hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
  }

  /* Set a style for all buttons */
  button {
    border-radius: 4px;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
  }

  button:hover {
    opacity: 1;
  }

  /* Extra styles for the cancel button */
  .googlebtn {
    padding: 14px 10px;
    background-color: #ffffff;
    color: #ADB4C2;
    box-shadow: 0px 0px 10px;
  }

  /* Float cancel and signup buttons and add an equal width */
  .googlebtn {
    float: left;
    width: 100%;
  }

  .signinbtn {
    float: left;
    width: 100%;
  }

  .orspan {
    float: left;
    text-align: center;
    width: 100%;
    font-weight: bold;
    line-height: 40px;
  }

  /* Add padding to container elements */
  .container {
    padding: 16px;
  }

  /* Clear floats */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

  .g-signin2 {
    display: inline-block;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #eeefff;
  }

  .g-signin2>div {
    width: 100% !important;
    height: 40px !important;
  }

  .g-signin2>div .abcRioButtonIcon {
    padding: 12px !important;
  }

  .g-signin2>div .abcRioButtonContents {
    font-size: 16px !important;
    margin-right: 48px;
  }

  /* Change styles for cancel button and signup button on extra small screens */
  @media screen and (max-width: 300px) {

    .googlebtn,
    .signinbtn,
    .orspan {
      width: 100%;
    }
  }
</style>

<div class="col-md-6" style="margin:0px auto;">
<?php
if($verification){
?>
<div class="alert alert-info" role="alert">
<strong> Your account is verified successfully! Please login to access!</strong>
</div>
<?php
}
?>
  <form action="<?php echo HTTP_SITE_URL; ?>/users/login" style="border:1px solid #ccc;background:#FFFFFF;" method="POST">
    <div style="padding:15px;">
      <h5>Sign in to your Account</h5>
      <span class="inner"></span>
      <?php echo $this->Session->read('system.message'); ?>
      <br>

      <label for="email" class="label"><b>Email Address* </b></label>
      <input type="email" placeholder="Enter your Email Address" name="email" required>

      <label for="psw" class="label"><b>Password*</b></label>
      <input type="password" placeholder="Enter Password" name="password" required>

      <label for="remme" class="label"><input type="checkbox" id="remme" name="remme" value="on"> <strong>Remember Me</strong></label>

      <div class="clearfix">
        <button type="submit" class="signinbtn btn-primary" name="singinbtn">Sign In</button>

        <div>
          <span class="orspan"> OR </span>
          <meta name="google-signin-scope" content="profile email">
          <meta name="google-signin-client_id" content="<?php echo GOOGLE_CLIENT_ID; ?>.apps.googleusercontent.com">
          <script src="https://apis.google.com/js/platform.js" async defer></script>

          <div class="g-signin2" data-onsuccess="onSignIn"></div>
          <!--        data-onfailure="onSignInFailure"-->

          <!--        <a href="#" onclick="signOut();">Sign out</a>-->
          <!--button type="button" class="googlebtn"><img style="display:inline-block;height:25px;" src="<?= HTTP_SITE_URL . '/images/g.png' ?>" /><span style="mt-1"> Sign in with Google</span></button-->
        </div>
      </div>

      <br>
      <p>
        <a style="font-weight:bold;color:dodgerblue" href="<?php echo HTTP_SITE_URL; ?>/users/forgotpass">Forgot Password?</a>
        <a style="font-weight:bold;color:dodgerblue;float: right;" href="<?php echo HTTP_SITE_URL; ?>/users/register">Are not Registered?</a>
      </p>
    </div>
  </form>
</div>

<script>

  function onSignIn(googleUser) {
    if (document.referrer && document.referrer != "") {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function() {});
    auth2.disconnect();
    }
    // Useful data for your client-side scripts:
    var profile = googleUser.getBasicProfile();
    var email = profile.getEmail();
    var name = profile.getName();
    var profileId = profile.getId();
    // console.log("ID: " + profile.getId()); // Don't send this directly to your server!
    // console.log('Full Name: ' + profile.getName());
    // console.log('Given Name: ' + profile.getGivenName());
    // console.log('Family Name: ' + profile.getFamilyName());
    // console.log("Image URL: " + profile.getImageUrl());
    // console.log("Email: " + profile.getEmail());

    // The ID token you need to pass to your backend:
    var id_token = googleUser.getAuthResponse().id_token;
    // console.log("ID Token: " + id_token);

    $.ajax({
      type: 'POST',
      crossDomain: true, 
      dataType: "json", 
      url: "https://"+window.location.host+"/users/login", 
      //url: "<?= HTTP_SITE_URL ?>/users/googlesignin",
      // Always include an `X-Requested-With` header in every AJAX request,
      // to protect against CSRF attacks.
      // headers: {
      //     'X-Requested-With': 'XMLHttpRequest'
      // },
      // contentType: 'application/octet-stream; charset=utf-8',
      //
      success: function(result) {
        // Handle or verify the server response.
        if (result == true)
          window.location.href = "<?= HTTP_SITE_URL ?>/pages/myExpenses";

      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        // $( ".inner" ).append("");
        $(".inner").html(XMLHttpRequest.responseText);
        //alert(XMLHttpRequest.responseText);
      },

      // processData: false,
      data: {
        profileId: profileId,
        name: name,
        email: email,
        id_token: id_token
      }
    });


  }

  function onSignInFailure() {
    //window.location.href = "<? //=HTTP_SITE_URL ?>///users/login";
    //window.location.href = "<? //=HTTP_SITE_URL ?>///pages/products";
  }

  /*function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function() {
      console.log('User signed out.');
    });
  }*/
</script>