{% extends "web/base.html" %}
{% load static %}

{% block title %}Sign Up - PassMCQ{% endblock title %}

{% block content %}
<!-- Include Alert Modal System -->
{% include "web/include/alert_modal.html" %}

<!-- Hidden messages for modal conversion -->
{% if messages %}
    {% for message in messages %}
    <div style="display:none;" 
         data-alert-message="{{ message }}" 
         data-alert-type="{% if message.tags %}{% if 'success' in message.tags %}success{% elif 'error' in message.tags %}error{% elif 'warning' in message.tags %}warning{% else %}info{% endif %}{% else %}error{% endif %}">
    </div>
    {% endfor %}
{% endif %}

<div class="min-h-screen bg-gradient-to-br from-gray-50 to-green-50 dark:from-slate-900 dark:to-slate-800 py-12">
  <div class="w-[95%] md:w-[90%] max-w-6xl mx-auto">
    <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl overflow-hidden">
      <div class="flex flex-col lg:flex-row">
        <!-- Form Section -->
        <div class="flex-1 p-8 md:p-10">
          <div class="max-w-lg mx-auto">
            <!-- Header -->
            <div class="text-center mb-8">
              <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3">
                Create Your Account
              </h1>
              <p class="text-gray-600 dark:text-gray-400">
                Join thousands of students preparing for success
              </p>
            </div>

            <!-- Signup Form -->
            <form method="POST" action="{% url 'save_signup_user' %}" data-turbo="false" data-turbo-frame="_top" enctype="multipart/form-data" class="space-y-4">
              {% csrf_token %}
              
              <!-- Name Fields -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">First Name</label>
                  <input type="text" name="first_name" placeholder="John" required
                         class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
                  <input type="text" name="last_name" placeholder="Doe" required
                         class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
                </div>
              </div>
              
              <!-- Phone Number -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
                <input type="text" name="phone_number" placeholder="+880 1XXXXXXXXX" required
                       class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
              </div>
              
              <!-- Email -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
                <input type="email" name="email" placeholder="you@example.com" required
                       class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
              </div>
              
              <!-- Password Fields -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
                  <input type="password" name="password1" placeholder="••••••••" required
                         class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
                  <input type="password" name="password2" placeholder="••••••••" required
                         class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
                </div>
              </div>
              
              <!-- School Name -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">School/College Name (Optional)</label>
                <input type="text" name="school_name" placeholder="Your school or college name"
                       class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
              </div>
              
              <!-- Class Selection -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Class</label>
                <select name="current_class" 
                        class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all">
                  <option value="">Select your class</option>
                  {% for class in classes %}
                  <option value="{{ class.id }}">{{ class.name }}</option>
                  {% endfor %}
                </select>
              </div>
              
              <!-- Profile Picture -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Profile Picture (Optional)</label>
                <input type="file" name="profile_picture" 
                       class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-green-500 file:text-white file:font-medium file:cursor-pointer hover:file:bg-green-600 transition-all">
              </div>

              <!-- Submit Button -->
              <button type="submit" aria-label="Create account"
                      class="submit-btn w-full flex items-center justify-center gap-3 py-3.5 px-6 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold rounded-xl shadow-lg shadow-green-500/30 transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900">
                <svg class="hidden animate-spin h-5 w-5 text-white spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                </svg>
                <span class="submit-label">Create Account</span>
              </button>
            </form>

            <!-- Login Link -->
            <p class="text-center mt-6 text-gray-600 dark:text-gray-400">
              Already have an account? 
              <a href="{% url 'login_user' %}" data-turbo="false" class="text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-semibold hover:underline">
                Sign In
              </a>
            </p>

            <!-- Divider -->
            <div class="flex items-center gap-4 my-6">
              <div class="flex-1 h-px bg-gray-200 dark:bg-slate-600"></div>
              <span class="text-sm text-gray-500 dark:text-gray-400">or continue with</span>
              <div class="flex-1 h-px bg-gray-200 dark:bg-slate-600"></div>
            </div>

            <!-- Google OAuth -->
            <a href="{% url 'social:begin' 'google-oauth2' %}?next={{ request.GET.next }}" class="block focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900 rounded-xl" aria-label="Continue with Google">
              <div class="flex items-center justify-center gap-3 w-full py-3.5 px-6 border-2 border-gray-200 dark:border-slate-600 rounded-xl hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-200 group">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M24 12.2727C24 11.4218 23.9221 10.6036 23.7774 9.81818H12.2449V14.4655H18.8349C18.5455 15.96 17.6772 17.2255 16.3748 18.0764V21.0982H20.3488C22.6642 19.0036 24 15.9273 24 12.2727Z" fill="#4285F4"/>
                  <path d="M12.2449 24C15.551 24 18.3228 22.9309 20.3488 21.0982L16.3748 18.0764C15.2839 18.7964 13.8924 19.2327 12.2449 19.2327C9.06122 19.2327 6.35622 17.1273 5.38776 14.2909H1.31354V17.3891C3.32839 21.3055 7.45826 24 12.2449 24Z" fill="#34A853"/>
                  <path d="M5.38776 14.28C5.14286 13.56 4.99814 12.7964 4.99814 12C4.99814 11.2036 5.14286 10.44 5.38776 9.72V6.62182H1.31354C0.478664 8.23636 0 10.0582 0 12C0 13.9418 0.478664 15.7636 1.31354 17.3782L4.48609 14.9564L5.38776 14.28Z" fill="#FBBC05"/>
                  <path d="M12.2449 4.77818C14.0482 4.77818 15.6512 5.38909 16.9314 6.56727L20.4378 3.13091C18.3117 1.18909 15.551 0 12.2449 0C7.45826 0 3.32839 2.69455 1.31354 6.62182L5.38776 9.72C6.35622 6.88364 9.06122 4.77818 12.2449 4.77818Z" fill="#EA4335"/>
                </svg>
                <span class="text-gray-700 dark:text-gray-200 font-medium group-hover:text-blue-600 dark:group-hover:text-blue-400">Continue with Google</span>
              </div>
            </a>
          </div>
        </div>

        <!-- Illustration Section -->
        <div class="hidden lg:flex flex-1 bg-gradient-to-br from-green-500 to-green-600 p-12 items-center justify-center">
          <div class="text-center text-white">
            <img src="{% static 'img/auth/signup.png' %}" alt="Signup illustration" class="max-w-sm mx-auto mb-8 drop-shadow-2xl">
            <h3 class="text-2xl font-bold mb-3">Ace Your Exams</h3>
            <p class="text-green-100 max-w-xs mx-auto">Get access to thousands of practice questions, detailed explanations, and progress tracking.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const form = document.querySelector("form");
  const submitBtn = form.querySelector(".submit-btn");
  const spinner = submitBtn.querySelector(".spinner");
  const label = submitBtn.querySelector(".submit-label");

  form.addEventListener("submit", function () {
    submitBtn.disabled = true;
    spinner.classList.remove("hidden");
    label.textContent = "Processing...";
  });
</script>
{% endblock content %}