@extends('web.app')

@section('main-content')
<div class="container">
    <div class="omb_login">
      <h3 class="omb_authTitle">Sign up</h3>
        <div class="row omb_row-sm-offset-3 omb_socialButtons">
                @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="col-xs-12 col-sm-4">
                <a href="{{ route('social.oauth', 'facebook') }}" class="btn btn-lg btn-block omb_btn-facebook">
                  <i class="fa fa-facebook visible-xs"></i>
                  <span class="hidden-xs">Facebook</span>
                </a>
              </div>
              <div class="col-xs-12 col-sm-4">
                <a href="{{ route('social.oauth', 'twitter') }}" class="btn btn-lg btn-block omb_btn-twitter">
                  <i class="fa fa-twitter visible-xs"></i>
                  <span class="hidden-xs">Twitter</span>
                </a>
              </div>  
              <div class="col-xs-12 col-sm-4">
                <a href="{{ route('social.oauth', 'google') }}" class="btn btn-lg btn-block omb_btn-google">
                  <i class="fa fa-google-plus visible-xs"></i>
                  <span class="hidden-xs">Google+</span>
                </a>
              </div>  
        </div>

        <div class="row omb_row-sm-offset-3 omb_loginOr">
          <div class="col-xs-12 col-sm-12">
            <hr class="omb_hrOr">
            <span class="omb_spanOr">or</span>
          </div>
        </div>

        <div class="row omb_row-sm-offset-3">
          <div class="col-xs-12 col-sm-12">  
              <form class="omb_loginForm" action="{{ route('register') }}" autocomplete="off" method="POST">
              {{ csrf_field() }}
              <div class="input-group">
                <input type="text" class="form-control" name="first_name" placeholder="First Name *" value="{{ old('first_name') }}" required 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" placeholder="Last Name *" value="{{ old('last_name') }}" required maxlength="50" autofocus>
                @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" id="email" name="email" placeholder="E-mail Address *" value="{{ old('email') }}" required maxlength="50">
                @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" id="email_confirmation" name="email_confirmation" placeholder="Confirm E-mail Address *" value="{{ old('email_confirmation') }}" required maxlength="50">
                @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" id="password" name="password" placeholder="Password *" required maxlength="20" minlength="6">
                @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" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password *" required maxlength="20" minlength="6">
                @if ($errors->has('password_confirmation'))
                    <span class="help-block">
                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                    </span>
                @endif
              </div>
              <div class="input-group">
                <input type="text" class="form-control" name="phone1" placeholder="Phone 1 *" required min="0" maxlength="10" minlength="10" value="{{ old('phone1') }}">
                @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" placeholder="Phone 2" min="0" maxlength="10" minlength="10" value="{{ old('phone2') }}">
              </div>
              
              <button class="btn btn-lg btn-primary btn-block" id="submit" type="submit">Signup</button>
            </form>
          </div>          
          </div>
          
          <div class="row">
            <div class="bottom user-dialogue register-bottom">
              <p>Already a member? <a href="/login">Login here</a></p>
            </div>
          </div>
                
      </div>
  </div>
@endsection
@push('scripts')
<script type="text/javascript">
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;
</script>
@endpush