{% extends 'default.html' %}
{% block title %}RSVP - OSO@80{% endblock %}
{% load static %}

{% block content %}

  <!-- PARTICLE CANVAS -->
  <canvas id="particles"></canvas>

  <!-- DISCO LIGHTS -->
  <div class="disco-lights" aria-hidden="true">
    <div class="light l1"></div>
    <div class="light l2"></div>
    <div class="light l3"></div>
    <div class="light l4"></div>
  </div>

  <!-- ========== PAGE 2: RSVP ========== -->
  <main id="rsvp-page" class="page active">

    <!-- RSVP FORM SECTION -->
    <section class="rsvp-section">
      <div class="rsvp-inner">

        <!-- HEADER -->
        <div id="rsvp-header" class="rsvp-header reveal">
          <h1 class="rsvp-title">RSVP</h1>
          <p class="rsvp-subtitle">Confirm your attendance and join us for a night to remember.</p>
        </div>
        <!-- FORM WRAPPER (hidden after success) -->
        <div id="form-wrapper" class="form-wrapper reveal delay-2">
          <form id="rsvp-form" action="{% url 'rsvp_submit' %}" method="post" novalidate>
            {% csrf_token %}

            <!-- <div class="form-row form-row--half"> -->
            <div class="form-group">
              <label for="first_name" class="form-label">First Name</label>
              <input
                type="text"
                id="first_name"
                name="first_name"
                class="form-input"
                placeholder=""
                autocomplete="given-name"
                required
              />
              <span class="form-error" id="err-first_name"></span>
            </div>

            <div class="form-group">
              <label for="last_name" class="form-label">Last Name</label>
              <input
                type="text"
                id="last_name"
                name="last_name"
                class="form-input"
                placeholder=""
                autocomplete="family-name"
                required
              />
              <span class="form-error" id="err-last_name"></span>
            </div>
            <!-- </div> -->

            <div class="form-group">
              <label for="email" class="form-label">Email Address</label>
              <input
                type="email"
                id="email"
                name="email"
                class="form-input"
                placeholder="you@example.com"
                autocomplete="email"
                required
              />
              <span class="form-error" id="err-email"></span>
            </div>

            <div class="form-group">
              <label for="whatsapp" class="form-label">WhatsApp Number</label>
              <div class="phone-wrapper">
                <select id="country-code" name="country_code" class="form-input form-input--country">
                  <option value="+234" selected>🇳🇬 +234</option>
                  <option value="+1">🇺🇸 +1</option>
                  <option value="+44">🇬🇧 +44</option>
                  <option value="+229">🇧🇯 +229</option>
                  <option value="+225">🇨🇮 +225</option>
                  <option value="+233">🇬🇭 +233</option>
                  <option value="+241">🇬🇦 +241</option>
                  <option value="+212">🇲🇦 +212</option>
                  <option value="+20">🇪🇬 +20</option>
                  <option value="+212">🇸🇦 +966</option>
                  <option value="+971">🇦🇪 +971</option>
                  <option value="+91">🇮🇳 +91</option>
                  <option value="+86">🇨🇳 +86</option>
                  <option value="+81">🇯🇵 +81</option>
                  <option value="+49">🇩🇪 +49</option>
                  <option value="+33">🇫🇷 +33</option>
                  <option value="+39">🇮🇹 +39</option>
                  <option value="+234">Other</option>
                </select>
                <input
                  type="tel"
                  id="whatsapp"
                  name="whatsapp"
                  class="form-input form-input--phone"
                  placeholder="800 000 0000"
                  autocomplete="tel"
                  required
                />
              </div>
              <span class="form-error" id="err-whatsapp"></span>
            </div>

            <button type="submit" class="btn btn--primary btn--large btn--full">
              <span class="btn__text">Confirm Attendance</span>
              <span class="btn__glow"></span>
            </button>

            <p class="form-note text-black">We'll send your confirmation details via email and WhatsApp.</p>
          </form>
        </div>

        <!-- SUCCESS STATE (shown after submit) -->
        <div id="success-state" class="success-state hidden">
          <div class="success-icon">💃🏽</div>
          <h2 class="success-title">Thank You for confirming your attendance!</h2>
          <p class="success-message">Get ready to celebrate <span id="success-name"></span>!<br/>A beautiful Soul deserves a beautiful celebration.</p>
          <div class="success-details">
            <span>4th July, 2026 &nbsp;·&nbsp; Lagos, Nigeria</span>
          </div>
          <p class="success-note">Check your email and WhatsApp for your confirmation.</p>
          <a href="{% url 'rsvp' %}" class="btn btn--ghost">
            <span class="btn__text">Refresh</span>
          </a>
        </div>

      </div>
    </section>

    <!-- FOOTER -->
    {% include 'utils/footer.html' %}

  </main>

{% endblock %}