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

<div id="formView">
  <div class="d-flex align-items-center flex-column text-center p-3">
        <div class="flex-grow-1 single-form-heading font-weight-medium">Create Account</div>
        <p class="text-muted">An HR profile is required before scheduling an appointment with the appropriate HR specialist.</p>
    </div>
    <form action="{{route('submit-account-setup')}}" class="form" method="post">
        <div class="icon_wrap">
          <img src="{{asset('/img/login_icon.svg')}}" alt="">
        </div>
        @csrf
        @if(session('message'))
        <div class="alert alert-info">{{session('message')}}</div>
        @endif
        <div class="form-group">
            <label for="" class="control-label">First Name</label>
            <input class="form-control" name="first_name" autofocus required value="{{old('first_name')}}">
            @error('first_name')
            <span class="text-sm text-danger">{{$message}}</span>
            @enderror
        </div>

        <div class="form-group">
            <label for="" class="control-label">Last Name</label>
            <input class="form-control" name="last_name" autofocus required value="{{old('last_name')}}">
            @error('last_name')
            <span class="text-sm text-danger">{{$message}}</span>
            @enderror
        </div>

        <div class="form-group">
            <label for="" class="control-label">Email Address</label>
            <input class="form-control" name="email_address" autofocus required value="{{old('email_address')}}">
            @error('email_address')
            <span class="text-sm text-danger">{{$message}}</span>
            @enderror
        </div>

        <div class="form-group">
            <label for="" class="control-label">Password</label>
            <input class="form-control" type="password" name="password" minlength="6" required autofocus value="{{old('password')}}">
            @error('password')
            <div class="text-sm text-danger mt-2">{{$message}}</div>
            @enderror
            <div class="text-sm text-danger pass-warning mt-2" style="display:none;">Minimum 6 characters required.</div>
        </div>

        <div class="row mb-4">
            <div class="col-12 text-center">
                <input type="submit" name="Submit" value="Create Account" disabled="true" class="btn btn-orange text-uppercase py-2 px-4">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
  var checkValidation = function() {
    $('[type=password]').on('keyup', function(){
      if ($(this).val().length < 6) {
        $('[type=submit]').prop('disabled', true);
        $('.pass-warning').show();
      }else {
        $('[type=submit]').prop('disabled', false);
        $('.pass-warning').hide();
      }
    })
  }
  checkValidation();
</script>
@endsection