initial commit

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/bidding.js

@@ -0,0 +1,264 @@
+"use strict";
+
+// Class definition
+var KTModalBidding = function () {
+    // Shared variables
+    var element;
+    var form;
+    var modal;
+
+    // Private functions
+    const initForm = () => {
+        // Dynamically create validation non-empty rule
+        const requiredFields = form.querySelectorAll('.required');
+        var detectedField;
+        var validationFields = {
+            fields: {},
+
+            plugins: {
+                trigger: new FormValidation.plugins.Trigger(),
+                bootstrap: new FormValidation.plugins.Bootstrap5({
+                    rowSelector: '.fv-row',
+                    eleInvalidClass: '',
+                    eleValidClass: ''
+                })
+            }
+        }
+
+        // Detect required fields
+        requiredFields.forEach(el => {
+            const input = el.closest('.fv-row').querySelector('input');
+            if (input) {
+                detectedField = input;
+            }
+
+            const textarea = el.closest('.fv-row').querySelector('textarea');
+            if (textarea) {
+                detectedField = textarea;
+            }
+
+            const select = el.closest('.fv-row').querySelector('select');
+            if (select) {
+                detectedField = select;
+            }
+
+            // Add validation rule                
+            const name = detectedField.getAttribute('name');
+            validationFields.fields[name] = {
+                validators: {
+                    notEmpty: {
+                        message: el.innerText + ' is required'
+                    }
+                }
+            }
+        });
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            validationFields
+        );
+
+        // Submit button handler
+        const submitButton = form.querySelector('[data-kt-modal-action-type="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function () {
+                                //form.submit(); // Submit form
+                                form.reset();
+                                modal.hide();
+                            });
+                        }, 2000);
+                    } else {
+                        // Show popup error 
+                        Swal.fire({
+                            text: "Oops! There are some error(s) detected.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Init Select2 template options
+    const initSelect2Templates = () => {
+        const elements = form.querySelectorAll('[data-kt-modal-bidding-type] select');
+
+        if (!elements) {
+            return;
+        }
+
+        // Format options
+        const format = (item) => {
+            if (!item.id) {
+                return item.text;
+            }
+
+            var url = 'assets/media/' + item.element.getAttribute('data-kt-bidding-modal-option-icon');
+            var img = $("<img>", {
+                class: "rounded-circle me-2",
+                width: 26,
+                src: url
+            });
+            var span = $("<span>", {
+                text: " " + item.text
+            });
+            span.prepend(img);
+            return span;
+        }
+
+        elements.forEach(el => {
+            // Init Select2 --- more info: https://select2.org/
+            $(el).select2({
+                minimumResultsForSearch: Infinity,
+                templateResult: function (item) {
+                    return format(item);
+                }
+            });
+        });
+    }
+
+    // Handle bid options
+    const handleBidOptions = () => {
+        const options = form.querySelectorAll('[data-kt-modal-bidding="option"]');
+        const inputEl = form.querySelector('[name="bid_amount"]');
+        options.forEach(option => {
+            option.addEventListener('click', e => {
+                e.preventDefault();
+
+                inputEl.value = e.target.innerText;
+            });
+        });
+    }
+
+    // Handle currency selector
+    const handleCurrencySelector = () => {
+        const element = form.querySelector('.form-select[name="currency_type"]');
+
+        // Select2 event listener
+        $(element).on('select2:select', function (e) {
+            const value = e.params.data;
+            swapCurrency(value);
+        });
+
+        const swapCurrency = (target) => {
+            console.log(target);
+            const currencies = form.querySelectorAll('[data-kt-modal-bidding-type]');
+            currencies.forEach(currency => {
+                currency.classList.add('d-none');
+
+                if (currency.getAttribute('data-kt-modal-bidding-type') === target.id) {
+                    currency.classList.remove('d-none');
+                }
+            });
+        }
+    }
+
+    // Handle cancel modal
+    const handleCancelAction = () => {
+        const cancelButton = element.querySelector('[data-kt-modal-action-type="cancel"]');
+        const closeButton = element.querySelector('[data-kt-modal-action-type="close"]');
+        cancelButton.addEventListener('click', e => {
+            cancelAction(e);
+        });
+
+        closeButton.addEventListener('click', e => {
+            cancelAction(e);
+        });
+
+        const cancelAction = (e) => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        }
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_bidding');
+            form = document.getElementById('kt_modal_bidding_form');
+            modal = new bootstrap.Modal(element);
+
+            if (!form) {
+                return;
+            }
+
+            initForm();
+            initSelect2Templates();
+            handleBidOptions();
+            handleCurrencySelector();
+            handleCancelAction();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalBidding.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-account.js

@@ -0,0 +1,357 @@
+"use strict";
+
+// Class definition
+var KTCreateAccount = function () {
+	// Elements
+	var modal;	
+	var modalEl;
+
+	var stepper;
+	var form;
+	var formSubmitButton;
+	var formContinueButton;
+
+	// Variables
+	var stepperObj;
+	var validations = [];
+
+	// Private Functions
+	var initStepper = function () {
+		// Initialize Stepper
+		stepperObj = new KTStepper(stepper);
+
+		// Stepper change event
+		stepperObj.on('kt.stepper.changed', function (stepper) {
+			if (stepperObj.getCurrentStepIndex() === 4) {
+				formSubmitButton.classList.remove('d-none');
+				formSubmitButton.classList.add('d-inline-block');
+				formContinueButton.classList.add('d-none');
+			} else if (stepperObj.getCurrentStepIndex() === 5) {
+				formSubmitButton.classList.add('d-none');
+				formContinueButton.classList.add('d-none');
+			} else {
+				formSubmitButton.classList.remove('d-inline-block');
+				formSubmitButton.classList.remove('d-none');
+				formContinueButton.classList.remove('d-none');
+			}
+		});
+
+		// Validation before going to next page
+		stepperObj.on('kt.stepper.next', function (stepper) {
+			console.log('stepper.next');
+
+			// Validate form before change stepper step
+			var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step
+
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						stepper.goNext();
+
+						KTUtil.scrollTop();
+					} else {
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-light"
+							}
+						}).then(function () {
+							KTUtil.scrollTop();
+						});
+					}
+				});
+			} else {
+				stepper.goNext();
+
+				KTUtil.scrollTop();
+			}
+		});
+
+		// Prev event
+		stepperObj.on('kt.stepper.previous', function (stepper) {
+			console.log('stepper.previous');
+
+			stepper.goPrevious();
+			KTUtil.scrollTop();
+		});
+	}
+
+	var handleForm = function() {
+		formSubmitButton.addEventListener('click', function (e) {
+			// Validate form before change stepper step
+			var validator = validations[3]; // get validator for last form
+
+			validator.validate().then(function (status) {
+				console.log('validated!');
+
+				if (status == 'Valid') {
+					// Prevent default button action
+					e.preventDefault();
+
+					// Disable button to avoid multiple click 
+					formSubmitButton.disabled = true;
+
+					// Show loading indication
+					formSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+					// Simulate form submission
+					setTimeout(function() {
+						// Hide loading indication
+						formSubmitButton.removeAttribute('data-kt-indicator');
+
+						// Enable button
+						formSubmitButton.disabled = false;
+
+						stepperObj.goNext();
+					}, 2000);
+				} else {
+					Swal.fire({
+						text: "Sorry, looks like there are some errors detected, please try again.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-light"
+						}
+					}).then(function () {
+						KTUtil.scrollTop();
+					});
+				}
+			});
+		});
+
+		// Expiry month. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_month"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[3].revalidateField('card_expiry_month');
+        });
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_year"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[3].revalidateField('card_expiry_year');
+        });
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="business_type"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[2].revalidateField('business_type');
+        });
+	}
+
+	var initValidation = function () {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		// Step 1
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					account_type: {
+						validators: {
+							notEmpty: {
+								message: 'Account type is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 2
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'account_team_size': {
+						validators: {
+							notEmpty: {
+								message: 'Time size is required'
+							}
+						}
+					},
+					'account_name': {
+						validators: {
+							notEmpty: {
+								message: 'Account name is required'
+							}
+						}
+					},
+					'account_plan': {
+						validators: {
+							notEmpty: {
+								message: 'Account plan is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 3
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'business_name': {
+						validators: {
+							notEmpty: {
+								message: 'Busines name is required'
+							}
+						}
+					},
+					'business_descriptor': {
+						validators: {
+							notEmpty: {
+								message: 'Busines descriptor is required'
+							}
+						}
+					},
+					'business_type': {
+						validators: {
+							notEmpty: {
+								message: 'Busines type is required'
+							}
+						}
+					},
+					'business_email': {
+						validators: {
+							notEmpty: {
+								message: 'Busines email is required'
+							},
+							emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 4
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'card_name': {
+						validators: {
+							notEmpty: {
+								message: 'Name on card is required'
+							}
+						}
+					},
+					'card_number': {
+						validators: {
+							notEmpty: {
+								message: 'Card member is required'
+							},
+                            creditCard: {
+                                message: 'Card number is not valid'
+                            }
+						}
+					},
+					'card_expiry_month': {
+						validators: {
+							notEmpty: {
+								message: 'Month is required'
+							}
+						}
+					},
+					'card_expiry_year': {
+						validators: {
+							notEmpty: {
+								message: 'Year is required'
+							}
+						}
+					},
+					'card_cvv': {
+						validators: {
+							notEmpty: {
+								message: 'CVV is required'
+							},
+							digits: {
+								message: 'CVV must contain only digits'
+							},
+							stringLength: {
+								min: 3,
+								max: 4,
+								message: 'CVV must contain 3 to 4 digits only'
+							}
+						}
+					}
+				},
+
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+	}
+
+	return {
+		// Public Functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_create_account');
+
+			if ( modalEl ) {
+				modal = new bootstrap.Modal(modalEl);	
+			}					
+
+			stepper = document.querySelector('#kt_create_account_stepper');
+
+			if ( !stepper ) {
+				return;
+			}
+
+			form = stepper.querySelector('#kt_create_account_form');
+			formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
+			formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
+
+			initStepper();
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCreateAccount.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-api-key.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTModalCreateApiKey = function () {
+	var submitButton;
+	var cancelButton;
+	var validator;
+	var form;
+	var modal;
+	var modalEl;
+
+	// Init form inputs
+	var initForm = function() {
+		// Team assign. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="category"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('category');
+        });
+	}
+
+	// Handle form validation and submittion
+	var handleForm = function() {
+		// Stepper custom navigation
+
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'name': {
+						validators: {
+							notEmpty: {
+								message: 'API name is required'
+							}
+						}
+					},
+					'description': {
+						validators: {
+							notEmpty: {
+								message: 'Description is required'
+							}
+						}
+					},
+					'category': {
+						validators: {
+							notEmpty: {
+								message: 'Country is required'
+							}
+						}
+					},
+					'method': {
+						validators: {
+							notEmpty: {
+								message: 'API method is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Action buttons
+		submitButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							submitButton.disabled = false;
+							
+							Swal.fire({
+								text: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error popuo. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+
+		cancelButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Show confirmation popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+			Swal.fire({
+				text: "Are you sure you would like to cancel?",
+				icon: "warning",
+				showCancelButton: true,
+				buttonsStyling: false,
+				confirmButtonText: "Yes, cancel it!",
+				cancelButtonText: "No, return",
+				customClass: {
+					confirmButton: "btn btn-primary",
+					cancelButton: "btn btn-active-light"
+				}
+			}).then(function (result) {
+				if (result.value) {
+					form.reset(); // Reset form	
+					modal.hide(); // Hide modal				
+				} else if (result.dismiss === 'cancel') {
+					// Show success message. 
+					Swal.fire({
+						text: "Your form has not been cancelled!.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-primary",
+						}
+					});
+				}
+			});
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_create_api_key');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			form = document.querySelector('#kt_modal_create_api_key_form');
+			submitButton = document.getElementById('kt_modal_create_api_key_submit');
+			cancelButton = document.getElementById('kt_modal_create_api_key_cancel');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalCreateApiKey.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-app.js

@@ -0,0 +1,327 @@
+"use strict";
+
+// Class definition
+var KTCreateApp = function () {
+	// Elements
+	var modal;	
+	var modalEl;
+
+	var stepper;
+	var form;
+	var formSubmitButton;
+	var formContinueButton;
+
+	// Variables
+	var stepperObj;
+	var validations = [];
+
+	// Private Functions
+	var initStepper = function () {
+		// Initialize Stepper
+		stepperObj = new KTStepper(stepper);
+
+		// Stepper change event(handle hiding submit button for the last step)
+		stepperObj.on('kt.stepper.changed', function (stepper) {
+			if (stepperObj.getCurrentStepIndex() === 4) {
+				formSubmitButton.classList.remove('d-none');
+				formSubmitButton.classList.add('d-inline-block');
+				formContinueButton.classList.add('d-none');
+			} else if (stepperObj.getCurrentStepIndex() === 5) {
+				formSubmitButton.classList.add('d-none');
+				formContinueButton.classList.add('d-none');
+			} else {
+				formSubmitButton.classList.remove('d-inline-block');
+				formSubmitButton.classList.remove('d-none');
+				formContinueButton.classList.remove('d-none');
+			}
+		});
+
+		// Validation before going to next page
+		stepperObj.on('kt.stepper.next', function (stepper) {
+			console.log('stepper.next');
+
+			// Validate form before change stepper step
+			var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step
+
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						stepper.goNext();
+
+						//KTUtil.scrollTop();
+					} else {
+						// Show error message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-light"
+							}
+						}).then(function () {
+							//KTUtil.scrollTop();
+						});
+					}
+				});
+			} else {
+				stepper.goNext();
+
+				KTUtil.scrollTop();
+			}
+		});
+
+		// Prev event
+		stepperObj.on('kt.stepper.previous', function (stepper) {
+			console.log('stepper.previous');
+
+			stepper.goPrevious();
+			KTUtil.scrollTop();
+		});
+
+		formSubmitButton.addEventListener('click', function (e) {
+			// Validate form before change stepper step
+			var validator = validations[3]; // get validator for last form
+
+			validator.validate().then(function (status) {
+				console.log('validated!');
+
+				if (status == 'Valid') {
+					// Prevent default button action
+					e.preventDefault();
+
+					// Disable button to avoid multiple click 
+					formSubmitButton.disabled = true;
+
+					// Show loading indication
+					formSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+					// Simulate form submission
+					setTimeout(function() {
+						// Hide loading indication
+						formSubmitButton.removeAttribute('data-kt-indicator');
+
+						// Enable button
+						formSubmitButton.disabled = false;
+
+						stepperObj.goNext();
+						//KTUtil.scrollTop();
+					}, 2000);
+				} else {
+					Swal.fire({
+						text: "Sorry, looks like there are some errors detected, please try again.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-light"
+						}
+					}).then(function () {
+						KTUtil.scrollTop();
+					});
+				}
+			});
+		});
+	}
+
+	// Init form inputs
+	var initForm = function() {
+		// Expiry month. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_month"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[3].revalidateField('card_expiry_month');
+        });
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_year"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[3].revalidateField('card_expiry_year');
+        });
+	}
+
+	var initValidation = function () {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		// Step 1
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					name: {
+						validators: {
+							notEmpty: {
+								message: 'App name is required'
+							}
+						}
+					},
+					category: {
+						validators: {
+							notEmpty: {
+								message: 'Category is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 2
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					framework: {
+						validators: {
+							notEmpty: {
+								message: 'Framework is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 3
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					dbname: {
+						validators: {
+							notEmpty: {
+								message: 'Database name is required'
+							}
+						}
+					},
+					dbengine: {
+						validators: {
+							notEmpty: {
+								message: 'Database engine is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 4
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'card_name': {
+						validators: {
+							notEmpty: {
+								message: 'Name on card is required'
+							}
+						}
+					},
+					'card_number': {
+						validators: {
+							notEmpty: {
+								message: 'Card member is required'
+							},
+                            creditCard: {
+                                message: 'Card number is not valid'
+                            }
+						}
+					},
+					'card_expiry_month': {
+						validators: {
+							notEmpty: {
+								message: 'Month is required'
+							}
+						}
+					},
+					'card_expiry_year': {
+						validators: {
+							notEmpty: {
+								message: 'Year is required'
+							}
+						}
+					},
+					'card_cvv': {
+						validators: {
+							notEmpty: {
+								message: 'CVV is required'
+							},
+							digits: {
+								message: 'CVV must contain only digits'
+							},
+							stringLength: {
+								min: 3,
+								max: 4,
+								message: 'CVV must contain 3 to 4 digits only'
+							}
+						}
+					}
+				},
+
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+	}
+
+	return {
+		// Public Functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_create_app');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			stepper = document.querySelector('#kt_modal_create_app_stepper');
+			form = document.querySelector('#kt_modal_create_app_form');
+			formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
+			formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
+
+			initStepper();
+			initForm();
+			initValidation();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCreateApp.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-campaign.js

@@ -0,0 +1,352 @@
+"use strict";
+
+// Class definition
+var KTCreateCampaign = function () {
+	// Elements
+	var modal;
+	var modalEl;
+
+	var stepper;
+	var form;
+	var formSubmitButton;
+	var formContinueButton;
+
+	// Variables
+	var stepperObj;
+	var validations = [];
+
+	// Private Functions
+	var initStepper = function () {
+		// Initialize Stepper
+		stepperObj = new KTStepper(stepper);
+
+		// Stepper change event(handle hiding submit button for the last step)
+		stepperObj.on('kt.stepper.changed', function (stepper) {
+			if (stepperObj.getCurrentStepIndex() === 4) {
+				formSubmitButton.classList.remove('d-none');
+				formSubmitButton.classList.add('d-inline-block');
+				formContinueButton.classList.add('d-none');
+			} else if (stepperObj.getCurrentStepIndex() === 5) {
+				formSubmitButton.classList.add('d-none');
+				formContinueButton.classList.add('d-none');
+			} else {
+				formSubmitButton.classList.remove('d-inline-block');
+				formSubmitButton.classList.remove('d-none');
+				formContinueButton.classList.remove('d-none');
+			}
+		});
+
+		// Validation before going to next page
+		stepperObj.on('kt.stepper.next', function (stepper) {
+			console.log('stepper.next');
+
+			// Validate form before change stepper step
+			var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step
+
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						stepper.goNext();
+
+						//KTUtil.scrollTop();
+					} else {
+						// Show error message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-light"
+							}
+						}).then(function () {
+							//KTUtil.scrollTop();
+						});
+					}
+				});
+			} else {
+				stepper.goNext();
+
+				KTUtil.scrollTop();
+			}
+		});
+
+		// Prev event
+		stepperObj.on('kt.stepper.previous', function (stepper) {
+			console.log('stepper.previous');
+
+			stepper.goPrevious();
+			KTUtil.scrollTop();
+		});
+
+		formSubmitButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			formSubmitButton.disabled = true;
+
+			// Show loading indication
+			formSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+			// Simulate form submission
+			setTimeout(function () {
+				// Hide loading indication
+				formSubmitButton.removeAttribute('data-kt-indicator');
+
+				// Enable button
+				formSubmitButton.disabled = false;
+
+				stepperObj.goNext();
+				//KTUtil.scrollTop();
+			}, 2000);
+		});
+	}
+
+	// Init form inputs
+	var initForm = function () {
+		// Init age slider
+		var slider = document.querySelector("#kt_modal_create_campaign_age_slider");
+		var valueMin = document.querySelector("#kt_modal_create_campaign_age_min");
+		var valueMax = document.querySelector("#kt_modal_create_campaign_age_max");
+
+		noUiSlider.create(slider, {
+			start: [18, 40],
+			connect: true,
+			range: {
+				"min": 13,
+				"max": 80
+			}
+		});
+
+		slider.noUiSlider.on("update", function (values, handle) {
+			if (handle) {
+				valueMax.innerHTML = Math.round(values[handle]);
+			} else {
+				valueMin.innerHTML = Math.round(values[handle]);
+			}
+		});
+
+		// Init tagify
+		var tagifyElement = document.querySelector('#kt_modal_create_campaign_location');
+		var tagify = new Tagify(tagifyElement, {
+			delimiters: null,
+			templates: {
+				tag: function (tagData) {
+					const countryPath = tagifyElement.getAttribute("data-kt-flags-path") + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
+					try {
+						// _ESCAPE_START_
+						return `<tag title='${tagData.value}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
+                                <x title='remove tag' class='tagify__tag__removeBtn'></x>
+                                <div class="d-flex align-items-center">
+                                    ${tagData.code ?
+								`<img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2" src='${countryPath}' />` : ''
+							}
+                                    <span class='tagify__tag-text'>${tagData.value}</span>
+                                </div>
+                            </tag>`
+						// _ESCAPE_END_
+					}
+					catch (err) { }
+				},
+
+				dropdownItem: function (tagData) {
+					const countryPath = tagifyElement.getAttribute("data-kt-flags-path") + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
+					try {
+						// _ESCAPE_START_
+						return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
+                                    <img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2"
+                                         src='${countryPath}' />
+                                    <span>${tagData.value}</span>
+                                </div>`
+						// _ESCAPE_END_
+					}
+					catch (err) { }
+				}
+			},
+			enforceWhitelist: true,
+			whitelist: [
+				{ value: 'Argentina', code: 'AR' },
+				{ value: 'Australia', code: 'AU', searchBy: 'beach, sub-tropical' },
+				{ value: 'Austria', code: 'AT' },
+				{ value: 'Brazil', code: 'BR' },
+				{ value: 'China', code: 'CN' },
+				{ value: 'Egypt', code: 'EG' },
+				{ value: 'Finland', code: 'FI' },
+				{ value: 'France', code: 'FR' },
+				{ value: 'Germany', code: 'DE' },
+				{ value: 'Hong Kong', code: 'HK' },
+				{ value: 'Hungary', code: 'HU' },
+				{ value: 'Iceland', code: 'IS' },
+				{ value: 'India', code: 'IN' },
+				{ value: 'Indonesia', code: 'ID' },
+				{ value: 'Italy', code: 'IT' },
+				{ value: 'Jamaica', code: 'JM' },
+				{ value: 'Japan', code: 'JP' },
+				{ value: 'Jersey', code: 'JE' },
+				{ value: 'Luxembourg', code: 'LU' },
+				{ value: 'Mexico', code: 'MX' },
+				{ value: 'Netherlands', code: 'NL' },
+				{ value: 'New Zealand', code: 'NZ' },
+				{ value: 'Norway', code: 'NO' },
+				{ value: 'Philippines', code: 'PH' },
+				{ value: 'Singapore', code: 'SG' },
+				{ value: 'South Korea', code: 'KR' },
+				{ value: 'Sweden', code: 'SE' },
+				{ value: 'Switzerland', code: 'CH' },
+				{ value: 'Thailand', code: 'TH' },
+				{ value: 'Ukraine', code: 'UA' },
+				{ value: 'United Kingdom', code: 'GB' },
+				{ value: 'United States', code: 'US' },
+				{ value: 'Vietnam', code: 'VN' }
+			],
+			dropdown: {
+				enabled: 1, // suggest tags after a single character input
+				classname: 'extra-properties' // custom class for the suggestions dropdown
+			} // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
+		})
+
+		// add the first 2 tags and makes them readonly
+		var tagsToAdd = tagify.settings.whitelist.slice(0, 2);
+		tagify.addTags(tagsToAdd);
+
+		// Init flatpickr
+		$("#kt_modal_create_campaign_datepicker").flatpickr({
+			altInput: true,
+			enableTime: true,
+			altFormat: "F j, Y H:i",
+			dateFormat: "Y-m-d H:i",
+			mode: "range"
+		});
+
+		// Init dropzone
+		var myDropzone = new Dropzone("#kt_modal_create_campaign_files_upload", {
+			url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
+			paramName: "file", // The name that will be used to transfer the file
+			maxFiles: 10,
+			maxFilesize: 10, // MB
+			addRemoveLinks: true,
+			accept: function(file, done) {
+				if (file.name == "wow.jpg") {
+					done("Naha, you don't.");
+				} else {
+					done();
+				}
+			}
+		});
+
+		// Handle campaign duration options
+		const allDuration = document.querySelector('#kt_modal_create_campaign_duration_all');
+		const fixedDuration = document.querySelector('#kt_modal_create_campaign_duration_fixed');
+		const datepicker = document.querySelector('#kt_modal_create_campaign_datepicker');
+
+		[allDuration, fixedDuration].forEach(option => {
+			option.addEventListener('click', e => {
+				if (option.classList.contains('active')) {
+					return;
+				}
+				allDuration.classList.toggle('active');
+				fixedDuration.classList.toggle('active');
+
+				if (fixedDuration.classList.contains('active')) {
+					datepicker.nextElementSibling.classList.remove('d-none');
+				} else {
+					datepicker.nextElementSibling.classList.add('d-none');
+				}
+			});
+		});
+
+		// Init budget slider
+		var budgetSlider = document.querySelector("#kt_modal_create_campaign_budget_slider");
+		var budgetValue = document.querySelector("#kt_modal_create_campaign_budget_label");
+
+		noUiSlider.create(budgetSlider, {
+			start: [5],
+			connect: true,
+			range: {
+				"min": 1,
+				"max": 500
+			}
+		});
+
+		budgetSlider.noUiSlider.on("update", function (values, handle) {
+			budgetValue.innerHTML = Math.round(values[handle]);
+			if (handle) {
+				budgetValue.innerHTML = Math.round(values[handle]);
+			}
+		});
+
+		// Handle create new campaign button
+		const restartButton = document.querySelector('#kt_modal_create_campaign_create_new');
+		restartButton.addEventListener('click', function () {
+			form.reset();
+			stepperObj.goTo(1);
+		});
+	}
+
+	var initValidation = function () {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		// Step 1
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					campaign_name: {
+						validators: {
+							notEmpty: {
+								message: 'App name is required'
+							}
+						}
+					},
+					avatar: {
+						validators: {
+							file: {
+								extension: 'png,jpg,jpeg',
+								type: 'image/jpeg,image/png',
+								message: 'Please choose a png, jpg or jpeg files only',
+							},
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+						eleInvalidClass: '',
+						eleValidClass: ''
+					})
+				}
+			}
+		));
+	}
+
+	return {
+		// Public Functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_create_campaign');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			stepper = document.querySelector('#kt_modal_create_campaign_stepper');
+			form = document.querySelector('#kt_modal_create_campaign_stepper_form');
+			formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
+			formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
+
+			initStepper();
+			initForm();
+			initValidation();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTCreateCampaign.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/budget.js

@@ -0,0 +1,140 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProjectBudget = function () {
+	// Variables
+	var nextButton;
+	var previousButton;
+	var validator;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initValidation = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'budget_setup': {
+						validators: {
+							notEmpty: {
+								message: 'Budget amount is required'
+							},
+							callback: {
+								message: 'The budget amount must be greater than $100',
+								callback: function(input) {
+									var currency = input.value;
+									currency = currency.replace(/[$,]+/g,"");
+
+									if (parseFloat(currency) < 100) {
+										return false;
+									}
+								}
+							}
+						}
+					},
+					'budget_usage': {
+						validators: {
+							notEmpty: {
+								message: 'Budget usage type is required'
+							}
+						}
+					},
+					'budget_allow': {
+						validators: {
+							notEmpty: {
+								message: 'Allowing budget is required'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Revalidate on change
+		KTDialer.getInstance(form.querySelector('#kt_modal_create_project_budget_setup')).on('kt.dialer.changed', function() {
+			// Revalidate the field when an option is chosen
+            validator.revalidateField('budget_setup');
+		});
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						nextButton.setAttribute('data-kt-indicator', 'on');
+
+						// Simulate form submission
+						setTimeout(function() {
+							// Simulate form submission
+							nextButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							nextButton.disabled = false;
+							
+							// Go to next step
+							stepper.goNext();
+						}, 1500);   						
+					} else {
+						// Enable button
+						nextButton.disabled = false;
+
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}			
+		});
+
+		previousButton.addEventListener('click', function () {
+			stepper.goPrevious();
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalCreateProject.getForm();
+			stepper = KTModalCreateProject.getStepperObj();
+			nextButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="budget-next"]');
+			previousButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="budget-previous"]');
+
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProjectBudget = module.exports = KTModalCreateProjectBudget;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/complete.js

@@ -0,0 +1,32 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProjectComplete = function () {
+	// Variables
+	var startButton;
+	var form;
+	var stepper;
+
+	// Private functions
+	var handleForm = function() {
+		startButton.addEventListener('click', function () {
+			stepper.goTo(1);
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalCreateProject.getForm();
+			stepper = KTModalCreateProject.getStepperObj();
+			startButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="complete-start"]');
+
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProjectComplete = module.exports = KTModalCreateProjectComplete;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/files.js

@@ -0,0 +1,77 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProjectFiles = function () {
+	// Variables
+	var nextButton;
+	var previousButton;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initForm = function() {
+		// Project logo
+		// For more info about Dropzone plugin visit:  https://www.dropzonejs.com/#usage
+		var myDropzone = new Dropzone("#kt_modal_create_project_files_upload", { 
+			url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
+            paramName: "file", // The name that will be used to transfer the file
+            maxFiles: 10,
+            maxFilesize: 10, // MB
+            addRemoveLinks: true,
+            accept: function(file, done) {
+                if (file.name == "justinbieber.jpg") {
+                    done("Naha, you don't.");
+                } else {
+                    done();
+                }
+            }
+		});  
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Show loading indication
+			nextButton.setAttribute('data-kt-indicator', 'on');
+
+			// Simulate form submission
+			setTimeout(function() {
+				// Hide loading indication
+				nextButton.removeAttribute('data-kt-indicator');
+
+				// Enable button
+				nextButton.disabled = false;
+				
+				// Go to next step
+				stepper.goNext();
+			}, 1500); 		
+		});
+
+		previousButton.addEventListener('click', function () {
+			stepper.goPrevious();
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalCreateProject.getForm();
+			stepper = KTModalCreateProject.getStepperObj();
+			nextButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="files-next"]');
+			previousButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="files-previous"]');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProjectFiles = module.exports = KTModalCreateProjectFiles;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/main.js

@@ -0,0 +1,58 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProject = function () {
+	// Private variables
+	var stepper;
+	var stepperObj;
+	var form;	
+
+	// Private functions
+	var initStepper = function () {
+		// Initialize Stepper
+		stepperObj = new KTStepper(stepper);
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			stepper = document.querySelector('#kt_modal_create_project_stepper');
+			form = document.querySelector('#kt_modal_create_project_form');
+
+			initStepper();
+		},
+
+		getStepperObj: function () {
+			return stepperObj;
+		},
+
+		getStepper: function () {
+			return stepper;
+		},
+		
+		getForm: function () {
+			return form;
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	if (!document.querySelector('#kt_modal_create_project')) {
+		return;
+	}
+
+	KTModalCreateProject.init();
+	KTModalCreateProjectType.init();
+	KTModalCreateProjectBudget.init();
+	KTModalCreateProjectSettings.init();
+	KTModalCreateProjectTeam.init();
+	KTModalCreateProjectTargets.init();
+	KTModalCreateProjectFiles.init();
+	KTModalCreateProjectComplete.init();
+});
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProject = module.exports = KTModalCreateProject;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/settings.js

@@ -0,0 +1,171 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProjectSettings = function () {
+	// Variables
+	var nextButton;
+	var previousButton;
+	var validator;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initForm = function() {
+		// Project logo
+		// For more info about Dropzone plugin visit:  https://www.dropzonejs.com/#usage
+		var myDropzone = new Dropzone("#kt_modal_create_project_settings_logo", { 
+			url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
+            paramName: "file", // The name that will be used to transfer the file
+            maxFiles: 10,
+            maxFilesize: 10, // MB
+            addRemoveLinks: true,
+            accept: function(file, done) {
+                if (file.name == "justinbieber.jpg") {
+                    done("Naha, you don't.");
+                } else {
+                    done();
+                }
+            }
+		});  
+
+		// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var releaseDate = $(form.querySelector('[name="settings_release_date"]'));
+		releaseDate.flatpickr({
+			enableTime: true,
+			dateFormat: "d, M Y, H:i",
+		});
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="settings_customer"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('settings_customer');
+        });
+	}
+
+	var initValidation = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'settings_name': {
+						validators: {
+							notEmpty: {
+								message: 'Project name is required'
+							}
+						}
+					},
+					'settings_customer': {
+						validators: {
+							notEmpty: {
+								message: 'Customer is required'
+							}
+						}
+					},
+					'settings_description': {
+						validators: {
+							notEmpty: {
+								message: 'Description is required'
+							}
+						}
+					},
+					'settings_release_date': {
+						validators: {
+							notEmpty: {
+								message: 'Release date is required'
+							}
+						}
+					},
+					'settings_notifications[]': {
+						validators: {
+							notEmpty: {
+								message: 'Notifications are required'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						nextButton.setAttribute('data-kt-indicator', 'on');
+
+						// Simulate form submission
+						setTimeout(function() {
+							// Simulate form submission
+							nextButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							nextButton.disabled = false;
+							
+							// Go to next step
+							stepper.goNext();
+						}, 1500);   						
+					} else {
+						// Enable button
+						nextButton.disabled = false;
+
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}			
+		});
+
+		previousButton.addEventListener('click', function () {
+			// Go to previous step
+			stepper.goPrevious();
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalCreateProject.getForm();
+			stepper = KTModalCreateProject.getStepperObj();
+			nextButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="settings-next"]');
+			previousButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="settings-previous"]');
+
+			initForm();
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProjectSettings = module.exports = KTModalCreateProjectSettings;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/targets.js

@@ -0,0 +1,176 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProjectTargets = function () {
+	// Variables
+	var nextButton;
+	var previousButton;
+	var validator;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initForm = function() {
+		// Tags. For more info, please visit the official plugin site: https://yaireo.github.io/tagify/
+		var tags = new Tagify(form.querySelector('[name="target_tags"]'), {
+			whitelist: ["Important", "Urgent", "High", "Medium", "Low"],
+			maxTags: 5,
+			dropdown: {
+				maxItems: 10,           // <- mixumum allowed rendered suggestions
+				enabled: 0,             // <- show suggestions on focus
+				closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+			}
+		});
+		tags.on("change", function(){
+			// Revalidate the field when an option is chosen
+            validator.revalidateField('tags');
+		});
+
+		// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var dueDate = $(form.querySelector('[name="target_due_date"]'));
+		dueDate.flatpickr({
+			enableTime: true,
+			dateFormat: "d, M Y, H:i",
+		});
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="target_assign"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('target_assign');
+        });
+	}
+
+	var initValidation = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'target_title': {
+						validators: {
+							notEmpty: {
+								message: 'Target title is required'
+							}
+						}
+					},
+					'target_assign': {
+						validators: {
+							notEmpty: {
+								message: 'Customer is required'
+							}
+						}
+					},
+					'target_due_date': {
+						validators: {
+							notEmpty: {
+								message: 'Due date is required'
+							}
+						}
+					},
+					'target_tags': {
+						validators: {
+							notEmpty: {
+								message: 'Target tags are required'
+							}
+						}
+					},
+					'target_allow': {
+						validators: {
+							notEmpty: {
+								message: 'Allowing target is required'
+							}
+						}
+					},
+					'target_notifications[]': {
+						validators: {
+							notEmpty: {
+								message: 'Notifications are required'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						nextButton.setAttribute('data-kt-indicator', 'on');
+
+						// Simulate form submission
+						setTimeout(function() {
+							// Simulate form submission
+							nextButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							nextButton.disabled = false;
+							
+							// Go to next step
+							stepper.goNext();
+						}, 1500);   						
+					} else {
+						// Enable button
+						nextButton.disabled = false;
+						
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}			
+		});
+
+		previousButton.addEventListener('click', function () {
+			// Go to previous step
+			stepper.goPrevious();
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalCreateProject.getForm();
+			stepper = KTModalCreateProject.getStepperObj();
+			nextButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="targets-next"]');
+			previousButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="targets-previous"]');
+
+			initForm();
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProjectTargets = module.exports = KTModalCreateProjectTargets;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/team.js

@@ -0,0 +1,57 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProjectTeam = function () {
+	// Variables
+	var nextButton;
+	var previousButton;
+	var form;
+	var stepper;
+
+	// Private functions
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Show loading indication
+			nextButton.setAttribute('data-kt-indicator', 'on');
+
+			// Simulate form submission
+			setTimeout(function() {
+				// Enable button
+				nextButton.disabled = false;
+				
+				// Simulate form submission
+				nextButton.removeAttribute('data-kt-indicator');
+				
+				// Go to next step
+				stepper.goNext();
+			}, 1500); 		
+		});
+
+		previousButton.addEventListener('click', function () {
+			stepper.goPrevious();
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalCreateProject.getForm();
+			stepper = KTModalCreateProject.getStepperObj();
+			nextButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="team-next"]');
+			previousButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="team-previous"]');
+
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProjectTeam = module.exports = KTModalCreateProjectTeam;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/create-project/type.js

@@ -0,0 +1,104 @@
+"use strict";
+
+// Class definition
+var KTModalCreateProjectType = function () {
+	// Variables
+	var nextButton;
+	var validator;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initValidation = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'project_type': {
+						validators: {
+							notEmpty: {
+								message: 'Project type is required'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+					e.preventDefault();
+
+					if (status == 'Valid') {
+						// Show loading indication
+						nextButton.setAttribute('data-kt-indicator', 'on');
+
+						// Simulate form submission
+						setTimeout(function() {
+							// Simulate form submission
+							nextButton.removeAttribute('data-kt-indicator');
+							
+							// Enable button
+							nextButton.disabled = false;
+							
+							// Go to next step
+							stepper.goNext();
+						}, 1000);   						
+					} else {
+						// Enable button
+						nextButton.disabled = false;
+						
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}			
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalCreateProject.getForm();
+			stepper = KTModalCreateProject.getStepperObj();
+			nextButton = KTModalCreateProject.getStepper().querySelector('[data-kt-element="type-next"]');
+
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalCreateProjectType = module.exports = KTModalCreateProjectType;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/new-address.js

@@ -0,0 +1,211 @@
+"use strict";
+
+// Class definition
+var KTModalNewAddress = function () {
+	var submitButton;
+	var cancelButton;
+	var validator;
+	var form;
+	var modal;
+	var modalEl;
+
+	// Init form inputs
+	var initForm = function() {
+		// Team assign. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="country"]')).select2().on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+	}
+
+	// Handle form validation and submittion
+	var handleForm = function() {
+		// Stepper custom navigation
+
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'first-name': {
+						validators: {
+							notEmpty: {
+								message: 'First name is required'
+							}
+						}
+					},
+					'last-name': {
+						validators: {
+							notEmpty: {
+								message: 'Last name is required'
+							}
+						}
+					},
+					'country': {
+						validators: {
+							notEmpty: {
+								message: 'Country is required'
+							}
+						}
+					},
+					'address1': {
+						validators: {
+							notEmpty: {
+								message: 'Address 1 is required'
+							}
+						}
+					},
+					'address2': {
+						validators: {
+							notEmpty: {
+								message: 'Address 2 is required'
+							}
+						}
+					},
+					'city': {
+						validators: {
+							notEmpty: {
+								message: 'City is required'
+							}
+						}
+					},
+					'state': {
+						validators: {
+							notEmpty: {
+								message: 'State is required'
+							}
+						}
+					},
+					'postcode': {
+						validators: {
+							notEmpty: {
+								message: 'Postcode is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Action buttons
+		submitButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						submitButton.disabled = true;
+
+						// Simulate ajax process
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							submitButton.disabled = false;
+							
+							// Show success message.  For more info check the plugin's official documentation: https://sweetalert2.github.io/
+							Swal.fire({
+								text: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error message.
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+
+		cancelButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			Swal.fire({
+				text: "Are you sure you would like to cancel?",
+				icon: "warning",
+				showCancelButton: true,
+				buttonsStyling: false,
+				confirmButtonText: "Yes, cancel it!",
+				cancelButtonText: "No, return",
+				customClass: {
+					confirmButton: "btn btn-primary",
+					cancelButton: "btn btn-active-light"
+				}
+			}).then(function (result) {
+				if (result.value) {
+					form.reset(); // Reset form	
+					modal.hide(); // Hide modal				
+				} else if (result.dismiss === 'cancel') {
+					Swal.fire({
+						text: "Your form has not been cancelled!.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-primary",
+						}
+					});
+				}
+			});
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_new_address');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			form = document.querySelector('#kt_modal_new_address_form');
+			submitButton = document.getElementById('kt_modal_new_address_submit');
+			cancelButton = document.getElementById('kt_modal_new_address_cancel');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalNewAddress.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/new-card.js

@@ -0,0 +1,213 @@
+"use strict";
+
+// Class definition
+var KTModalNewCard = function () {
+	var submitButton;
+	var cancelButton;
+	var validator;
+	var form;
+	var modal;
+	var modalEl;
+	
+	// Init form inputs
+	var initForm = function() {
+		// Expiry month. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_month"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('card_expiry_month');
+        });
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_year"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('card_expiry_year');
+        });
+	}
+
+	// Handle form validation and submittion
+	var handleForm = function() {
+		// Stepper custom navigation
+
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'card_name': {
+						validators: {
+							notEmpty: {
+								message: 'Name on card is required'
+							}
+						}
+					},
+					'card_number': {
+						validators: {
+							notEmpty: {
+								message: 'Card member is required'
+							},
+                            creditCard: {
+                                message: 'Card number is not valid'
+                            }
+						}
+					},
+					'card_expiry_month': {
+						validators: {
+							notEmpty: {
+								message: 'Month is required'
+							}
+						}
+					},
+					'card_expiry_year': {
+						validators: {
+							notEmpty: {
+								message: 'Year is required'
+							}
+						}
+					},
+					'card_cvv': {
+						validators: {
+							notEmpty: {
+								message: 'CVV is required'
+							},
+							digits: {
+								message: 'CVV must contain only digits'
+							},
+							stringLength: {
+								min: 3,
+								max: 4,
+								message: 'CVV must contain 3 to 4 digits only'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Action buttons
+		submitButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						submitButton.disabled = true;
+
+						// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						setTimeout(function() {
+							// Remove loading indication
+							submitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							submitButton.disabled = false;
+							
+							// Show popup confirmation 
+							Swal.fire({
+								text: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+
+		cancelButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+			Swal.fire({
+				text: "Are you sure you would like to cancel?",
+				icon: "warning",
+				showCancelButton: true,
+				buttonsStyling: false,
+				confirmButtonText: "Yes, cancel it!",
+				cancelButtonText: "No, return",
+				customClass: {
+					confirmButton: "btn btn-primary",
+					cancelButton: "btn btn-active-light"
+				}
+			}).then(function (result) {
+				if (result.value) {
+					form.reset(); // Reset form	
+					modal.hide(); // Hide modal				
+				} else if (result.dismiss === 'cancel') {
+					// Show error message.
+					Swal.fire({
+						text: "Your form has not been cancelled!.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-primary",
+						}
+					});
+				}
+			});
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_new_card');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			form = document.querySelector('#kt_modal_new_card_form');
+			submitButton = document.getElementById('kt_modal_new_card_submit');
+			cancelButton = document.getElementById('kt_modal_new_card_cancel');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalNewCard.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/new-target.js

@@ -0,0 +1,211 @@
+"use strict";
+
+// Class definition
+var KTModalNewTarget = function () {
+	var submitButton;
+	var cancelButton;
+	var validator;
+	var form;
+	var modal;
+	var modalEl;
+
+	// Init form inputs
+	var initForm = function() {
+		// Tags. For more info, please visit the official plugin site: https://yaireo.github.io/tagify/
+		var tags = new Tagify(form.querySelector('[name="tags"]'), {
+			whitelist: ["Important", "Urgent", "High", "Medium", "Low"],
+			maxTags: 5,
+			dropdown: {
+				maxItems: 10,           // <- mixumum allowed rendered suggestions
+				enabled: 0,             // <- show suggestions on focus
+				closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+			}
+		});
+		tags.on("change", function(){
+			// Revalidate the field when an option is chosen
+            validator.revalidateField('tags');
+		});
+
+		// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var dueDate = $(form.querySelector('[name="due_date"]'));
+		dueDate.flatpickr({
+			enableTime: true,
+			dateFormat: "d, M Y, H:i",
+		});
+
+		// Team assign. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="team_assign"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('team_assign');
+        });
+	}
+
+	// Handle form validation and submittion
+	var handleForm = function() {
+		// Stepper custom navigation
+
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					target_title: {
+						validators: {
+							notEmpty: {
+								message: 'Target title is required'
+							}
+						}
+					},
+					target_assign: {
+						validators: {
+							notEmpty: {
+								message: 'Target assign is required'
+							}
+						}
+					},
+					target_due_date: {
+						validators: {
+							notEmpty: {
+								message: 'Target due date is required'
+							}
+						}
+					},
+					target_tags: {
+						validators: {
+							notEmpty: {
+								message: 'Target tags are required'
+							}
+						}
+					},
+					'targets_notifications[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select at least one communication method'
+                            }
+                        }
+                    },
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Action buttons
+		submitButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							submitButton.disabled = false;
+							
+							// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+							Swal.fire({
+								text: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error message.
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+
+		cancelButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			Swal.fire({
+				text: "Are you sure you would like to cancel?",
+				icon: "warning",
+				showCancelButton: true,
+				buttonsStyling: false,
+				confirmButtonText: "Yes, cancel it!",
+				cancelButtonText: "No, return",
+				customClass: {
+					confirmButton: "btn btn-primary",
+					cancelButton: "btn btn-active-light"
+				}
+			}).then(function (result) {
+				if (result.value) {
+					form.reset(); // Reset form	
+					modal.hide(); // Hide modal				
+				} else if (result.dismiss === 'cancel') {
+					Swal.fire({
+						text: "Your form has not been cancelled!.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-primary",
+						}
+					});
+				}
+			});
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_new_target');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			form = document.querySelector('#kt_modal_new_target_form');
+			submitButton = document.getElementById('kt_modal_new_target_submit');
+			cancelButton = document.getElementById('kt_modal_new_target_cancel');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalNewTarget.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/offer-a-deal/complete.js

@@ -0,0 +1,32 @@
+"use strict";
+
+// Class definition
+var KTModalOfferADealComplete = function () {
+	// Variables
+	var startButton;
+	var form;
+	var stepper;
+
+	// Private functions
+	var handleForm = function() {
+		startButton.addEventListener('click', function () {
+			stepper.goTo(1);
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalOfferADeal.getForm();
+			stepper = KTModalOfferADeal.getStepperObj();
+			startButton = KTModalOfferADeal.getStepper().querySelector('[data-kt-element="complete-start"]');
+
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalOfferADealComplete = module.exports = KTModalOfferADealComplete;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/offer-a-deal/details.js

@@ -0,0 +1,147 @@
+"use strict";
+
+// Class definition
+var KTModalOfferADealDetails = function () {
+	// Variables
+	var nextButton;
+	var previousButton;
+	var validator;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initForm = function() {
+		// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var dueDate = $(form.querySelector('[name="details_activation_date"]'));
+		dueDate.flatpickr({
+			enableTime: true,
+			dateFormat: "d, M Y, H:i",
+		});
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="details_customer"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('details_customer');
+        });
+	}
+
+	var initValidation = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'details_customer': {
+						validators: {
+							notEmpty: {
+								message: 'Customer is required'
+							}
+						}
+					},
+					'details_title': {
+						validators: {
+							notEmpty: {
+								message: 'Deal title is required'
+							}
+						}
+					},					
+					'details_activation_date': {
+						validators: {
+							notEmpty: {
+								message: 'Activation date is required'
+							}
+						}
+					},
+					'details_notifications[]': {
+						validators: {
+							notEmpty: {
+								message: 'Notifications are required'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						nextButton.setAttribute('data-kt-indicator', 'on');
+
+						// Simulate form submission
+						setTimeout(function() {
+							// Simulate form submission
+							nextButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							nextButton.disabled = false;
+							
+							// Go to next step
+							stepper.goNext();
+						}, 1500);   						
+					} else {
+						// Enable button
+						nextButton.disabled = false;
+						
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}			
+		});
+
+		previousButton.addEventListener('click', function () {
+			// Go to previous step
+			stepper.goPrevious();
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalOfferADeal.getForm();
+			stepper = KTModalOfferADeal.getStepperObj();
+			nextButton = KTModalOfferADeal.getStepper().querySelector('[data-kt-element="details-next"]');
+			previousButton = KTModalOfferADeal.getStepper().querySelector('[data-kt-element="details-previous"]');
+
+			initForm();
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalOfferADealDetails = module.exports = KTModalOfferADealDetails;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/offer-a-deal/finance.js

@@ -0,0 +1,140 @@
+"use strict";
+
+// Class definition
+var KTModalOfferADealFinance = function () {
+	// Variables
+	var nextButton;
+	var previousButton;
+	var validator;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initValidation = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'finance_setup': {
+						validators: {
+							notEmpty: {
+								message: 'Amount is required'
+							},
+							callback: {
+								message: 'The amount must be greater than $100',
+								callback: function(input) {
+									var currency = input.value;
+									currency = currency.replace(/[$,]+/g,"");
+
+									if (parseFloat(currency) < 100) {
+										return false;
+									}
+								}
+							}
+						}
+					},
+					'finance_usage': {
+						validators: {
+							notEmpty: {
+								message: 'Usage type is required'
+							}
+						}
+					},
+					'finance_allow': {
+						validators: {
+							notEmpty: {
+								message: 'Allowing budget is required'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Revalidate on change
+		KTDialer.getInstance(form.querySelector('#kt_modal_finance_setup')).on('kt.dialer.changed', function() {
+			// Revalidate the field when an option is chosen
+            validator.revalidateField('finance_setup');
+		});
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						nextButton.setAttribute('data-kt-indicator', 'on');
+
+						// Simulate form submission
+						setTimeout(function() {
+							// Simulate form submission
+							nextButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							nextButton.disabled = false;
+							
+							// Go to next step
+							stepper.goNext();
+						}, 1500);   						
+					} else {
+						// Enable button
+						nextButton.disabled = false;
+
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}			
+		});
+
+		previousButton.addEventListener('click', function () {
+			stepper.goPrevious();
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalOfferADeal.getForm();
+			stepper = KTModalOfferADeal.getStepperObj();
+			nextButton = KTModalOfferADeal.getStepper().querySelector('[data-kt-element="finance-next"]');
+			previousButton = KTModalOfferADeal.getStepper().querySelector('[data-kt-element="finance-previous"]');
+
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalOfferADealFinance = module.exports = KTModalOfferADealFinance;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/offer-a-deal/main.js

@@ -0,0 +1,55 @@
+"use strict";
+
+// Class definition
+var KTModalOfferADeal = function () {
+    // Private variables
+	var stepper;
+	var stepperObj;
+	var form;	
+
+	// Private functions
+	var initStepper = function () {
+		// Initialize Stepper
+		stepperObj = new KTStepper(stepper);
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			stepper = document.querySelector('#kt_modal_offer_a_deal_stepper');
+			form = document.querySelector('#kt_modal_offer_a_deal_form');
+
+			initStepper();
+		},
+
+		getStepper: function () {
+			return stepper;
+		},
+
+		getStepperObj: function () {
+			return stepperObj;
+		},
+		
+		getForm: function () {
+			return form;
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	if (!document.querySelector('#kt_modal_offer_a_deal')) {
+		return;
+	}
+
+    KTModalOfferADeal.init();
+    KTModalOfferADealType.init();
+    KTModalOfferADealDetails.init();
+    KTModalOfferADealFinance.init();
+    KTModalOfferADealComplete.init();
+});
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalOfferADeal = module.exports = KTModalOfferADeal;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/offer-a-deal/type.js

@@ -0,0 +1,103 @@
+"use strict";
+
+// Class definition
+var KTModalOfferADealType = function () {
+	// Variables
+	var nextButton;
+	var validator;
+	var form;
+	var stepper;
+
+	// Private functions
+	var initValidation = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'offer_type': {
+						validators: {
+							notEmpty: {
+								message: 'Offer type is required'
+							}
+						}
+					}
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+	}
+
+	var handleForm = function() {
+		nextButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			nextButton.disabled = true;
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						nextButton.setAttribute('data-kt-indicator', 'on');
+
+						// Simulate form submission
+						setTimeout(function() {
+							// Simulate form submission
+							nextButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							nextButton.disabled = false;
+							
+							// Go to next step
+							stepper.goNext();
+						}, 1000);   						
+					} else {
+						// Enable button
+						nextButton.disabled = false;
+						
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}			
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			form = KTModalOfferADeal.getForm();
+			stepper = KTModalOfferADeal.getStepperObj();
+			nextButton = KTModalOfferADeal.getStepper().querySelector('[data-kt-element="type-next"]');
+
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	window.KTModalOfferADealType = module.exports = KTModalOfferADealType;
+}

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/select-location.js

@@ -0,0 +1,117 @@
+"use strict";
+
+// Class definition
+var KTModalSelectLocation = function () {
+    // Private variables
+    var locationSelectTarget;
+    var locationSelectButton;
+
+    var modal;
+    var selectedlocation = '';
+    var mapInitialized = false;
+
+    // Private functions
+    var initMap = function() {
+        // Check if Leaflet is included
+        if (!L) {
+            return;
+        }
+
+        // Define Map Location
+        var leaflet = L.map('kt_modal_select_location_map', {
+            center: [40.725, -73.985],
+            zoom: 30
+        });
+
+        // Init Leaflet Map. For more info check the plugin's documentation: https://leafletjs.com/
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(leaflet);
+
+        // Set Geocoding
+        var geocodeService;
+        if (typeof L.esri.Geocoding === 'undefined') {
+            geocodeService = L.esri.geocodeService();
+        } else {
+            geocodeService = L.esri.Geocoding.geocodeService();
+        }
+
+        // Define Marker Layer
+        var markerLayer = L.layerGroup().addTo(leaflet);
+
+        // Set Custom SVG icon marker
+        var leafletIcon = L.divIcon({
+            html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
+            bgPos: [10, 10],
+            iconAnchor: [20, 37],
+            popupAnchor: [0, -37],
+            className: 'leaflet-marker'
+        });
+
+        // Map onClick Action
+        leaflet.on('click', function (e) {
+            geocodeService.reverse().latlng(e.latlng).run(function (error, result) {
+                if (error) {
+                    return;
+                }
+                markerLayer.clearLayers();
+                selectedlocation = result.address.Match_addr;
+                L.marker(result.latlng, { icon: leafletIcon }).addTo(markerLayer).bindPopup(result.address.Match_addr, { closeButton: false }).openPopup();
+
+                // Show popup confirmation. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                Swal.fire({
+                    html: '<div class="mb-2">Your selected - <b>"' + selectedlocation + '"</b>.</div>' + 'Click on the "Apply" button to select this location.',
+                    icon: "success",
+                    buttonsStyling: false,
+                    confirmButtonText: "Ok, got it!",
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                }).then(function (result) {
+                    // Confirmed
+                });
+            });
+        });
+    }
+
+    var handleSelection = function() {
+        locationSelectButton.addEventListener('click', function() {
+            if (locationSelectTarget) {
+                if (locationSelectTarget.value) {
+                    locationSelectTarget.value = selectedlocation;
+                } else {
+                    locationSelectTarget.innerHTML = selectedlocation;
+                }
+            }
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+			modal = document.querySelector('#kt_modal_select_location');
+
+			if (!modal) {
+				return;
+			}
+            
+            locationSelectTarget = document.querySelector('#kt_modal_select_location_target');
+            locationSelectButton = document.querySelector('#kt_modal_select_location_button');
+
+            handleSelection();
+            
+            modal.addEventListener('shown.bs.modal', function () {
+                if (!mapInitialized) {
+                    initMap();
+                    mapInitialized = true;
+                }                
+            });
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTModalSelectLocation.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/share-earn.js

@@ -0,0 +1,47 @@
+"use strict";
+
+// Class definition
+var KTModalShareEarn = function () {
+    // Private functions
+    var handleForm = function() {
+        var button = document.querySelector('#kt_share_earn_link_copy_button');
+        var input = document.querySelector('#kt_share_earn_link_input');
+        var clipboard = new ClipboardJS(button);
+
+        if (!clipboard) {
+            return;
+        }
+
+        //  Copy text to clipboard. For more info check the plugin's documentation: https://clipboardjs.com/
+        clipboard.on('success', function(e) {
+            var buttonCaption = button.innerHTML;
+            //Add bgcolor
+            input.classList.add('bg-success');
+            input.classList.add('text-inverse-success');
+
+            button.innerHTML = 'Copied!';
+
+            setTimeout(function() {
+                button.innerHTML = buttonCaption;
+
+                // Remove bgcolor
+                input.classList.remove('bg-success'); 
+                input.classList.remove('text-inverse-success'); 
+            }, 3000);  // 3seconds
+
+            e.clearSelection();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            handleForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTModalShareEarn.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/top-up-wallet.js

@@ -0,0 +1,280 @@
+"use strict";
+
+// Class definition
+var KTModalTopUpWallet = function () {
+	// Elements
+	var modal;
+	var modalEl;
+
+	var stepper;
+	var form;
+	var formSubmitButton;
+	var formContinueButton;
+
+	// Variables
+	var stepperObj;
+	var validations = [];
+
+	// Private Functions
+	var initStepper = function () {
+		// Initialize Stepper
+		stepperObj = new KTStepper(stepper);
+
+		// Stepper change event(handle hiding submit button for the last step)
+		stepperObj.on('kt.stepper.changed', function (stepper) {
+			if (stepperObj.getCurrentStepIndex() === 4) {
+				formSubmitButton.classList.remove('d-none');
+				formSubmitButton.classList.add('d-inline-block');
+				formContinueButton.classList.add('d-none');
+			} else if (stepperObj.getCurrentStepIndex() === 5) {
+				formSubmitButton.classList.add('d-none');
+				formContinueButton.classList.add('d-none');
+			} else {
+				formSubmitButton.classList.remove('d-inline-block');
+				formSubmitButton.classList.remove('d-none');
+				formContinueButton.classList.remove('d-none');
+			}
+		});
+
+		// Validation before going to next page
+		stepperObj.on('kt.stepper.next', function (stepper) {
+			console.log('stepper.next');
+
+			// Validate form before change stepper step
+			var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step
+
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						stepper.goNext();
+
+						//KTUtil.scrollTop();
+					} else {
+						// Show error message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-light"
+							}
+						}).then(function () {
+							//KTUtil.scrollTop();
+						});
+					}
+				});
+			} else {
+				stepper.goNext();
+
+				KTUtil.scrollTop();
+			}
+		});
+
+		// Prev event
+		stepperObj.on('kt.stepper.previous', function (stepper) {
+			console.log('stepper.previous');
+
+			stepper.goPrevious();
+			KTUtil.scrollTop();
+		});
+
+		formSubmitButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Disable button to avoid multiple click 
+			formSubmitButton.disabled = true;
+
+			// Show loading indication
+			formSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+			// Simulate form submission
+			setTimeout(function () {
+				// Hide loading indication
+				formSubmitButton.removeAttribute('data-kt-indicator');
+
+				// Enable button
+				formSubmitButton.disabled = false;
+
+				stepperObj.goNext();
+				//KTUtil.scrollTop();
+			}, 2000);
+		});
+	}
+
+	// Init form inputs
+	var initForm = function () {	
+        // Handle currency swap logic
+        const currencyTypes = form.querySelectorAll('[name="currency_type"]');
+        const targets = form.querySelectorAll('[data-kt-modal-top-up-wallet-option]');
+        let value = "dollar";
+        currencyTypes.forEach(currency => {
+            currency.addEventListener('change', e => {
+                value = e.target.value;
+
+                targets.forEach(target => {
+                    target.classList.add('d-none');
+
+                    if(target.getAttribute('data-kt-modal-top-up-wallet-option') === value){
+                        target.classList.remove('d-none');
+                    }
+                });
+            });
+        });
+
+		// Handle top up wallet button
+		const restartButton = document.querySelector('#kt_modal_top_up_wallet_create_new');
+		restartButton.addEventListener('click', function () {
+			form.reset();
+			stepperObj.goTo(1);
+		});
+	}
+
+	// Init validation
+	var initValidation = function () {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		// Step 1
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					top_up_amount: {
+						validators: {
+							notEmpty: {
+								message: 'Top up amount is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+						eleInvalidClass: '',
+						eleValidClass: ''
+					})
+				}
+			}
+		));
+
+        // Step 2
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					payment_methods: {
+						validators: {
+							notEmpty: {
+								message: 'Payment method is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+						eleInvalidClass: '',
+						eleValidClass: ''
+					})
+				}
+			}
+		));
+
+        // Step 3
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					top_up_password: {
+						validators: {
+							notEmpty: {
+								message: 'Password is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+						eleInvalidClass: '',
+						eleValidClass: ''
+					})
+				}
+			}
+		));
+	}
+
+	// Handle cancel modal
+    const handleCancelAction = () => {
+        const closeButton = modalEl.querySelector('[data-kt-modal-action-type="close"]');
+        closeButton.addEventListener('click', e => {
+            cancelAction(e);
+        });
+
+        const cancelAction = (e) => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        }
+    }
+
+	return {
+		// Public Functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_top_up_wallet');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			stepper = document.querySelector('#kt_modal_top_up_wallet_stepper');
+			form = document.querySelector('#kt_modal_top_up_wallet_stepper_form');
+			formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
+			formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
+
+			initStepper();
+			initForm();
+			initValidation();
+			handleCancelAction();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalTopUpWallet.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/two-factor-authentication.js

@@ -0,0 +1,266 @@
+"use strict";
+
+// Class definition
+var KTModalTwoFactorAuthentication = function () {
+    // Private variables
+    var modal;
+    var modalObject;
+
+    var optionsWrapper;
+    var optionsSelectButton;
+
+    var smsWrapper;
+    var smsForm;
+    var smsSubmitButton;
+    var smsCancelButton;
+    var smsValidator;
+
+    var appsWrapper;
+    var appsForm;
+    var appsSubmitButton;
+    var appsCancelButton;
+    var appsValidator;
+
+    // Private functions
+    var handleOptionsForm = function() {
+        // Handle options selection
+        optionsSelectButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
+
+            optionsWrapper.classList.add('d-none');
+
+            if (option.value == 'sms') {
+                smsWrapper.classList.remove('d-none');
+            } else {
+                appsWrapper.classList.remove('d-none');
+            }
+        });
+    }
+
+	var showOptionsForm = function() {
+		optionsWrapper.classList.remove('d-none');
+		smsWrapper.classList.add('d-none');
+		appsWrapper.classList.add('d-none');
+    }
+
+    var handleSMSForm = function() {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		smsValidator = FormValidation.formValidation(
+			smsForm,
+			{
+				fields: {
+					'mobile': {
+						validators: {
+							notEmpty: {
+								message: 'Mobile no is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+        // Handle apps submition
+        smsSubmitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+			// Validate form before submit
+			if (smsValidator) {
+				smsValidator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						smsSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						smsSubmitButton.disabled = true;						
+
+						// Simulate ajax process
+						setTimeout(function() {
+							// Remove loading indication
+							smsSubmitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							smsSubmitButton.disabled = false;
+							
+							// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+							Swal.fire({
+								text: "Mobile number has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modalObject.hide();
+									showOptionsForm();
+								}
+							});
+
+							//smsForm.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error message.
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+        });
+
+        // Handle sms cancelation
+        smsCancelButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
+
+            optionsWrapper.classList.remove('d-none');
+            smsWrapper.classList.add('d-none');
+        });
+    }
+
+    var handleAppsForm = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		appsValidator = FormValidation.formValidation(
+			appsForm,
+			{
+				fields: {
+					'code': {
+						validators: {
+							notEmpty: {
+								message: 'Code is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+        // Handle apps submition
+        appsSubmitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+			// Validate form before submit
+			if (appsValidator) {
+				appsValidator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						appsSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						appsSubmitButton.disabled = true;
+
+						setTimeout(function() {
+							appsSubmitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							appsSubmitButton.disabled = false;
+							
+							// Show success message.
+							Swal.fire({
+								text: "Code has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modalObject.hide();
+									showOptionsForm();
+								}
+							});
+
+							//appsForm.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error message.
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+        });
+
+        // Handle apps cancelation
+        appsCancelButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
+
+            optionsWrapper.classList.remove('d-none');
+            appsWrapper.classList.add('d-none');
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            modal = document.querySelector('#kt_modal_two_factor_authentication');
+
+			if (!modal) {
+				return;
+			}
+
+            modalObject = new bootstrap.Modal(modal);
+
+            optionsWrapper = modal.querySelector('[data-kt-element="options"]');
+            optionsSelectButton = modal.querySelector('[data-kt-element="options-select"]');
+
+            smsWrapper = modal.querySelector('[data-kt-element="sms"]');
+            smsForm = modal.querySelector('[data-kt-element="sms-form"]');
+            smsSubmitButton = modal.querySelector('[data-kt-element="sms-submit"]');
+            smsCancelButton = modal.querySelector('[data-kt-element="sms-cancel"]');
+
+            appsWrapper = modal.querySelector('[data-kt-element="apps"]');
+            appsForm = modal.querySelector('[data-kt-element="apps-form"]');
+            appsSubmitButton = modal.querySelector('[data-kt-element="apps-submit"]');
+            appsCancelButton = modal.querySelector('[data-kt-element="apps-cancel"]');
+
+            // Handle forms
+            handleOptionsForm();
+            handleSMSForm();
+            handleAppsForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTModalTwoFactorAuthentication.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/upgrade-plan.js

@@ -0,0 +1,118 @@
+"use strict";
+
+// Class definition
+var KTModalUpgradePlan = function () {
+    // Private variables
+    var modal;
+	var planPeriodMonthButton;
+	var planPeriodAnnualButton;
+    var planUpgradeButton;
+
+    // Private functions
+	var changePlanPrices = function(type) {
+		var items = [].slice.call(modal.querySelectorAll('[data-kt-plan-price-month]'));
+
+		items.map(function (item) {
+			var monthPrice = item.getAttribute('data-kt-plan-price-month');
+			var annualPrice = item.getAttribute('data-kt-plan-price-annual');
+
+			if ( type === 'month' ) {
+				item.innerHTML = monthPrice;
+			} else if ( type === 'annual' ) {
+				item.innerHTML = annualPrice;
+			}
+		});
+	}
+
+    var handlePlanPeriodSelection = function() {
+        // Handle period change
+        planPeriodMonthButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            planPeriodMonthButton.classList.add('active');
+            planPeriodAnnualButton.classList.remove('active');
+
+            changePlanPrices('month');
+        });
+
+		planPeriodAnnualButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            planPeriodMonthButton.classList.remove('active');
+            planPeriodAnnualButton.classList.add('active');
+            
+            changePlanPrices('annual');
+        });
+    }
+    
+    var handlePlanUpgrade = function () {
+        if ( !planUpgradeButton ) {
+            return;
+        }
+
+        planUpgradeButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            var el = this;
+
+            swal.fire({
+                text: "Are you sure you would like to upgrade to selected plan ?",
+                icon: "warning",
+                buttonsStyling: false,
+                showDenyButton: true,
+                confirmButtonText: "Yes",
+                denyButtonText: 'No',
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    denyButton: "btn btn-light-danger"
+                }
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    el.setAttribute('data-kt-indicator', 'on');            
+                    el.disabled = true;
+
+                    setTimeout(function() {
+                        Swal.fire({
+                            text: 'Your subscription plan has been successfully upgraded', 
+                            icon: 'success',
+                            confirmButtonText: "Ok",
+                            buttonsStyling: false,
+                            customClass: {
+                                confirmButton: "btn btn-light-primary"
+                            }
+                        }).then((result) => {
+                            bootstrap.Modal.getInstance(modal).hide();
+                        })
+
+                    }, 2000);
+                } 
+            });            
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            modal = document.querySelector('#kt_modal_upgrade_plan');
+
+            if (!modal) {
+				return;
+			}
+
+			planPeriodMonthButton = modal.querySelector('[data-kt-plan="month"]');
+			planPeriodAnnualButton = modal.querySelector('[data-kt-plan="annual"]');
+            planUpgradeButton = document.querySelector('#kt_modal_upgrade_plan_btn');
+
+            // Handlers
+            handlePlanPeriodSelection();
+            handlePlanUpgrade();
+            changePlanPrices();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTModalUpgradePlan.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/modals/users-search.js

@@ -0,0 +1,77 @@
+"use strict";
+
+// Class definition
+var KTModalUserSearch = function () {
+    // Private variables
+    var element;
+    var suggestionsElement;
+    var resultsElement;
+    var wrapperElement;
+    var emptyElement;
+    var searchObject;
+
+    // Private functions
+    var processs = function (search) {
+        var timeout = setTimeout(function () {
+            var number = KTUtil.getRandomInt(1, 3);
+
+            // Hide recently viewed
+            suggestionsElement.classList.add('d-none');
+
+            if (number === 3) {
+                // Hide results
+                resultsElement.classList.add('d-none');
+                // Show empty message 
+                emptyElement.classList.remove('d-none');
+            } else {
+                // Show results
+                resultsElement.classList.remove('d-none');
+                // Hide empty message 
+                emptyElement.classList.add('d-none');
+            }
+
+            // Complete search
+            search.complete();
+        }, 1500);
+    }
+
+    var clear = function (search) {
+        // Show recently viewed
+        suggestionsElement.classList.remove('d-none');
+        // Hide results
+        resultsElement.classList.add('d-none');
+        // Hide empty message 
+        emptyElement.classList.add('d-none');
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_users_search_handler');
+
+            if (!element) {
+                return;
+            }
+
+            wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
+            suggestionsElement = element.querySelector('[data-kt-search-element="suggestions"]');
+            resultsElement = element.querySelector('[data-kt-search-element="results"]');
+            emptyElement = element.querySelector('[data-kt-search-element="empty"]');
+
+            // Initialize search handler
+            searchObject = new KTSearch(element);
+
+            // Search handler
+            searchObject.on('kt.search.process', processs);
+
+            // Clear handler
+            searchObject.on('kt.search.clear', clear);
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalUserSearch.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/utilities/search/horizontal.js

@@ -0,0 +1,40 @@
+"use strict";
+ 
+// Class definition
+var KTSearchHorizontal = function () {
+    // Private functions
+    var initAdvancedSearchForm = function () {
+       var form = document.querySelector('#kt_advanced_search_form');
+
+       // Init tags
+       var tags = form.querySelector('[name="tags"]');
+       new Tagify(tags);
+    }
+
+    var handleAdvancedSearchToggle = function () {
+        var link = document.querySelector('#kt_horizontal_search_advanced_link');
+
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            
+            if (link.innerHTML === "Advanced Search") {
+                link.innerHTML = "Hide Advanced Search";
+            } else {
+                link.innerHTML = "Advanced Search";
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initAdvancedSearchForm();
+            handleAdvancedSearchToggle();
+        }
+    }     
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSearchHorizontal.init();
+});