<div class="container">

  <section class="login-wrapper">
    <div class="login-box">

      <!-- Header CBT -->
      <div class="header-content" style="margin-bottom: 30px;">
        <h2 class="main-title">Computer Based-Test</h2>
        <span class="sub-title">Ujian Online Berbasis Komputer</span>
        <p class="desc-title">ASSESSMENT CBT</p>
      </div>

      <!-- Logo -->
      <div style="margin-bottom: 18px;">
        <img src="https://cil-course.com/logobackup.png" alt="Logo" style="max-width: 180px; height: auto;">
      </div>

      <!-- Judul Login (Tanpa rounded & shadow) -->
      <div class="login-title no-style">
        <h3>Login Siswa</h3>
      </div>

      <!-- Deskripsi -->
      <p class="login-desc">Masukkan Username dan Password</p>

      <?php echo form_open('welcome/login', 'id="form-login" class="form-horizontal"'); ?>

<!-- Input Username -->
<div style="margin-bottom: 18px;">
  <input type="text" id="username" name="username" class="form-control" placeholder="Username">
</div>

<!-- Input Password -->
<div style="margin-bottom: 18px;">
  <input type="password" id="password" name="password" class="form-control" placeholder="Password">
</div>


      <!-- Show Password -->
      <div class="form-check">
        <label>
          <input type="checkbox" id="show-password"> Tampilkan Password
        </label>
      </div>

      <!-- Tombol Login -->
      <div class="form-group">
        <button type="submit" class="btn-login">Login</button>
      </div>

      <!-- Informasi -->
      <div class="callout">
        <h4>Informasi</h4>
        <p>Jika ada kendala hubungi Operator</p>
      </div>

      <!-- Login Operator -->
      <div class="operator-box">
        <h5>Login Operator</h5>
        <a href="<?php echo site_url(); ?>/manager/" class="btn-operator">👨‍💻 Masuk Sebagai Operator</a>
      </div>

      <?php echo form_close(); ?>
    </div>
  </section>

  <style>
input.form-control[type="text"],
input.form-control[type="password"] {
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  border: 1px solid #ccc;
  padding: 12px 14px;
  font-size: 15px;
  background-color: #fff;
  transition: 0.3s ease all;
}

input.form-control[type="text"]:focus,
input.form-control[type="password"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.15);
  border-color: #3c8dbc;
}

    .login-wrapper {
      display: flex;
      justify-content: center;
      padding: 40px 20px;
    }

    .login-box {
      background: #fff;
      padding: 40px 30px;
      border-radius: 24px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
      width: 100%;
      max-width: 480px;
      text-align: center;
    }

    .header-content {
      text-align: center;
    }

    .main-title {
      font-size: 24px;
      font-weight: bold;
      color: #0073b7;
      margin: 0;
    }

    .sub-title {
      font-size: 16px;
      color: #888;
      margin-top: 4px;
      display: block;
    }

    .desc-title {
      font-size: 14px;
      color: #555;
      margin-top: 8px;
    }

    /* Judul Login default */
    .login-title {
      background: #f9f9f9;
      padding: 14px;
      margin-bottom: 25px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      border-radius: 16px;
    }

    /* Hilangkan rounded dan shadow di sini */
    .login-title.no-style {
      background: none;
      padding: 0;
      margin-bottom: 25px;
      box-shadow: none;
      border-radius: 0;
    }

    .login-title h3 {
      color: #3c8dbc;
      margin: 0;
      font-weight: 600;
    }

    .login-desc {
      margin-bottom: 18px;
      color: #444;
      font-size: 15px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-control {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #ccc;
      font-size: 15px;
    }

    .form-check {
      text-align: left;
      margin-bottom: 24px;
      font-size: 14px;
    }

    .btn-login {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      background-color: #4DA8DA;
      border: none;
      font-size: 16px;
      color: white;
      cursor: pointer;
    }

    .callout {
      background-color: #f8d7da;
      border-left: 5px solid #dc3545;
      color: #721c24;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      padding: 20px;
      margin-top: 20px;
    }

    .operator-box {
      background: #FFFFFF;
      padding: 20px 30px;
      border-radius: 20px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
      text-align: center;
      width: 100%;
      margin-top: 20px;
    }

    .btn-operator {
      display: inline-block;
      padding: 10px 24px;
      border-radius: 30px;
      font-size: 16px;
      background: #ffcc02;
      border: none;
      color: black;
      text-decoration: none;
      font-weight: bold;
    }

    @media screen and (max-width: 600px) {
      .login-box {
        padding: 30px 20px;
      }
    }
  </style>

  <script type="text/javascript">
    function showpassword() {
      var x = document.getElementById("password");
      x.type = (x.type === "password") ? "text" : "password";
    }

    $(function () {
      $('#username').focus();

      $('#show-password').on('change', function () {
        showpassword();
      });

      $('#form-login').submit(function () {
        $("#modal-proses").modal('show');
        $.ajax({
          url: "<?php echo site_url(); ?>/welcome/login",
          type: "POST",
          data: $('#form-login').serialize(),
          cache: false,
          success: function (respon) {
            var obj = $.parseJSON(respon);
            if (obj.status == 1) {
              window.open("<?php echo site_url(); ?>/tes_dashboard", "_self");
            } else {
              $('#form-pesan').html(pesan_err(obj.error));
              $("#modal-proses").modal('hide');
              $('#username').focus();
            }
          }
        });

        return false;
      });
    });
  </script>
</div>
