<?php
/**
 * EnglishSpeak — Student Registration Page
 */

session_start();

// Generate CSRF token
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Đăng ký — EnglishSpeak</title>
  <link rel="stylesheet" href="/EnglishSpeak/assets/css/student-auth.css">
  <style>
    /* Đồng bộ logo với trang đăng nhập */
    .auth-header {
      transform: translateY(-28px);
      margin-bottom: -18px;
    }
    .auth-logo-image {
      display: block;
      width: 160px;
      height: 160px;
      object-fit: contain;
      margin: 0 auto 4px;
    }
    .auth-subtitle {
      font-size: 13px;
      font-weight: 500;
    }
    /* Thu gọn khoảng cách từ tiêu đề Đăng ký tài khoản xuống form */
    .auth-header .auth-title {
      margin-bottom: 0;
    }
    .auth-body {
      padding-top: 0;
      margin-top: -12px;
    }
    @media (max-width: 600px) {
      .auth-header {
        transform: translateY(-22px);
        margin-bottom: -12px;
      }
      .auth-logo-image {
        width: 145px;
        height: 145px;
      }
      .auth-subtitle {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="auth-container">
    <!-- Header -->
    <div class="auth-header">
      <img
        class="auth-logo-image"
        src="/EnglishSpeak/assets/images/englishspeak-logo.png"
        alt="EnglishSpeak"
      >
      <p class="auth-subtitle">Learn, play and grow together!</p>
      <h1 class="auth-title">Đăng ký tài khoản</h1>
    </div>

    <!-- Body -->
    <div class="auth-body">
      <div class="auth-form">
        <div class="alert alert-error" id="register-error" style="display:none;"></div>

        <form id="register-form" method="post" action="/EnglishSpeak/api/student-register.php" novalidate>
          <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">

          <div class="form-group">
            <label for="full_name">Họ và tên</label>
            <input
              type="text"
              id="full_name"
              name="full_name"
              placeholder="Nhập họ và tên"
              autocomplete="name"
              required
            >
          </div>

          <div class="form-group">
            <label for="phone">Số điện thoại</label>
            <input
              type="tel"
              id="phone"
              name="phone"
              placeholder="Nhập số điện thoại (tuỳ chọn nếu có Gmail)"
              autocomplete="tel"
            >
          </div>

          <div class="form-group">
            <label for="email">Gmail</label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="Nhập Gmail (tuỳ chọn nếu có số điện thoại)"
              autocomplete="email"
            >
          </div>

          <div class="form-group">
            <label for="password">Mật khẩu</label>
            <div class="password-wrapper">
              <input
                type="password"
                id="password"
                name="password"
                placeholder="Ít nhất 8 ký tự"
                autocomplete="new-password"
                required
              >
              <button type="button" class="toggle-password" data-target="password">
                <svg class="eye-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                  <circle cx="12" cy="12" r="3"/>
                </svg>
              </button>
            </div>
          </div>

          <div class="form-group">
            <label for="password_confirm">Xác nhận mật khẩu</label>
            <div class="password-wrapper">
              <input
                type="password"
                id="password_confirm"
                name="password_confirm"
                placeholder="Nhập lại mật khẩu"
                autocomplete="new-password"
                required
              >
              <button type="button" class="toggle-password" data-target="password_confirm">
                <svg class="eye-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                  <circle cx="12" cy="12" r="3"/>
                </svg>
              </button>
            </div>
          </div>

          <button type="submit" class="btn btn-primary" id="register-submit">
            Đăng ký
          </button>

          <a href="student-login.php" class="back-link">← Quay lại Đăng nhập</a>
        </form>
      </div>
    </div>

    <!-- Illustration -->
    <div class="auth-illustration">
      <div class="illustration-scene">
        <div class="scene-cloud cloud-1"></div>
        <div class="scene-cloud cloud-2"></div>
        <div class="scene-cloud cloud-3"></div>
        <div class="scene-mountain mountain-1"></div>
        <div class="scene-mountain mountain-2"></div>
        <div class="scene-ground"></div>
        <div class="scene-tree tree-1"></div>
        <div class="scene-tree tree-2"></div>
        <div class="scene-tree tree-3"></div>
        <div class="mascot-bird">
          <div class="bird-body">
            <div class="bird-eye left"></div>
            <div class="bird-eye right"></div>
            <div class="bird-beak"></div>
            <div class="bird-wing left"></div>
            <div class="bird-wing right"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="/EnglishSpeak/assets/js/register.js?v=20260807-2308"></script>
</body>
</html>