{% extends 'public_base.html' %}
{% load static %}
{% load custom_tags %}

{% block title %}Sign Up | Register your startup{% endblock %}

{% block content %}

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-50 py-8 px-4 sm:px-6 lg:px-8">
  <div class="w-full max-w-6xl">
    <div class="bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
      <div class="flex flex-col lg:flex-row">
        <!-- Left Side - Image Card (Hidden on mobile) -->
        <div class="hidden lg:block lg:w-2/5 bg-gradient-to-br from-indigo-600 to-purple-700 p-8 lg:p-12">
          <div class="flex flex-col justify-center items-center text-center text-white h-full">
            <div class="max-w-sm">
              <img src="{% static 'img/images or rys/Startup India Registration/hero1.png' %}" alt="Startup Registration" class="w-full h-48 lg:h-56 mb-6 lg:mb-8 rounded-lg">
              <h2 class="text-2xl font-bold mb-4">Start Your Entrepreneurial Journey</h2>
              <div class="space-y-4 text-left">
                <div class="flex items-start">
                  <i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
                  <span class="text-sm">Quick and hassle-free registration process</span>
                </div>
                <div class="flex items-start">
                  <i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
                  <span class="text-sm">Expert guidance for startup compliance</span>
                </div>
                <div class="flex items-start">
                  <i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
                  <span class="text-sm">Secure and confidential data handling</span>
                </div>
                <div class="flex items-start">
                  <i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
                  <span class="text-sm">Dedicated support for your business growth</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right Side - Form Card -->
        <div class="w-full lg:w-3/5 py-8 lg:py-10 px-6 lg:px-8">
          <!-- Mobile Header with Logo -->
          <div class="lg:hidden mb-6 text-center">
            <div class="flex justify-center mb-4">
              <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center">
                <i class="fas fa-rocket text-white text-2xl"></i>
              </div>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 mb-2">Create Your Account</h2>
            <p class="text-sm text-gray-600">Join thousands of successful startups</p>
          </div>

          <!-- Desktop Header -->
          <div class="hidden lg:block text-center mb-8">
            <h2 class="text-3xl font-bold text-gray-900 mb-2">Create Your Account</h2>
            <p class="text-gray-600">Start your entrepreneurial journey with us today</p>
          </div>

          <!-- Error Display -->
          {% if form.errors %}
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 animate-pulse">
              <div class="flex items-center">
                <i class="fa-solid fa-exclamation-circle mr-2"></i>
                <strong class="font-medium">Please correct the following errors:</strong>
              </div>
              <ul class="list-disc list-inside mt-2 ml-2 text-sm">
                {% for field, errors in form.errors.items %}
                  {% for error in errors %}
                    <li>{{ error }}</li>
                  {% endfor %}
                {% endfor %}
              </ul>
            </div>
          {% endif %}

          <!-- Email Validation Status -->
          <div id="email-status" class="flex items-center space-x-2 text-sm mb-4 hidden">
            <span id="email-icon" class="text-lg"></span>
            <span id="email-text"></span>
          </div>

          <form method="post" action="{% url 'signup' %}" class="space-y-6" novalidate>
            {% csrf_token %}

            <!-- Personal Information Section -->
            <div class="space-y-5">
              <div class="flex items-center mb-2">
                <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                  <i class="fas fa-user text-indigo-600 text-sm"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Personal Information</h3>
              </div>
            

              <!-- Name Fields -->
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- First Name -->
                <div>
                  <label for="{{ form.first_name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    First Name <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                      <i class="fa-solid fa-user"></i>
                    </span>
                    {{ form.first_name|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
                  </div>
                </div>

                <!-- Last Name -->
                <div>
                  <label for="{{ form.last_name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    Last Name <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                      <i class="fa-solid fa-user"></i>
                    </span>
                    {{ form.last_name|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
                  </div>
                </div>
              </div>

              <!-- Contact & DOB Fields -->
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Contact Number -->
                <div>
                  <label for="{{ form.contact_number.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    Contact Number
                  </label>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                      <i class="fa-solid fa-phone"></i>
                    </span>
                    {{ form.contact_number|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
                  </div>
                </div>

                      <!-- Email Field -->
              <div>
                <label for="{{ form.email.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                  Email Address <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                    <i class="fa-solid fa-envelope"></i>
                  </span>
                  {{ form.email|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
                </div>
              </div>
              </div>
            </div>

            <!-- Password Section -->
            <div class="space-y-5">
              <div class="flex items-center mb-2">
                <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                  <i class="fas fa-lock text-indigo-600 text-sm"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900">Security</h3>
              </div>
              
              <!-- Password Field -->
              <div>
                <label for="{{ form.password.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                  Password <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                    <i class="fa-solid fa-lock"></i>
                  </span>
                  {{ form.password|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
                </div>
                
                <!-- Compact Password Requirements -->
                <div class="mt-2">
                  <button type="button" id="password-toggle" class="flex items-center text-xs text-indigo-600 hover:text-indigo-500 transition duration-200">
                    <i class="fas fa-info-circle mr-1"></i>
                    View password requirements
                  </button>
                  
                  <div id="password-requirements" class="hidden mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                    <p class="text-xs font-medium text-blue-700 mb-2">Password Requirements:</p>
                    <ul class="text-xs text-blue-600 space-y-1">
                      <li class="flex items-start">
                        <span class="text-blue-500 mr-1">•</span>
                        <span>Cannot be too similar to your personal information</span>
                      </li>
                      <li class="flex items-start">
                        <span class="text-blue-500 mr-1">•</span>
                        <span>Must be at least 8 characters long</span>
                      </li>
                      <li class="flex items-start">
                        <span class="text-blue-500 mr-1">•</span>
                        <span>Cannot be a commonly used password</span>
                      </li>
                      <li class="flex items-start">
                        <span class="text-blue-500 mr-1">•</span>
                        <span>Cannot be entirely numeric</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <!-- Confirm Password -->
              <div>
                <label for="{{ form.confirm_password.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                  Confirm Password <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                    <i class="fa-solid fa-lock"></i>
                  </span>
                  {{ form.confirm_password|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
                </div>
              </div>
            </div>

            <!-- Terms and Conditions -->
            <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100">
              <div class="flex items-start">
                {{ form.terms_accepted|add_class:"h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded mt-0.5" }}
                <label for="{{ form.terms_accepted.id_for_label }}" class="ml-3 block text-sm text-gray-700">
                  <span class="font-medium text-gray-900">I accept the terms and conditions</span> <span class="text-red-500">*</span>
                  <p class="text-xs text-gray-500 mt-1">By creating an account, you agree to our Terms of Service and Privacy Policy.</p>
                </label>
              </div>
              {% if form.terms_accepted.errors %}
                <div class="text-red-600 text-sm mt-2 ml-8">
                  {{ form.terms_accepted.errors }}
                </div>
              {% endif %}
            </div>

            <!-- Submit Button -->
            <div>
              <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]">
                <i class="fa-solid fa-rocket mr-2"></i>
                Launch Your Startup Journey
              </button>
            </div>

            <!-- Login Redirect -->
            <div class="text-center pt-4">
              <p class="text-sm text-gray-600">
                Already have an account?
                <a href="{% url 'login' %}" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-200 ml-1">
                  Sign in here
                </a>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Email AJAX Validation -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function () {
    // Email validation
    $('#id_email').on('blur', function () {
      const username = $(this).val();
      if (username) {
        $.ajax({
          url: '{% url "check_username" %}',
          data: { 'username': username },
          dataType: 'json',
          success: function (data) {
            $('#email-status').removeClass('hidden');
            if (data.is_taken) {
              $('#email-icon').html('<i class="fa-solid fa-times-circle"></i>').removeClass('text-green-600').addClass('text-red-600');
              $('#email-text').text('This email is already registered.').removeClass('text-green-600').addClass('text-red-600');
              $('#id_email').addClass('border-red-500 focus:border-red-500 focus:ring-red-500');
            } else {
              $('#email-icon').html('<i class="fa-solid fa-check-circle"></i>').removeClass('text-red-600').addClass('text-green-600');
              $('#email-text').text('Email is available.').removeClass('text-red-600').addClass('text-green-600');
              $('#id_email').removeClass('border-red-500 focus:border-red-500 focus:ring-red-500');
            }
          },
          error: function() {
            $('#email-status').addClass('hidden');
          }
        });
      } else {
        $('#email-status').addClass('hidden');
      }
    });

    // Password requirements toggle
    $('#password-toggle').on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      $('#password-requirements').toggleClass('hidden');
      if ($('#password-requirements').hasClass('hidden')) {
        $(this).html('<i class="fas fa-info-circle mr-1"></i>View password requirements');
      } else {
        $(this).html('<i class="fas fa-times mr-1"></i>Hide password requirements');
      }
    });

    // Hide password requirements when clicking outside
    $(document).on('click', function(e) {
      if (!$(e.target).closest('#password-toggle, #password-requirements').length) {
        $('#password-requirements').addClass('hidden');
        $('#password-toggle').html('<i class="fas fa-info-circle mr-1"></i>View password requirements');
      }
    });
  });
</script>
{% endblock %}