<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Register to Attend | Loveworld Trade & Investment Forum 2025</title>

  <link rel="icon" type="image/png" href="images/favicon.png">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/style.css?v=8" />
  <link rel="stylesheet" href="css/responsive.css?v=9" />
  <link rel="stylesheet" href="css/register.css?v=1.1" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

  <style>
    #formMessage {
      margin-top: 20px;
      font-weight: 500;
    }
    .spinner-border {
      width: 1.2rem;
      height: 1.2rem;
    }
  </style>
</head>

<body>
  <!-- HERO -->
  <section class="register-hero d-flex align-items-center justify-content-center text-center">
    <div class="container position-relative text-white">
      <a href="index.php"> <img src="images/logo-light.png" alt="Logo" /> </a>
      <h1 class="fw-bold mb-3">Register to Attend</h1>
      <p class="lead">Loveworld Trade & Investment Forum 2025<br>November 19–20 | Lagos</p>
    </div>
  </section>

  <!-- REGISTRATION FORM -->
  <section class="registration-form py-5">
    <div class="container">
      <div class="form-container p-5">
        <h2 class="text-left mb-5">LTIF Registration</h2>

        <form method="POST" id="registrationForm">
          <!-- A. Personal Information -->
          <div class="form-section mb-5">
            <h4 class="section-title">A. Personal Information</h4>
            <div class="row g-4">
              <div class="col-md-6">
                <label class="form-label">Full Name *</label>
                <input type="text" class="form-control" name="fullName" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Gender</label>
                <select class="form-select" name="gender">
                  <option value="MALE">Male</option>
                  <option value="FEMALE">Female</option>
                  <option value="OTHER">Other</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label">Date of Birth</label>
                <input type="date" class="form-control" name="dateOfBirth" min="1900-01-01" max="2007-12-31">
              </div>
              <div class="col-md-6">
                <label class="form-label">Email Address *</label>
                <input type="email" class="form-control" name="email" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Mobile / WhatsApp *</label>
                <input type="tel" class="form-control" name="mobile" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Residential City</label>
                <input type="text" class="form-control" name="residentialCity">
              </div>
              <div class="col-md-6">
                <label class="form-label">Residential Country</label>
                <input type="text" class="form-control" name="residentialCountry">
              </div>
              <div class="col-md-6">
                <label class="form-label">Nationality</label>
                <input type="text" class="form-control" name="nationality">
              </div>
            </div>
          </div>

          <!-- B. Professional Profile -->
          <div class="form-section mb-5">
            <h4 class="section-title">B. Professional Profile</h4>
            <div class="row g-4">
              <div class="col-md-6">
                <label class="form-label">Occupation / Designation</label>
                <input type="text" class="form-control" name="occupationDesignation">
              </div>
              <div class="col-md-6">
                <label class="form-label">Organization / Institution</label>
                <input type="text" class="form-control" name="organizationInstitution">
              </div>
              <div class="col-12">
                <label class="form-label">Industry Sector (Select all that apply)</label>
                <div class="row g-2">
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="AGRICULTURE"> Agriculture</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="HEALTH_CARE"> Health Care</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="TECHNOLOGY"> Technology</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="FINANCE"> Finance</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="MANUFACTURING"> Manufacturing</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="LOGISTICS"> Logistics</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="REAL_ESTATE"> Real Estate</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="MEDIA_ICT"> Media & ICT</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="EDUCATION"> Education</div>
                  <div class="col-md-3 col-6"><input type="checkbox" name="industrySectors[]" value="OTHER"> Other</div>
                </div>
                <input type="text" class="form-control mt-2" name="industrySectorsOther" placeholder="If Other, specify">
              </div>
            </div>
          </div>

          <!-- C. Forum Expectations -->
          <div class="form-section mb-5">
            <h4 class="section-title">C. Forum Expectations</h4>
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label">What would you like to gain?</label>
                <div class="row g-2">
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="NETWORKING"> Networking</div>
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="FUNDING"> Funding</div>
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="TRADE_POLICY_DIALOGUE"> Trade Policy Dialogue</div>
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="INVESTMENT_OPPORTUNITIES"> Investment Opportunities</div>
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="SHOWCASE"> Showcase</div>
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="SKILL_EMPOWERMENT"> Skill Empowerment</div>
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="INNOVATION_EXCHANGE"> Innovation Exchange</div>
                  <div class="col-md-4 col-6"><input type="checkbox" name="expectations[]" value="OTHER"> Other</div>
                </div>
                <input type="text" class="form-control mt-2" name="expectationsOther" placeholder="If Other, specify">
              </div>
            </div>
          </div>

          <!-- D. Additional Details -->
          <div class="form-section mb-5">
            <h4 class="section-title">D. Additional Details</h4>
            <div class="row g-4">
              <div class="col-md-6">
                <label class="form-label">How did you hear about the Forum?</label>
                <select class="form-select" name="heardAbout">
                  <option value="CHURCH">Church</option>
                  <option value="SOCIAL_MEDIA">Social Media</option>
                  <option value="REFERRAL">Referral</option>
                  <option value="ADVERTISEMENT">Advertisement</option>
                  <option value="OTHER">Other</option>
                </select>
              </div>
              <div class="col-12">
                <label class="form-label">Special Requirements (dietary / accessibility)</label>
                <textarea class="form-control" rows="3" name="specialRequirements"></textarea>
              </div>
            </div>
          </div>

          <!-- E. Consent -->
          <div class="form-section mb-5">
            <h4 class="section-title">E. Consent</h4>
            <div class="form-check mb-4">
              <input class="form-check-input" type="checkbox" name="consent" value="true" required>
              <label class="form-check-label">
                I confirm the information provided is accurate and consent to receive updates from LTIF.
              </label>
            </div>

            <button type="submit" class="btn btn-primary px-5 py-3" id="submitBtn">
              <span id="btnText">Submit Registration</span>
              <div class="spinner-border text-light ms-2 d-none" id="btnSpinner" role="status"></div>
            </button>

            <div id="formMessage" class="mt-4"></div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <?php include 'footer.php'; ?>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    $('#registrationForm').on('submit', function(e) {
      e.preventDefault();

      $('#btnSpinner').removeClass('d-none');
      $('#btnText').text('Submitting...');
      $('#submitBtn').prop('disabled', true);

      const formData = {};
      $(this).serializeArray().forEach(field => {
        if (formData[field.name]) {
          if (!Array.isArray(formData[field.name])) {
            formData[field.name] = [formData[field.name]];
          }
          formData[field.name].push(field.value);
        } else {
          formData[field.name] = field.value;
        }
      });

      $.ajax({
        url: 'api/auth-register.php',
        type: 'POST',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        dataType: 'json',
        success: function(response) {
          if (response.status === 'success') {
            window.location.href = 'success.php?type=register';
          } else {
            $('#formMessage').html(`<div class="alert alert-danger">${response.message.errorMessage || 'An error occurred.'}</div>`);
          }
        },
        error: function() {
          $('#formMessage').html(`<div class="alert alert-danger">Network error. Please try again later.</div>`);
        },
        complete: function() {
          $('#btnSpinner').addClass('d-none');
          $('#btnText').text('Submit Registration');
          $('#submitBtn').prop('disabled', false);
        }
      });
    });
  });
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
