@extends('layouts.basic')
@section('content')
<form data-parsley-validate="" class="psu-form open" id="psu-signup" method="POST" action="#">
    <div class="form-section form-section-signup" id="user-contact">
      <div class="psu-form-heading">
        <div class="psu-form-image">
            <img src="{{asset('img/fs-hatchery-logo.png')}}" alt="">
        </div>
        <h2>Sign up with your email to continue</h2>
      </div>

      <div class="form-group">
        <div class="form-row">
            <div class="col-md-6 col-12">
              <div class="form-group-input-wrap">
                  <input 
                    required 
                    name="firstname"
                    data-parsley-required-message="First name is required"
                    data-parsley-trigger="change" 
                    data-parsley-minlength="3"
                    data-parsley-minlength-message="Last name must be atleast 3 letters" 
                    type="text" 
                    class="form-control form-input input-lg" 
                    placeholder="First Name"
                    id="psu-input-firstname"> 
              </div>
            </div>
                    
            <div class="col-md-6 col-12">
              <div class="form-group-input-wrap">
                  <input 
                    required 
                    name="lastname"
                    data-parsley-required-message="Last name is required"
                    data-parsley-trigger="change" 
                    data-parsley-minlength="3"
                    data-parsley-minlength-message="Last name must be atleast 3 letters" 
                    type="text" 
                    class="form-control form-input input-lg" 
                    placeholder="Last Name"
                    id="psu-input-lastname"> 
              </div>
            </div>
        </div>
        <div class="form-group-input-wrap">
            <input 
            required 
            name="email"
            data-parsley-required-message="Email address is required"
            data-parsley-trigger="change" 
            data-parsley-type-message="Must be a valid email address" 
            type="email" 
            class="form-control form-input input-lg" 
            placeholder="Email"
            id="psu-email"> 
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-input-wrap">
            <input 
              required
              type="text" 
              name="address"
              data-parsley-minlength="10"
              data-parsley-minlength-message="Address should be at least 6 characters long"
              data-parsley-required-message="Address is required"
              data-parsley-trigger="focusout" 
              class="form-control form-input input-lg" 
              placeholder="Address"
              id="psu-address"
            >
        </div>
      </div>
      <div class="form-group">
        <div class="form-group-input-wrap">
            <input 
              required
              type="password" 
              name="password"
              data-parsley-minlength="6"
              data-parsley-minlength-message="Password should be at least 6 characters long"
              data-parsley-required-message="Password is required"
              data-parsley-trigger="focusout" 
              class="form-control form-input input-lg" 
              placeholder="Password"
              id="psu-password"
            >
        </div>
      </div>

      <div class="form-group">
        <div class="form-group-input-wrap">
            <input 
            required 
            type="password" 
            name="password"
            data-parsley-required-message="Password is required"
            data-parsley-trigger="focusout"  
            data-parsley-equalto-message="Passwords do not match" 
            data-parsley-equalto="#psu-password" 
            class="form-control form-input input-lg" 
            placeholder="Confirm Password"
            id="psu-confirmpassword" >
        </div>
      </div>
      
      <button type="submit" class="psu-form-btn" id="psu-signup-btn">Sign Up</button>

      <div class="form-group">
          <ul class="form-nav justify-content-center">
              <li class="form-nav-item "><a class="form-nav-links" href="{{route('login')}}">Already have an account ?  <span>Log in</span></a></li>
          </ul>
      </div>
    </div>
  </form>
@endsection