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

{% block extra_css %}
<style>
  .success-wrap {
    min-height: calc(100vh - 70px);
    display: flex; align-items: center; justify-content: center;
    padding: 4rem 2rem;
  }
  .success-card {
    max-width: 620px; width: 100%;
    background: var(--charcoal); border: 1px solid rgba(201,168,76,0.25);
    border-radius: 12px; padding: 3.5rem; text-align: center;
    position: relative; overflow: hidden;
  }
  .success-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--gold), var(--gold-light), var(--gold));
  }
  .success-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(58,143,95,0.15); border: 2px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; margin: 0 auto 1.5rem;
    animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .success-card h1 { font-size: 2rem; margin-bottom: 0.75rem; }
  .success-card > p { color: var(--gray-light); margin-bottom: 2rem; }
  .student-summary {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px; padding: 1.5rem; text-align: left; margin-bottom: 2rem;
  }
  .student-summary h3 {
    font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 1rem; font-family: 'DM Sans', sans-serif;
  }
  .summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem;
  }
  .summary-row:last-child { border-bottom: none; }
  .summary-row .key { color: var(--gray); }
  .summary-row .val { font-weight: 500; }
  .summary-row .val.price { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.1rem; }
  .payment-box {
    background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02));
    border: 1.5px solid rgba(201,168,76,0.3); border-radius: 8px;
    padding: 1.75rem; margin-bottom: 1.5rem; text-align: left;
  }
  .payment-box h3 { font-size: 1rem; color: var(--gold); margin-bottom: 0.6rem; font-family: 'DM Sans', sans-serif; font-weight: 600; }
  .payment-box p { font-size: 0.9rem; color: var(--gray-light); line-height: 1.7; }
  .screenshot-box {
    background: rgba(123,79,166,0.08); border: 1.5px dashed rgba(123,79,166,0.5);
    border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; text-align: left;
  }
  .screenshot-box p { font-size: 0.92rem; color: var(--white); line-height: 1.7; margin-bottom: 0.3rem; }
  .screenshot-box .phone {
    font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--gold);
    display: block; margin: 0.4rem 0;
  }
  .screenshot-box .note { font-size: 0.78rem; color: var(--gray-light); }
  .action-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
</style>
{% endblock %}

{% block content %}
<div class="success-wrap">
  <div class="success-card">
    <div class="success-icon">✓</div>
    <h1>Registration Complete!</h1>
    <p>Welcome to Creative Academy. Your details have been saved successfully.</p>

    {% if student %}
    <div class="student-summary">
      <h3>Registration Summary</h3>
      <div class="summary-row"><span class="key">Name</span><span class="val">{{ student.full_name }}</span></div>
      <div class="summary-row"><span class="key">Email</span><span class="val">{{ student.email }}</span></div>
      <div class="summary-row"><span class="key">Phone</span><span class="val">{{ student.phone_number }}</span></div>
      <div class="summary-row"><span class="key">Course</span><span class="val">{{ student.get_course_display }}</span></div>
      <div class="summary-row"><span class="key">Amount Due</span><span class="val price">{{ student.formatted_price }}</span></div>
    </div>
    {% endif %}

    <div class="payment-box">
      <h3>💳 Payment Instructions</h3>
      <p>To confirm your spot, transfer {% if student %}<strong>{{ student.formatted_price }}</strong>{% else %}your course fee{% endif %} to the account details we'll send you after you DM us. Your registration is <strong>not confirmed</strong> until payment is received.</p>
    </div>

    <div class="screenshot-box">
      <p>📸 <strong>Important — Next Step:</strong></p>
      <p>Please <strong>screenshot this page</strong> and send a DM to:</p>
      <span class="phone">07041033011</span>
      <p>Include the screenshot so we can confirm your registration and send you payment details.</p>
      <p class="note">WhatsApp or SMS accepted.</p>
    </div>

    <div class="action-btns">
      <a href="/login/" class="btn btn-gold">Go to Student Login →</a>
      <a href="/" class="btn btn-outline">Back to Home</a>
    </div>
  </div>
</div>
{% endblock %}