<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Registration</title>
<link rel="stylesheet" href="css/registrationStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Company Registration</h2>
  <form id="registrationForm" action="/register" method="post">
    <label for="company_name">Company Name:</label><br>
    <input type="text" id="company_name" name="company_name" required><br>
    <label for="primary_contact_name">Primary Contact Name:</label><br>
    <input type="text" id="primary_contact_name" name="primary_contact_name" required><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br>
    <label for="primary_country_code">Primary Contact Country Code:</label><br>
    <select id="primary_country_code" name="primary_country_code" required>
      <!-- Options will be populated dynamically via JavaScript -->
    </select><br>
    <label for="primary_contact_number">Primary Contact Number:</label><br>
    <input type="text" id="primary_contact_number" name="primary_contact_number" required><br>
    <label for="address">Address:</label><br>
    <input type="text" id="address" name="address" required><br>
    <label for="website_url">Website URL:</label><br>
    <input type="url" id="website_url" name="website_url"><br>
    <label for="secondary_contact_name">Secondary Contact Name:</label><br>
    <input type="text" id="secondary_contact_name" name="secondary_contact_name"><br>
    <label for="secondary_country_code">Secondary Contact Country Code:</label><br>
    <select id="secondary_country_code" name="secondary_country_code">
      <!-- Options will be populated dynamically via JavaScript -->
    </select><br>
    <label for="secondary_contact_number">Secondary Contact Number:</label><br>
    <input type="text" id="secondary_contact_number" name="secondary_contact_number"><br>
    <label for="ceo_name">CEO Name:</label><br>
    <input type="text" id="ceo_name" name="ceo_name"><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <input type="checkbox" id="showPasswordCheckbox">
    <label for="showPasswordCheckbox">Show Password</label><br>
    <label for="confirm_password">Confirm Password:</label><br>
    <input type="password" id="confirm_password" name="confirm_password" required><br>
    <div id="password_error" class="error"></div> 
    <input type="checkbox" id="want_to_sponsor" name="want_to_sponsor" value="0">
    <label for="want_to_sponsor">Want to Sponsor</label><br>
    <div id="sponsorshipLevels" style="display:none;">
      <input type="radio" id="silver_sponsor" name="sponsorship_level" onchange="sponsorship()" checked value="silver">
      <label for="silver_sponsor">Silver Sponsor </label>
      <span class="info-icon sponsorship-option"data-modal="sponsorship-modal">ⓘ</span>

      <input type="radio" id="golden_sponsor" name="sponsorship_level" onchange="sponsorship()" value="golden">
      <label for="golden_sponsor">Golden Sponsor </label>
      <span class="info-icon" data-modal="sponsorship-modal">ⓘ</span>
    </div><br>
    <div id="registrationFee">
      Registration Fee: ₹80000
    </div><br>
    <input type="checkbox" id="accepted_terms" name="accepted_terms" required value="0">
    <label for="accepted_terms">I accept the <a href="/terms" target="_blank">terms and conditions</a></label><br>
    <button type="submit">Register</button>
  
  <div id="sponsorship-modal" class="modal">
    <div class="modal-content">
      <span class="close" data-modal="sponsorship-modal">&times;</span>
      <p>Information about Silver and Golden Sponsorship...</p>
    </div>
  </div>
  <input type="hidden" id="selected_sponsorship_level" name="selected_sponsorship_level">
</form>
</div>
<script>
  // Update registration fee based on sponsorship level
  function sponsorship() {
    if ($('#want_to_sponsor').is(':checked')) {
        var selectedLevel = $('input[name="sponsorship_level"]:checked').val();
        if (selectedLevel === 'silver') {
            $('#registrationFee').text('Sponsorship Fee: ₹200000');
            $('#selected_sponsorship_level').val('silver'); // Update selected sponsorship level
        } else if (selectedLevel === 'golden') {
            $('#registrationFee').text('Sponsorship Fee: ₹300000');
            $('#selected_sponsorship_level').val('golden'); // Update selected sponsorship level
        }
    } else {
        $('#registrationFee').text('Registration Fee: ₹80000');
        $('#selected_sponsorship_level').val(''); // Clear selected sponsorship level
    }
}

</script>
<script src="js/countriesData.js"></script>
<script src="js/registrationValidation.js"></script>
</body>
</html>
