<!DOCTYPE html>
<html
  lang="en"
  class="light-style customizer-hide"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="{{ asset('publicc/backend/assets/') }}/"
  data-template="vertical-menu-template-free"
>
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
  />
  <title>Register - AMetative</title>

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="{{ asset('publicc/backend/assets/img/favicon/favicon.ico') }}" />

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Public+Sans&display=swap"
    rel="stylesheet"
  />

  <!-- Icons -->
  <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/fonts/boxicons.css') }}" />

  <!-- Core CSS -->
  <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/css/core.css') }}" class="template-customizer-core-css" />
  <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/css/theme-default.css') }}" class="template-customizer-theme-css" />
  <link rel="stylesheet" href="{{ asset('publicc/backend/assets/css/demo.css') }}" />

  <!-- Vendors CSS -->
  <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />

  <!-- Page CSS -->
  <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/css/pages/page-auth.css') }}" />
  <script src="{{ asset('publicc/backend/assets/vendor/js/helpers.js') }}"></script>
  <script src="{{ asset('publicc/backend/assets/js/config.js') }}"></script>
</head>
  <style> body {background: linear-gradient(135deg, #6a11cb 0%, rgb(134, 176, 248) 100%);} </style>
<body>
  <div class="container-xxl">
    <div class="authentication-wrapper authentication-basic container-p-y">
      <div class="authentication-inner">
        <!-- Register Card -->
        <div class="card">
          <div class="card-body">
            <!-- Logo -->
            <div class="app-brand justify-content-center mb-4">
              <img src="{{ asset('publicc/backend/assets/img/logo/logo_ametative.png') }}" alt="AMetative" style="width: 150px; height: auto;">
            </div>

            <h3 class="mb-4 text-center fw-bolder">Buat Akunmu</h3>

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

              <!-- Nama Lengkap -->
              <div class="mb-3">
                <label for="nama_lengkap" class="form-label">Nama Lengkap</label>
                <input id="nama_lengkap" type="text"
                  class="form-control @error('nama_lengkap') is-invalid @enderror"
                  name="nama_lengkap"
                  value="{{ old('nama_lengkap') }}"
                  required autocomplete="nama_lengkap" autofocus>
                @error('nama_lengkap')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>

              <!-- NIM -->
              <div class="mb-3">
                <label for="nim" class="form-label">NIM</label>
                <input id="nim" type="text" placeholder="E4xxxxx"
                  class="form-control @error('nim') is-invalid @enderror"
                  name="nim"
                  value="{{ old('nim') }}"
                  required autocomplete="nim">
                @error('nim')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>

              <!-- Semester -->
              <div class="mb-3">
                <label for="semester" class="form-label">Semester</label>
                <input id="semester" type="text" placeholder="2"
                  class="form-control @error('semester') is-invalid @enderror"
                  name="semester"
                  value="{{ old('semester') }}"
                  required autocomplete="semester">
                @error('semester')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>

              <!-- Angkatan -->
              <div class="mb-3">
                <label for="angkatan" class="form-label">Angkatan</label>
                <input id="angkatan" type="number" min="2021" max="{{ date('Y') }}" placeholder="2021"
                  class="form-control @error('angkatan') is-invalid @enderror"
                  name="angkatan"
                  value="{{ old('angkatan') }}"
                  required autocomplete="angkatan">
                @error('angkatan')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>

              <!-- Email -->
              <div class="mb-3">
                <label for="email" class="form-label">E-Mail</label>
                <input id="email" type="email" placeholder="xxxx@polije.ac.id"
                  class="form-control @error('email') is-invalid @enderror"
                  name="email"
                  value="{{ old('email') }}"
                  required autocomplete="email">
                @error('email')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>

              <!-- Password -->
              <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input id="password" type="password"
                  class="form-control @error('password') is-invalid @enderror"
                  name="password"
                  required autocomplete="new-password">
                @error('password')
                  <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                  </span>
                @enderror
              </div>

              <!-- Confirm Password -->
              <div class="mb-3">
                <label for="password-confirm" class="form-label">Konfirmasi Password</label>
                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
              </div>

              <button type="submit" class="btn btn-primary d-grid w-100 mb-3">Buat Akun</button>

              <p class="text-center mb-0">
                Sudah mempunyai akun?
                <a href="{{ route('login') }}">Masuk</a>
              </p>

              <!-- SSO Google Login -->
              <div class="text-center mt-4">
                <p class="fw-bold fs-5">Atau:</p>
                <a href="{{ route('google.login') }}"
                  class="btn btn-outline-dark w-100 d-flex align-items-center justify-content-center">
                  <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg"
                    alt="Google" width="20" class="me-2">
                  Masuk Dengan SSO Google
                </a>
              </div>
            </form>
          </div>
        </div>
        <!-- /Register Card -->
      </div>
    </div>
  </div>

  <!-- Core JS -->
  <script src="{{ asset('publicc/backend/assets/vendor/libs/jquery/jquery.js') }}"></script>
  <script src="{{ asset('publicc/backend/assets/vendor/libs/popper/popper.js') }}"></script>
  <script src="{{ asset('publicc/backend/assets/vendor/js/bootstrap.js') }}"></script>
  <script src="{{ asset('publicc/backend/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>
  <script src="{{ asset('publicc/backend/assets/vendor/js/menu.js') }}"></script>
  <script src="{{ asset('publicc/backend/assets/js/main.js') }}"></script>
</body>
</html>
