{% extends 'users/user_base.html' %}
{% load i18n %}
{% load static %}
{% load filters %}

{% block content %}

    <form id="signup-form" 
    class="mx-auto  py-md-5 lb-form" method="post" action="{% url 'user-signup' %}?{% if next %}&next={{ next }}{% endif %}">
        {% csrf_token %}
        <h2 class="lb-heading">Sign Up</h2>
        <div>
            <label for="name" class="d-block lb-label">Your name</label>
            <input type="text" class="lb-input" name="name" id="name">
            <div id="name-errors" class="error-container"></div>
        </div>

        <div>
            <label for="organization_name" class="d-block lb-label">Organization Name</label>
            <input type="text" name="organization_name" class="lb-input" id="organization_name">
            <div id="organization-name-errors" class="error-container"></div>
        </div>

        <div>
            <label for="email" class="d-block lb-label">Email</label>
            <input type="text" name="email" class="lb-input" id="email">
            <div id="email-errors" class="error-container"></div>
        </div>
        <div>
            <label for="password" class="d-block lb-label">Password</label>
            <input type="password" name="password" class="lb-input" id="password">
            <div id="password-errors" class="error-container"></div>
        </div>
        <div>
            <label for="re_password" class="d-block lb-label">Confirm your password</label>
            <input type="password" name="re_password" class="lb-input" id="re_password">
            <div id="re-password-errors" class="error-container"></div>
        </div>
        <div class="d-flex align-items-center gap-2 mb-3">
            <input type="checkbox" id="terms_and_conditions" name="terms_and_conditions">
            <label for="terms_and_conditions" class="lb-checkbox-label">I agree to the terms of
                service</label>
        </div>
        <button type="submit" class=" my-4 lb-signbtn" id="submit-button">Sign Up</button>
        <div class="w-100 text-center mb-5">
            <span class="lb-checkbox-label">Already have an account?<a href="{% url 'user-login' %}" class="lb-sign_link">Sign
                    In</a></span>
        </div>

        <div id="loading-spinner" style="display:none;">
            <p>Sending email, please wait...</p>
            <div class="spinner"></div>
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            {% if account_activation %}
            $('#signup-form').on('submit', function (event) {
                $('#loading-spinner').show();
            });
            {% endif %}

            // Initially disable submit button
            $('#submit-button').prop('disabled', true).addClass('btn-disabled');
        
            var validateName = function() {
                var valid = true;
                var name = $('#name').val();
        
                $('#name-errors').html("");
        
                if(name.length < 3) {
                    valid = false;
                    $('#name-errors').html("<p id='name_error'>Name must be at least 3 characters long.</p>");
                }
        
                return valid;
            };
        
            var validateOrganizationName = function() {
                var valid = true;
                var organizationName = $('#organization_name').val();
        
                $('#organization-name-errors').html("");
        
                if(organizationName.length < 3) {
                    valid = false;
                    $('#organization-name-errors').html("<p id='org_error'>Organization Name must be at least 3 characters long.</p>");
                }
        
                return valid;
            };
        
            var validateEmail = function() {
                var valid = true;
                var email = $('#email').val();
                var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        
                $('#email-errors').html("");
        
                if (!emailRegex.test(email)) {
                    valid = false;
                    $('#email-errors').html("<p id='email_error'>Enter a valid email address.</p>");
                }
        
                return valid;
            };
        
            var validatePasswords = function() {
                var valid = true;
                var password = $('#password').val();
                var rePassword = $('#re_password').val();
        
                $('#password-errors').html("");
                $('#re-password-errors').html("");
        
                if (password.length < 8) {
                    valid = false;
                    $('#password-errors').html("<p id='password_error'>Password must be at least 8 characters long.</p>");
                }
        
                if (rePassword !== password) {
                    valid = false;
                    $('#re-password-errors').html("<p id='re_password_error'>Passwords do not match.</p>");
                }
        
                return valid;
            };
        
            var checkAllConditions = function() {
                var valid = true;
        
                if ($('#name').val().length < 3) valid = false;
                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($('#email').val())) valid = false;
                if ($('#organization_name').val().length < 3) valid = false;
                if ($('#password').val().length < 8) valid = false;
                if ($('#re_password').val() !== $('#password').val()) valid = false;
                if (!$('#terms_and_conditions').is(':checked')) valid = false;
        
                return valid;
            };
        
            var validateForm = function() {
                if (checkAllConditions()) {
                    $('#submit-button').prop('disabled', false).removeClass('btn-disabled').addClass('btn-enabled');
                } else {
                    $('#submit-button').prop('disabled', true).removeClass('btn-enabled').addClass('btn-disabled');
                }
            };
            
        
            $('#name').on('input', function() {
                validateName();
                validateForm();
            });
        
            $('#organization_name').on('input', function() {
                validateOrganizationName();
                validateForm();
            });
        
            $('#email').on('input', function() {
                validateEmail(); 
                validateForm();
            });
        
            $('#password, #re_password').on('input', function() {
                validatePasswords();
                validateForm();
            });
        
            $('#terms_and_conditions').on('change', function() {
                validateForm();
            });
        });
        
    </script>


{% endblock %}