<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>APC Students' Society Registration</title>
  <link rel="stylesheet" href="styles.css" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet" />
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-pY1IeXhQyNlBMBiQXxYxjGh0c1GwD38ZgKlAz6X1lplrB5XD9iv0mW/KP+qXGzYOB4GfkEYbMD56wXha3KQlfw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

  <!-- Consent Modal -->
  <div id="consentModal" class="consent-modal">
    <div class="consent-content">
      <h2><i class="fas fa-user-shield"></i> Privacy Policy & Consent</h2>
      <p>We value your privacy. By registering, you consent to the collection and use of your data for registration purposes. All data gathered will be deleted upon completion of the online registration, and your registration details will be sent to your Gmail account.</p>
      <button id="consentAcceptBtn" class="consent-btn"><i class="fas fa-check-circle"></i> I Consent</button>
    </div>
  </div>

  <!-- Loading Overlay -->
  <div id="loadingOverlay" class="loading-overlay">
    <div class="loading-spinner"></div>
    <p>Please wait...</p>
  </div>

  <!-- Main Container -->
  <div class="container fade-init hidden-start" id="mainContainer">
    <!-- Header & Title -->
    <header class="header fade-init" id="header">
      <div class="header-logo">
        <img src="https://ramconnect.apc.edu.ph/logo/nu-apc-cons-logo.png" alt="APC Logo" />
      </div>
      <h1><i class="fas fa-registered"></i> APC Registration Portal</h1>
      <div class="slot-counter">
        <i class="fas fa-users"></i> Slots Left: <span id="slotsLeft">180</span>
      </div>
    </header>

    <!-- Already Registered Display -->
    <div id="alreadyRegisteredSection" class="already-registered fade-init hidden-start">
      <h2>Welcome Back, <span id="registeredName"></span>! <i class="fas fa-smile"></i></h2>
      <p>You have already registered.</p>
      <div class="qr-preview">
        <h3>Your QR Code <i class="fas fa-qrcode"></i></h3>
        <div id="storedQR" class="qr-display"></div>
      </div>
      <button id="reuploadBtn" class="reupload-btn"><i class="fas fa-upload"></i> Re-upload Registration</button>
    </div>

    <!-- Registration Form -->
    <div id="formSection" class="form-section fade-init hidden-start">
      <form id="registrationForm">
        <div class="form-grid">
          <!-- Left Column -->
          <div>
            <label for="name"><i class="fas fa-user"></i> Full Name</label>
            <input type="text" id="name" name="name" required placeholder="Enter your full name" />

            <label for="number"><i class="fas fa-phone"></i> Contact Number</label>
            <input type="text" id="number" name="number" required placeholder="Enter your phone number" />

            <label for="email"><i class="fas fa-envelope"></i> Email</label>
            <input type="email" id="email" name="email" required placeholder="Enter your Gmail address" />

            <label for="school_name"><i class="fas fa-university"></i> School Name</label>
            <input type="text" id="school_name" name="school_name" required placeholder="Enter your school name" />
          </div>

          <!-- Right Column -->
          <div>
            <label for="id_file"><i class="fas fa-id-card"></i> Front of School ID</label>
            <input type="file" id="id_file" accept="image/*" required />

            <div class="signature-options">
              <label><i class="fas fa-signature"></i> Signature Type:</label>
              <div class="radio-group">
                <input type="radio" id="upload" name="signature_type" value="upload" checked />
                <label for="upload"><i class="fas fa-upload"></i> Upload</label>

                <input type="radio" id="draw" name="signature_type" value="draw" />
                <label for="draw"><i class="fas fa-pencil-alt"></i> Draw</label>
              </div>
            </div>

            <div id="upload_section" class="upload-section">
              <label for="signature_file"><i class="fas fa-file-image"></i> Upload Signature</label>
              <input type="file" id="signature_file" accept="image/*" />
            </div>

            <div id="draw_section" class="draw-section" style="display: none;">
              <canvas id="signature-pad" width="400" height="150"></canvas>
              <button type="button" id="clear"><i class="fas fa-eraser"></i> Clear Signature</button>
            </div>
          </div>
        </div>

        <button type="submit" class="register-btn"><i class="fas fa-paper-plane"></i> Register</button>
      </form>

      <div id="message" class="message"></div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer fade-init hidden-start" id="footer">
    <p>&copy; Asia Pacific College, 2025. All rights reserved.</p>
    <div class="social-links">
      <a href="https://twitter.com/apc" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
      <a href="https://facebook.com/apc" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
      <a href="https://instagram.com/apc" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
      <a href="https://www.apc.edu.ph" target="_blank"><i class="fas fa-globe"></i> APC Website</a>
    </div>
  </footer>

  <!-- Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>

  <!-- EmailJS Init -->
  <script>
    (function() {
      // Replace with your public key from EmailJS
      emailjs.init("SSDcjFdMjBWH15ZIq");
    })();
  </script>

  <!-- Main Script -->
  <script src="script.js"></script>
</body>
</html>