@extends('layouts.landing')

@section('title', 'Daftar - SIPEDAS')

@section('content')
<section class="section pt-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="shadow rounded p-5 bg-white">
          <div class="text-center mb-4">
            <h4>Buat Akun Baru</h4>
            <p class="text-muted">Daftar untuk mulai menggunakan SIPEDAS</p>
          </div>

          <form action="/register" method="POST" onsubmit="return validatePassword()">
            @csrf

            <div class="row">
              <div class="col-lg-6">
                <div class="form-group mb-4 pb-2">
                  <label class="form-label">Nama Lengkap</label>
                  <input type="text" name="nama" class="form-control shadow-none" placeholder="Nama lengkap Anda" required>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group mb-4 pb-2">
                  <label class="form-label">NIK</label>
                  <input type="text" name="nik" class="form-control shadow-none" placeholder="Nomor Induk Kependudukan" maxlength="16">
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group mb-4 pb-2">
                  <label class="form-label">Email</label>
                  <input type="email" name="email" class="form-control shadow-none" placeholder="contoh@email.com" required>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group mb-4 pb-2">
                  <label class="form-label">No. Telepon</label>
                  <input type="text" name="no_telp" class="form-control shadow-none" placeholder="08xxxxxxxxxx">
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group mb-4 pb-2">
                  <label class="form-label">Password</label>
                  <input type="password" id="password" name="password" class="form-control shadow-none" placeholder="Minimal 6 karakter" minlength="6" required>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group mb-4 pb-2">
                  <label class="form-label">Ulangi Password</label>
                  <input type="password" id="confirm_password" class="form-control shadow-none" placeholder="Ketik ulang password" required>
                </div>
              </div>
            </div>

            <button type="submit" class="btn btn-primary w-100">Daftar</button>
          </form>

          <p class="text-center mt-4 mb-0">
            Sudah punya akun?
            <a href="/login" class="text-primary fw-bold">Masuk</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
function validatePassword() {
  var pass = document.getElementById("password").value;
  var confirm = document.getElementById("confirm_password").value;
  if (pass !== confirm) {
    alert("Password tidak sama!");
    return false;
  }
  return true;
}
</script>
@endsection