@extends('layouts.auth')

@section('title', 'Register')

@section('content')

<div class="row">
  <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">

    {{-- Logo --}}
    <div class="login-brand text-center mb-4">
      <img src="{{ asset('assets_app/images/andusEdu-logo.png') }}"
           class="img-fluid logo-auth"
           alt="Logo">
    </div>

    <div class="card card-primary">
      <div class="card-header" style="text-align: center;display:block;"><h4>Buat akun baru
</h4></div>

      <div class="card-body">

        {{-- Flash Message --}}
        @if(session('success'))
          <div class="alert alert-success">
            {{ session('success') }}
          </div>
        @endif

        @if ($errors->any())
  <div class="alert alert-danger">
    <ul class="mb-0">
      @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif

        <form method="POST" action="{{ route('register') }}">
          @csrf

          {{-- Name --}}
          <div class="form-group">
  <label>Nama Lengkap</label>
  <input type="text"
         name="name"
         value="{{ old('name') }}"
         class="form-control @error('name') is-invalid @enderror"
          placeholder="Masukkan Nama Lengkap"
         required>
  @error('name')
    <small class="text-danger">{{ $message }}</small>
  @enderror
</div>
          {{-- Username --}}
          <div class="form-group">
            <label>Username</label>
            <input type="text"
         name="username"
         placeholder="Masukkan Username Akun"
         value="{{ old('username') }}"
         class="form-control @error('username') is-invalid @enderror"
         required>@error('username')
          <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        </div>
        
          {{-- NIK --}}
<div class="form-group">
  <label>NIK</label>
  <input type="text"
         name="nik"
         value="{{ old('nik') }}"
         class="form-control @error('nik') is-invalid @enderror"
         placeholder="Masukkan 16 digit NIK"
         maxlength="16"
         pattern="\d{16}"
         inputmode="numeric"
         required>

  @error('nik')
    <div class="invalid-feedback">{{ $message }}</div>
  @enderror
</div>

          {{-- Email --}}
          <div class="form-group">
            <label>Email</label>
            <input type="email"
                   name="email"
                   value="{{ old('email') }}"
                   class="form-control @error('email') is-invalid @enderror"
                    placeholder="Masukkan Email Anda"
                   required>
            @error('email')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Password --}}
          <div class="row">
  <div class="form-group col-md-6">
    <label>Password</label>
    <input type="password"
           id="password"
           name="password"
           class="form-control @error('password') is-invalid @enderror"
           placeholder="Masukkan Password"
           required>
           <small class="text-muted">
  Password harus Minimal 6 karakter, harus ada huruf besar, angka, dan simbol (# @ !)
 
</small>
    @error('password')
      <div class="invalid-feedback">{{ $message }}</div>
    @enderror
  </div>

  <div class="form-group col-md-6">
    <label>Konfirmasi Password</label>
    <input type="password"
           id="password_confirmation"
           name="password_confirmation"
           class="form-control"
           placeholder="Masukkan Konfirmasi Password"
           required>

    <!-- ERROR DARI JS -->
<small id="password-error" class="text-danger d-none">
  Password tidak sama
</small>
  </div>
</div>

          {{-- Address --}}
          <div class="form-group">
            <label>Alamat</label>
            <input type="text"
                   name="address"
                   value="{{ old('address') }}"
                     placeholder="Masukkan Alamat Anda"
                   class="form-control @error('address') is-invalid @enderror">
            @error('address')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Phone --}}
          <div class="form-group">
            <label>Nomor HP</label>
            <input type="text"
                   name="phone"
                   value="{{ old('phone') }}"
                     placeholder="Masukkan Nomor HP"
                   class="form-control @error('phone') is-invalid @enderror">
            @error('phone')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Agree --}}
<div class="form-group">
  <div class="custom-control custom-checkbox">
    <input type="checkbox"
           name="agree"
           class="custom-control-input @error('agree') is-invalid @enderror"
           id="agree"
           required>
    <label class="custom-control-label" for="agree">
      Saya setuju dengan syarat & ketentuan
    </label>
  </div>
  @error('agree')
    <small class="text-danger d-block">{{ $message }}</small>
  @enderror
</div>
          {{-- Button --}}
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-block">
              Register
            </button>
          </div>

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

    <div class="mt-4 text-muted text-center">
      Sudah Punya Akun?
      <a href="{{ route('login') }}">Login</a>
    </div>

    <div class="simple-footer">
      © {{ date('Y') }} Yayasan Andus Edukasi Indonesia
    </div>

  </div>
</div>

@endsection
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {

    const password = document.getElementById("password");
    const confirmPassword = document.getElementById("password_confirmation");

    const errorMatch = document.getElementById("password-error"); // tidak sama
    const errorStrength = document.getElementById("password-strength-error"); // aturan password

    // REGEX: huruf besar, angka, simbol
    const regex = /^(?=.*[A-Z])(?=.*\d)(?=.*[#@!]).+$/;

    function validatePassword() {

        // === VALIDASI KEKUATAN PASSWORD ===
        if (password.value === "") {
            errorStrength.classList.add("d-none");
            password.classList.remove("is-invalid");
        } else if (!regex.test(password.value)) {
            errorStrength.classList.remove("d-none");
            password.classList.add("is-invalid");
        } else {
            errorStrength.classList.add("d-none");
            password.classList.remove("is-invalid");
        }

        // === VALIDASI KONFIRMASI PASSWORD ===
        if (confirmPassword.value === "") {
            errorMatch.classList.add("d-none");
            confirmPassword.classList.remove("is-invalid");
            return;
        }

        if (password.value !== confirmPassword.value) {
            errorMatch.classList.remove("d-none");
            confirmPassword.classList.add("is-invalid");
        } else {
            errorMatch.classList.add("d-none");
            confirmPassword.classList.remove("is-invalid");
        }
    }

    password.addEventListener("keyup", validatePassword);
    confirmPassword.addEventListener("keyup", validatePassword);

});
</script>
@endpush