@extends('layouts.default')
@section('content')

<div class="site-blocks-cover inner-page-cover overlay" style="background-image: url( {{ asset('front/images/burke_banner.jpg') }} );" data-aos="fade" data-stellar-background-ratio="0.5">
      <div class="container">
        <div class="row align-items-center justify-content-center text-center">

          <div class="col-md-10" data-aos="fade-up" data-aos-delay="400">
            
            
            <div class="row justify-content-center mt-5">
              <div class="col-md-8 text-center">
                <h1>Sign Up</h1>
                <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
              </div>
            </div>

            
          </div>
        </div>
      </div>
    </div>  


    <div class="site-section bg-light">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-7 mb-5"  data-aos="fade">

            <!-- <h2 class="mb-5 text-black">Register</h2> -->

            <form action="#" class="p-5 bg-white">
             
              <div class="row form-group">
                
                <div class="col-md-12">
                  <label class="text-black" for="email">Email</label> 
                  <input type="email" id="email" class="form-control" required>
                </div>
              </div>

              <div class="row form-group">
                <div class="col-md-12">
                  <label class="text-black" for="password">Password</label> 
                  <input type="password" id="password" class="form-control" required>
                  <span class="error error-password invalid-feedback"></span>
                </div>
              </div>

              <div class="row form-group">
                <div class="col-md-12">
                  <label class="text-black" for="subject">Re-type Password</label> 
                  <input type="password" id="subject" class="form-control" required>
                </div>
              </div>

              <div class="row form-group">
                <div class="col-12">
                  <p>Have an account? <a href="/guest/login">Log In</a></p>
                </div>
              </div>

              <div class="row form-group">
                <div class="col-md-12">
                  <input type="submit" value="Register" class="btn btn-primary py-2 px-4 text-white">
                </div>
              </div>

  
            </form>
          </div>
          
        </div>
      </div>
    </div>

    <script>
      jQuery( document ).ready(function() {
        $( "#password" ).keyup(function() {
          let password = $("#password").val();
          let error_password = $('.error-password');

          if(password.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/)) {
            $('.invalid-feedback').addClass('valid-feedback').removeClass('invalid-feedback');
            let message = 'Valid Password';
            error_password.text(message);
            error_password.show();
          } else if(password.length < 8) {
            let message = 'Password must have 8 characters';
            error_password.text(message);
            error_password.show();
          } else {
            let message = 'Password must have a lowercase, an uppercase, a number, and minimum 8 characters';
            error_password.text(message);
            error_password.show();
          }
        });
      });
      
    </script>

    <div class="newsletter bg-primary py-5">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6">
            <h2>Newsletter</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
          <div class="col-md-6">
            
            <form class="d-flex">
              <input type="text" class="form-control" placeholder="Email">
              <input type="submit" value="Subscribe" class="btn btn-white"> 
            </form>
          </div>
        </div>
      </div>
    </div>


@stop