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

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

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

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

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.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">

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

            <h3 class="text-center mb-2 font-weight-bold">
              Reset Password
            </h3>
            <p class="text-center text-muted mb-4">
              Masukkan username dan password baru Anda
            </p>

            @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <ul class="mb-0">
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
              </ul>
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            @endif

            @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              {{ session('success') }}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            @endif

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

              <div class="form-group">
                <label>Username</label>
                <input type="text"
                  name="username"
                  class="form-control @error('username') is-invalid @enderror"
                  placeholder="Masukkan username"
                  value="{{ old('username') }}"
                  required>
              </div>

              <div class="form-group">
                <label>Password Baru</label>
                <input type="password"
                  name="password"
                  class="form-control @error('password') is-invalid @enderror"
                  placeholder="Masukkan password baru"
                  required>
              </div>

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

              <div class="form-group mt-4">
                <button type="submit"
                  class="btn btn-primary btn-block rounded py-2 shadow-sm font-weight-bold">
                  PERBARUI PASSWORD
                </button>
              </div>

              <div class="text-center mt-3">
                <a href="{{ route('login') }}">
                  <i class="fa fa-arrow-left mr-1"></i> Kembali ke Login
                </a>
              </div>

            </form>

            <p class="text-center mt-4 text-muted small">
              &copy; 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>