// Fixed Registration Form Script
// Replace the existing script section in your HTML with this

document.getElementById("year").textContent = new Date().getFullYear();

// Update fee display when designation changes
const designationSelect = document.getElementById('designation');
const feeDisplay = document.getElementById('selectedFee');
const feeAmount = document.getElementById('feeAmount');

if (designationSelect && feeDisplay && feeAmount) {
  designationSelect.addEventListener('change', function() {
    const fees = {
      'Student': 300,
      'Faculty': 600,
      'Researcher': 600,
      'Industry Professional': 900,
      'Other': 500
    };
    
    const fee = fees[this.value] || 0;
    
    if (fee > 0) {
      feeAmount.textContent = '₹' + fee;
      feeDisplay.style.display = 'block';
    } else {
      feeDisplay.style.display = 'none';
    }
  });
}

// Single form submission handler
const registrationForm = document.getElementById('registrationForm');

if (registrationForm) {
  registrationForm.addEventListener('submit', async function (e) {
    e.preventDefault();
    
    console.log('Form submitted'); // Debug log
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    
    // Add fees based on designation
    const fees = {
      'Student': 300,
      'Faculty': 600,
      'Researcher': 600,
      'Industry Professional': 900,
      'Other': 500
    };
    data.fees = fees[data.designation] || 0;
    
    console.log('Form data:', data); // Debug log
    
    // Show loading
    Swal.fire({
      title: "Submitting...",
      text: "Please wait while we process your registration.",
      allowOutsideClick: false,
      showConfirmButton: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });
    
    try {
      console.log('Sending request to server...'); // Debug log
      
      const res = await fetch("http://localhost:5000/api/register", {
        method: "POST",
        headers: { 
          "Content-Type": "application/json",
          "Accept": "application/json"
        },
        body: JSON.stringify(data),
      });
      
      console.log('Response status:', res.status); // Debug log
      
      const result = await res.json();
      console.log('Response data:', result); // Debug log
      
      if (result.status === "success" || res.ok) {
        // Store registration data for success page
        localStorage.setItem('regName', data.name);
        localStorage.setItem('regEmail', data.email);
        localStorage.setItem('regWorkshop', data.workshopTitle);
        localStorage.setItem('regFee', data.fees);
        
        // Redirect to success page
        window.location.href = `success.html?name=${encodeURIComponent(data.name)}&email=${encodeURIComponent(data.email)}&workshop=${encodeURIComponent(data.workshopTitle)}&fee=${data.fees}`;
        
      } else {
        throw new Error(result.message || 'Registration failed');
      }
      
    } catch (error) {
      console.error("Registration Error:", error);
      
      // Check if it's a network error (server not running)
      if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
        Swal.fire({
          icon: "warning",
          title: "⚠️ Server Connection Issue",
          html: `
            <div style="text-align: left; padding: 20px;">
              <p style="font-size: 15px; margin-bottom: 15px;">
                <strong>Your registration data is ready, but we couldn't connect to the server.</strong>
              </p>
              <p style="font-size: 14px; color: #666; margin-bottom: 10px;">
                This usually means:
              </p>
              <ul style="text-align: left; color: #666; font-size: 14px;">
                <li>The backend server is not running</li>
                <li>The server URL might be incorrect</li>
              </ul>
              <hr style="margin: 15px 0;">
              <p style="font-size: 14px; color: #0891b2; font-weight: bold;">
                📋 Your Information:
              </p>
              <pre style="background: #f3f4f6; padding: 10px; border-radius: 5px; font-size: 12px; text-align: left; overflow-x: auto;">${JSON.stringify(data, null, 2)}</pre>
              <p style="font-size: 13px; color: #666; margin-top: 10px;">
                Please contact us directly at:<br>
                📧 virtualchemlab@gmail.com<br>
                📱 +91-9876543210
              </p>
            </div>
          `,
          confirmButtonColor: "#06b6d4",
          confirmButtonText: "I'll Contact Directly",
          width: '650px'
        });
      } else {
        Swal.fire({
          icon: "error",
          title: "❌ Registration Error",
          html: `
            <p style="font-size: 15px; margin-bottom: 10px;">
              ${error.message || "Something went wrong. Please try again."}
            </p>
            <p style="font-size: 13px; color: #666;">
              If the problem persists, please contact us at:<br>
              📧 virtualchemlab@gmail.com
            </p>
          `,
          confirmButtonColor: "#ef4444",
          confirmButtonText: "Try Again"
        });
      }
    }
  });
}

// Smooth scroll to registration form
document.querySelectorAll('a[href="#registration-form"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.getElementById('registration-form');
    if (target) {
      target.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

console.log('✅ Registration script loaded successfully');
</script>
</body>
</html>