<!doctype html>
<html lang="id">

<head>
  <title>Daftar Akun</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- CUSTOM CSS -->
  <style>
    :root {
      --primary-color: #4e73df;
    }

    body {
      font-family: 'Lato', sans-serif;
    }

    .ftco-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .login-wrap {
      border-radius: 12px;
    }

    .icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--primary-color);
      color: #fff;
      font-size: 30px;
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .btn-primary:hover {
      background-color: #2e59d9;
      border-color: #2e59d9;
    }

    a {
      color: var(--primary-color);
    }

    a:hover {
      color: #2e59d9;
      text-decoration: none;
    }
  </style>
</head>

<body>

  <section class="ftco-section bg-light">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-7 col-lg-5">
          <div class="login-wrap p-4 p-md-5 shadow bg-white rounded">

            <!-- Icon -->
            <div class="icon d-flex align-items-center justify-content-center mb-3 mx-auto">
              <span class="fa fa-user-plus"></span>
            </div>

            <h3 class="text-center mb-2 font-weight-bold">
              Daftar Akun
            </h3>
            <p class="text-center text-muted mb-4">
              Silakan isi data untuk membuat akun
            </p>

            <!-- Form -->
            <form action="{{ route('daftar.store') }}" method="POST">
              @csrf

              @if ($errors->any())
              <div style="color:red;">
                <ul>
                  @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                  @endforeach
                </ul>
              </div>
              @endif

              @if (session('success'))
              <div style="color:green;">
                {{ session('success') }}
              </div>
              @endif

              <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" class="form-control" required>
              </div>

              <div class="form-group">
                <label>Nama Lengkap</label>
                <input type="text" name="nama_lengkap" class="form-control" required>
              </div>


              <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" class="form-control" required>
              </div>
              <div class="form-group">
                <label>Konfirmasi Password</label>
                <input type="password" name="password_confirmation" class="form-control" required>
              </div>

              <div class="form-group mt-3">
                <button type="submit" class="btn btn-primary btn-block">Daftar Sekarang</button>
              </div>

              <div class="mt-2 text-center">
                <a href="{{ route('login') }}">← Kembali ke Login</a>
              </div>
            </form>


            <p class="text-center mt-4 text-muted small">
              © 2026 Sistem Layanan Surat Desa
            </p>

          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>