{% extends "base.html" %}

{% block content %}
<head>
    <style>
        .loader {
            display: none;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .password-requirements {
            color: red;
            font-size: 0.9em;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="loader"></div>
    <div class="container" style="display: flex; flex-direction: column; gap: 1rem; margin: 200px 0px">
        <header style="background-color: white;">
            <h2 style="width:212px; color: #673de6;">Sign Up</h2>
        </header>
        <form id="signupForm" method="post" action="{{ url_for('signup') }}" novalidate>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username" name="username" required>
                <div class="invalid-feedback">Username cannot be empty.</div>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" required>
                <div class="invalid-feedback">Email cannot be empty.</div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" required>
                <div class="password-requirements" id="password-validation">
                    Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character.
                </div>
            </div>
            <div class="form-group">
                <label for="confirm_password">Confirm Password</label>
                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                <div class="invalid-feedback">Confirm Password cannot be empty.</div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Next</button>
        </form>
    </div>
    <script>
        function showLoader() {
            document.querySelector('.loader').style.display = 'block';
            document.querySelector('.overlay').style.display = 'block';
        }

        (function () {
            'use strict';
            window.addEventListener('load', function () {
                var form = document.getElementById('signupForm');
                var passwordField = document.getElementById('password');
                var passwordValidation = document.getElementById('password-validation');
                var confirmPasswordField = document.getElementById('confirm_password');

                form.addEventListener('submit', function (event) {
                    var password = passwordField.value;
                    var confirmPassword = confirmPasswordField.value;
                    var strongPasswordRegex = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}/;

                    if (!strongPasswordRegex.test(password) || password !== confirmPassword || form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();

                        if (!strongPasswordRegex.test(password)) {
                            passwordValidation.style.display = 'block';
                        } else {
                            passwordValidation.style.display = 'none';
                        }

                        if (password !== confirmPassword) {
                            confirmPasswordField.setCustomValidity("Passwords do not match.");
                            confirmPasswordField.reportValidity();
                        } else {
                            confirmPasswordField.setCustomValidity("");
                        }
                    } else {
                        confirmPasswordField.setCustomValidity("");
                        form.classList.add('was-validated');
                        showLoader();
                    }
                }, false);

                passwordField.addEventListener('input', function() {
                    var password = passwordField.value;
                    var strongPasswordRegex = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}/;
                    if (!strongPasswordRegex.test(password)) {
                        passwordValidation.style.display = 'block';
                    } else {
                        passwordValidation.style.display = 'none';
                    }
                });

                confirmPasswordField.addEventListener('input', function() {
                    var confirmPassword = confirmPasswordField.value;
                    if (passwordField.value !== confirmPassword) {
                        confirmPasswordField.setCustomValidity("Passwords do not match.");
                    } else {
                        confirmPasswordField.setCustomValidity("");
                    }
                });
            }, false);
        })();
    </script>
</body>
{% endblock %}
