@extends('layouts.app')

@section('title', 'Register account')

@section('content')
<main class="container lg-wrap">
  <form class="lg-form" data-ajax action="{{ route('register.submit') }}" method="POST" novalidate>
    <h1>Create Account</h1>

    <div class="lg-two">
      <label class="field lg-field"><span>First name</span>
        <input name="first_name" placeholder="First name" autocomplete="given-name" autofocus><small class="ferr"></small></label>
      <label class="field lg-field"><span>Last name</span>
        <input name="last_name" placeholder="Last name" autocomplete="family-name"><small class="ferr"></small></label>
    </div>

    <label class="field lg-field"><span>Email</span>
      <input type="email" name="email" placeholder="Email" autocomplete="email"><small class="ferr"></small></label>

    <label class="field lg-field"><span>Password</span>
      <span class="lg-pass">
        <input type="password" name="password" placeholder="Password" autocomplete="new-password">
        <button type="button" class="lg-eye" aria-label="Show password" aria-pressed="false"><svg viewBox="0 0 24 24"><path d="M2 12s3.600-7 10-7 10 7 10 7-3.600 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button>
      </span>
      <small class="ferr"></small></label>

    <label class="field lg-field"><span>Confirm password</span>
      <input type="password" name="password_confirmation" placeholder="Confirm password" autocomplete="new-password"></label>

    <label class="check lg-terms"><input type="checkbox" name="terms" value="1"> <span>I agree to the <a href="{{ route('terms') }}" class="lg-link">Terms</a> and <a href="{{ route('privacy') }}" class="lg-link">Privacy Policy</a></span></label>
    <small class="ferr" data-for="terms"></small>

    <button class="btn lg-btn">Create account</button>
    <p class="lg-alt">Already have an account? <a href="{{ route('login') }}" class="lg-link">Log in</a></p>
  </form>
</main>
@endsection

@push('scripts')
<script>
// Show / hide password
document.querySelectorAll('.lg-eye').forEach(function (b) {
  b.addEventListener('click', function () {
    var i = b.parentNode.querySelector('input'), show = i.type === 'password';
    i.type = show ? 'text' : 'password';
    b.setAttribute('aria-pressed', show ? 'true' : 'false');
    b.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
  });
});
</script>
@endpush