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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Register Ketua - PKM</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<style>
  /* Phone */
  @media only screen and (max-width: 520px) {
    body{
      padding: 1rem;
      margin: 1rem;
    }
    .kembali 
    {
      position: relative; 
      display: grid; 
      grid-template-rows: 1, 1fr;
    }
    .kirim{
      position: relative;
      display: flex;
      justify-content: center;
    }
    .card {
      max-width: 100%;
    }
    .col-md-4,
    .col-md-8 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .card img {
      width: 100%;
      height: auto;
    }
  }

  /* Tablet */
  @media only screen and (min-width: 321px) and (max-width: 768px) {
    .card {
      max-width: 80%;
    }
    .col-md-4,
    .col-md-8 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .card img {
      width: 100%;
      height: auto;
    }
  }

  /* Desktop */
  @media only screen and (min-width: 769px) {
    .card {
      max-width: 540px;
    }
    .kembali{
      position: relative;
      left: -5rem;
    }
  }
</style>

<body>




  <!-- Login -->
  <div class="container text-center mt-5">
    <div class="row">
      <div class="col">
        <h2>Buat Akun Ketua</h2>
      </div>
    </div>
  </div>

  <div class="card mb-3 mx-auto mt-5 border-0" style="max-width: 540px">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="/assets/img/pkm.png" class="img-fluid rounded-start" alt="Banner register" />
      </div>
      <div class="col-md-8">
        <form action="/user-register" method="post" enctype="multipart/form-data">

          <div class="mb-3">
            <label for="nomor_induk" class="form-label">Nim Ketua</label>
            <input type="text" class="form-control" id="nomor_induk" name="nomor_induk" required />
            <% if (error && error.nomor_induk) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.nomor_induk %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="nama" class="form-label">Nama Ketua</label>
            <input type="text" class="form-control" id="nama" name="nama" required />
            <% if (error && error.nama) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.nama %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="jenis_kelamin" class="form-label">Jenis Kelamin</label>
            <select class="form-control" id="jenis_kelamin" name="jenis_kelamin" required>
              <option value="" disabled selected>Pilih Jenis Kelamin</option>
              <option value="Laki-Laki">Laki-Laki</option>
              <option value="Perempuan">Perempuan</option>
            </select>
            <% if (error && error.jenis_kelamin) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.jenis_kelamin %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="semester" class="form-label">Semester</label>
            <select class="form-control" id="semester" name="semester" required>
              <option value="" disabled selected>Pilih Semester</option>
              <option value="1">Semester 1</option>
              <option value="3">Semester 3</option>
              <option value="5">Semester 5</option>
            </select>
            <% if (error && error.semester) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.semester %>
              </p>
            <% } %>
          </div>
          


          <div class="mb-3">
            <label for="program_studi" class="form-label">Program Studi</label>
            <select class="form-control" id="program_studi" name="program_studi" required>
              <option value="" disabled selected>Pilih Program Studi</option>
              <option value="Bimbingan dan Konseling">Bimbingan dan Konseling</option>
              <option value="PG.PAUD">PG.PAUD</option>
              <option value="PGSD">PGSD</option>
              <option value="Pendidikan Bahasa Inggris">Pendidikan Bahasa Inggris</option>
              <option value="Pendidikan Bahasa Jepang">Pendidikan Bahasa Jepang</option>
              <option value="Pendidikan Bahasa dan Sastra Indonesia">Pendidikan Bahasa dan Sastra Indonesia</option>
              <option value="Pendidikan Biologi">Pendidikan Biologi</option>
              <option value="Pendidikan Ekonomi">Pendidikan Ekonomi</option>
              <option value="Pendidikan Fisika">Pendidikan Fisika</option>
              <option value="Pendidikan Geografi">Pendidikan Geografi</option>
              <option value="Pendidikan Matematika">Pendidikan Matematika</option>
              <option value="Pendidikan Sejarah">Pendidikan Sejarah</option>
              <option value="Akuntansi">Akuntansi</option>
              <option value="Manajemen">Manajemen</option>
              <option value="Ekonomi Islam">Ekonomi Islam</option>
              <option value="Perpajakan">Perpajakan</option>
              <option value="Teknik Elektro">Teknik Elektro</option>
              <option value="Teknik Mesin">Teknik Mesin</option>
              <option value="Teknik Informatika">Teknik Informatika</option>
              <option value="Sistem dan Teknologi Informasi">Sistem dan Teknologi Informasi</option>
              <option value="Teknologi Rekayasa Mekatronika">Teknologi Rekayasa Mekatronika</option>
              <option value="Kesehatan Masyarakat">Kesehatan Masyarakat</option>
              <option value="Gizi">Gizi</option>
              <option value="Jurnalistik">Jurnalistik</option>
              <option value="Periklanan">Periklanan</option>
              <option value="Penyiaran">Penyiaran</option>
              <option value="Kehumasan">Kehumasan</option>
              <option value="Manajemen Komunikasi">Manajemen Komunikasi</option>
              <option value="Sarjana Farmasi">Sarjana Farmasi</option>
              <option value="Analis Kesehatan / TLM">Analis Kesehatan / TLM</option>
              <option value="Agama Islam">Agama Islam</option>
              <option value="Psikologi">Psikologi</option>
              <option value="Kedokteran">Kedokteran</option>
            </select>
            <% if (error && error.program_studi) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.program_studi %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="fakultas" class="form-label">Fakultas</label>
            <select class="form-control" id="fakultas" name="fakultas" required>
              <option value="" disabled selected>Pilih Fakultas</option>
              <option value="Fakultas Keguruan dan Ilmu Pendidikan">Fakultas Keguruan dan Ilmu Pendidikan</option>
              <option value="Fakultas Ekonomi dan Bisnis">Fakultas Ekonomi dan Bisnis</option>
              <option value="Fakultas Teknik Industri dan Informatika">Fakultas Teknik Industri dan Informatika</option>
              <option value="Fakultas Ilmu Ilmu Kesehatan">Fakultas Ilmu Ilmu Kesehatan</option>
              <option value="Fakultas Ilmu Sosial dan Ilmu Politik">Fakultas Ilmu Sosial dan Ilmu Politik</option>
              <option value="Fakultas Farmasi dan Sains">Fakultas Farmasi dan Sains</option>
              <option value="Fakultas Agama Islam">Fakultas Agama Islam</option>
              <option value="Fakultas Psikologi">Fakultas Psikologi</option>
              <option value="Fakultas Kedokteran">Fakultas Kedokteran</option>
            </select>
            <% if (error && error.fakultas) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.fakultas %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="alamat" class="form-label">Alamat</label>
            <input type="text" class="form-control" id="alamat" name="alamat" required />
            <% if (error && error.alamat) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.alamat %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" name="email" required />
            <% if (error && error.email) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.email %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="no_telpon" class="form-label">Nomor Whatsapp</label>
            <input type="tel" class="form-control" id="no_telpon" name="no_telpon" placeholder="e.g. 628x" pattern="^628[0-9]{8,}" required
              aria-required="true" title="Nomor Whatsapp harus dimulai dengan 628 dan diikuti minimal 8 digit angka." />
            <% if (error && error.no_telpon) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.no_telpon %>
              </p>
              <% } %>
          </div>


          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" required />
            <% if (error && error.password) { %>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.password %>
              </p>
              <% } %>
          </div>


          <div class="kirim">
            <button class="btn btn-primary">Buat Akun</button>
          </div>
          <% if (locals.messages && messages.error) {%>
            <p class="alert alert-danger mt-2">
              <%= messages.error %>
            </p>
            <%}%>


              <div class="container text-center">
                <div class="row">
                  <div class="col">
                    <div class="mb-3">
                      <p class="mt-4 kembali">
                        Sudah punya akun? <a href="/login">Masuk</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>

        </form>
      </div>
    </div>
  </div>
  <!-- Login end -->




  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>