{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->
{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <a href="{% url 'module_auth:users'%}" style="height: fit-content;width: fit-content;display: inline-block;">
                <h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
                    arrow_back
                    </span><span>{{operation}} User</span></h3>
                </a>
            </div>
        </div>
        <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">

                        <form method="post" id="userForm">
                            {% csrf_token %}
                            {% include 'base_structure/includes/dynamic_template_form.html' with form=form %}
                            <div class="mt-4 mb-0">
                                <div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
                            </div>
                        </form>
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}

{% block javascript %}
    <!-- include required js cdn link through html here -->
    <script>
        $(document).ready(function() {

            // Add custom validation method to check for special characters
            $.validator.addMethod("noSpecialChars", function(value, element) {
                return /^[a-zA-Z\s]*$/.test(value); // Allow only letters and whitespace
            }, "Please enter only letters and spaces.");


            // Add custom validation method to check for starting with a letter
            $.validator.addMethod("startsWithLetter", function(value, element) {
                return /^[a-zA-Z]/.test(value); // Check if the value starts with a letter
            }, "Please start with a letter.");


            // Add custom validation method for password complexity
            $.validator.addMethod("complexPassword", function(value, element) {
                return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+}{":;'?/>.<,])(?=.*[^\w\d\s])/.test(value);
            }, "Password must include at least one uppercase letter, one lowercase letter, one number, and special characters.");
        

            // Initialize form validation
            $("#userForm").validate({
                rules: {
                    first_name: {
                        required: true,
                        maxlength: 50, // Example: Set maximum length for first_name to 50 characters
                        startsWithLetter: true,
                        noSpecialChars: true,
                    },
                    email: {
                        required: true,
                        email: true // Check for valid email format
                    },
                    password: {
                        required: true,
                        complexPassword: true
                    },
                    confirm_password: {
                        required: true,
                        equalTo: "#id_password" // Ensure confirm_password matches password field
                    }
                },
                messages: {
                    first_name: {
                        required: "Please enter your name.",
                        maxlength: "Name must not exceed 50 characters.",
                        startsWithLetter: "First name must start with a letter.",
                        noSpecialChars: "Please enter only letters and spaces.",
                    },
                    email: {
                        required: "Please enter your email address.",
                        email: "Please enter a valid email address."
                    },
                    password: {
                        required: "Please enter your password.",
                    },
                    confirm_password: {
                        required: "Please confirm your password.",
                        equalTo: "Passwords do not match."
                    }
                },
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    $(element).closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid').removeClass('is-valid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                }
            });
        });
        </script>

{% endblock %}