From 76cdeeded0c24afafce34707bc6eac4f1fb65883 Mon Sep 17 00:00:00 2001
From: "Kent Joseph T. Palima" <admin@upiecep.org>
Date: Thu, 30 Apr 2026 15:57:58 +0800
Subject: [PATCH] Added feature to close registration form remotely

---
 src/pages/apply.astro | 292 ++++++++++++++++++++----------------------
 src/styles/apply.scss |  28 ++++
 2 files changed, 165 insertions(+), 155 deletions(-)

diff --git a/src/pages/apply.astro b/src/pages/apply.astro
index c106486..89dd3f4 100644
--- a/src/pages/apply.astro
+++ b/src/pages/apply.astro
@@ -8,178 +8,140 @@ import '../styles/apply.scss';
     <div class="form-container">
       <h1>Registration Portal</h1>
       
-      <div class="description-text">
-        <p>UP IECEP is an organization based in the University of the Philippines College of Engineering, catering specifically to <strong>BS Electronics Engineering students</strong>. It is a student chapter affiliated with the Institute of Electronics Engineers of the Philippines NCR North-East Chapter.</p>
-        <p class="privacy-notice">In accordance with the Data Privacy Act of 2012, all information you provide will be kept confidential and used exclusively for the organization's internal purposes.</p>
+      <!-- LOADING SCREEN -->
+      <div id="loading-status" class="status-panel">
+        <div class="spinner"></div>
+        <p>Checking registration status...</p>
       </div>
 
-      <!-- ELIGIBILITY CHECK -->
-      <div id="eligibility-section" class="eligibility-card">
-        <h3>Eligibility Check</h3>
-        <p>Before proceeding, please answer the following questions to confirm your eligibility:</p>
+      <!-- CLOSED SCREEN (Hidden by default) -->
+      <div id="closed-message" class="status-panel" style="display: none;">
+        <h3>Registration is Currently Closed</h3>
+        <p>Thank you for your interest! Please follow our social media pages for updates on our next application period.</p>
+      </div>
+
+      <!-- THE ENTIRE FORM WRAPPER (Hidden by default) -->
+      <div id="registration-content" style="display: none;">
         
-        <div class="radio-group">
-          <p>Are you currently a BS Electronics Engineering student?</p>
-          <label><input type="radio" name="isBSECE" value="yes" /> Yes</label>
-          <label><input type="radio" name="isBSECE" value="no" /> No</label>
+        <div class="description-text">
+          <p>UP IECEP is an organization based in the University of the Philippines College of Engineering, catering specifically to <strong>BS Electronics Engineering students</strong>. It is a student chapter affiliated with the Institute of Electronics Engineers of the Philippines NCR North-East Chapter.</p>
+          <p class="privacy-notice">In accordance with the Data Privacy Act of 2012, all information you provide will be kept confidential and used exclusively for the organization's internal purposes.</p>
         </div>
 
-        <div class="radio-group">
-          <p>Are you graduating this semester?</p>
-          <label><input type="radio" name="isGraduating" value="yes" /> Yes</label>
-          <label><input type="radio" name="isGraduating" value="no" /> No</label>
+        <!-- ELIGIBILITY CHECK -->
+        <div id="eligibility-section" class="eligibility-card">
+          <h3>Eligibility Check</h3>
+          <p>Before proceeding, please answer the following questions to confirm your eligibility:</p>
+          
+          <div class="radio-group">
+            <p>Are you currently a BS Electronics Engineering student?</p>
+            <label><input type="radio" name="isBSECE" value="yes" /> Yes</label>
+            <label><input type="radio" name="isBSECE" value="no" /> No</label>
+          </div>
+
+          <div class="radio-group">
+            <p>Are you graduating this semester?</p>
+            <label><input type="radio" name="isGraduating" value="yes" /> Yes</label>
+            <label><input type="radio" name="isGraduating" value="no" /> No</label>
+          </div>
+
+          <button type="button" id="check-eligibility-btn" class="submit-btn">Continue</button>
         </div>
 
-        <button type="button" id="check-eligibility-btn" class="submit-btn">Continue</button>
-      </div>
+        <!-- INELIGIBLE MESSAGE -->
+        <div id="ineligible-message" class="hidden-message">
+          <p>Unfortunately, you are ineligible to join UP IECEP.</p>
+          <p>We sincerely thank you for your interest in our organization and wish you the best in your academic journey ahead.</p>
+        </div>
 
-      <!-- INELIGIBLE MESSAGE (Hidden by default) -->
-      <div id="ineligible-message" class="hidden-message">
-        <p>Unfortunately, you are ineligible to join UP IECEP.</p>
-        <p>We sincerely thank you for your interest in our organization and wish you the best in your academic journey ahead.</p>
-      </div>
+        <!-- THE ACTUAL FORM -->
+        <form id="apply-form" class="hidden-form">
+          <h3>Applicant Details</h3>
+          
+          <div class="input-group">
+            <label for="fullName">Name <span>(Format: DELA CRUZ, Juan M.)</span></label>
+            <input type="text" id="fullName" name="fullName" title="Please follow the format: LASTNAME, First Name M." required placeholder="DELA CRUZ, Juan M." />
+          </div>
 
-      <!-- THE ACTUAL FORM (Hidden by default) -->
-      <!-- REMEMBER TO PASTE YOUR GOOGLE SCRIPT URL IN THE ACTION ATTRIBUTE BELOW -->
-      <form id="apply-form" class="hidden-form" action="https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec">
-        <h3>Applicant Details</h3>
+          <div class="input-group">
+            <label for="nickname">Nickname</label>
+            <input type="text" id="nickname" name="nickname" title="Please enter your preferred nickname" required placeholder="Juan" />
+          </div>
+
+          <div class="input-group">
+            <label for="studentNumber">Student Number <span>(Format: 20XX-XXXXX)</span></label>
+            <input type="text" id="studentNumber" name="studentNumber" pattern="20[0-9]{2}-[0-9]{5}" title="Please include the dash (e.g., 2022-12345)" required placeholder="202X-XXXXX" />
+            <span class="realtime-error" id="sn-error">Format must be exactly 20XX-XXXXX (Don't forget the dash!)</span>
+          </div>
+
+          <div class="input-group">
+            <label for="yearStanding">Year Standing</label>
+            <select id="yearStanding" name="yearStanding" title="Please select your current year standing" required>
+              <option value="" disabled selected>Select your year standing</option>
+              <option value="I">I</option>
+              <option value="II">II</option>
+              <option value="III">III</option>
+              <option value="IV">IV</option>
+              <option value="Other">Other</option>
+            </select>
+          </div>
+
+          <div class="input-group">
+            <label for="mobileNumber">Mobile Number <span>(Format: 09XXXXXXXXX)</span></label>
+            <input type="tel" id="mobileNumber" name="mobileNumber" pattern="09[0-9]{9}" title="Please enter an 11-digit mobile number starting with 09" required placeholder="09XXXXXXXXX" />
+            <span class="realtime-error" id="mn-error">Must be an 11-digit number starting with 09</span>
+          </div>
+
+          <div class="input-group">
+            <label for="email">Email Address</label>
+            <input type="email" id="email" name="email" title="Please enter a valid email address" required placeholder="jdelacruz@up.edu.ph" />
+          </div>
+
+          <div class="input-group">
+            <label for="facebookLink">Facebook Profile Link <span>(Format: facebook.com/username)</span></label>
+            <input type="text" id="facebookLink" name="facebookLink" title="Please provide a link to your Facebook profile" required placeholder="facebook.com/IECEPUPD" />
+          </div>
+
+          <div class="input-group">
+            <label for="source">How did you learn about UP IECEP?</label>
+            <select id="source" name="source" title="Please select how you found out about our organization" required>
+              <option value="" disabled selected>Select an option</option>
+              <option value="Family">Family</option>
+              <option value="Friends">Friends</option>
+              <option value="Social Media">Social Media</option>
+              <option value="Other">Other</option>
+            </select>
+          </div>
+
+          <div class="input-group">
+            <label for="funActivities">Do you have activities in mind that would add more fun to your application process?</label>
+            <textarea id="funActivities" name="funActivities" rows="4" title="We would love to hear your ideas!" placeholder="Share your ideas here!"></textarea>
+          </div>
+
+          <button type="submit" id="submit-btn" class="submit-btn">Submit Application</button>
+          <p id="loading-msg" style="display:none; text-align:center; margin-top:1rem;">Sending application...</p>
+        </form>
         
-        <div class="input-group">
-          <label for="fullName">Name <span>(Format: DELA CRUZ, Juan M.)</span></label>
-          <input 
-            type="text" 
-            id="fullName" 
-            name="fullName" 
-            title="Please follow the format: LASTNAME, First Name M."
-            required 
-            placeholder="DELA CRUZ, Juan M." 
-          />
+        <!-- SUCCESS MESSAGE -->
+        <div id="success-message" class="hidden-message success">
+          <h3>Application Submitted!</h3>
+          <p>Thank you for applying to UP IECEP. We have received your details and will be in touch soon.</p>
         </div>
 
-        <div class="input-group">
-          <label for="nickname">Nickname</label>
-          <input 
-            type="text" 
-            id="nickname" 
-            name="nickname" 
-            title="Please enter your preferred nickname"
-            required 
-            placeholder="Juan" 
-          />
-        </div>
-
-        <div class="input-group">
-          <label for="studentNumber">Student Number <span>(Format: 20XX-XXXXX)</span></label>
-          <input 
-            type="text" 
-            id="studentNumber" 
-            name="studentNumber" 
-            pattern="20[0-9]{2}-[0-9]{5}" 
-            title="Please include the dash (e.g., 2022-12345)"
-            required 
-            placeholder="202X-XXXXX" 
-          />
-          <span class="realtime-error" id="sn-error">Format must be exactly 20XX-XXXXX (Don't forget the dash!)</span>
-        </div>
-
-        <div class="input-group">
-          <label for="yearStanding">Year Standing</label>
-          <select 
-            id="yearStanding" 
-            name="yearStanding" 
-            title="Please select your current year standing"
-            required
-          >
-            <option value="" disabled selected>Select your year standing</option>
-            <option value="I">I</option>
-            <option value="II">II</option>
-            <option value="III">III</option>
-            <option value="IV">IV</option>
-            <option value="Other">Other</option>
-          </select>
-        </div>
-
-        <div class="input-group">
-          <label for="mobileNumber">Mobile Number <span>(Format: 09XXXXXXXXX)</span></label>
-          <input 
-            type="tel" 
-            id="mobileNumber" 
-            name="mobileNumber" 
-            pattern="09[0-9]{9}" 
-            title="Please enter an 11-digit mobile number starting with 09 (e.g., 09123456789)"
-            required 
-            placeholder="09XXXXXXXXX" 
-          />
-          <span class="realtime-error" id="mn-error">Must be an 11-digit number starting with 09</span>
-        </div>
-
-        <div class="input-group">
-          <label for="email">Email Address</label>
-          <input 
-            type="email" 
-            id="email" 
-            name="email" 
-            title="Please enter a valid email address"
-            required 
-            placeholder="jdelacruz@up.edu.ph" 
-          />
-        </div>
-
-        <div class="input-group">
-          <label for="facebookLink">Facebook Profile Link <span>(Format: facebook.com/username)</span></label>
-          <input 
-            type="text" 
-            id="facebookLink" 
-            name="facebookLink" 
-            title="Please provide a link to your Facebook profile"
-            required 
-            placeholder="facebook.com/IECEPUPD" 
-          />
-        </div>
-
-        <div class="input-group">
-          <label for="source">How did you learn about UP IECEP?</label>
-          <select 
-            id="source" 
-            name="source" 
-            title="Please select how you found out about our organization"
-            required
-          >
-            <option value="" disabled selected>Select an option</option>
-            <option value="Family">Family</option>
-            <option value="Friends">Friends</option>
-            <option value="Social Media">Social Media</option>
-            <option value="Other">Other</option>
-          </select>
-        </div>
-
-        <div class="input-group">
-          <label for="funActivities">Do you have activities in mind that would add more fun to your application process?</label>
-          <textarea 
-            id="funActivities" 
-            name="funActivities" 
-            rows="4" 
-            title="We would love to hear your ideas!"
-            placeholder="Share your ideas here!"
-          ></textarea>
-        </div>
-
-        <button type="submit" id="submit-btn" class="submit-btn">Submit Application</button>
-        <p id="loading-msg" style="display:none; text-align:center; margin-top:1rem;">Sending application...</p>
-      </form>
-      
-      <!-- SUCCESS MESSAGE (Hidden by default) -->
-      <div id="success-message" class="hidden-message success">
-        <h3>Application Submitted!</h3>
-        <p>Thank you for applying to UP IECEP. We have received your details and will be in touch soon.</p>
-      </div>
-
+      </div> <!-- End of Registration Content Wrapper -->
     </div>
   </section>
 </Layout>
 
 <script>
+  // === PASTE YOUR GOOGLE SCRIPT URL HERE ONCE ===
+  const SCRIPT_URL = 'https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec';
+
   // --- ELEMENTS ---
+  const loadingStatus = document.getElementById('loading-status');
+  const closedMessage = document.getElementById('closed-message');
+  const registrationContent = document.getElementById('registration-content');
+  
   const eligibilitySection = document.getElementById('eligibility-section');
   const checkBtn = document.getElementById('check-eligibility-btn');
   const ineligibleMsg = document.getElementById('ineligible-message');
@@ -188,6 +150,26 @@ import '../styles/apply.scss';
   const loadingMsg = document.getElementById('loading-msg');
   const successMsg = document.getElementById('success-message');
 
+  // --- STEP 1: CHECK GOOGLE SHEET STATUS ---
+  fetch(SCRIPT_URL)
+    .then(response => response.json())
+    .then(data => {
+      loadingStatus.style.display = 'none'; // Hide the spinner
+      
+      // Look at the B1 cell value from the Google Sheet
+      if (data.status === 'OPEN') {
+        registrationContent.style.display = 'block'; // Reveal the portal!
+      } else {
+        closedMessage.style.display = 'block'; // Show the closed message
+      }
+    })
+    .catch(error => {
+      // If the internet is down or script fails, fail gracefully by showing closed
+      loadingStatus.style.display = 'none';
+      closedMessage.style.display = 'block';
+    });
+
+
   // --- ELIGIBILITY LOGIC ---
   if (checkBtn && eligibilitySection && ineligibleMsg && mainForm) {
     checkBtn.addEventListener('click', () => {
@@ -247,7 +229,7 @@ import '../styles/apply.scss';
       submitBtn.style.display = 'none';
       if(loadingMsg) loadingMsg.style.display = 'block';
 
-      fetch(mainForm.action, {
+      fetch(SCRIPT_URL, {
         method: 'POST',
         body: new FormData(mainForm)
       })
diff --git a/src/styles/apply.scss b/src/styles/apply.scss
index 68c686d..ef2efd5 100644
--- a/src/styles/apply.scss
+++ b/src/styles/apply.scss
@@ -21,6 +21,34 @@
       margin-bottom: 1.5rem;
     }
 
+    /* Status Panels (Loading & Closed) */
+    .status-panel {
+      text-align: center;
+      padding: 4rem 2rem;
+      background-color: #f9fafb;
+      border-radius: 0.5rem;
+      border: 1px dashed #d1d5db;
+      margin-bottom: 2rem;
+
+      h3 { color: $primary; font-size: 1.5rem; margin-bottom: 1rem; }
+      p { color: #4a4a4a; font-size: 1.1rem; }
+
+      /* Simple CSS Loading Spinner */
+      .spinner {
+        width: 40px;
+        height: 40px;
+        margin: 0 auto 1.5rem auto;
+        border: 4px solid rgba(128, 0, 0, 0.1);
+        border-top-color: $primary;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+    }
+
     .description-text {
       margin-bottom: 2.5rem;
       p {