<!-- Header Wrap Starts -->
<?php include "common/header.php"; 


if (isset($_SESSION['normal_user_cey'])) {
  $redirectUrl = "index";
  echo "<script type=\"text/javascript\">";
  echo "window.location.href = '$redirectUrl'";
  echo "</script>";
}
?> 


<!-- Header Wrap Ends -->

<?php include "common/navbar.php"; ?> 

<!-- Main Container Starts -->
<div class="main-container" >
  <!-- Product Container Starts -->
  <div id="product-product" class="container" style="background-image: url(image/bg.jpg); ">
    <!-- Row Starts -->  
    <div class="col-lg-3"></div>
    <div class="row col-lg-6">

      <div id="content" class="login">
        <h3 class="page-heading-1">SIGN IN</h3>
        <form class="my-4" method="post" id="login_form" action="javascript:void(0);">
          <div class="row">
            <div class="form-group col-lg-12 mb-3">
              <label class="mb-1">Username<font color="#FF3300">*</font></label>
              <input type="text" class="form-control" id="username" name="username" placeholder="" required autofocus><span class="help-block"></span>
            </div>
            <div class="form-group col-lg-12 mb-3">
              <label class="mb-1">Password<font color="#FF3300">*</font></label>
              <input type="password" class="form-control" id="password" name="password" placeholder="" required autocomplete="off"><span class="help-block"></span>
            </div>
          </div>
          <div id="errorDiv"></div>
          <div class="form-group py-3 m-0">
            <input type="submit" class="btn btn-inverse" value="Log in" name="login_btn" id="login_btn">
          </div>
   
          <!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> -->
          <div id="my-signin2"></div>
          <br>
          <a href="register" class="text-info" style="float:right; color: #01a7f9;">Create an Account</a>

          <?php if(isset($_SESSION['temp_user_cey'])) { ?>
            <hr>
            <div class="text-center">
              <a href="connection/guest-login" class="btn btn-inverse">CONTINUE AS A GUEST</a>
            </div>
          <?php } ?>
        </form>

      </div>
    </div>
    <div class="col-lg-3"></div>
  </div>
</div>
<!-- Main Container Ends -->


<!-- Footer Starts -->
<?php include "common/footer.php"; ?> 

<!-- Footer Ends -->

<script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 150,
        'height': 30,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>


<script type="text/javascript">
  $('document').ready(function () {
  // JavaScript Validation For Login Form 
  $("#login_form").validate({
    rules: {
      username: {
        required: true
      },
      password: {
        required: true
      }
    },
    messages: {
      password: {
        required: "Password is Required.",
      },
      username: {
        required: "Username is Required.",
      }
    },
    errorPlacement: function (error, element) {
      $(element).closest('.form-group').find('.help-block').html(error.html());
    },
    highlight: function (element) {
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).closest('.form-group').removeClass('has-error');
      $(element).closest('.form-group').find('.help-block').html('');
    },
    submitHandler: loginForm
  });

  function loginForm() {
    $.ajax({
      url: 'connection/user_login',
      type: 'POST',
      data: $('#login_form').serialize(),
      dataType: 'json'
    })
    .done(function (data) {
      $('input[name=login_btn]').val('Signing...').prop('disabled', true);
      $('input[type=text],input[type=password]').prop('disabled', true);
      setTimeout(function () {
        if (data.status === '1') {
          window.location.href = 'checkout';

        } else if (data.status === '2') {
          window.location.href = 'index';

        } else {
          $('#errorDiv').slideDown(200, function () {
            $('#errorDiv').html('<div class="alert alert-danger">' + data.message + '</div>');
            $('#errorDiv').delay(5000).slideUp(100);
            $('input[type=text],input[type=password]').prop('disabled', false);
            $('input[name=login_btn]').val('Log in').prop('disabled', false);
            $('#password').focus();
            $('#password').val('');
          });
        }
      }, 1000);
    })
    .fail(function () {
      $('input[name=login_btn]').val('Signing...').prop('disabled', true);
      $('input[type=text],input[type=password]').prop('disabled', true);
      setTimeout(function () {
        //alert('An unknown error occoured, Please try again Later...!')
        $('#errorDiv').slideDown(200, function () {
          $('#errorDiv').html('<div class="alert alert-danger">An unknown error occoured, Please try again Later...!</div>');
          $('#errorDiv').delay(5000).slideUp(100);
          $('input[type=text],input[type=password]').prop('disabled', false);
          $('input[name=login_btn]').val('Log in').prop('disabled', false);
        });
      }, 1000);
    });
  }
});
</script>

</body>
</html> 
