{% extends 'base.html' %}
{% block content %}
{% load static %}

<section class="register-section">
  {% load static %}
  <img id="icon" style="height: 250px; width: 250px; margin-right: 200px;mix-blend-mode: multiply;border-radius: 30px;   transition: transform 0.3s ease; /* Smooth animation */"
  src="{% static 'accounts/logo.png' %}" alt="My image">


  <link rel="stylesheet" href="{% static 'accounts/style.css' %}">


  <div class="label" style="margin-right: 200px;">
    <h1><b>Tutor-Ai</b></h1>
    <h4>NLP based toolkit for every tutor.</h4>
    <h6><i>A production ready SaaS.</i></h6>

  </div>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <div class="register-form">
  <form method="post"  id="register-form">
    <h2>Register</h2>

    {% csrf_token %}
    <div class="form-group">
      {{ form.username.label_tag }}
      {{ form.username }}
      <div class="form-error">{{ form.username.errors }}</div>
    </div>
    <div class="form-group">
      {{ form.email.label_tag }}
      {{ form.email }}
      <div class="form-error">{{ form.email.errors }}</div>
    </div>

  <div class="form-group">
    <button type="button" id="verify-email-btn">Verify Email</button>
</div>
<div class="form-group" id="verification-code-group" style="display: none;">
    <label for="verification_code">Enter Verification Code:</label>
    <input type="text" id="verification_code" name="verification_code" required>
</div>
    <div class="form-group">
    <label for="id_is_teacher">User Type</label>
    {{ form.is_teacher }}
    <div class="form-error">{{ form.is_teacher.errors }}</div>
      </select>
      <div class="form-error">{{ form.is_teacher.errors }}
      </div>
    </div>
    <div class="form-group">
      {{ form.password1.label_tag }}
      {{ form.password1 }}
      <div class="form-error">{{ form.password1.errors }}</div>
    </div>
    <div class="form-group">
      {{ form.password2.label_tag }}
      {{ form.password2 }}
      <div class="form-error">{{ form.password2.errors }}</div>
    </div>
    
    <button type="submit" class="btn-register">Register</button>
    <a href="{% url 'accounts:login' %}" class="not-registered">Already Registered?</a>
  </form>
</section>

<script>
  $(document).ready(function () {
    $('.register-form').css('opacity', '0').animate({ opacity: '1' }, 300);
    
  });
  function getCSRFToken() {
            var csrfToken = null;
            var cookieList = document.cookie.split(';');
            for (var i = 0; i < cookieList.length; i++) {
                var cookieParts = cookieList[i].trim().split('=');
                if (cookieParts[0] === 'csrftoken') {
                    csrfToken = decodeURIComponent(cookieParts[1]);
                    break;
                }
            }
            return csrfToken;
        }
    // Handle click event for the "Verify Email" button
    document.getElementById('verify-email-btn').addEventListener('click', function() {
        // AJAX request to send the verification code to the user's email
        $.ajax({
            url: '{% url "accounts:send_verification_code" %}',
            method: 'POST',
            headers: {
                'X-CSRFToken': getCSRFToken() // Include CSRF token in request headers
            },
            data: {
                email: $('#id_email').val()
            },
            success: function(response) {
                // Show the verification code input field
                $('#verification-code-group').show();
                // Enable the register button
                $('#register-btn').prop('disabled', false);
                // Show alert for successful email send
                alert('Email sent successfully!');
            },
            error: function(xhr, status, error) {
                // Handle error
                console.error(error);
            }
        });
    });
    // Function to trigger hover effect after a delay
  function triggerHover() {
    setTimeout(function() {
      // Add 'hover' class to the icon
      document.getElementById('icon').classList.add('hover');
    }, 200); // 3000 milliseconds = 3 seconds
  }

  // Call the function to trigger hover effect
  triggerHover();
</script>
<style>
  /* CSS for hover effect */
  #icon.hover {
    /* Define the styles for the hover effect */
    /* For example, change the transform property */
    transform: scale(1.9); /* Example: increase the size of the icon */
  }
  #verify-email-btn {
    background-color: #007bff; /* Blue background color */
    color: #fff; /* White text color */
    border: none; /* No border */
    padding: 10px 20px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Cursor style */
}

#verify-email-btn:hover {
    background-color: #0000;
    position: center;
    }
</style>
{% endblock %}