goodtimes/templates/accounts/customer/customer_edit.html

{% extends 'layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    {% include "cdn_through_html/flatpicker_cdn_css.html" %}
{% 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 'accounts:customer_list'%}" 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}} Customer</span></h3>
                </a>
            </div>
            
            {% if principal_obj.extended_data and not principal_obj.extended_data.is_transferred and principal_obj.extended_data.is_onboarded and principal_obj.principal_type.name == 'event_manager' %}
                <div class="col text-end">
                    <a class="btn btn-dark mb-2 me-4" href="{% url 'accounts:customer_transfer' principal_obj.id %}">
                        Transfer Account
                    </a>
                </div>
            {% endif %}
            
        </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="addCustomer">
                            {% csrf_token %}
                            {% include '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 -->
    {% include "cdn_through_html/flatpicker_cdn_js.html" %}
    {% include "cdn_through_html/jquery_validate_cdn_js.html" %}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
     -->
    <script>
        $(document).ready(function() {

            var start_date = flatpickr(document.getElementById('id_free_start_date'), {
                // minDate: "today",
                onChange: function(selectedDates, dateStr, instance) {
                    end_date.set('minDate', selectedDates[0]);
                }
            });

            var end_date = flatpickr(document.getElementById('id_free_end_date'), {
                minDate: null // initialize with no minimum date
            });

            $('.js-example-basic-multiple').select2({
                placeholder: 'Select options',
                allowClear: true,
                tokenSeparators: [',', ' '], // Customize token separators
                closeOnSelect: false // Keep the dropdown open after selection
            });


            // Add custom validation method for email
            $.validator.addMethod("validEmail", function(value, element) {
                return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(value);
            }, "Please enter a valid email address.");

            // 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 greater than start date
            $.validator.addMethod("greaterThanStartDate", function(value, element) {
                var startDate = $('#id_free_start_date').val();
                if (!startDate || !value) {
                    return true;
                }
                return new Date(value) > new Date(startDate);
            }, "The end date must be after the start date.");



            $("#addCustomer").validate({
                rules: {
                    first_name: {
                        required: true,
                        maxlength:15,
                        noSpecialChars: true,
                        startsWithLetter: true,
                    },
                    last_name: {
                        required: true,
                        maxlength: 15,
                        noSpecialChars: true,
                        startsWithLetter: true,
                    },
                    email: {
                        required: true,
                        validEmail: true,
                    },
                    preferences: {
                        required: true,
                        minlength: 1
                    },
                    free_start_date: {
                        required: true,
                        // You can add a custom validation method for date format (optional)
                    },
                    free_end_date: {
                        required: true,
                        // You can add a custom validation method for date format (optional)
                    }
                },
                messages: {
                    first_name: {
                        required: "Please enter your first name.",
                        maxlength: "First name must not exceed 20 characters.",
                        noSpecialChars: "Please enter only letters and spaces.",
                        startsWithLetter: "First name must start with a letter."
                    },
                    last_name: {
                        required: "Please enter your last name.",
                        maxlength: "First name must not exceed 20 characters.",
                        noSpecialChars: "Please enter only letters and spaces.",
                        startsWithLetter: "Last name must start with a letter."
                    },
                    email: {
                        required: "Please enter your email address.",
                        validEmail: "Please enter a valid email address."
                    },
                    preferences: {
                        required: "Please select at least one preference.",
                        minlength: "Please select at least one preference."
                    },
                    free_start_date: {
                        required: "Please select a start date for the free period."
                    },
                    free_end_date: {
                        required: "Please select an end date for the free period.",
                        greaterThanStartDate: "The end date must be after the start date."
                    }
                },
                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');
                },
                submitHandler: function(form) {
                    
                    // Check if form is valid before submission
                    if ($(form).valid()) {
                        // Disable the submit button to prevent multiple submissions
                        $('button[type="submit"]').prop('disabled', true);
                        form.submit();
                    }
                }
            });

            // Trigger validation for select2 fields on change
            $('#id_preferences').on('change', function() {
                $(this).valid();
            });

            // Trigger validation for flatpickr fields on change
            $('#id_free_start_date').on('change', function() {
                $(this).valid();
            });
            $('#id_free_end_date').on('change', function() {
                $(this).valid();
            });
        })
    </script>

{% endblock %}