


{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Signup</title>
    <link rel="stylesheet" href="{% static 'accounts/css/signup.css' %}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="container">
        <div class="content">
            <!-- <div class="box-header">
                <img src="{% static '/assets/x-phy-new-logo-white.png' %}" alt="" id="logo" />
                <div>
                    <span class="email-details">>. Encryption</span>
                    <span class="email-details">>. Support</span>
                </div>
            </div> -->
            
            <div class="box-header">
                {% comment %} <h1>X-SYS</h1> {% endcomment %}
                <img src="{% static '/assets/x-phy-new-logo-white.png' %}" alt="" id="logo"/>
                <div>
                    <span class="email-details">>.  Encryption</span>
                    <span class="email-details">>.  Support</span>
                </div>
            </div> 
            <div class="login-title-box">
                <h2 class="login-text">Get started</h2>
                <p class="login-url">Already have an account? <a href="{% url 'login' %}">Login</a></p>
            </div>

            <form id="signupForm" method="post">
                {% csrf_token %}
                <div class="user-details">
                    <!-- User details inputs -->
                    <div class="input-box">
                        <div>
                            <span class="details">>. Email</span>
                            <span class="details">...</span>
                        </div>
                        <input type="email" name="email" maxlength="254" id="id_email" required />
                    </div>
                    <div class="input-box">
                        <div>
                            <span class="details">>. Password</span>
                            <span class="details">...</span>
                        </div>
                        <input type="password" name="password" id="id_password" required />
                    </div>
                    <div class="input-box">
                        <div>
                            <span class="details">>. Phone Number</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="phone_number" maxlength="15" id="id_phone_number" required />
                    </div>
                    <div class="input-box">
                        <div>
                            <span class="details">>. OTP Verification</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="otp_code" maxlength="20" id="id_otp_code" required />
                    </div>
                    <div class="input-box">
                        <div>
                            <span class="details">>. Company Name</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="company_name" maxlength="20" id="id_company_name" required />
                    </div>
                    <div class="input-box">
                        <div>
                            <span class="details">>. Country</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="country" maxlength="50" id="id_country" required />
                    </div>
                    <div class="input-box">
                        <div>
                            <span class="details">>. State</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="state" maxlength="50" id="id_state" required />
                    </div>
                    <div class="input-box">
                        <div>
                            <span class="details">>. Postal Code</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="postal_code" maxlength="10" id="id_postal_code" required />
                    </div>
                    <div class="input-box" style="width: 738px;">
                        <div>
                            <span class="details">>. Full Address</span>
                            <span class="details">...</span>
                        </div>
                        <input name="full_address" cols="40" rows="10" id="id_full_address" required />
                    </div>
                </div>
                <div class="button">
                    <input type="button" id="registerButton" value="Register">
                </div>
            </form>
        </div>
    </div>

    <script src="{% static 'navbar/js/jquery-3.7.0.js' %}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            attachValidationHandlers();
        });

        function attachValidationHandlers() {
            $('#registerButton').click(function() {
                // Clear any previous error classes
                $(".input-box").removeClass("error-class");
                checkValidation();

                var errorCount = $(".error-class").length;
                if (errorCount === 0) {
                    // Proceed to submit the form data
                    submitForm();
                }
            });
        }

        function checkValidation() {
            let id_email = $("#id_email").val();
            let id_password = $("#id_password").val();

            if (id_email.length <= 0) {
                $("#id_email").parent().addClass("error-class");
            }
            if (id_password.length <= 0) {
                $("#id_password").parent().addClass("error-class");
            }
        }

        function submitForm() {
            let formData = {
                email: $("#id_email").val(),
                otp_code: $("#id_otp_code").val(),
                password: $("#id_password").val(),
                phone_number: $("#id_phone_number").val(),
                company_name: $("#id_company_name").val(),
                country: $("#id_country").val(),
                state: $("#id_state").val(),
                postal_code: $("#id_postal_code").val(),
                full_address: $("#id_full_address").val(),
            };

            $.ajax({
                type: "POST",
                url: "{% url 'verify_otp' %}", // Adjust this path as needed
                data: formData,
                success: function(response) {
                    alert("OTP verified successfully!");
                    console.log("OTP verification response:", response);
                    // Call the registration API after OTP verification
                    registerUser(formData);
                },
                error: function(xhr) {
                    console.error("OTP verification error:", xhr);
                    alert(xhr.responseJSON.error || "An error occurred. Please try again.");
                }
            });
        }

        function registerUser(formData) {
          $.ajax({
              type: "POST",
              url: "{% url 'signup' %}", // Adjust this path to your signup view
              data: formData,
              headers: {
                  'X-CSRFToken': '{{ csrf_token }}'  // Include CSRF token
              },
              success: function(response) {
                  alert("Registration successful!");
                  console.log("Registration response:", response);

                  // Call the second OTP generation after registration
                  generateSecondOTP(formData.email);
                //   generateSecondOTP(formData.email, response.user_id);

                  const redirectUrl = "{% url 'login' %}";
                  console.log("Redirecting to:", redirectUrl);
              },
              error: function(xhr) {
                  console.error("Registration error:", xhr);
                  alert(xhr.responseJSON.error || "An error occurred during registration.");
              }
          });
        } 

        function generateSecondOTP() {
          const email = $("#id_email").val();  // Get the email from the form

          $.ajax({
              type: "POST",
              url: "{% url 'generate_second_otp' %}",  // Adjust this path to your generate_second_otp API
              data: {
                  email: email,
                 
                  csrfmiddlewaretoken: '{{ csrf_token }}'  // Ensure CSRF token is included
              },
              success: function(response) {
                alert("Second OTP generated successfully! Verify this OTP on installer  Your OTP is: " + response.second_otp);
                  console.log("Second OTP response:", response);

                  window.pywebview.api.show_otp_verification_window(email); // This will call the Python function
                  
              },
              error: function(xhr) {
                  console.error("Error generating second OTP:", xhr);
                  alert(xhr.responseJSON.error || "An error occurred while generating second OTP.");
              }
          });
      }

          
    </script>
</body>
</html>
