{% extends 'academy/base.html' %}
{% block title %}Register – Creative Academy{% endblock %}

{% block extra_css %}
<style>
  .reg-wrap {
    min-height: calc(100vh - 70px);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .reg-side {
    background: linear-gradient(160deg, rgba(201,168,76,0.1), transparent),
                var(--charcoal);
    padding: 5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  .reg-side h1 { font-size: 2.8rem; margin-bottom: 1rem; }
  .reg-side p { color: var(--gray-light); margin-bottom: 2rem; font-size: 1rem; }
  .price-cards { display: flex; flex-direction: column; gap: 0.75rem; }
  .price-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.85rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
  }
  .price-row .course-name { font-size: 0.88rem; font-weight: 500; }
  .price-row .amount {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--gold);
    font-size: 1rem;
  }

  .reg-form-side {
    padding: 4rem 4rem;
    overflow-y: auto;
  }
  .form-group { margin-bottom: 1.5rem; }
  .form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    background: var(--charcoal);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    outline: none;
    appearance: none;
  }
  .form-group input:focus,
  .form-group select:focus { border-color: var(--gold); }
  .form-group select option { background: var(--charcoal); }
  .radio-group { display: flex; gap: 1rem; }
  .radio-label {
    display: flex; align-items: center; gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-light);
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    transition: all 0.2s;
  }
  .radio-label:has(input:checked) {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.08);
  }
  .radio-label input { display: none; }
  .errorlist { list-style: none; }
  .errorlist li { color: #f5857a; font-size: 0.82rem; margin-top: 0.3rem; }
  .form-error {
    color: #f5857a; font-size: 0.82rem;
    background: rgba(192,57,43,0.1);
    border: 1px solid rgba(192,57,43,0.3);
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
  }
  .submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    letter-spacing: 0.1em;
  }
  .form-note {
    text-align: center;
    font-size: 0.82rem;
    color: var(--gray);
    margin-top: 1rem;
  }
  @media (max-width: 900px) {
    .reg-wrap { grid-template-columns: 1fr; }
    .reg-side { padding: 3rem 1.5rem; display: none; }
    .reg-form-side { padding: 3rem 1.5rem; }
  }
</style>
{% endblock %}

{% block content %}
<div class="reg-wrap">
  <div class="reg-side">
    <div class="section-label">Enrolment</div>
    <h1>Join the Academy</h1>
    <p>Fill out your details to register. After registering, you'll receive payment instructions via DM.</p>

    <div class="price-cards">
      <div class="price-row">
        <span class="course-name">🎨 Graphics Design</span>
        <span class="amount">₦25,000</span>
      </div>
      <div class="price-row">
        <span class="course-name">✏️ Digital Art</span>
        <span class="amount">₦30,000</span>
      </div>
      <div class="price-row">
        <span class="course-name">📷 Photography</span>
        <span class="amount">₦35,000</span>
      </div>
      <div class="price-row">
        <span class="course-name">📷🎨 Photography + Editing</span>
        <span class="amount">₦50,000</span>
      </div>
      <div class="price-row">
        <span class="course-name">🎨✏️ Graphics + Digital Art</span>
        <span class="amount">₦45,000</span>
      </div>
      <div class="price-row">
        <span class="course-name">💻 Programming</span>
        <span class="amount">₦40,000</span>
      </div>
      <div class="price-row">
        <span class="course-name">⭐ Special Offer</span>
        <span class="amount">₦70,000</span>
      </div>
    </div>
  </div>

  <div class="reg-form-side">
    <h2 style="margin-bottom: 0.5rem;">Your Details</h2>
    <p style="color: var(--gray-light); font-size: 0.9rem; margin-bottom: 2rem;">All fields are required.</p>

    <form method="post">
      {% csrf_token %}

      {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
          <div class="form-error">{{ error }}</div>
        {% endfor %}
      {% endif %}

      <div class="form-group">
        <label for="{{ form.full_name.id_for_label }}">Full Name</label>
        {{ form.full_name }}
        {{ form.full_name.errors }}
      </div>

      <div class="form-group">
        <label for="{{ form.email.id_for_label }}">Gmail Address</label>
        {{ form.email }}
        {{ form.email.errors }}
      </div>

      <div class="form-group">
        <label for="{{ form.phone_number.id_for_label }}">Phone Number</label>
        {{ form.phone_number }}
        {{ form.phone_number.errors }}
      </div>

      <div class="form-group">
        <label for="{{ form.course.id_for_label }}">Preferred Course</label>
        {{ form.course }}
        {{ form.course.errors }}
      </div>

      <div class="form-group">
        <label>Gender</label>
        <div class="radio-group">
          {% for radio in form.gender %}
            <label class="radio-label">
              {{ radio.tag }}
              {{ radio.choice_label }}
            </label>
          {% endfor %}
        </div>
        {{ form.gender.errors }}
      </div>

      <div class="form-group">
        <label>Do you have prior knowledge of this skill?</label>
        <div class="radio-group">
          <label class="radio-label">
            <input type="radio" name="has_prior_knowledge" value="True" {% if form.has_prior_knowledge.value == True %}checked{% endif %}> Yes
          </label>
          <label class="radio-label">
            <input type="radio" name="has_prior_knowledge" value="False" {% if form.has_prior_knowledge.value != True %}checked{% endif %}> No
          </label>
        </div>
        {{ form.has_prior_knowledge.errors }}
      </div>

      <div class="form-group">
        <label for="{{ form.password.id_for_label }}">Create Password</label>
        {{ form.password }}
        <small style="color: var(--gray); font-size: 0.78rem;">Min. 6 characters — you'll use this to log into your student dashboard</small>
        {{ form.password.errors }}
      </div>

      <div class="form-group">
        <label for="{{ form.confirm_password.id_for_label }}">Confirm Password</label>
        {{ form.confirm_password }}
        {{ form.confirm_password.errors }}
      </div>

      <button type="submit" class="btn btn-gold submit-btn">Complete Registration →</button>
      <p class="form-note">Already registered? <a href="/login/">Login here</a></p>
    </form>
  </div>
</div>
{% endblock %}