@extends('web.app')

@section('main-content')
<div class="container">
  <section class="text-center login_section" style="padding: 5% 0 5% 0;">
     <div class="container">
        <div class="row" id="socialForm" {{ (count($errors) > 0)?'style=display:none;':'' }}>
          <div class="title-heading text-center">
              <h2>REGISTER FOR WIN A BIKE</h2>
              <h3>FREE <i class="fa fa-rupee"></i> 150 TO PLAY WHEN YOU FIRST REGISTER</h3>
          </div>
          <div class="lg-section">
            <div class="lg-btn" id="social">
              <a href="javascript:void(0)" class="btn btn-primary"><i class="fa fa-envelope-o mail_ic"></i> SIGN UP WITH YOUR EMAIL</a>
            </div>
            <div class="or-img">
              <img src="{{ url('img/sep-or.png') }}" alt="">
            </div>
            <div class="social-icon omb_login">
              <div class="omb_socialButtons">
                <!-- <div class="col-xs-4 col-sm-4">
                  <a href="{{ route('social.oauth', 'google') }}" class="btn btn-lg btn-block omb_btn-google">
                    <i class="fa fa-google-plus"></i>
                    <span class="hidden-xs">Google+</span>
                  </a>
                </div> -->
                <div class="lg-btn">
                  <a href="{{ route('social.oauth', 'facebook') }}" class="btn btn-lg btn-block omb_btn-facebook">
                    <i class="fa fa-facebook fb_icon"></i>
                    USE YOUR FACEBOOK ACCOUNT
                  </a>
                </div>
                <!--<div class="col-xs-4 col-sm-4">
                  <a href="{{ route('social.oauth', 'twitter') }}" class="btn btn-lg btn-block omb_btn-twitter">
                    <i class="fa fa-twitter"></i>
                    <span class="hidden-xs">Twitter</span>
                  </a>
                </div>-->  
              </div>
            </div>
            <p class="signup-link">Already a Winabike member? <a href="{{ url('/login') }}">Login here</a></p>
          </div>
        </div>
        <div class="row" id="emailForm" {{ (!(count($errors) > 0))?'style=display:none;':'' }}>
          <!-- <div class="col-md-6">
            {{-- <div class="col-md-12">
              <div class="title-heading text-center">
                <h2>&nbsp;</h2>
                <h3>&nbsp;</h3>
              </div>
            </div> --}}
            <div class="col-md-12">
              <div class="col-md-6 col-sm-6 col-xs-6 text-center">
                <img src="img/reg_mi_logo.jpg">
              </div>
              <div class="col-md-6 col-sm-6 col-xs-6 text-center">
                <img src="img/bike_logo.jpg">
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 reg_txt">
                <h1 class="text-center">Welcome to winabike.in part of the Motorbikes India group. The final stage!</h1>
                <p style="text-align: justify;">
                  You have previously registered on <strong>Motorbikes India</strong> <a href="http://www.motorbikesindia.com/">www.motorbikesindia.com</a> to enter the competition to win the UM Renegade Commando signed exclusively by Leslie Porterfield. Please now complete the quick <br>
                registration form below, you will then go straight through to play the 'Spot The Cricket Ball’ game of skill.<br><br>
          
                Remember, you only have until midnight on the 10th of November to complete this process. <br><br>
                <strong>Good luck!!</strong>
                  
                  <br><br>
                  If you have previously registered on <strong>Motorbikes India</strong> <a href="http://www.motorbikesindia.com/">www.motorbikesindia.com</a> to enter the competition to win the UM Renegade Commando signed exclusively by Leslie Porterfield. Please now complete the quick registration form below, you will then go straight through to play the 'Spot The Cricket Ball’ game of skill. If you are a newcomer to our free launch competion, you can also register here, but be quick! 
                  <br>
                  Remember, you only have until midnight on the 10th of November to complete this process. 
                  <br>
                  <b>Good luck!!</b>
          
                </p>
              </div>
            </div>
          </div> -->
          <div class="col-md-12">
            <div class="title-heading text-center">
              <h2>QUICK REGISTRATION</h2>
              <h3>FREE <i class="fa fa-rupee"></i> 150 TO PLAY WHEN YOU FIRST REGISTER</h3>
            </div>
            @if ($errors->has('msg'))
              <div class="alert alert-warning">
                {{ $errors->first('msg') }}
                <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
              </div>
            @endif
            <div class="login-form lg-section">
              <form class="omb_loginForm" action="{{ route('register') }}" autocomplete="off" method="POST" style="text-align: left;" name="register">
              @if($referCode)
              <input type="hidden" name="referCode" value="{{$referCode}}">
              @endif
              {{ csrf_field() }}
              <div class="input-group">
                <input type="text" class="form-control" name="first_name" id="first_name" value="{{ old('first_name') }}" placeholder="First Name *" required="required" maxlength="50" autofocus="">
                @if ($errors->has('first_name'))
                  <span class="help-block">
                    <strong>{{ $errors->first('first_name') }}</strong>
                  </span>
                @endif
              </div>
              <div class="input-group">
                <input type="text" class="form-control" name="last_name" id="last_name" value="{{ old('last_name') }}" placeholder="Last Name *" required="" maxlength="50">
                @if ($errors->has('last_name'))
                  <span class="help-block">
                    <strong>{{ $errors->first('last_name') }}</strong>
                  </span>
                @endif
              </div>
              <div class="input-group">
                <input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" placeholder="E-mail Address *" required="" style="text-transform: none;">
                @if ($errors->has('email'))
                  <span class="help-block">
                    <strong>{{ $errors->first('email') }}</strong>
                  </span>
                @endif
              </div>
              <div class="input-group">
                <input type="email" class="form-control" name="email_confirmation" id="email_confirmation" value="{{ old('email_confirmation') }}" placeholder="Confirm E-mail Address *" required="" style="text-transform: none;">
                @if ($errors->has('email_confirmation'))
                  <span class="help-block">
                    <strong>{{ $errors->first('email_confirmation') }}</strong>
                  </span>
                @endif
              </div>
              <div class="input-group">
                <input type="password" class="form-control" name="password" id="password" placeholder="Password *" required="" minlength="6" maxlength="20" style="text-transform: none;">
                @if ($errors->has('password'))
                  <span class="help-block">
                    <strong>{{ $errors->first('password') }}</strong>
                  </span>
                @endif
              </div>
              <div class="input-group">
                <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm Password *" required="" minlength="6" maxlength="20" style="text-transform: none;">
                @if ($errors->has('password_confirmation'))
                  <span class="help-block">
                    <strong>{{ $errors->first('password_confirmation') }}</strong>
                  </span>
                @endif
              </div>
              <div class="input-group">
                <input type="tel" class="form-control" name="phone1" id="phone1" value="{{ old('phone1') }}" placeholder="Phone 1 *" required="required" min="0" maxlength="10" minlength="10" pattern="[0-9]{10}">
                @if ($errors->has('phone1'))
                  <span class="help-block">
                    <strong>{{ $errors->first('phone1') }}</strong>
                  </span>
                @endif
              </div>
              <div class="input-group">
                <input type="text" class="form-control" name="phone2" id="phone2" value="{{ old('phone2') }}" placeholder="Phone 2" min="0" maxlength="10" minlength="10" pattern="[0-9]{10}">
                @if ($errors->has('phone2'))
                  <span class="help-block">
                    <strong>{{ $errors->first('phone2') }}</strong>
                  </span>
                @endif
              </div>
            
              <div class="input-group">
                <div class="row">
                  <div class="col-md-11 col-sm-10 col-xs-10">
                    <input type="text" class="form-control" name="" placeholder="I confirm that I understand the game of cricket *" readonly="">
                    <span class="help-block">
                      <strong id="checkboxG1Error"></strong>
                    </span>
                  </div>
                  <div class="pull-right">
                    <input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" required="" />
                    <label for="checkboxG1" class="css-label radGroup1"></label>
                  </div>             
                </div>           
              </div>         
              <div class="input-group">
                <div class="row">
                  <div class="col-md-11 col-sm-10 col-xs-10">
                    <input type="text" class="form-control" name="" placeholder="I have read the terms and conditions of play *" readonly="">
                    <span class="help-block">
                      <strong id="checkboxG2Error"></strong>
                    </span>
                  </div>
                  <div class="pull-right">
                    <input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox" required="" />
                    <label for="checkboxG2" class="css-label radGroup2"></label>
                  </div>
                </div>
              </div>        
              <button class="btn btn-lg btn-primary btn-block" type="submit" id="register">REGISTER NOW </button>
              </form>
              <div class="pull-left">
                <p class="signup-link">Already a Winabike member?<a href="login.html"> Login here</a></p></div>
                <div class="pull-right mt16"><a href="#"> <img src="img/payu.png"></a></div>
                <div class="pull-right mt16"  style="margin-right:15px;"><a href="#"> <img src="img/paytm.png"></a></div>
            </div>
                <div class="col-md-12 btn-center mt20">
                  <a href="{{ url('/terms_condition') }}" class="btn btn-primary tc_btn">Read T & Cs here</a>
                </div>
          </div>
        </div>
     </div>
  </section>
</div>
@endsection
@push('scripts')
<script type="text/javascript">

// var phone1 = document.getElementById('phone1');

// function validatePhone1() {
//   if (phone1.value.length < 10 || phone1.value.length > 10){
//     phone1.setCustomValidity("Please Enter 10 Digit Number");
//   }
//   var mob = /^[1-9]{1}[0-9]{9}$/;
//   var val = phone1.value;
//   if (mob.test(val) == false) {
//       phone1.setCustomValidity("Please enter only numbers.");
//   }else{
//       phone1.setCustomValidity('');
//   }
// }
// phone1.onkeyup = validatePhone1;

// var phone2 = document.getElementById('phone2');
// function validatePhone1() {
//   if (phone2.value.length < 10 || phone2.value.length > 10){
//     phone2.setCustomValidity("Please Enter 10 Digit Number");
//   }
//   var mob = /^[1-9]{1}[0-9]{9}$/;
//   var val = phone2.value;
//   if (mob.test(val) == false) {
//       phone2.setCustomValidity("Please enter only numbers.");
//   }else{
//       phone2.setCustomValidity('');
//   }
// }

var password = document.getElementById("password")
  , confirm_password = document.getElementById("password_confirmation");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Password Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

var email = document.getElementById("email")
  , confirm_email = document.getElementById("email_confirmation");

function validateEmail(){
  if(email.value != confirm_email.value) {
    confirm_email.setCustomValidity("Email Don't Match");
  } else {
    confirm_email.setCustomValidity('');
  }
}

email.onchange = validateEmail;
confirm_email.onkeyup = validateEmail;

var checkboxG1 = document.getElementById("checkboxG1")
var checkboxG2 = document.getElementById("checkboxG2")

function validateCheckbox(){
  //console.log(checkboxG1.);
  if(!checkboxG1.checked){
    $("#checkboxG1Error").html("Please check I confirm that I understand the game of cricket.");
  }else{
    $("#checkboxG1Error").html('');
  }
  if(!checkboxG2.checked){
    $("#checkboxG2Error").html("Please check I have read the terms and conditions of play.");
  }else{
    $("#checkboxG2Error").html('');
  }
  // if(email.value != '') {
  //   confirm_email.setCustomValidity("Email Don't Match");
  // } else {
  //   confirm_email.setCustomValidity('');
  // }
}
document.getElementById("register").onclick = validateCheckbox;

$('#social').click(function(event) {
    $('#socialForm').hide();
    $('#emailForm').show();
  });
</script>
@endpush