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 not principal_obj.extended_data.is_transferred %}
                <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 f3 = flatpickr(document.getElementById('id_free_period'), {
            //     mode: "range"
            // });

            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,
                tags: true, // Allow the user to enter custom tags
                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.");


            $("#addCustomer").validate({
                rules: {
                    first_name: {
                        required: true,
                        minlength: 2,
                        maxlength:15,
                        noSpecialChars: true,
                        startsWithLetter: true,
                        noSpace: true
                    },
                    last_name: {
                        required: true,
                        minlength: 2,
                        maxlength: 15,
                        noSpecialChars: true,
                        startsWithLetter: true,
                        noSpace: true
                    },
                    email: {
                        required: true,
                        validEmail: true,
                        remote: {
                            url: "{% url 'accounts:customer_check_email' %}", // Replace with your actual URL for the view
                            type: "POST",
                            data: {
                                email: function() {
                                return $("#id_email").val();
                                }
                            },
                            beforeSend: function(xhr) {
                                xhr.setRequestHeader('X-CSRFToken', $('input[name="csrfmiddlewaretoken"]').val());
                            },
                            success: function(data) {
                                console.log(date)
                                // Handle successful email check (optional)
                                // You can remove this if you only need to display the error message
                            },
                            error: function(response) {
                                console.log(response)
                            }
                        },
                    },
                    preferences: {
                        required: true,
                        minlength: 3
                    },
                    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.",
                        minlength: "First name must be at least 2 characters.",
                        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.",
                        minlength: "Last name must be at least 2 characters.",
                        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."
                    }
                },
                customMethods: {
                    greaterThanStartDate: function(element) {
                        var startDate = $("#id_free_start_date").datepicker("getDate"); // Assuming you're using datepicker
                        var endDate = $(element).datepicker("getDate");
                        if (!endDate || !startDate) {
                        return true; // Allow if either date is not selected (prevents errors)
                        }
                        return endDate > startDate;
                    }
                },
                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) {
                    
                    // Disable the submit button to prevent multiple submissions
                    $('button[type="submit"]').prop('disabled', true);
                    form.submit();
                }
            });
        })
    </script>

{% endblock %}