initial commit

think-backend.greaterchiangmai.com/public/.htaccess

@@ -0,0 +1,21 @@
+<IfModule mod_rewrite.c>
+    <IfModule mod_negotiation.c>
+        Options -MultiViews -Indexes
+    </IfModule>
+
+    RewriteEngine On
+
+    # Handle Authorization Header
+    RewriteCond %{HTTP:Authorization} .
+    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+
+    # Redirect Trailing Slashes If Not A Folder...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} (.+)/$
+    RewriteRule ^ %1 [L,R=301]
+
+    # Send Requests To Front Controller...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.php [L]
+</IfModule>

think-backend.greaterchiangmai.com/public/assets/js/custom/account/api-keys/api-keys.js

@@ -0,0 +1,68 @@
+"use strict";
+
+// Class definition
+var KTAccountAPIKeys = function () {
+    // Private functions
+    var initLicenceCopy = function() {
+        KTUtil.each(document.querySelectorAll('#kt_api_keys_table [data-action="copy"]'), function(button) {
+            var tr = button.closest('tr');
+            var license = KTUtil.find(tr, '[data-bs-target="license"]');
+
+            var clipboard = new ClipboardJS(button, {
+                target: license,
+                text: function() {
+                    return license.innerHTML;
+                }                 
+            });
+        
+            clipboard.on('success', function(e) {
+                // Icons
+                var svgIcon = button.querySelector('.svg-icon');                
+                var checkIcon = button.querySelector('.bi.bi-check');
+                
+                // exit if check icon is already shown
+                if (checkIcon) {
+                   return;  
+                }
+
+                // Create check icon
+                checkIcon = document.createElement('i');
+                checkIcon.classList.add('bi');
+                checkIcon.classList.add('bi-check');
+                checkIcon.classList.add('fs-2x');
+
+                // Append check icon
+                button.appendChild(checkIcon);
+
+                // Highlight target
+                license.classList.add('text-success');
+
+                // Hide copy icon
+                svgIcon.classList.add('d-none');
+
+                // Set 3 seconds timeout to hide the check icon and show copy icon back
+                setTimeout(function() {
+                    // Remove check icon
+                    svgIcon.classList.remove('d-none');
+                    // Show check icon back
+                    button.removeChild(checkIcon);
+
+                    // Remove highlight
+                    license.classList.remove('text-success');
+                }, 3000);
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initLicenceCopy();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountAPIKeys.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/billing/general.js

@@ -0,0 +1,138 @@
+"use strict";
+
+// Class definition
+var KTAccountBillingGeneral = function () {
+    // Private variables
+    var cancelSubscriptionButton;
+
+    // Private functions
+    var handlePlan = function () {
+        cancelSubscriptionButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            swal.fire({
+                text: "Are you sure you would like to cancel your subscription ?",
+                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) {
+                    Swal.fire({
+                        text: 'Your subscription has been canceled.', 
+                        icon: 'success',
+                        confirmButtonText: "Ok",
+                        buttonsStyling: false,
+                        customClass: {
+                            confirmButton: "btn btn-light-primary"
+                        }
+                    })
+                } 
+            });
+        });
+    }
+
+    var handleCardDelete = function() {
+        KTUtil.on(document.body,  '[data-kt-billing-action="card-delete"]', 'click', function(e) {
+            e.preventDefault();
+
+            var el = this;
+
+            swal.fire({
+                text: "Are you sure you would like to delete selected card ?",
+                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 selected card has been successfully deleted', 
+                            icon: 'success',
+                            confirmButtonText: "Ok",
+                            buttonsStyling: false,
+                            customClass: {
+                                confirmButton: "btn btn-light-primary"
+                            }
+                        }).then((result) => {
+                            el.closest('[data-kt-billing-element="card"]').remove();
+                        });
+                    }, 2000);
+                } 
+            });   
+        });
+    } 
+
+    var handleAddressDelete = function() {
+        KTUtil.on(document.body,  '[data-kt-billing-action="address-delete"]', 'click', function(e) {
+            e.preventDefault();
+
+            var el = this;
+
+            swal.fire({
+                text: "Are you sure you would like to delete selected address ?",
+                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 selected address has been successfully deleted', 
+                            icon: 'success',
+                            confirmButtonText: "Ok",
+                            buttonsStyling: false,
+                            customClass: {
+                                confirmButton: "btn btn-light-primary"
+                            }
+                        }).then((result) => {
+                            el.closest('[data-kt-billing-element="address"]').remove();
+                        });
+                    }, 2000);
+                } 
+            });   
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {            
+            cancelSubscriptionButton = document.querySelector('#kt_account_billing_cancel_subscription_btn');
+
+            if ( cancelSubscriptionButton ) {
+                handlePlan();
+            }            
+
+            handleCardDelete();
+            handleAddressDelete();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountBillingGeneral.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/orders/classic.js

@@ -0,0 +1,108 @@
+"use strict";
+
+// Class definition
+var KTDatatablesClassic = function () {
+    // Private functions
+
+    var initClassic = function () {
+
+        // Set date data order
+        const table = document.getElementById('kt_orders_classic');
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format('x');
+            dateRow[1].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        const datatable = $(table).DataTable({
+            "info": false,
+            'order': []
+        });
+
+        // Filter dropdown elements
+        const filterOrders = document.getElementById('kt_filter_orders');
+        const filterYear = document.getElementById('kt_filter_year');
+
+        // Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
+        filterOrders.addEventListener('change', function (e) {
+            datatable.column(3).search(e.target.value).draw();
+        });
+
+        // Filter by date --- official docs reference: https://momentjs.com/docs/
+        var minDate;
+        var maxDate;
+        filterYear.addEventListener('change', function (e) {
+            const value = e.target.value;
+            switch (value) {
+                case 'thisyear': {
+                    minDate = moment().startOf('year').format('x');
+                    maxDate = moment().endOf('year').format('x');
+                    datatable.draw();
+                    break;
+                }
+                case 'thismonth': {
+                    minDate = moment().startOf('month').format('x');
+                    maxDate = moment().endOf('month').format('x');
+                    datatable.draw();
+                    break;
+                }
+                case 'lastmonth': {
+                    minDate = moment().subtract(1, 'months').startOf('month').format('x');
+                    maxDate = moment().subtract(1, 'months').endOf('month').format('x');
+                    datatable.draw();
+                    break;
+                }
+                case 'last90days': {
+                    minDate = moment().subtract(30, 'days').format('x');
+                    maxDate = moment().format('x');
+                    datatable.draw();
+                    break;
+                }
+                default: {
+                    minDate = moment().subtract(100, 'years').startOf('month').format('x');
+                    maxDate = moment().add(1, 'months').endOf('month').format('x');
+                    datatable.draw();
+                    break;
+                }
+            }
+        });
+        
+        // Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
+        $.fn.dataTable.ext.search.push(
+            function (settings, data, dataIndex) {
+                var min = minDate;
+                var max = maxDate;
+                var date = parseFloat(moment(data[1]).format('x')) || 0; // use data for the age column
+
+                if ((isNaN(min) && isNaN(max)) ||
+                    (isNaN(min) && date <= max) ||
+                    (min <= date && isNaN(max)) ||
+                    (min <= date && date <= max)) {
+                    return true;
+                }
+                return false;
+            }
+        );
+
+        // Search --- official docs reference: https://datatables.net/reference/api/search()
+        var filterSearch = document.getElementById('kt_filter_search');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initClassic();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDatatablesClassic.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/referrals/referral-program.js

@@ -0,0 +1,43 @@
+"use strict";
+
+// Class definition
+var KTAccountReferralsReferralProgram = function () {
+    // Private functions
+
+    var initReferralProgrammClipboard = function() {
+        var button = document.querySelector('#kt_referral_program_link_copy_btn');
+        var input = document.querySelector('#kt_referral_link_input');
+        var clipboard = new ClipboardJS(button);
+
+        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 () {
+            initReferralProgrammClipboard();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountReferralsReferralProgram.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/security/license-usage.js

@@ -0,0 +1,68 @@
+"use strict";
+
+// Class definition
+var KTAccountSecurityLicenseUsage = function () {
+    // Private functions
+    var initLicenceCopy = function() {
+        KTUtil.each(document.querySelectorAll('#kt_security_license_usage_table [data-action="copy"]'), function(button) {
+            var tr = button.closest('tr');
+            var license = KTUtil.find(tr, '[data-bs-target="license"]');
+
+            var clipboard = new ClipboardJS(button, {
+                target: license,
+                text: function() {
+                    return license.innerHTML;
+                }
+            });
+        
+            clipboard.on('success', function(e) {
+                // Icons
+                var svgIcon = button.querySelector('.svg-icon');                
+                var checkIcon = button.querySelector('.bi.bi-check');
+                
+                // exit if check icon is already shown
+                if (checkIcon) {
+                   return;  
+                }
+
+                // Create check icon
+                checkIcon = document.createElement('i');
+                checkIcon.classList.add('bi');
+                checkIcon.classList.add('bi-check');
+                checkIcon.classList.add('fs-2x');
+
+                // Append check icon
+                button.appendChild(checkIcon);
+
+                // Highlight target
+                license.classList.add('text-success');
+
+                // Hide copy icon
+                svgIcon.classList.add('d-none');
+
+                // Set 3 seconds timeout to hide the check icon and show copy icon back
+                setTimeout(function() {
+                    // Remove check icon
+                    svgIcon.classList.remove('d-none');
+                    // Show check icon back
+                    button.removeChild(checkIcon);
+
+                    // Remove highlight
+                    license.classList.remove('text-success');
+                }, 3000);
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initLicenceCopy();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSecurityLicenseUsage.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/security/security-summary.js

@@ -0,0 +1,155 @@
+"use strict";
+
+// Class definition
+var KTAccountSecuritySummary = function () {
+    // Private functions
+    var initChart = function(tabSelector, chartSelector, data1, data2, initByDefault) {
+        var element = document.querySelector(chartSelector);
+        var height = parseInt(KTUtil.css(element, 'height'));
+
+        if (!element) {
+            return;
+        }
+ 
+        var options = {
+            series: [{
+                name: 'Net Profit',
+                data: data1
+            }, {
+                name: 'Revenue',
+                data: data2
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['35%'],
+                    borderRadius: 6
+                }
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            xaxis: {
+                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-400'),
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-400'),
+                        fontSize: '12px'
+                    }
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return "$" + val + " thousands"
+                    }
+                }
+            },
+            colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-gray-200')],
+            grid: {
+                borderColor: KTUtil.getCssVariableValue('--bs-gray-200'),
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+
+        var init = false;
+        var tab = document.querySelector(tabSelector);
+        
+        if (initByDefault === true) {
+            setTimeout(function() {
+                chart.render();
+                init = true;
+            }, 500);
+        }        
+
+        tab.addEventListener('shown.bs.tab', function (event) {
+            if (init == false) {
+                chart.render();
+                init = true;
+            }
+        })
+    } 
+
+    // Public methods
+    return {
+        init: function () {
+            initChart('#kt_security_summary_tab_hours_agents', '#kt_security_summary_chart_hours_agents', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 70, 90, 115, 95, 70, 84], true);
+            initChart('#kt_security_summary_tab_hours_clients', '#kt_security_summary_chart_hours_clients', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
+           
+            initChart('#kt_security_summary_tab_day', '#kt_security_summary_chart_day_agents', [50, 70, 80, 100, 90, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 60, 65, 80, 90, 100, 95, 70, 84], false);
+            initChart('#kt_security_summary_tab_day_clients', '#kt_security_summary_chart_day_clients', [50, 70, 100, 90, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 115, 80, 65, 80, 90, 115, 95, 70, 84], false);
+           
+            initChart('#kt_security_summary_tab_week', '#kt_security_summary_chart_week_agents', [50, 70, 75, 117, 80, 65, 80, 90, 115, 95, 50, 84], [50, 60, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
+            initChart('#kt_security_summary_tab_week_clients', '#kt_security_summary_chart_week_clients', [50, 70, 90, 117, 80, 65, 80, 90, 100, 80, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 100, 95, 70, 84], false);
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSecuritySummary.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/settings/deactivate-account.js

@@ -0,0 +1,116 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsDeactivateAccount = function () {
+    // Private variables
+    var form;
+    var validation;
+    var submitButton;
+
+    // Private functions
+    var initValidation = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validation = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    deactivate: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please check the box to deactivate your account'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    submitButton: new FormValidation.plugins.SubmitButton(),
+                    //defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+    }
+
+    var handleForm = function () {
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+
+                    swal.fire({
+                        text: "Are you sure you would like to deactivate your account?",
+                        icon: "warning",
+                        buttonsStyling: false,
+                        showDenyButton: true,
+                        confirmButtonText: "Yes",
+                        denyButtonText: 'No',
+                        customClass: {
+                            confirmButton: "btn btn-light-primary",
+                            denyButton: "btn btn-danger"
+                        }
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            Swal.fire({
+                                text: 'Your account has been deactivated.', 
+                                icon: 'success',
+                                confirmButtonText: "Ok",
+                                buttonsStyling: false,
+                                customClass: {
+                                    confirmButton: "btn btn-light-primary"
+                                }
+                            })
+                        } else if (result.isDenied) {
+                            Swal.fire({
+                                text: 'Account not deactivated.', 
+                                icon: 'info',
+                                confirmButtonText: "Ok",
+                                buttonsStyling: false,
+                                customClass: {
+                                    confirmButton: "btn btn-light-primary"
+                                }
+                            })
+                        }
+                    });
+
+                } 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-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            form = document.querySelector('#kt_account_deactivate_form');
+
+            if (!form) {
+                return;
+            }
+            
+            submitButton = document.querySelector('#kt_account_deactivate_account_submit');
+
+            initValidation();
+            handleForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsDeactivateAccount.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/settings/overview.js

@@ -0,0 +1,21 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsOverview = function () {
+    // Private functions
+    var initSettings = function() {
+
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initSettings();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsOverview.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/settings/profile-details.js

@@ -0,0 +1,155 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsProfileDetails = function () {
+    // Private variables
+    var form;
+    var submitButton;
+    var validation;
+
+    // Private functions
+    var initValidation = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validation = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    fname: {
+                        validators: {
+                            notEmpty: {
+                                message: 'First name is required'
+                            }
+                        }
+                    },
+                    lname: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Last name is required'
+                            }
+                        }
+                    },
+                    company: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Company name is required'
+                            }
+                        }
+                    },
+                    phone: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Contact phone number is required'
+                            }
+                        }
+                    },
+                    country: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a country'
+                            }
+                        }
+                    },
+                    timezone: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a timezone'
+                            }
+                        }
+                    },
+                    'communication[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select at least one communication method'
+                            }
+                        }
+                    },
+                    language: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a language'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    submitButton: new FormValidation.plugins.SubmitButton(),
+                    //defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Select2 validation integration
+        $(form.querySelector('[name="country"]')).on('change', function() {
+            // Revalidate the color field when an option is chosen
+            validation.revalidateField('country');
+        });
+
+        $(form.querySelector('[name="language"]')).on('change', function() {
+            // Revalidate the color field when an option is chosen
+            validation.revalidateField('language');
+        });
+
+        $(form.querySelector('[name="timezone"]')).on('change', function() {
+            // Revalidate the color field when an option is chosen
+            validation.revalidateField('timezone');
+        });
+    }
+
+    var handleForm = function () {
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+
+                    swal.fire({
+                        text: "Thank you! You've updated your basic info",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-light-primary"
+                        }
+                    });
+
+                } 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 fw-bold btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            form = document.getElementById('kt_account_profile_details_form');
+            
+            if (!form) {
+                return;
+            }
+
+            submitButton = form.querySelector('#kt_account_profile_details_submit');
+
+            initValidation();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsProfileDetails.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/account/settings/signin-methods.js

@@ -0,0 +1,236 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsSigninMethods = function () {
+    var signInForm;
+    var signInMainEl;
+    var signInEditEl;
+    var passwordMainEl;
+    var passwordEditEl;
+    var signInChangeEmail;
+    var signInCancelEmail;
+    var passwordChange;
+    var passwordCancel;
+
+    var toggleChangeEmail = function () {
+        signInMainEl.classList.toggle('d-none');
+        signInChangeEmail.classList.toggle('d-none');
+        signInEditEl.classList.toggle('d-none');
+    }
+
+    var toggleChangePassword = function () {
+        passwordMainEl.classList.toggle('d-none');
+        passwordChange.classList.toggle('d-none');
+        passwordEditEl.classList.toggle('d-none');
+    }
+
+    // Private functions
+    var initSettings = function () {  
+        if (!signInMainEl) {
+            return;
+        }        
+
+        // toggle UI
+        signInChangeEmail.querySelector('button').addEventListener('click', function () {
+            toggleChangeEmail();
+        });
+
+        signInCancelEmail.addEventListener('click', function () {
+            toggleChangeEmail();
+        });
+
+        passwordChange.querySelector('button').addEventListener('click', function () {
+            toggleChangePassword();
+        });
+
+        passwordCancel.addEventListener('click', function () {
+            toggleChangePassword();
+        });
+    }
+
+    var handleChangeEmail = function (e) {
+        var validation;        
+
+        if (!signInForm) {
+            return;
+        }
+
+        validation = FormValidation.formValidation(
+            signInForm,
+            {
+                fields: {
+                    emailaddress: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Email is required'
+                            },
+                            emailAddress: {
+                                message: 'The value is not a valid email address'
+                            }
+                        }
+                    },
+
+                    confirmemailpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Password is required'
+                            }
+                        }
+                    }
+                },
+
+                plugins: { //Learn more: https://formvalidation.io/guide/plugins
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row'
+                    })
+                }
+            }
+        );
+
+        signInForm.querySelector('#kt_signin_submit').addEventListener('click', function (e) {
+            e.preventDefault();
+            console.log('click');
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+                    swal.fire({
+                        text: "Sent password reset. Please check your email",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn font-weight-bold btn-light-primary"
+                        }
+                    }).then(function(){
+                        signInForm.reset();
+                        validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
+                        toggleChangeEmail();
+                    });
+                } 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 font-weight-bold btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    var handleChangePassword = function (e) {
+        var validation;
+
+        // form elements
+        var passwordForm = document.getElementById('kt_signin_change_password');
+
+        if (!passwordForm) {
+            return;
+        }
+
+        validation = FormValidation.formValidation(
+            passwordForm,
+            {
+                fields: {
+                    currentpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Current Password is required'
+                            }
+                        }
+                    },
+
+                    newpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'New Password is required'
+                            }
+                        }
+                    },
+
+                    confirmpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Confirm Password is required'
+                            },
+                            identical: {
+                                compare: function() {
+                                    return passwordForm.querySelector('[name="newpassword"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                },
+
+                plugins: { //Learn more: https://formvalidation.io/guide/plugins
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row'
+                    })
+                }
+            }
+        );
+
+        passwordForm.querySelector('#kt_password_submit').addEventListener('click', function (e) {
+            e.preventDefault();
+            console.log('click');
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+                    swal.fire({
+                        text: "Sent password reset. Please check your email",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn font-weight-bold btn-light-primary"
+                        }
+                    }).then(function(){
+                        passwordForm.reset();
+                        validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
+                        toggleChangePassword();
+                    });
+                } 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 font-weight-bold btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            signInForm = document.getElementById('kt_signin_change_email');
+            signInMainEl = document.getElementById('kt_signin_email');
+            signInEditEl = document.getElementById('kt_signin_email_edit');
+            passwordMainEl = document.getElementById('kt_signin_password');
+            passwordEditEl = document.getElementById('kt_signin_password_edit');
+            signInChangeEmail = document.getElementById('kt_signin_email_button');
+            signInCancelEmail = document.getElementById('kt_signin_cancel');
+            passwordChange = document.getElementById('kt_signin_password_button');
+            passwordCancel = document.getElementById('kt_password_cancel');
+
+            initSettings();
+            handleChangeEmail();
+            handleChangePassword();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsSigninMethods.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/calendar/calendar.js

@@ -0,0 +1,831 @@
+"use strict";
+
+// Class definition
+var KTAppCalendar = function () {
+    // Shared variables
+    // Calendar variables
+    var calendar;
+    var data = {
+        id: '',
+        eventName: '',
+        eventDescription: '',
+        eventLocation: '',
+        startDate: '',
+        endDate: '',
+        allDay: false
+    };
+
+    // Add event variables
+    var eventName;
+    var eventDescription;
+    var eventLocation;
+    var startDatepicker;
+    var startFlatpickr;
+    var endDatepicker;
+    var endFlatpickr;
+    var startTimepicker;
+    var startTimeFlatpickr;
+    var endTimepicker
+    var endTimeFlatpickr;
+    var modal;
+    var modalTitle;
+    var form;
+    var validator;
+    var addButton;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+
+    // View event variables
+    var viewEventName;
+    var viewAllDay;
+    var viewEventDescription;
+    var viewEventLocation;
+    var viewStartDate;
+    var viewEndDate;
+    var viewModal;
+    var viewEditButton;
+    var viewDeleteButton;
+
+
+    // Private functions
+    var initCalendarApp = function () {
+        // Define variables
+        var calendarEl = document.getElementById('kt_calendar_app');
+        var todayDate = moment().startOf('day');
+        var YM = todayDate.format('YYYY-MM');
+        var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
+        var TODAY = todayDate.format('YYYY-MM-DD');
+        var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
+
+        // Init calendar --- more info: https://fullcalendar.io/docs/initialize-globals
+        calendar = new FullCalendar.Calendar(calendarEl, {
+            //locale: 'es', // Set local --- more info: https://fullcalendar.io/docs/locale
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,timeGridDay'
+            },
+            initialDate: TODAY,
+            navLinks: true, // can click day/week names to navigate views
+            selectable: true,
+            selectMirror: true,
+
+            // Select dates action --- more info: https://fullcalendar.io/docs/select-callback
+            select: function (arg) {
+                formatArgs(arg);
+                handleNewEvent();
+            },
+
+            // Click event --- more info: https://fullcalendar.io/docs/eventClick
+            eventClick: function (arg) {
+                formatArgs({
+                    id: arg.event.id,
+                    title: arg.event.title,
+                    description: arg.event.extendedProps.description,
+                    location: arg.event.extendedProps.location,
+                    startStr: arg.event.startStr,
+                    endStr: arg.event.endStr,
+                    allDay: arg.event.allDay
+                });
+                
+                handleViewEvent();
+            },
+
+            editable: true,
+            dayMaxEvents: true, // allow "more" link when too many events
+            events: [
+                {
+                    id: uid(),
+                    title: 'All Day Event',
+                    start: YM + '-01',
+                    end: YM + '-02',
+                    description: 'Toto lorem ipsum dolor sit incid idunt ut',
+                    className: "fc-event-danger fc-event-solid-warning",
+                    location: 'Federation Square'
+                },
+                {
+                    id: uid(),
+                    title: 'Reporting',
+                    start: YM + '-14T13:30:00',
+                    description: 'Lorem ipsum dolor incid idunt ut labore',
+                    end: YM + '-14T14:30:00',
+                    className: "fc-event-success",
+                    location: 'Meeting Room 7.03'
+                },
+                {
+                    id: uid(),
+                    title: 'Company Trip',
+                    start: YM + '-02',
+                    description: 'Lorem ipsum dolor sit tempor incid',
+                    end: YM + '-03',
+                    className: "fc-event-primary",
+                    location: 'Seoul, Korea'
+
+                },
+                {
+                    id: uid(),
+                    title: 'ICT Expo 2021 - Product Release',
+                    start: YM + '-03',
+                    description: 'Lorem ipsum dolor sit tempor inci',
+                    end: YM + '-05',
+                    className: "fc-event-light fc-event-solid-primary",
+                    location: 'Melbourne Exhibition Hall'
+                },
+                {
+                    id: uid(),
+                    title: 'Dinner',
+                    start: YM + '-12',
+                    description: 'Lorem ipsum dolor sit amet, conse ctetur',
+                    end: YM + '-13',
+                    location: 'Squire\'s Loft'
+                },
+                {
+                    id: uid(),
+                    title: 'Repeating Event',
+                    start: YM + '-09T16:00:00',
+                    end: YM + '-09T17:00:00',
+                    description: 'Lorem ipsum dolor sit ncididunt ut labore',
+                    className: "fc-event-danger",
+                    location: 'General Area'
+                },
+                {
+                    id: uid(),
+                    title: 'Repeating Event',
+                    description: 'Lorem ipsum dolor sit amet, labore',
+                    start: YM + '-16T16:00:00',
+                    end: YM + '-16T17:00:00',
+                    location: 'General Area'
+                },
+                {
+                    id: uid(),
+                    title: 'Conference',
+                    start: YESTERDAY,
+                    end: TOMORROW,
+                    description: 'Lorem ipsum dolor eius mod tempor labore',
+                    className: "fc-event-primary",
+                    location: 'Conference Hall A'
+                },
+                {
+                    id: uid(),
+                    title: 'Meeting',
+                    start: TODAY + 'T10:30:00',
+                    end: TODAY + 'T12:30:00',
+                    description: 'Lorem ipsum dolor eiu idunt ut labore',
+                    location: 'Meeting Room 11.06'
+                },
+                {
+                    id: uid(),
+                    title: 'Lunch',
+                    start: TODAY + 'T12:00:00',
+                    end: TODAY + 'T14:00:00',
+                    className: "fc-event-info",
+                    description: 'Lorem ipsum dolor sit amet, ut labore',
+                    location: 'Cafeteria'
+                },
+                {
+                    id: uid(),
+                    title: 'Meeting',
+                    start: TODAY + 'T14:30:00',
+                    end: TODAY + 'T15:30:00',
+                    className: "fc-event-warning",
+                    description: 'Lorem ipsum conse ctetur adipi scing',
+                    location: 'Meeting Room 11.10'
+                },
+                {
+                    id: uid(),
+                    title: 'Happy Hour',
+                    start: TODAY + 'T17:30:00',
+                    end: TODAY + 'T21:30:00',
+                    className: "fc-event-info",
+                    description: 'Lorem ipsum dolor sit amet, conse ctetur',
+                    location: 'The English Pub'
+                },
+                {
+                    id: uid(),
+                    title: 'Dinner',
+                    start: TOMORROW + 'T18:00:00',
+                    end: TOMORROW + 'T21:00:00',
+                    className: "fc-event-solid-danger fc-event-light",
+                    description: 'Lorem ipsum dolor sit ctetur adipi scing',
+                    location: 'New York Steakhouse'
+                },
+                {
+                    id: uid(),
+                    title: 'Birthday Party',
+                    start: TOMORROW + 'T12:00:00',
+                    end: TOMORROW + 'T14:00:00',
+                    className: "fc-event-primary",
+                    description: 'Lorem ipsum dolor sit amet, scing',
+                    location: 'The English Pub'
+                },
+                {
+                    id: uid(),
+                    title: 'Site visit',
+                    start: YM + '-28',
+                    end: YM + '-29',
+                    className: "fc-event-solid-info fc-event-light",
+                    description: 'Lorem ipsum dolor sit amet, labore',
+                    location: '271, Spring Street'
+                }
+            ],
+
+            // Handle changing calendar views --- more info: https://fullcalendar.io/docs/datesSet
+            datesSet: function(){
+                // do some stuff
+            }
+        });
+
+        calendar.render();
+    }
+
+    // Init validator
+    const initValidator = () => {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'calendar_event_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Event name is required'
+                            }
+                        }
+                    },
+                    'calendar_event_start_date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Start date is required'
+                            }
+                        }
+                    },
+                    'calendar_event_end_date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'End date is required'
+                            }
+                        }
+                    }
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+    }
+
+    // Initialize datepickers --- more info: https://flatpickr.js.org/
+    const initDatepickers = () => {
+        startFlatpickr = flatpickr(startDatepicker, {
+            enableTime: false,
+            dateFormat: "Y-m-d",
+        });
+
+        endFlatpickr = flatpickr(endDatepicker, {
+            enableTime: false,
+            dateFormat: "Y-m-d",
+        });
+
+        startTimeFlatpickr = flatpickr(startTimepicker, {
+            enableTime: true,
+            noCalendar: true,
+            dateFormat: "H:i",
+        });
+
+        endTimeFlatpickr = flatpickr(endTimepicker, {
+            enableTime: true,
+            noCalendar: true,
+            dateFormat: "H:i",
+        });
+    }
+
+    // Handle add button
+    const handleAddButton = () => {
+        addButton.addEventListener('click', e => {
+            // Reset form data
+            data = {
+                id: '',
+                eventName: '',
+                eventDescription: '',
+                startDate: new Date(),
+                endDate: new Date(),
+                allDay: false
+            };
+            handleNewEvent();
+        });
+    }
+
+    // Handle add new event
+    const handleNewEvent = () => {
+        // Update modal title
+        modalTitle.innerText = "Add a New Event";
+
+        modal.show();
+
+        // Select datepicker wrapper elements
+        const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
+
+        // Handle all day toggle
+        const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
+        allDayToggle.addEventListener('click', e => {
+            if (e.target.checked) {
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.add('d-none');
+                });
+            } else {
+                endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.remove('d-none');
+                });
+            }
+        });
+
+        populateForm(data);
+
+        // Handle submit form
+        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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        // Simulate form submission
+                        setTimeout(function () {
+                            // Simulate form submission
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "New event added to calendar!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Detect if is all day event
+                                    let allDayEvent = false;
+                                    if (allDayToggle.checked) { allDayEvent = true; }
+                                    if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
+
+                                    // Merge date & time
+                                    var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
+                                    var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
+                                    if (!allDayEvent) {
+                                        const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
+                                        const endDate = startDate;
+                                        const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+                                        const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+
+                                        startDateTime = startDate + 'T' + startTime;
+                                        endDateTime = endDate + 'T' + endTime;
+                                    }
+
+                                    // Add new event to calendar
+                                    calendar.addEvent({
+                                        id: uid(),
+                                        title: eventName.value,
+                                        description: eventDescription.value,
+                                        location: eventLocation.value,
+                                        start: startDateTime,
+                                        end: endDateTime,
+                                        allDay: allDayEvent
+                                    });
+                                    calendar.render();
+
+                                    // Reset form for demo purposes only
+                                    form.reset();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning 
+                        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 edit event
+    const handleEditEvent = () => {
+        // Update modal title
+        modalTitle.innerText = "Edit an Event";
+
+        modal.show();
+
+        // Select datepicker wrapper elements
+        const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
+
+        // Handle all day toggle
+        const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
+        allDayToggle.addEventListener('click', e => {
+            if (e.target.checked) {
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.add('d-none');
+                });
+            } else {
+                endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.remove('d-none');
+                });
+            }
+        });
+
+        populateForm(data);
+
+        // Handle submit form
+        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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        // Simulate form submission
+                        setTimeout(function () {
+                            // Simulate form submission
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "New event added to calendar!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Remove old event
+                                    calendar.getEventById(data.id).remove();
+
+                                    // Detect if is all day event
+                                    let allDayEvent = false;
+                                    if (allDayToggle.checked) { allDayEvent = true; }
+                                    if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
+
+                                    // Merge date & time
+                                    var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
+                                    var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
+                                    if (!allDayEvent) {
+                                        const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
+                                        const endDate = startDate;
+                                        const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+                                        const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+
+                                        startDateTime = startDate + 'T' + startTime;
+                                        endDateTime = endDate + 'T' + endTime;
+                                    }
+
+                                    // Add new event to calendar
+                                    calendar.addEvent({
+                                        id: uid(),
+                                        title: eventName.value,
+                                        description: eventDescription.value,
+                                        location: eventLocation.value,
+                                        start: startDateTime,
+                                        end: endDateTime,
+                                        allDay: allDayEvent
+                                    });
+                                    calendar.render();
+
+                                    // Reset form for demo purposes only
+                                    form.reset();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning 
+                        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 view event
+    const handleViewEvent = () => {
+        viewModal.show();
+
+        // Detect all day event
+        var eventNameMod;
+        var startDateMod;
+        var endDateMod;
+
+        // Generate labels
+        if (data.allDay) {
+            eventNameMod = 'All Day';
+            startDateMod = moment(data.startDate).format('Do MMM, YYYY');
+            endDateMod = moment(data.endDate).format('Do MMM, YYYY');
+        } else {
+            eventNameMod = '';
+            startDateMod = moment(data.startDate).format('Do MMM, YYYY - h:mm a');
+            endDateMod = moment(data.endDate).format('Do MMM, YYYY - h:mm a');
+        }
+
+        // Populate view data
+        viewEventName.innerText = data.eventName;
+        viewAllDay.innerText = eventNameMod;
+        viewEventDescription.innerText = data.eventDescription ? data.eventDescription : '--';
+        viewEventLocation.innerText = data.eventLocation ? data.eventLocation : '--';
+        viewStartDate.innerText = startDateMod;
+        viewEndDate.innerText = endDateMod;
+    }
+
+    // Handle delete event
+    const handleDeleteEvent = () => {
+        viewDeleteButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to delete this event?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    calendar.getEventById(data.id).remove();
+
+                    viewModal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your event was not deleted!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Handle edit button
+    const handleEditButton = () => {
+        viewEditButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            viewModal.hide();
+            handleEditEvent();
+        });
+    }
+
+    // Handle cancel button
+    const handleCancelButton = () => {
+        // Edit event modal cancel button
+        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",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Handle close button
+    const handleCloseButton = () => {
+        // Edit event modal close button
+        closeButton.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",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Handle view button
+    const handleViewButton = () => {
+        const viewButton = document.querySelector('#kt_calendar_event_view_button');
+        viewButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            hidePopovers();
+            handleViewEvent();
+        });
+    }
+
+    // Helper functions
+
+    // Reset form validator on modal close
+    const resetFormValidator = (element) => {
+        // Target modal hidden event --- For more info: https://getbootstrap.com/docs/5.0/components/modal/#events
+        element.addEventListener('hidden.bs.modal', e => {
+            if (validator) {
+                // Reset form validator. For more info: https://formvalidation.io/guide/api/reset-form
+                validator.resetForm(true);
+            }
+        });
+    }
+
+    // Populate form 
+    const populateForm = () => {
+        eventName.value = data.eventName ? data.eventName : '';
+        eventDescription.value = data.eventDescription ? data.eventDescription : '';
+        eventLocation.value = data.eventLocation ? data.eventLocation : '';
+        startFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+
+        // Handle null end dates
+        const endDate = data.endDate ? data.endDate : moment(data.startDate).format();
+        endFlatpickr.setDate(endDate, true, 'Y-m-d');
+
+        const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
+        const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
+        if (data.allDay) {
+            allDayToggle.checked = true;
+            datepickerWrappers.forEach(dw => {
+                dw.classList.add('d-none');
+            });
+        } else {
+            startTimeFlatpickr.setDate(data.startDate, true, 'Y-m-d H:i');
+            endTimeFlatpickr.setDate(data.endDate, true, 'Y-m-d H:i');
+            endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+            allDayToggle.checked = false;
+            datepickerWrappers.forEach(dw => {
+                dw.classList.remove('d-none');
+            });
+        }
+    }
+
+    // Format FullCalendar reponses
+    const formatArgs = (res) => {
+        data.id = res.id;
+        data.eventName = res.title;
+        data.eventDescription = res.description;
+        data.eventLocation = res.location;
+        data.startDate = res.startStr;
+        data.endDate = res.endStr;
+        data.allDay = res.allDay;
+    }
+
+    // Generate unique IDs for events
+    const uid = () => {
+        return Date.now().toString() + Math.floor(Math.random() * 1000).toString();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            // Define variables
+            // Add event modal
+            const element = document.getElementById('kt_modal_add_event');
+            form = element.querySelector('#kt_modal_add_event_form');
+            eventName = form.querySelector('[name="calendar_event_name"]');
+            eventDescription = form.querySelector('[name="calendar_event_description"]');
+            eventLocation = form.querySelector('[name="calendar_event_location"]');
+            startDatepicker = form.querySelector('#kt_calendar_datepicker_start_date');
+            endDatepicker = form.querySelector('#kt_calendar_datepicker_end_date');
+            startTimepicker = form.querySelector('#kt_calendar_datepicker_start_time');
+            endTimepicker = form.querySelector('#kt_calendar_datepicker_end_time');
+            addButton = document.querySelector('[data-kt-calendar="add"]');
+            submitButton = form.querySelector('#kt_modal_add_event_submit');
+            cancelButton = form.querySelector('#kt_modal_add_event_cancel');
+            closeButton = element.querySelector('#kt_modal_add_event_close');
+            modalTitle = form.querySelector('[data-kt-calendar="title"]');
+            modal = new bootstrap.Modal(element);
+
+            // View event modal
+            const viewElement = document.getElementById('kt_modal_view_event');
+            viewModal = new bootstrap.Modal(viewElement);
+            viewEventName = viewElement.querySelector('[data-kt-calendar="event_name"]');
+            viewAllDay = viewElement.querySelector('[data-kt-calendar="all_day"]');
+            viewEventDescription = viewElement.querySelector('[data-kt-calendar="event_description"]');
+            viewEventLocation = viewElement.querySelector('[data-kt-calendar="event_location"]');
+            viewStartDate = viewElement.querySelector('[data-kt-calendar="event_start_date"]');
+            viewEndDate = viewElement.querySelector('[data-kt-calendar="event_end_date"]');
+            viewEditButton = viewElement.querySelector('#kt_modal_view_event_edit');
+            viewDeleteButton = viewElement.querySelector('#kt_modal_view_event_delete');
+
+            initCalendarApp();
+            initValidator();
+            initDatepickers();
+            handleEditButton();
+            handleAddButton();
+            handleDeleteEvent();
+            handleCancelButton();
+            handleCloseButton();
+            resetFormValidator(element);
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppCalendar.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/chat/chat.js

@@ -0,0 +1,72 @@
+"use strict";
+
+// Class definition
+var KTAppChat = function () {
+	// Private functions
+	var handeSend = function (element) {
+		if (!element) {
+			return;
+		}
+
+		// Handle send
+		KTUtil.on(element, '[data-kt-element="input"]', 'keydown', function(e) {
+			if (e.keyCode == 13) {
+				handeMessaging(element);
+				e.preventDefault();
+
+				return false;
+			}
+		});
+
+		KTUtil.on(element, '[data-kt-element="send"]', 'click', function(e) {
+			handeMessaging(element);
+		});
+	}
+
+	var handeMessaging = function(element) {
+		var messages = element.querySelector('[data-kt-element="messages"]');
+		var input = element.querySelector('[data-kt-element="input"]');
+
+        if (input.value.length === 0 ) {
+            return;
+        }
+
+		var messageOutTemplate = messages.querySelector('[data-kt-element="template-out"]');
+		var messageInTemplate = messages.querySelector('[data-kt-element="template-in"]');
+		var message;
+		
+		// Show example outgoing message
+		message = messageOutTemplate.cloneNode(true);
+		message.classList.remove('d-none');
+		message.querySelector('[data-kt-element="message-text"]').innerText = input.value;		
+		input.value = '';
+		messages.appendChild(message);
+		messages.scrollTop = messages.scrollHeight;
+		
+		
+		setTimeout(function() {			
+			// Show example incoming message
+			message = messageInTemplate.cloneNode(true);			
+			message.classList.remove('d-none');
+			message.querySelector('[data-kt-element="message-text"]').innerText = 'Thank you for your awesome support!';
+			messages.appendChild(message);
+			messages.scrollTop = messages.scrollHeight;
+		}, 2000);
+	}
+
+	// Public methods
+	return {
+		init: function(element) {
+			handeSend(element);
+        }
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	// Init inline chat messenger
+    KTAppChat.init(document.querySelector('#kt_chat_messenger'));
+
+	// Init drawer chat messenger
+	KTAppChat.init(document.querySelector('#kt_drawer_chat_messenger'));
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/contacts/edit-contact.js

@@ -0,0 +1,160 @@
+"use strict";
+
+// Class definition
+var KTAppContactEdit = function () {
+    // Shared variables
+
+
+    // Private functions
+    const initForm = () => {
+        // Select form
+        const form = document.getElementById('kt_ecommerce_settings_general_form');
+
+        if (!form) {
+            return;
+        }
+
+        // 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 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-contacts-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"
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 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 with flags
+    const initSelect2Flags = () => {
+        // Format options
+        var optionFormat = function(item) {
+            if ( !item.id ) {
+                return item.text;
+            }
+
+            var span = document.createElement('span');
+            var template = '';
+
+            template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle me-2" style="height:19px;" alt="image"/>';
+            template += item.text;
+
+            span.innerHTML = template;
+
+            return $(span);
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+
+            initForm();
+            initSelect2Flags();
+
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppContactEdit.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/contacts/view-contact.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Class definition
+var KTAppContactView = function () {
+    // Private functions
+    const handleDeleteButton = () => {
+        // Select form
+        const deleteButton = document.getElementById('kt_contact_delete');
+
+        if (!deleteButton) {
+            return;
+        }
+
+        deleteButton.addEventListener('click', e => {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Show popup confirmation 
+            Swal.fire({
+                text: "Delete contact confirmation",
+                icon: "warning",
+                buttonsStyling: false,
+                showCancelButton: true,
+                confirmButtonText: "Yes, delete it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-danger",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "Contact has been deleted!",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary"
+                        }
+                    }).then(function (result) {
+                        if (result.value) {
+                            // Redirect to customers list page
+                            window.location = deleteButton.getAttribute("data-kt-redirect");
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Contact has not been deleted!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+
+            handleDeleteButton();
+
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppContactView.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/add.js

@@ -0,0 +1,238 @@
+"use strict";
+
+// Class definition
+var KTModalCustomersAdd = function () {
+    var submitButton;
+    var cancelButton;
+	var closeButton;
+    var validator;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var handleForm = function () {
+        // 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: 'Customer name is required'
+							}
+						}
+					},
+                    'email': {
+						validators: {
+							notEmpty: {
+								message: 'Customer email is required'
+							}
+						}
+					},
+					'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'
+							}
+						}
+					},
+					'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: ''
+					})
+				}
+			}
+		);
+
+		// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="country"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+		// 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 submit button whilst loading
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							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) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+
+									// Redirect to customers list page
+									window.location = form.getAttribute("data-kt-redirect");
+								}
+							});							
+						}, 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-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",
+                        }
+                    });
+                }
+            });
+        });
+
+		closeButton.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
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_customer'));
+
+            form = document.querySelector('#kt_modal_add_customer_form');
+            submitButton = form.querySelector('#kt_modal_add_customer_submit');
+            cancelButton = form.querySelector('#kt_modal_add_customer_cancel');
+			closeButton = form.querySelector('#kt_modal_add_customer_close');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalCustomersAdd.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/list/export.js

@@ -0,0 +1,189 @@
+"use strict";
+
+// Class definition
+var KTCustomersExport = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+	var closeButton;
+    var validator;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var handleForm = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+                    'date': {
+						validators: {
+							notEmpty: {
+								message: 'Date range 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							Swal.fire({
+								text: "Customer list has been successfully exported!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;        
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 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-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",
+                        }
+                    });
+                }
+            });
+        });
+
+		closeButton.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",
+                        }
+                    });
+                }
+            });
+		});
+    }
+
+    var initForm = function () {
+        const datepicker = form.querySelector("[name=date]");
+        
+        // Handle datepicker range -- For more info on flatpickr plugin, please visit: https://flatpickr.js.org/
+        $(datepicker).flatpickr({
+            altInput: true,
+            altFormat: "F j, Y",
+            dateFormat: "Y-m-d",
+            mode: "range"
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_customers_export_modal');
+            modal = new bootstrap.Modal(element);
+
+            form = document.querySelector('#kt_customers_export_form');
+            submitButton = form.querySelector('#kt_customers_export_submit');
+            cancelButton = form.querySelector('#kt_customers_export_cancel');
+			closeButton = element.querySelector('#kt_customers_export_close');
+
+            handleForm();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersExport.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/list/list.js

@@ -0,0 +1,282 @@
+"use strict";
+
+// Class definition
+var KTCustomersList = function () {
+    // Define shared variables
+    var datatable;
+    var filterMonth;
+    var filterPayment;
+    var table
+
+    // Private functions
+    var initCustomerList = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
+            dateRow[5].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)
+            ]
+        });
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleDeleteRows();
+            toggleToolbars();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-customer-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Filter Datatable
+    var handleFilterDatatable = () => {
+        // Select filter options
+        filterMonth = $('[data-kt-customer-table-filter="month"]');
+        filterPayment = document.querySelectorAll('[data-kt-customer-table-filter="payment_type"] [name="payment_type"]');
+        const filterButton = document.querySelector('[data-kt-customer-table-filter="filter"]');
+
+        // Filter datatable on submit
+        filterButton.addEventListener('click', function () {
+            // Get filter values
+            const monthValue = filterMonth.val();
+            let paymentValue = '';
+
+            // Get payment value
+            filterPayment.forEach(r => {
+                if (r.checked) {
+                    paymentValue = r.value;
+                }
+
+                // Reset payment value if "All" is selected
+                if (paymentValue === 'all') {
+                    paymentValue = '';
+                }
+            });
+
+            // Build filter string from filter options
+            const filterString = monthValue + ' ' + paymentValue;
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search(filterString).draw();
+        });
+    }
+
+    // Delete customer
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const customerName = parent.querySelectorAll('td')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + customerName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + customerName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Reset Filter
+    var handleResetForm = () => {
+        // Select reset button
+        const resetButton = document.querySelector('[data-kt-customer-table-filter="reset"]');
+
+        // Reset datatable
+        resetButton.addEventListener('click', function () {
+            // Reset month
+            filterMonth.val(null).trigger('change');
+
+            // Reset payment type
+            filterPayment[0].checked = true;
+
+            // Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search('').draw();
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        const deleteSelected = document.querySelector('[data-kt-customer-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Define variables
+        const toolbarBase = document.querySelector('[data-kt-customer-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-customer-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-customer-table-select="selected_count"]');
+
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_customers_table');
+            
+            if (!table) {
+                return;
+            }
+
+            initCustomerList();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleFilterDatatable();
+            handleDeleteRows();
+            handleResetForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersList.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/update.js

@@ -0,0 +1,131 @@
+"use strict";
+
+// Class definition
+var KTModalUpdateCustomer = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var initForm = function () {
+        // Action buttons
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Show loading indication
+            submitButton.setAttribute('data-kt-indicator', 'on');
+
+            // Simulate form submission
+            setTimeout(function () {
+                // Simulate form submission
+                submitButton.removeAttribute('data-kt-indicator');
+
+                // 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);
+        });
+
+        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",
+                        }
+                    });
+                }
+            });
+        });
+
+        closeButton.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
+            element = document.querySelector('#kt_modal_update_customer');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_update_customer_form');
+            submitButton = form.querySelector('#kt_modal_update_customer_submit');
+            cancelButton = form.querySelector('#kt_modal_update_customer_cancel');
+            closeButton = element.querySelector('#kt_modal_update_customer_close');
+
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalUpdateCustomer.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/add-payment.js

@@ -0,0 +1,207 @@
+"use strict";
+
+// Class definition
+var KTModalAddPayment = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var validator;
+    var newBalance;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var initForm = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'invoice': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Invoice number is required'
+                            }
+                        }
+                    },
+                    'status': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Invoice status is required'
+                            }
+                        }
+                    },
+                    'amount': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Invoice amount is required'
+                            }
+                        }
+                    }
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="status"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('status');
+        });
+
+        // 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        // Simulate form submission
+                        setTimeout(function () {
+                            // Simulate form submission
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // 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();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Reset form for demo purposes only
+                                    form.reset();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning 
+                        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",
+                        }
+                    });
+                }
+            });
+        });
+
+        closeButton.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
+            element = document.querySelector('#kt_modal_add_payment');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_add_payment_form');
+            submitButton = form.querySelector('#kt_modal_add_payment_submit');
+            cancelButton = form.querySelector('#kt_modal_add_payment_cancel');
+            closeButton = element.querySelector('#kt_modal_add_payment_close');
+
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalAddPayment.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/adjust-balance.js

@@ -0,0 +1,241 @@
+"use strict";
+
+// Class definition
+var KTModalAdjustBalance = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var validator;
+    var maskInput;
+    var newBalance;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var initForm = function () {
+        // Init inputmask plugin --- For more info please refer to the official documentation here: https://github.com/RobinHerbots/Inputmask
+        Inputmask("US$ 9,999,999.99", {
+            "numericInput": true
+        }).mask("#kt_modal_inputmask");
+    }
+
+    var handleBalanceCalculator = function () {
+        // Select elements
+        const currentBalance = element.querySelector('[kt-modal-adjust-balance="current_balance"]');
+        newBalance = element.querySelector('[kt-modal-adjust-balance="new_balance"]');
+        maskInput = document.getElementById('kt_modal_inputmask');
+
+        // Get current balance value
+        const isNegative = currentBalance.innerHTML.includes('-');
+        let currentValue = parseFloat(currentBalance.innerHTML.replace(/[^0-9.]/g, '').replace(',', ''));
+        currentValue = isNegative ? currentValue * -1 : currentValue; 
+
+        // On change event for inputmask
+        let maskValue;
+        maskInput.addEventListener('focusout', function (e) {
+            // Get inputmask value on change
+            maskValue = parseFloat(e.target.value.replace(/[^0-9.]/g, '').replace(',', ''));
+
+            // Set mask value as 0 when NaN detected
+            if(isNaN(maskValue)){
+                maskValue = 0;
+            }
+
+            // Calculate & set new balance value
+            newBalance.innerHTML = 'US$ ' + (maskValue + currentValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
+        });
+    }
+
+    // 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: {
+                    'adjustment': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Adjustment type is required'
+                            }
+                        }
+                    },
+                    'amount': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Amount is required'
+                            }
+                        }
+                    }
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="adjustment"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('adjustment');
+        });
+
+        // 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        // Simulate form submission
+                        setTimeout(function () {
+                            // Simulate form submission
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // 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();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Reset form for demo purposes only
+                                    form.reset();
+                                    newBalance.innerHTML = "--";
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning 
+                        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",
+                        }
+                    });
+                }
+            });
+        });
+
+        closeButton.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
+            element = document.querySelector('#kt_modal_adjust_balance');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_adjust_balance_form');
+            submitButton = form.querySelector('#kt_modal_adjust_balance_submit');
+            cancelButton = form.querySelector('#kt_modal_adjust_balance_cancel');
+            closeButton = element.querySelector('#kt_modal_adjust_balance_close');
+
+            initForm();
+            handleBalanceCalculator();
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalAdjustBalance.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/invoices.js

@@ -0,0 +1,129 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewInvoices = function () {
+
+    // Private functions
+    // Init current year datatable
+    var initInvoiceYearCurrent = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_1';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2020 datatable
+    var initInvoiceYear2020 = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_2';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2019 datatable
+    var initInvoiceYear2019 = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_3';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2018 datatable
+    var initInvoiceYear2018 = function () {
+        // Define table element
+        const id = '#kt_customer_details_invoices_table_4';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initInvoiceYearCurrent();
+            initInvoiceYear2020();
+            initInvoiceYear2019();
+            initInvoiceYear2018();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewInvoices.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/payment-method.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentMethod = function () {
+
+    // Private functions
+    var initPaymentMethod = function () {
+        // Define variables
+        const table = document.getElementById('kt_customer_view_payment_method');
+        const tableRows = table.querySelectorAll('[ data-kt-customer-payment-method="row"]');
+
+        tableRows.forEach(row => {
+            // Select delete button
+            const deleteButton = row.querySelector('[data-kt-customer-payment-method="delete"]');
+
+            // Delete button action
+            deleteButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Popup confirmation
+                Swal.fire({
+                    text: "Are you sure you would like to delete this card?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete it!",
+                    cancelButtonText: "No, return",
+                    customClass: {
+                        confirmButton: "btn btn-primary",
+                        cancelButton: "btn btn-active-light"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        row.remove();
+                        modal.hide(); // Hide modal				
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: "Your card was not deleted!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+        });
+    }
+
+    // Handle set as primary button
+    const handlePrimaryButton = () => {
+        // Define variable
+        const button = document.querySelector('[data-kt-payment-mehtod-action="set_as_primary"]');
+
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Popup confirmation
+            Swal.fire({
+                text: "Are you sure you would like to set this card as primary?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, set it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "Your card was set to primary!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your card was not set to primary!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initPaymentMethod();
+            handlePrimaryButton();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentMethod.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/payment-table.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentTable = function () {
+
+    // Define shared variables
+    var datatable;
+    var table = document.querySelector('#kt_table_customers_payment');
+
+    // Private functions
+    var initCustomerView = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
+            dateRow[3].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 5 (actions)
+            ]
+        });
+    }
+
+    // Delete customer
+    var deleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
+        
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const invoiceNumber = parent.querySelectorAll('td')[0].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + invoiceNumber + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + invoiceNumber + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        }).then(function () {
+                            // Detect checked checkboxes
+                            toggleToolbars();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            if (!table) {
+                return;
+            }
+
+            initCustomerView();
+            deleteRows();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentTable.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/statement.js

@@ -0,0 +1,129 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewStatements = function () {
+
+    // Private functions
+    // Init current year datatable
+    var initStatementYearCurrent = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_1';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2020 datatable
+    var initStatementYear2020 = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_2';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2019 datatable
+    var initStatementYear2019 = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_3';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Init year 2018 datatable
+    var initStatementYear2018 = function () {
+        // Define table element
+        const id = '#kt_customer_view_statement_table_4';
+        var table = document.querySelector(id);
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        var datatable = $(id).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
+            ]
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initStatementYearCurrent();
+            initStatementYear2020();
+            initStatementYear2019();
+            initStatementYear2018();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewStatements.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/categories.js

@@ -0,0 +1,114 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceCategories = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
+            ]
+        });
+
+        // Re-init functions on datatable re-draws
+        datatable.on('draw', function () {
+            handleDeleteRows();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-category-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete cateogry
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-category-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get category name
+                const categoryName = parent.querySelector('[data-kt-ecommerce-category-filter="category_name"]').innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + categoryName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + categoryName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: categoryName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_category_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            handleSearchDatatable();
+            handleDeleteRows();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceCategories.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/products.js

@@ -0,0 +1,128 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceProducts = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+            'columnDefs': [
+                { render: DataTable.render.number(',', '.', 2), targets: 4},
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 7 }, // Disable ordering on column 7 (actions)
+            ]
+        });
+
+        // Re-init functions on datatable re-draws
+        datatable.on('draw', function () {
+            handleDeleteRows();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-product-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-product-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if(value === 'all'){
+                value = '';
+            }
+            datatable.column(6).search(value).draw();
+        });
+    }
+
+    // Delete cateogry
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-product-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get category name
+                const productName = parent.querySelector('[data-kt-ecommerce-product-filter="product_name"]').innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + productName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + productName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: productName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_products_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            handleSearchDatatable();
+            handleStatusFilter();
+            handleDeleteRows();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceProducts.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/save-category.js

@@ -0,0 +1,287 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSaveCategory = function () {
+
+    // Private functions
+
+    // Init quill editor
+    const initQuill = () => {
+        // Define all elements for quill editor
+        const elements = [
+            '#kt_ecommerce_add_category_description',
+            '#kt_ecommerce_add_category_meta_description'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get quill element
+            let quill = document.querySelector(element);
+
+            // Break if element not found
+            if (!quill) {
+                return;
+            }
+
+            // Init quill --- more info: https://quilljs.com/docs/quickstart/
+            quill = new Quill(element, {
+                modules: {
+                    toolbar: [
+                        [{
+                            header: [1, 2, false]
+                        }],
+                        ['bold', 'italic', 'underline'],
+                        ['image', 'code-block']
+                    ]
+                },
+                placeholder: 'Type your text here...',
+                theme: 'snow' // or 'bubble'
+            });
+        });
+
+    }
+
+    // Init tagify
+    const initTagify = () => {
+        // Define all elements for tagify
+        const elements = [
+            '#kt_ecommerce_add_category_meta_keywords'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get tagify element
+            const tagify = document.querySelector(element);
+
+            // Break if element not found
+            if (!tagify) {
+                return;
+            }
+
+            // Init tagify --- more info: https://yaireo.github.io/tagify/
+            new Tagify(tagify);
+        });
+    }
+
+    // Init form repeater --- more info: https://github.com/DubFriend/jquery.repeater
+    const initFormRepeater = () => {
+        $('#kt_ecommerce_add_category_conditions').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+
+                // Init select2 on new repeated items
+                initConditionsSelect2();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    // Init condition select2
+    const initConditionsSelect2 = () => {
+        // Tnit new repeating condition types
+        const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_type"]');
+        allConditionTypes.forEach(type => {
+            if ($(type).hasClass("select2-hidden-accessible")) {
+                return;
+            } else {
+                $(type).select2({
+                    minimumResultsForSearch: -1
+                });
+            }
+        });
+
+        // Tnit new repeating condition equals
+        const allConditionEquals = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_equals"]');
+        allConditionEquals.forEach(equal => {
+            if ($(equal).hasClass("select2-hidden-accessible")) {
+                return;
+            } else {
+                $(equal).select2({
+                    minimumResultsForSearch: -1
+                });
+            }
+        });
+    }
+
+    // Category status handler
+    const handleStatus = () => {
+        const target = document.getElementById('kt_ecommerce_add_category_status');
+        const select = document.getElementById('kt_ecommerce_add_category_status_select');
+        const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
+
+        $(select).on('change', function (e) {
+            const value = e.target.value;
+
+            switch (value) {
+                case "published": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-success');
+                    hideDatepicker();
+                    break;
+                }
+                case "scheduled": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-warning');
+                    showDatepicker();
+                    break;
+                }
+                case "unpublished": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-danger');
+                    hideDatepicker();
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+
+
+        // Handle datepicker
+        const datepicker = document.getElementById('kt_ecommerce_add_category_status_datepicker');
+
+        // Init flatpickr --- more info: https://flatpickr.js.org/
+        $('#kt_ecommerce_add_category_status_datepicker').flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+
+        const showDatepicker = () => {
+            datepicker.parentNode.classList.remove('d-none');
+        }
+
+        const hideDatepicker = () => {
+            datepicker.parentNode.classList.add('d-none');
+        }
+    }
+
+    // Condition type handler
+    const handleConditions = () => {
+        const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
+        const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
+        allConditions.forEach(radio => {
+            radio.addEventListener('change', e => {
+                if (e.target.value === '1') {
+                    conditionMatch.classList.remove('d-none');
+                } else {
+                    conditionMatch.classList.add('d-none');
+                }
+            });
+        })
+    }
+
+    // Submit form handler
+    const handleSubmit = () => {
+        // Define variables
+        let validator;
+
+        // Get elements
+        const form = document.getElementById('kt_ecommerce_add_category_form');
+        const submitButton = document.getElementById('kt_ecommerce_add_category_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'category_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Category name is required'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Handle submit button
+        submitButton.addEventListener('click', 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        setTimeout(function () {
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            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) {
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Redirect to customers list page
+                                    window.location = form.getAttribute("data-kt-redirect");
+                                }
+                            });
+                        }, 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-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Init forms
+            initQuill();
+            initTagify();
+            initFormRepeater();
+            initConditionsSelect2();
+
+            // Handle forms
+            handleStatus();
+            handleConditions();
+            handleSubmit();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSaveCategory.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/save-product.js

@@ -0,0 +1,416 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSaveProduct = function () {
+
+    // Private functions
+
+    // Init quill editor
+    const initQuill = () => {
+        // Define all elements for quill editor
+        const elements = [
+            '#kt_ecommerce_add_product_description',
+            '#kt_ecommerce_add_product_meta_description'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get quill element
+            let quill = document.querySelector(element);
+
+            // Break if element not found
+            if (!quill) {
+                return;
+            }
+
+            // Init quill --- more info: https://quilljs.com/docs/quickstart/
+            quill = new Quill(element, {
+                modules: {
+                    toolbar: [
+                        [{
+                            header: [1, 2, false]
+                        }],
+                        ['bold', 'italic', 'underline'],
+                        ['image', 'code-block']
+                    ]
+                },
+                placeholder: 'Type your text here...',
+                theme: 'snow' // or 'bubble'
+            });
+        });
+    }
+
+    // Init tagify
+    const initTagify = () => {
+        // Define all elements for tagify
+        const elements = [
+            '#kt_ecommerce_add_product_category',
+            '#kt_ecommerce_add_product_tags'
+        ];
+
+        // Loop all elements
+        elements.forEach(element => {
+            // Get tagify element
+            const tagify = document.querySelector(element);
+
+            // Break if element not found
+            if (!tagify) {
+                return;
+            }
+
+            // Init tagify --- more info: https://yaireo.github.io/tagify/
+            new Tagify(tagify, {
+                whitelist: ["new", "trending", "sale", "discounted", "selling fast", "last 10"],
+                dropdown: {
+                    maxItems: 20,           // <- mixumum allowed rendered suggestions
+                    classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
+                    enabled: 0,             // <- show suggestions on focus
+                    closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+                }
+            });
+        });
+    }
+
+    // Init form repeater --- more info: https://github.com/DubFriend/jquery.repeater
+    const initFormRepeater = () => {
+        $('#kt_ecommerce_add_product_options').repeater({
+            initEmpty: false,
+
+            defaultValues: {
+                'text-input': 'foo'
+            },
+
+            show: function () {
+                $(this).slideDown();
+
+                // Init select2 on new repeated items
+                initConditionsSelect2();
+            },
+
+            hide: function (deleteElement) {
+                $(this).slideUp(deleteElement);
+            }
+        });
+    }
+
+    // Init condition select2
+    const initConditionsSelect2 = () => {
+        // Tnit new repeating condition types
+        const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-product="product_option"]');
+        allConditionTypes.forEach(type => {
+            if ($(type).hasClass("select2-hidden-accessible")) {
+                return;
+            } else {
+                $(type).select2({
+                    minimumResultsForSearch: -1
+                });
+            }
+        });
+    }
+
+
+    // Init noUIslider
+    const initSlider = () => {
+        var slider = document.querySelector("#kt_ecommerce_add_product_discount_slider");
+        var value = document.querySelector("#kt_ecommerce_add_product_discount_label");
+
+        noUiSlider.create(slider, {
+            start: [10],
+            connect: true,
+            range: {
+                "min": 1,
+                "max": 100
+            }
+        });
+
+        slider.noUiSlider.on("update", function (values, handle) {
+            value.innerHTML = Math.round(values[handle]);
+            if (handle) {
+                value.innerHTML = Math.round(values[handle]);
+            }
+        });
+    }
+
+    // Init DropzoneJS --- more info:
+    const initDropzone = () => {
+        var myDropzone = new Dropzone("#kt_ecommerce_add_product_media", {
+            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 discount options
+    const handleDiscount = () => {
+        const discountOptions = document.querySelectorAll('input[name="discount_option"]');
+        const percentageEl = document.getElementById('kt_ecommerce_add_product_discount_percentage');
+        const fixedEl = document.getElementById('kt_ecommerce_add_product_discount_fixed');
+
+        discountOptions.forEach(option => {
+            option.addEventListener('change', e => {
+                const value = e.target.value;
+
+                switch (value) {
+                    case '2': {
+                        percentageEl.classList.remove('d-none');
+                        fixedEl.classList.add('d-none');
+                        break;
+                    }
+                    case '3': {
+                        percentageEl.classList.add('d-none');
+                        fixedEl.classList.remove('d-none');
+                        break;
+                    }
+                    default: {
+                        percentageEl.classList.add('d-none');
+                        fixedEl.classList.add('d-none');
+                        break;
+                    }
+                }
+            });
+        });
+    }
+
+    // Shipping option handler
+    const handleShipping = () => {
+        const shippingOption = document.getElementById('kt_ecommerce_add_product_shipping_checkbox');
+        const shippingForm = document.getElementById('kt_ecommerce_add_product_shipping');
+
+        shippingOption.addEventListener('change', e => {
+            const value = e.target.checked;
+
+            if (value) {
+                shippingForm.classList.remove('d-none');
+            } else {
+                shippingForm.classList.add('d-none');
+            }
+        });
+    }
+
+    // Category status handler
+    const handleStatus = () => {
+        const target = document.getElementById('kt_ecommerce_add_product_status');
+        const select = document.getElementById('kt_ecommerce_add_product_status_select');
+        const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
+
+        $(select).on('change', function (e) {
+            const value = e.target.value;
+
+            switch (value) {
+                case "published": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-success');
+                    hideDatepicker();
+                    break;
+                }
+                case "scheduled": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-warning');
+                    showDatepicker();
+                    break;
+                }
+                case "inactive": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-danger');
+                    hideDatepicker();
+                    break;
+                }
+                case "draft": {
+                    target.classList.remove(...statusClasses);
+                    target.classList.add('bg-primary');
+                    hideDatepicker();
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+
+
+        // Handle datepicker
+        const datepicker = document.getElementById('kt_ecommerce_add_product_status_datepicker');
+
+        // Init flatpickr --- more info: https://flatpickr.js.org/
+        $('#kt_ecommerce_add_product_status_datepicker').flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+
+        const showDatepicker = () => {
+            datepicker.parentNode.classList.remove('d-none');
+        }
+
+        const hideDatepicker = () => {
+            datepicker.parentNode.classList.add('d-none');
+        }
+    }
+
+    // Condition type handler
+    const handleConditions = () => {
+        const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
+        const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
+        allConditions.forEach(radio => {
+            radio.addEventListener('change', e => {
+                if (e.target.value === '1') {
+                    conditionMatch.classList.remove('d-none');
+                } else {
+                    conditionMatch.classList.add('d-none');
+                }
+            });
+        })
+    }
+
+    // Submit form handler
+    const handleSubmit = () => {
+        // Define variables
+        let validator;
+
+        // Get elements
+        const form = document.getElementById('kt_ecommerce_add_product_form');
+        const submitButton = document.getElementById('kt_ecommerce_add_product_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'product_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product name is required'
+                            }
+                        }
+                    },
+                    'sku': {
+                        validators: {
+                            notEmpty: {
+                                message: 'SKU is required'
+                            }
+                        }
+                    },
+                    'sku': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product barcode is required'
+                            }
+                        }
+                    },
+                    'shelf': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Shelf quantity is required'
+                            }
+                        }
+                    },
+                    'price': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product base price is required'
+                            }
+                        }
+                    },
+                    'tax': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Product tax class is required'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Handle submit button
+        submitButton.addEventListener('click', 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        setTimeout(function () {
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            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) {
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Redirect to customers list page
+                                    window.location = form.getAttribute("data-kt-redirect");
+                                }
+                            });
+                        }, 2000);
+                    } else {
+                        Swal.fire({
+                            html: "Sorry, looks like there are some errors detected, please try again. <br/><br/>Please note that there may be errors in the <strong>General</strong> or <strong>Advanced</strong> tabs",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Init forms
+            initQuill();
+            initTagify();
+            initSlider();
+            initFormRepeater();
+            initDropzone();
+            initConditionsSelect2();
+
+            // Handle forms
+            handleStatus();
+            handleConditions();
+            handleDiscount();
+            handleShipping();
+            handleSubmit();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSaveProduct.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/add-address.js

@@ -0,0 +1,214 @@
+"use strict";
+
+// Class definition
+var KTModalAddAddress = function () {
+    var submitButton;
+    var cancelButton;
+	var closeButton;
+    var validator;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var handleForm = function () {
+        // 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: 'Address name is required'
+							}
+						}
+					},
+					'country': {
+						validators: {
+							notEmpty: {
+								message: 'Country is required'
+							}
+						}
+					},
+					'address1': {
+						validators: {
+							notEmpty: {
+								message: 'Address 1 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: ''
+					})
+				}
+			}
+		);
+
+		// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="country"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+		// 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 submit button whilst loading
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							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) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+								}
+							});							
+						}, 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-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",
+                        }
+                    });
+                }
+            });
+        });
+
+		closeButton.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
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_address'));
+
+            form = document.querySelector('#kt_modal_add_address_form');
+            submitButton = form.querySelector('#kt_modal_add_address_submit');
+            cancelButton = form.querySelector('#kt_modal_add_address_cancel');
+			closeButton = form.querySelector('#kt_modal_add_address_close');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalAddAddress.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/add-auth-app.js

@@ -0,0 +1,81 @@
+"use strict";
+
+// Class definition
+var KTUsersAddAuthApp = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_auth_app');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddAuthApp = () => {
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+    }
+
+    // QR code to text code swapper
+    var initCodeSwap = () => {
+        const qrCode = element.querySelector('[ data-kt-add-auth-action="qr-code"]');
+        const textCode = element.querySelector('[ data-kt-add-auth-action="text-code"]');
+        const qrCodeButton = element.querySelector('[ data-kt-add-auth-action="qr-code-button"]');
+        const textCodeButton = element.querySelector('[ data-kt-add-auth-action="text-code-button"]');
+        const qrCodeLabel = element.querySelector('[ data-kt-add-auth-action="qr-code-label"]');
+        const textCodeLabel = element.querySelector('[ data-kt-add-auth-action="text-code-label"]');
+
+        const toggleClass = () =>{
+            qrCode.classList.toggle('d-none');
+            qrCodeButton.classList.toggle('d-none');
+            qrCodeLabel.classList.toggle('d-none');
+            textCode.classList.toggle('d-none');
+            textCodeButton.classList.toggle('d-none');
+            textCodeLabel.classList.toggle('d-none');
+        }
+
+        // Swap to text code handler
+        textCodeButton.addEventListener('click', e =>{
+            e.preventDefault();
+
+            toggleClass();
+        });
+
+        qrCodeButton.addEventListener('click', e =>{
+            e.preventDefault();
+
+            toggleClass();
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddAuthApp();
+            initCodeSwap();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddAuthApp.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/add-one-time-password.js

@@ -0,0 +1,173 @@
+"use strict";
+
+// Class definition
+var KTUsersAddOneTimePassword = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_one_time_password');
+    const form = element.querySelector('#kt_modal_add_one_time_password_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init one time password modal
+    var initAddOneTimePassword = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'otp_mobile_number': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Valid mobile number is required'
+                            }
+                        }
+                    },
+                    'otp_confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Password confirmation is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddOneTimePassword();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddOneTimePassword.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/payment-method.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentMethod = function () {
+
+    // Private functions
+    var initPaymentMethod = function () {
+        // Define variables
+        const table = document.getElementById('kt_customer_view_payment_method');
+        const tableRows = table.querySelectorAll('[ data-kt-customer-payment-method="row"]');
+
+        tableRows.forEach(row => {
+            // Select delete button
+            const deleteButton = row.querySelector('[data-kt-customer-payment-method="delete"]');
+
+            // Delete button action
+            deleteButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Popup confirmation
+                Swal.fire({
+                    text: "Are you sure you would like to delete this card?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete it!",
+                    cancelButtonText: "No, return",
+                    customClass: {
+                        confirmButton: "btn btn-primary",
+                        cancelButton: "btn btn-active-light"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        row.remove();
+                        modal.hide(); // Hide modal				
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: "Your card was not deleted!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+        });
+    }
+
+    // Handle set as primary button
+    const handlePrimaryButton = () => {
+        // Define variable
+        const button = document.querySelector('[data-kt-payment-mehtod-action="set_as_primary"]');
+
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Popup confirmation
+            Swal.fire({
+                text: "Are you sure you would like to set this card as primary?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, set it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "Your card was set to primary!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your card was not set to primary!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initPaymentMethod();
+            handlePrimaryButton();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentMethod.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/transaction-history.js

@@ -0,0 +1,110 @@
+"use strict";
+
+// Class definition
+var KTCustomerViewPaymentTable = function () {
+
+    // Define shared variables
+    var datatable;
+    var table = document.querySelector('#kt_table_customers_payment');
+
+    // Private functions
+    var initCustomerView = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
+            dateRow[3].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 4 }, // Disable ordering on column 5 (actions)
+            ]
+        });
+    }
+
+    // Delete customer
+    var deleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
+        
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const invoiceNumber = parent.querySelectorAll('td')[0].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + invoiceNumber + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + invoiceNumber + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        }).then(function () {
+                            // Detect checked checkboxes
+                            toggleToolbars();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            if (!table) {
+                return;
+            }
+
+            initCustomerView();
+            deleteRows();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomerViewPaymentTable.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-address.js

@@ -0,0 +1,217 @@
+"use strict";
+
+// Class definition
+var KTModalUpdateAddress = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var form;
+    var modal;
+    var validator;
+
+    // Init form inputs
+    var initForm = function () {
+        // 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: 'Address name is required'
+                            }
+                        }
+                    },
+                    'country': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Country is required'
+                            }
+                        }
+                    },
+                    'address1': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Address 1 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: ''
+                    })
+                }
+            }
+        );
+
+        // Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="country"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+        // 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') {
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable submit button whilst loading
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							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) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+								}
+							});							
+						}, 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-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",
+                        }
+                    });
+                }
+            });
+        });
+
+        closeButton.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
+            element = document.querySelector('#kt_modal_update_address');
+            modal = new bootstrap.Modal(element);
+
+            form = element.querySelector('#kt_modal_update_address_form');
+            submitButton = form.querySelector('#kt_modal_update_address_submit');
+            cancelButton = form.querySelector('#kt_modal_update_address_cancel');
+            closeButton = element.querySelector('#kt_modal_update_address_close');
+
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalUpdateAddress.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-password.js

@@ -0,0 +1,194 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePassword = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_password');
+    const form = element.querySelector('#kt_modal_update_password_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePassword = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'current_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Current password is required'
+                            }
+                        }
+                    },
+                    'new_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function (input) {
+                                    if (input.value.length > 0) {
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function () {
+                                    return form.querySelector('[name="new_password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePassword();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePassword.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-phone.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateEmail = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_phone');
+    const form = element.querySelector('#kt_modal_update_phone_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdateEmail = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'profile_phone': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Phone number is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdateEmail();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdateEmail.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-profile.js

@@ -0,0 +1,106 @@
+"use strict";
+
+// Class definition
+var KTEcommerceUpdateProfile = function () {
+    var submitButton;
+    var validator;
+    var form;
+
+    // Init form inputs
+    var handleForm = function () {
+        // 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: 'Name is required'
+							}
+						}
+					},
+					'gen_email': {
+						validators: {
+							notEmpty: {
+								message: 'General Email 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 submit button whilst loading
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							Swal.fire({
+								text: "Your profile has been saved!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									// Enable submit button after loading
+									submitButton.disabled = false;
+								}
+							});							
+						}, 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-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            form = document.querySelector('#kt_ecommerce_customer_profile');
+            submitButton = form.querySelector('#kt_ecommerce_customer_profile_submit');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTEcommerceUpdateProfile.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/listing/add.js

@@ -0,0 +1,238 @@
+"use strict";
+
+// Class definition
+var KTModalCustomersAdd = function () {
+    var submitButton;
+    var cancelButton;
+	var closeButton;
+    var validator;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var handleForm = function () {
+        // 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: 'Customer name is required'
+							}
+						}
+					},
+                    'email': {
+						validators: {
+							notEmpty: {
+								message: 'Customer email is required'
+							}
+						}
+					},
+					'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'
+							}
+						}
+					},
+					'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: ''
+					})
+				}
+			}
+		);
+
+		// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="country"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('country');
+        });
+
+		// 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 submit button whilst loading
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							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) {
+									// Hide modal
+									modal.hide();
+
+									// Enable submit button after loading
+									submitButton.disabled = false;
+
+									// Redirect to customers list page
+									window.location = form.getAttribute("data-kt-redirect");
+								}
+							});							
+						}, 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-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",
+                        }
+                    });
+                }
+            });
+        });
+
+		closeButton.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
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_customer'));
+
+            form = document.querySelector('#kt_modal_add_customer_form');
+            submitButton = form.querySelector('#kt_modal_add_customer_submit');
+            cancelButton = form.querySelector('#kt_modal_add_customer_cancel');
+			closeButton = form.querySelector('#kt_modal_add_customer_close');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalCustomersAdd.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/listing/export.js

@@ -0,0 +1,189 @@
+"use strict";
+
+// Class definition
+var KTCustomersExport = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+	var closeButton;
+    var validator;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var handleForm = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+                    'date': {
+						validators: {
+							notEmpty: {
+								message: 'Date range 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+							
+							Swal.fire({
+								text: "Customer list has been successfully exported!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;        
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 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-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",
+                        }
+                    });
+                }
+            });
+        });
+
+		closeButton.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",
+                        }
+                    });
+                }
+            });
+		});
+    }
+
+    var initForm = function () {
+        const datepicker = form.querySelector("[name=date]");
+        
+        // Handle datepicker range -- For more info on flatpickr plugin, please visit: https://flatpickr.js.org/
+        $(datepicker).flatpickr({
+            altInput: true,
+            altFormat: "F j, Y",
+            dateFormat: "Y-m-d",
+            mode: "range"
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_customers_export_modal');
+            modal = new bootstrap.Modal(element);
+
+            form = document.querySelector('#kt_customers_export_form');
+            submitButton = form.querySelector('#kt_customers_export_submit');
+            cancelButton = form.querySelector('#kt_customers_export_cancel');
+			closeButton = element.querySelector('#kt_customers_export_close');
+
+            handleForm();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersExport.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/listing/listing.js

@@ -0,0 +1,242 @@
+"use strict";
+
+// Class definition
+var KTCustomersList = function () {
+    // Define shared variables
+    var datatable;
+    var filterMonth;
+    var filterPayment;
+    var table
+
+    // Private functions
+    var initCustomerList = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
+            dateRow[5].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)
+            ]
+        });
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleDeleteRows();
+            toggleToolbars();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-customer-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete customer
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const customerName = parent.querySelectorAll('td')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + customerName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + customerName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(3).search(value).draw();
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        const deleteSelected = document.querySelector('[data-kt-customer-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Define variables
+        const toolbarBase = document.querySelector('[data-kt-customer-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-customer-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-customer-table-select="selected_count"]');
+
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_customers_table');
+
+            if (!table) {
+                return;
+            }
+
+            initCustomerList();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleDeleteRows();
+            handleStatusFilter();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTCustomersList.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/customer-orders/customer-orders.js

@@ -0,0 +1,136 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportCustomerOrders = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
+            dateRow[3].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_customer_orders_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            ranges: {
+                "Today": [moment(), moment()],
+                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
+                "Last 7 Days": [moment().subtract(6, "days"), moment()],
+                "Last 30 Days": [moment().subtract(29, "days"), moment()],
+                "This Month": [moment().startOf("month"), moment().endOf("month")],
+                "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
+            }
+        }, cb);
+
+        cb(start, end);
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(2).search(value).draw();
+        });
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Customer Orders Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_customer_orders_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_customer_orders_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_customer_orders_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+            handleStatusFilter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportCustomerOrders.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/returns/returns.js

@@ -0,0 +1,123 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportReturns = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_returns_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            ranges: {
+                "Today": [moment(), moment()],
+                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
+                "Last 7 Days": [moment().subtract(6, "days"), moment()],
+                "Last 30 Days": [moment().subtract(29, "days"), moment()],
+                "This Month": [moment().startOf("month"), moment().endOf("month")],
+                "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
+            }
+        }, cb);
+
+        cb(start, end);
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Returns Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_returns_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_returns_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_returns_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportReturns.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/sales/sales.js

@@ -0,0 +1,124 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportSales = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_sales_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            ranges: {
+                "Today": [moment(), moment()],
+                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
+                "Last 7 Days": [moment().subtract(6, "days"), moment()],
+                "Last 30 Days": [moment().subtract(29, "days"), moment()],
+                "This Month": [moment().startOf("month"), moment().endOf("month")],
+                "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
+            }
+        }, cb);
+
+        cb(start, end);
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Sales Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_sales_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_sales_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_sales_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportSales.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/shipping/shipping.js

@@ -0,0 +1,137 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportShipping = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
+            dateRow[0].setAttribute('data-order', realDate);
+        });
+
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_shipping_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            ranges: {
+                "Today": [moment(), moment()],
+                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
+                "Last 7 Days": [moment().subtract(6, "days"), moment()],
+                "Last 30 Days": [moment().subtract(29, "days"), moment()],
+                "This Month": [moment().startOf("month"), moment().endOf("month")],
+                "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
+            }
+        }, cb);
+
+        cb(start, end);
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(3).search(value).draw();
+        });
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Shipping Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_shipping_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_shipping_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_shipping_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+            handleStatusFilter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportShipping.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/views/views.js

@@ -0,0 +1,127 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceReportViews = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+        });
+    }
+
+    // Init daterangepicker
+    var initDaterangepicker = () => {
+        var start = moment().subtract(29, "days");
+        var end = moment();
+        var input = $("#kt_ecommerce_report_views_daterangepicker");
+
+        function cb(start, end) {
+            input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
+        }
+
+        input.daterangepicker({
+            startDate: start,
+            endDate: end,
+            ranges: {
+                "Today": [moment(), moment()],
+                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
+                "Last 7 Days": [moment().subtract(6, "days"), moment()],
+                "Last 30 Days": [moment().subtract(29, "days"), moment()],
+                "This Month": [moment().startOf("month"), moment().endOf("month")],
+                "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
+            }
+        }, cb);
+
+        cb(start, end);
+    }
+
+    // Handle rating filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="rating"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(2).search(value).draw();
+        });
+    }
+
+    // Hook export buttons
+    var exportButtons = () => {
+        const documentTitle = 'Product Views Report';
+        var buttons = new $.fn.dataTable.Buttons(table, {
+            buttons: [
+                {
+                    extend: 'copyHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'excelHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'csvHtml5',
+                    title: documentTitle
+                },
+                {
+                    extend: 'pdfHtml5',
+                    title: documentTitle
+                }
+            ]
+        }).container().appendTo($('#kt_ecommerce_report_views_export'));
+
+        // Hook dropdown menu click event to datatable export buttons
+        const exportButtons = document.querySelectorAll('#kt_ecommerce_report_views_export_menu [data-kt-ecommerce-export]');
+        exportButtons.forEach(exportButton => {
+            exportButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Get clicked export value
+                const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
+                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
+
+                // Trigger click event on hidden datatable export buttons
+                target.click();
+            });
+        });
+    }
+
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_report_views_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initDaterangepicker();
+            exportButtons();
+            handleSearchDatatable();
+            handleStatusFilter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceReportViews.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/sales/listing.js

@@ -0,0 +1,181 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSalesListing = function () {
+    // Shared variables
+    var table;
+    var datatable;
+    var flatpickr;
+    var minDate, maxDate;
+
+    // Private functions
+    var initDatatable = function () {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 7 }, // Disable ordering on column 7 (actions)
+            ]
+        });
+
+        // Re-init functions on datatable re-draws
+        datatable.on('draw', function () {
+            handleDeleteRows();
+        });
+    }
+
+    // Init flatpickr --- more info :https://flatpickr.js.org/getting-started/
+    var initFlatpickr = () => {
+        const element = document.querySelector('#kt_ecommerce_sales_flatpickr');
+        flatpickr = $(element).flatpickr({
+            altInput: true,
+            altFormat: "d/m/Y",
+            dateFormat: "Y-m-d",
+            mode: "range",
+            onChange: function (selectedDates, dateStr, instance) {
+                handleFlatpickr(selectedDates, dateStr, instance);
+            },
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Handle status filter dropdown
+    var handleStatusFilter = () => {
+        const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
+        $(filterStatus).on('change', e => {
+            let value = e.target.value;
+            if (value === 'all') {
+                value = '';
+            }
+            datatable.column(3).search(value).draw();
+        });
+    }
+
+    // Handle flatpickr --- more info: https://flatpickr.js.org/events/
+    var handleFlatpickr = (selectedDates, dateStr, instance) => {
+        minDate = selectedDates[0] ? new Date(selectedDates[0]) : null;
+        maxDate = selectedDates[1] ? new Date(selectedDates[1]) : null;
+
+        // Datatable date filter --- more info: https://datatables.net/extensions/datetime/examples/integration/datatables.html
+        // Custom filtering function which will search data in column four between two values
+        $.fn.dataTable.ext.search.push(
+            function (settings, data, dataIndex) {
+                var min = minDate;
+                var max = maxDate;
+                var dateAdded = new Date(moment($(data[5]).text(), 'DD/MM/YYYY'));
+                var dateModified = new Date(moment($(data[6]).text(), 'DD/MM/YYYY'));
+
+                if (
+                    (min === null && max === null) ||
+                    (min === null && max >= dateModified) ||
+                    (min <= dateAdded && max === null) ||
+                    (min <= dateAdded && max >= dateModified)
+                ) {
+                    return true;
+                }
+                return false;
+            }
+        );
+        datatable.draw();
+    }
+
+    // Handle clear flatpickr
+    var handleClearFlatpickr = () => {
+        const clearButton = document.querySelector('#kt_ecommerce_sales_flatpickr_clear');
+        clearButton.addEventListener('click', e => {
+            flatpickr.clear();
+        });
+    }
+
+    // Delete cateogry
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-order-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get category name
+                const orderID = parent.querySelector('[data-kt-ecommerce-order-filter="order_id"]').innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete order: " + orderID + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + orderID + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: orderID + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_ecommerce_sales_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initFlatpickr();
+            handleSearchDatatable();
+            handleStatusFilter();
+            handleDeleteRows();
+            handleClearFlatpickr();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSalesListing.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/sales/save-order.js

@@ -0,0 +1,338 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSalesSaveOrder = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    // Private functions
+    const initSaveOrder = () => {
+        // Init flatpickr
+        $('#kt_ecommerce_edit_order_date').flatpickr({
+            altInput: true,
+            altFormat: "d F, Y",
+            dateFormat: "Y-m-d",
+        });
+
+        // Init select2 country options
+        // Format options
+        const optionFormat = (item) => {
+            if ( !item.id ) {
+                return item.text;
+            }
+
+            var span = document.createElement('span');
+            var template = '';
+
+            template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle h-20px me-2" alt="image"/>';
+            template += item.text;
+
+            span.innerHTML = template;
+
+            return $(span);
+        }
+
+        // Init Select2 --- more info: https://select2.org/        
+        $('#kt_ecommerce_edit_order_billing_country').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+
+        $('#kt_ecommerce_edit_order_shipping_country').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        table = document.querySelector('#kt_ecommerce_edit_order_product_table');
+        datatable = $(table).DataTable({
+            'order': [],
+            "scrollY": "400px",
+            "scrollCollapse": true,
+            "paging": false,
+            "info": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+            ]
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-ecommerce-edit-order-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Handle shipping form
+    const handleShippingForm = () => {
+        // Select elements
+        const element = document.getElementById('kt_ecommerce_edit_order_shipping_form');
+        const checkbox = document.getElementById('same_as_billing');
+
+        // Show/hide shipping form
+        checkbox.addEventListener('change', e => {
+            if (e.target.checked) {
+                element.classList.add('d-none');
+            } else {
+                element.classList.remove('d-none');
+            }
+        });
+    }
+
+    // Handle product select
+    const handleProductSelect = () => {
+        // Define variables
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+        const target = document.getElementById('kt_ecommerce_edit_order_selected_products');
+        const totalPrice = document.getElementById('kt_ecommerce_edit_order_total_price');
+
+        // Loop through all checked products
+        checkboxes.forEach(checkbox => {
+            checkbox.addEventListener('change', e => {
+                // Select parent row element
+                const parent = checkbox.closest('tr');
+                
+                // Clone parent element as variable
+                const product = parent.querySelector('[data-kt-ecommerce-edit-order-filter="product"]').cloneNode(true);
+
+                // Create inner wrapper
+                const innerWrapper = document.createElement('div');
+                
+                // Store inner content
+                const innerContent = product.innerHTML;
+
+                // Add & remove classes on parent wrapper
+                const wrapperClassesAdd = ['col', 'my-2'];
+                const wrapperClassesRemove = ['d-flex', 'align-items-center'];
+
+                // Define additional classes
+                const additionalClasses = ['border', 'border-dashed', 'rounded', 'p-3', 'bg-body'];
+
+                // Update parent wrapper classes
+                product.classList.remove(...wrapperClassesRemove);
+                product.classList.add(...wrapperClassesAdd);
+
+                // Remove parent default content
+                product.innerHTML = '';
+
+                // Update inner wrapper classes
+                innerWrapper.classList.add(...wrapperClassesRemove);
+                innerWrapper.classList.add(...additionalClasses);                
+
+                // Apply stored inner content into new inner wrapper
+                innerWrapper.innerHTML = innerContent;
+
+                // Append new inner wrapper to parent wrapper
+                product.appendChild(innerWrapper);
+
+                // Get product id
+                const productId = product.getAttribute('data-kt-ecommerce-edit-order-id');
+
+                if (e.target.checked) {
+                    // Add product to selected product wrapper
+                    target.appendChild(product);
+                } else {
+                    // Remove product from selected product wrapper
+                    const selectedProduct = target.querySelector('[data-kt-ecommerce-edit-order-id="' + productId + '"]');
+                    if (selectedProduct) {
+                        target.removeChild(selectedProduct);
+                    }
+                }
+
+                // Trigger empty message logic
+                detectEmpty();
+            });
+        });
+
+        // Handle empty list message
+        const detectEmpty = () => {
+            // Select elements
+            const message = target.querySelector('span');
+            const products = target.querySelectorAll('[data-kt-ecommerce-edit-order-filter="product"]');
+
+            // Detect if element is empty
+            if (products.length < 1) {
+                // Show message
+                message.classList.remove('d-none');
+
+                // Reset price
+                totalPrice.innerText = '0.00';
+            } else {
+                // Hide message
+                message.classList.add('d-none');
+
+                // Calculate price
+                calculateTotal(products);
+            }
+        }
+
+        // Calculate total cost
+        const calculateTotal = (products) => {
+            let countPrice = 0;
+
+            // Loop through all selected prodcucts
+            products.forEach(product => {
+                // Get product price
+                const price = parseFloat(product.querySelector('[data-kt-ecommerce-edit-order-filter="price"]').innerText);
+
+                // Add to total
+                countPrice = parseFloat(countPrice + price);
+            });
+
+            // Update total price
+            totalPrice.innerText = countPrice.toFixed(2);
+        }
+    }
+
+    // Submit form handler
+    const handleSubmit = () => {
+        // Define variables
+        let validator;
+
+        // Get elements
+        const form = document.getElementById('kt_ecommerce_edit_order_form');
+        const submitButton = document.getElementById('kt_ecommerce_edit_order_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'payment_method': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Payment method is required'
+                            }
+                        }
+                    },
+                    'shipping_method': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Shipping method is required'
+                            }
+                        }
+                    },
+                    'order_date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Order date is required'
+                            }
+                        }
+                    },
+                    'billing_order_address_1': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Address line 1 is required'
+                            }
+                        }
+                    },
+                    'billing_order_postcode': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Postcode is required'
+                            }
+                        }
+                    },
+                    'billing_order_state': {
+                        validators: {
+                            notEmpty: {
+                                message: 'State is required'
+                            }
+                        }
+                    },
+                    'billing_order_country': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Country is required'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Handle submit button
+        submitButton.addEventListener('click', 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        setTimeout(function () {
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            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) {
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Redirect to customers list page
+                                    window.location = form.getAttribute("data-kt-redirect");
+                                }
+                            });
+                        }, 2000);
+                    } else {
+                        Swal.fire({
+                            html: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        })
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+
+            initSaveOrder();
+            handleSearchDatatable();
+            handleShippingForm();
+            handleProductSelect();
+            handleSubmit();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSalesSaveOrder.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/settings/settings.js

@@ -0,0 +1,188 @@
+"use strict";
+
+// Class definition
+var KTAppEcommerceSettings = function () {
+    // Shared variables
+
+
+    // Private functions
+    const initForms = () => {
+        const forms = [
+            'kt_ecommerce_settings_general_form',
+            'kt_ecommerce_settings_general_store',
+            'kt_ecommerce_settings_general_localization',
+            'kt_ecommerce_settings_general_products',
+            'kt_ecommerce_settings_general_customers',
+        ];
+
+        // Init all forms
+        forms.forEach(formId => {
+            // Select form
+            const form = document.getElementById(formId);
+
+            if(!form){
+                return;
+            }
+
+            // 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('.row').querySelector('input');
+                if (input) {
+                    detectedField = input;
+                }
+
+                const textarea = el.closest('.row').querySelector('textarea');
+                if (textarea) {
+                    detectedField = textarea;
+                }
+
+                const select = el.closest('.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-ecommerce-settings-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"
+                                    }
+                                });
+
+                                //form.submit(); // Submit form
+                            }, 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 Tagify
+    const initTagify = () => {
+        // Get tagify elements
+        const elements = document.querySelectorAll('[data-kt-ecommerce-settings-type="tagify"]');
+
+        // Init tagify
+        elements.forEach(element => {
+            new Tagify(element);
+        });
+    }
+
+    // Init Select2 with flags
+    const initSelect2Flags = () => {
+        // Format options
+        const optionFormat = (item) => {
+            if ( !item.id ) {
+                return item.text;
+            }
+
+            var span = document.createElement('span');
+            var template = '';
+
+            template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle h-20px me-2" alt="image"/>';
+            template += item.text;
+
+            span.innerHTML = template;
+
+            return $(span);
+        }
+
+        // Init Select2 --- more info: https://select2.org/
+        $('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
+            placeholder: "Select a country",
+            minimumResultsForSearch: Infinity,
+            templateSelection: optionFormat,
+            templateResult: optionFormat
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+
+            initForms();
+            initTagify();
+            initSelect2Flags();
+
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppEcommerceSettings.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/file-manager/list.js

@@ -0,0 +1,939 @@
+"use strict";
+
+// Class definition
+var KTFileManagerList = function () {
+    // Define shared variables
+    var datatable;
+    var table
+
+    // Define template element variables
+    var uploadTemplate;
+    var renameTemplate;
+    var actionTemplate;
+    var checkboxTemplate;
+
+
+    // Private functions
+    const initTemplates = () => {
+        uploadTemplate = document.querySelector('[data-kt-filemanager-template="upload"]');
+        renameTemplate = document.querySelector('[data-kt-filemanager-template="rename"]');
+        actionTemplate = document.querySelector('[data-kt-filemanager-template="action"]');
+        checkboxTemplate = document.querySelector('[data-kt-filemanager-template="checkbox"]');
+    }
+
+    const initDatatable = () => {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const dateCol = dateRow[3]; // select date from 4th column in table
+            const realDate = moment(dateCol.innerHTML, "DD MMM YYYY, LT").format();
+            dateCol.setAttribute('data-order', realDate);
+        });
+
+        const foldersListOptions = {
+            "info": false,
+            'order': [],
+            "scrollY": "700px",
+            "scrollCollapse": true,
+            "paging": false,
+            'ordering': false,
+            'columns': [
+                { data: 'checkbox' },
+                { data: 'name' },
+                { data: 'size' },
+                { data: 'date' },
+                { data: 'action' },
+            ],
+            'language': {
+                emptyTable: `<div class="d-flex flex-column flex-center">
+                    <img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
+                    <div class="fs-1 fw-bolder text-dark">No items found.</div>
+                    <div class="fs-6">Start creating new folders or uploading a new file!</div>
+                </div>`
+            }
+        };
+
+        const filesListOptions = {
+            "info": false,
+            'order': [],
+            'pageLength': 10,
+            "lengthChange": false,
+            'ordering': false,
+            'columns': [
+                { data: 'checkbox' },
+                { data: 'name' },
+                { data: 'size' },
+                { data: 'date' },
+                { data: 'action' },
+            ],
+            'language': {
+                emptyTable: `<div class="d-flex flex-column flex-center">
+                    <img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
+                    <div class="fs-1 fw-bolder text-dark mb-4">No items found.</div>
+                    <div class="fs-6">Start creating new folders or uploading a new file!</div>
+                </div>`
+            },
+            conditionalPaging: true
+        };
+
+        // Define datatable options to load
+        var loadOptions;
+        if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
+            loadOptions = foldersListOptions;
+        } else {
+            loadOptions = filesListOptions;
+        }
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable(loadOptions);
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleDeleteRows();
+            toggleToolbars();
+            resetNewFolder();
+            KTMenu.createInstances();
+            initCopyLink();
+            countTotalItems();
+            handleRename();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    const handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-filemanager-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete customer
+    const handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-filemanager-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const fileName = parent.querySelectorAll('td')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + fileName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + fileName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Init toggle toolbar
+    const initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        var checkboxes = table.querySelectorAll('[type="checkbox"]');
+        if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
+            checkboxes = document.querySelectorAll('#kt_file_manager_list_wrapper [type="checkbox"]');
+        }
+
+        // Select elements
+        const deleteSelected = document.querySelector('[data-kt-filemanager-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                console.log(c);
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected files or folders?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected  files or folders!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected  files or folders was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Define variables
+        const toolbarBase = document.querySelector('[data-kt-filemanager-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-filemanager-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-filemanager-table-select="selected_count"]');
+
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    // Handle new folder
+    const handleNewFolder = () => {
+        // Select button
+        const newFolder = document.getElementById('kt_file_manager_new_folder');
+
+        // Handle click action
+        newFolder.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Ignore if input already exist
+            if (table.querySelector('#kt_file_manager_new_folder_row')) {
+                return;
+            }
+
+            // Add new blank row to datatable
+            const tableBody = table.querySelector('tbody');
+            const rowElement = uploadTemplate.cloneNode(true); // Clone template markup
+            tableBody.prepend(rowElement);
+
+            // Define template interactive elements
+            const rowForm = rowElement.querySelector('#kt_file_manager_add_folder_form');
+            const rowButton = rowElement.querySelector('#kt_file_manager_add_folder');
+            const cancelButton = rowElement.querySelector('#kt_file_manager_cancel_folder');
+            const folderIcon = rowElement.querySelector('.svg-icon-2x');
+            const rowInput = rowElement.querySelector('[name="new_folder_name"]');
+
+            // Define validator
+            // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+            var validator = FormValidation.formValidation(
+                rowForm,
+                {
+                    fields: {
+                        'new_folder_name': {
+                            validators: {
+                                notEmpty: {
+                                    message: 'Folder name is required'
+                                }
+                            }
+                        },
+                    },
+                    plugins: {
+                        trigger: new FormValidation.plugins.Trigger(),
+                        bootstrap: new FormValidation.plugins.Bootstrap5({
+                            rowSelector: '.fv-row',
+                            eleInvalidClass: '',
+                            eleValidClass: ''
+                        })
+                    }
+                }
+            );
+
+            // Handle add new folder button
+            rowButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Activate indicator
+                rowButton.setAttribute("data-kt-indicator", "on");
+
+                // Validate form before submit
+                if (validator) {
+                    validator.validate().then(function (status) {
+                        console.log('validated!');
+
+                        if (status == 'Valid') {
+                            // Simulate process for demo only
+                            setTimeout(function () {
+                                // Create folder link
+                                const folderLink = document.createElement('a');
+                                const folderLinkClasses = ['text-gray-800', 'text-hover-primary'];
+                                folderLink.setAttribute('href', '?page=apps/file-manager/blank');
+                                folderLink.classList.add(...folderLinkClasses);
+                                folderLink.innerText = rowInput.value;
+
+                                const newRow = datatable.row.add({
+                                    'checkbox': checkboxTemplate.innerHTML,
+                                    'name': folderIcon.outerHTML + folderLink.outerHTML,
+                                    "size": '-',
+                                    "date": '-',
+                                    'action': actionTemplate.innerHTML
+                                }).node();
+                                $(newRow).find('td').eq(4).attr('data-kt-filemanager-table', 'action_dropdown');
+                                $(newRow).find('td').eq(4).addClass('text-end'); // Add custom class to last 'td' element --- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
+
+                                // Re-sort datatable to allow new folder added at the top
+                                var index = datatable.row(0).index(),
+                                    rowCount = datatable.data().length - 1,
+                                    insertedRow = datatable.row(rowCount).data(),
+                                    tempRow;
+
+                                for (var i = rowCount; i > index; i--) {
+                                    tempRow = datatable.row(i - 1).data();
+                                    datatable.row(i).data(tempRow);
+                                    datatable.row(i - 1).data(insertedRow);
+                                }
+
+                                toastr.options = {
+                                    "closeButton": true,
+                                    "debug": false,
+                                    "newestOnTop": false,
+                                    "progressBar": false,
+                                    "positionClass": "toastr-top-right",
+                                    "preventDuplicates": false,
+                                    "showDuration": "300",
+                                    "hideDuration": "1000",
+                                    "timeOut": "5000",
+                                    "extendedTimeOut": "1000",
+                                    "showEasing": "swing",
+                                    "hideEasing": "linear",
+                                    "showMethod": "fadeIn",
+                                    "hideMethod": "fadeOut"
+                                };
+
+                                toastr.success(rowInput.value + ' was created!');
+
+                                // Disable indicator
+                                rowButton.removeAttribute("data-kt-indicator");
+
+                                // Reset input
+                                rowInput.value = '';
+
+                                datatable.draw(false);
+
+                            }, 2000);
+                        } else {
+                            // Disable indicator
+                            rowButton.removeAttribute("data-kt-indicator");
+                        }
+                    });
+                }
+            });
+
+            // Handle cancel new folder button
+            cancelButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Activate indicator
+                cancelButton.setAttribute("data-kt-indicator", "on");
+
+                setTimeout(function () {
+                    // Disable indicator
+                    cancelButton.removeAttribute("data-kt-indicator");
+
+                    // Toggle toastr
+                    toastr.options = {
+                        "closeButton": true,
+                        "debug": false,
+                        "newestOnTop": false,
+                        "progressBar": false,
+                        "positionClass": "toastr-top-right",
+                        "preventDuplicates": false,
+                        "showDuration": "300",
+                        "hideDuration": "1000",
+                        "timeOut": "5000",
+                        "extendedTimeOut": "1000",
+                        "showEasing": "swing",
+                        "hideEasing": "linear",
+                        "showMethod": "fadeIn",
+                        "hideMethod": "fadeOut"
+                    };
+
+                    toastr.error('Cancelled new folder creation');
+                    resetNewFolder();
+                }, 1000);
+            });
+        });
+    }
+
+    // Reset add new folder input
+    const resetNewFolder = () => {
+        const newFolderRow = table.querySelector('#kt_file_manager_new_folder_row');
+
+        if (newFolderRow) {
+            newFolderRow.parentNode.removeChild(newFolderRow);
+        }
+    }
+
+    // Handle rename file or folder
+    const handleRename = () => {
+        const renameButton = table.querySelectorAll('[data-kt-filemanager-table="rename"]');     
+
+        renameButton.forEach(button => {
+            button.addEventListener('click', renameCallback);
+        });
+    }
+
+    // Rename callback
+    const renameCallback = (e) => {
+        e.preventDefault();
+
+        // Define shared value
+        let nameValue;
+
+        // Stop renaming if there's an input existing
+        if (table.querySelectorAll('#kt_file_manager_rename_input').length > 0) {
+            Swal.fire({
+                text: "Unsaved input detected. Please save or cancel the current item",
+                icon: "warning",
+                buttonsStyling: false,
+                confirmButtonText: "Ok, got it!",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger"
+                }
+            });
+
+            return;
+        }
+
+        // Select parent row
+        const parent = e.target.closest('tr');
+
+        // Get name column
+        const nameCol = parent.querySelectorAll('td')[1];
+        const colIcon = nameCol.querySelector('.svg-icon');
+        nameValue = nameCol.innerText;
+
+        // Set rename input template
+        const renameInput = renameTemplate.cloneNode(true);
+        renameInput.querySelector('#kt_file_manager_rename_folder_icon').innerHTML = colIcon.outerHTML;
+
+        // Swap current column content with input template
+        nameCol.innerHTML = renameInput.innerHTML;
+
+        // Set input value with current file/folder name
+        parent.querySelector('#kt_file_manager_rename_input').value = nameValue;
+
+        // Rename file / folder validator
+        var renameValidator = FormValidation.formValidation(
+            nameCol,
+            {
+                fields: {
+                    'rename_folder_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Name is required'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Rename input button action
+        const renameInputButton = document.querySelector('#kt_file_manager_rename_folder');
+        renameInputButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Detect if valid
+            if (renameValidator) {
+                renameValidator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Pop up confirmation
+                        Swal.fire({
+                            text: "Are you sure you want to rename " + nameValue + "?",
+                            icon: "warning",
+                            showCancelButton: true,
+                            buttonsStyling: false,
+                            confirmButtonText: "Yes, rename it!",
+                            cancelButtonText: "No, cancel",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-danger",
+                                cancelButton: "btn fw-bold btn-active-light-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.value) {
+                                Swal.fire({
+                                    text: "You have renamed " + nameValue + "!.",
+                                    icon: "success",
+                                    buttonsStyling: false,
+                                    confirmButtonText: "Ok, got it!",
+                                    customClass: {
+                                        confirmButton: "btn fw-bold btn-primary",
+                                    }
+                                }).then(function () {
+                                    // Get new file / folder name value
+                                    const newValue = document.querySelector('#kt_file_manager_rename_input').value;
+
+                                    // New column data template
+                                    const newData = `<div class="d-flex align-items-center">
+                                        ${colIcon.outerHTML}
+                                        <a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${newValue}</a>
+                                    </div>`;
+
+                                    // Draw datatable with new content -- Add more events here for any server-side events
+                                    datatable.cell($(nameCol)).data(newData).draw();
+                                });
+                            } else if (result.dismiss === 'cancel') {
+                                Swal.fire({
+                                    text: nameValue + " was not renamed.",
+                                    icon: "error",
+                                    buttonsStyling: false,
+                                    confirmButtonText: "Ok, got it!",
+                                    customClass: {
+                                        confirmButton: "btn fw-bold btn-primary",
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        // Cancel rename input
+        const cancelInputButton = document.querySelector('#kt_file_manager_rename_folder_cancel');
+        cancelInputButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Simulate process for demo only
+            cancelInputButton.setAttribute("data-kt-indicator", "on");
+
+            setTimeout(function () {
+                const revertTemplate = `<div class="d-flex align-items-center">
+                    ${colIcon.outerHTML}
+                    <a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${nameValue}</a>
+                </div>`;
+
+                // Remove spinner
+                cancelInputButton.removeAttribute("data-kt-indicator");
+
+                // Draw datatable with new content -- Add more events here for any server-side events
+                datatable.cell($(nameCol)).data(revertTemplate).draw();
+
+                // Toggle toastr
+                toastr.options = {
+                    "closeButton": true,
+                    "debug": false,
+                    "newestOnTop": false,
+                    "progressBar": false,
+                    "positionClass": "toastr-top-right",
+                    "preventDuplicates": false,
+                    "showDuration": "300",
+                    "hideDuration": "1000",
+                    "timeOut": "5000",
+                    "extendedTimeOut": "1000",
+                    "showEasing": "swing",
+                    "hideEasing": "linear",
+                    "showMethod": "fadeIn",
+                    "hideMethod": "fadeOut"
+                };
+
+                toastr.error('Cancelled rename function');
+            }, 1000);
+        });
+    }
+
+    // Init dropzone
+    const initDropzone = () => {
+        // set the dropzone container id
+        const id = "#kt_modal_upload_dropzone";
+        const dropzone = document.querySelector(id);
+
+        // set the preview element template
+        var previewNode = dropzone.querySelector(".dropzone-item");
+        previewNode.id = "";
+        var previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+
+        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
+            url: "path/to/your/server", // Set the url for your upload script location
+            parallelUploads: 10,
+            previewTemplate: previewTemplate,
+            maxFilesize: 1, // Max filesize in MB
+            autoProcessQueue: false, // Stop auto upload
+            autoQueue: false, // Make sure the files aren't queued until manually added
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
+        });
+
+        myDropzone.on("addedfile", function (file) {
+            // Hook each start button
+            file.previewElement.querySelector(id + " .dropzone-start").onclick = function () {
+                // myDropzone.enqueueFile(file); -- default dropzone function
+
+                // Process simulation for demo only
+                const progressBar = file.previewElement.querySelector('.progress-bar');
+                progressBar.style.opacity = "1";
+                var width = 1;
+                var timer = setInterval(function () {
+                    if (width >= 100) {
+                        myDropzone.emit("success", file);
+                        myDropzone.emit("complete", file);
+                        clearInterval(timer);
+                    } else {
+                        width++;
+                        progressBar.style.width = width + '%';
+                    }
+                }, 20);
+            };
+
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+            dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
+            dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
+        });
+
+        // Hide the total progress bar when nothing's uploading anymore
+        myDropzone.on("complete", function (file) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                    progressBar.querySelector('.dropzone-start').style.opacity = "0";
+                });
+            }, 300);
+        });
+
+        // Setup the buttons for all transfers
+        dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
+            // myDropzone.processQueue(); --- default dropzone process
+
+            // Process simulation for demo only
+            myDropzone.files.forEach(file => {
+                const progressBar = file.previewElement.querySelector('.progress-bar');
+                progressBar.style.opacity = "1";
+                var width = 1;
+                var timer = setInterval(function () {
+                    if (width >= 100) {
+                        myDropzone.emit("success", file);
+                        myDropzone.emit("complete", file);
+                        clearInterval(timer);
+                    } else {
+                        width++;
+                        progressBar.style.width = width + '%';
+                    }
+                }, 20);
+            });
+        });
+
+        // Setup the button for remove all files
+        dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
+            Swal.fire({
+                text: "Are you sure you would like to remove all files?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, remove it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    dropzone.querySelector('.dropzone-upload').style.display = "none";
+                    dropzone.querySelector('.dropzone-remove-all').style.display = "none";
+                    myDropzone.removeAllFiles(true);
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your files was not removed!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // On all files completed upload
+        myDropzone.on("queuecomplete", function (progress) {
+            const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
+            uploadIcons.forEach(uploadIcon => {
+                uploadIcon.style.display = "none";
+            });
+        });
+
+        // On all files removed
+        myDropzone.on("removedfile", function (file) {
+            if (myDropzone.files.length < 1) {
+                dropzone.querySelector('.dropzone-upload').style.display = "none";
+                dropzone.querySelector('.dropzone-remove-all').style.display = "none";
+            }
+        });
+    }
+
+    // Init copy link
+    const initCopyLink = () => {
+        // Select all copy link elements
+        const elements = table.querySelectorAll('[data-kt-filemanger-table="copy_link"]');
+
+        elements.forEach(el => {
+            // Define elements
+            const button = el.querySelector('button');
+            const generator = el.querySelector('[data-kt-filemanger-table="copy_link_generator"]');
+            const result = el.querySelector('[data-kt-filemanger-table="copy_link_result"]');
+            const input = el.querySelector('input');
+
+            // Click action
+            button.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Reset toggle
+                generator.classList.remove('d-none');
+                result.classList.add('d-none');
+
+                var linkTimeout;
+                clearTimeout(linkTimeout);
+                linkTimeout = setTimeout(() => {
+                    generator.classList.add('d-none');
+                    result.classList.remove('d-none');
+                    input.select();
+                }, 2000);
+            });
+        });
+    }
+
+    // Handle move to folder
+    const handleMoveToFolder = () => {
+        const element = document.querySelector('#kt_modal_move_to_folder');
+        const form = element.querySelector('#kt_modal_move_to_folder_form');
+        const saveButton = form.querySelector('#kt_modal_move_to_folder_submit');
+        const moveModal = new bootstrap.Modal(element);
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'move_to_folder': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a folder.'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        saveButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            saveButton.setAttribute("data-kt-indicator", "on");
+
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Simulate process for demo only
+                        setTimeout(function () {
+
+                            Swal.fire({
+                                text: "Are you sure you would like to move to this folder",
+                                icon: "warning",
+                                showCancelButton: true,
+                                buttonsStyling: false,
+                                confirmButtonText: "Yes, move it!",
+                                cancelButtonText: "No, return",
+                                customClass: {
+                                    confirmButton: "btn btn-primary",
+                                    cancelButton: "btn btn-active-light"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    form.reset(); // Reset form	
+                                    moveModal.hide(); // Hide modal			
+
+                                    toastr.options = {
+                                        "closeButton": true,
+                                        "debug": false,
+                                        "newestOnTop": false,
+                                        "progressBar": false,
+                                        "positionClass": "toastr-top-right",
+                                        "preventDuplicates": false,
+                                        "showDuration": "300",
+                                        "hideDuration": "1000",
+                                        "timeOut": "5000",
+                                        "extendedTimeOut": "1000",
+                                        "showEasing": "swing",
+                                        "hideEasing": "linear",
+                                        "showMethod": "fadeIn",
+                                        "hideMethod": "fadeOut"
+                                    };
+
+                                    toastr.success('1 item has been moved.');
+
+                                    saveButton.removeAttribute("data-kt-indicator");
+                                } else {
+                                    Swal.fire({
+                                        text: "Your action has been cancelled!.",
+                                        icon: "error",
+                                        buttonsStyling: false,
+                                        confirmButtonText: "Ok, got it!",
+                                        customClass: {
+                                            confirmButton: "btn btn-primary",
+                                        }
+                                    });
+
+                                    saveButton.removeAttribute("data-kt-indicator");
+                                }
+                            });
+                        }, 500);
+                    } else {
+                        saveButton.removeAttribute("data-kt-indicator");
+                    }
+                });
+            }
+        });
+    }
+
+    // Count total number of items
+    const countTotalItems = () => {
+        const counter = document.getElementById('kt_file_manager_items_counter');
+
+        // Count total number of elements in datatable --- more info: https://datatables.net/reference/api/count()
+        counter.innerText = datatable.rows().count() + ' items';
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_file_manager_list');
+
+            if (!table) {
+                return;
+            }
+
+            initTemplates();
+            initDatatable();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleDeleteRows();
+            handleNewFolder();
+            initDropzone();
+            initCopyLink();
+            handleRename();
+            handleMoveToFolder();
+            countTotalItems();
+            KTMenu.createInstances();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTFileManagerList.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/file-manager/settings.js

@@ -0,0 +1,55 @@
+"use strict";
+
+// Class definition
+var KTAppFileManagerSettings = function () {
+    var form;
+
+	// Private functions
+	var handleForm = function() {
+		const saveButton = form.querySelector('#kt_file_manager_settings_submit');
+
+        saveButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            saveButton.setAttribute("data-kt-indicator", "on");
+
+            // Simulate process for demo only
+            setTimeout(function(){
+                toastr.options = {
+                    "closeButton": true,
+                    "debug": false,
+                    "newestOnTop": false,
+                    "progressBar": false,
+                    "positionClass": "toast-top-right",
+                    "preventDuplicates": false,
+                    "showDuration": "300",
+                    "hideDuration": "1000",
+                    "timeOut": "5000",
+                    "extendedTimeOut": "1000",
+                    "showEasing": "swing",
+                    "hideEasing": "linear",
+                    "showMethod": "fadeIn",
+                    "hideMethod": "fadeOut"
+                };
+
+                toastr.success('File manager settings have been saved');
+
+                saveButton.removeAttribute("data-kt-indicator");
+            }, 1000);
+        });
+	}
+
+	// Public methods
+	return {
+		init: function(element) {
+            form = document.querySelector('#kt_file_manager_settings');
+
+			handleForm();
+        }
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppFileManagerSettings.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/inbox/compose.js

@@ -0,0 +1,294 @@
+"use strict";
+
+// Class definition
+var KTAppInboxCompose = function () {
+    // Private functions
+    // Init reply form
+    const initForm = () => {
+        // Set variables
+        const form = document.querySelector('#kt_inbox_compose_form');
+        const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
+
+        // Handle CC and BCC
+        handleCCandBCC(form);
+
+        // Handle submit form
+        handleSubmit(form);
+
+        // Init tagify
+        allTagify.forEach(tagify => {
+            initTagify(tagify);
+        });
+
+        // Init quill editor
+        initQuill(form);
+
+        // Init dropzone
+        initDropzone(form);
+    }
+
+    // Handle CC and BCC toggle
+    const handleCCandBCC = (el) => {
+        // Get elements
+        const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
+        const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
+        const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
+        const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
+        const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
+        const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
+
+        // Handle CC button click
+        ccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.remove('d-none');
+            ccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        ccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.add('d-none');
+            ccElement.classList.remove('d-flex');
+        });
+
+        // Handle BCC button click
+        bccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.remove('d-none');
+            bccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        bccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.add('d-none');
+            bccElement.classList.remove('d-flex');
+        });
+    }
+
+    // Handle submit form
+    const handleSubmit = (el) => {
+        const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
+
+        // Handle button click event
+        submitButton.addEventListener("click", function () {
+            // Activate indicator
+            submitButton.setAttribute("data-kt-indicator", "on");
+
+            // Disable indicator after 3 seconds
+            setTimeout(function () {
+                submitButton.removeAttribute("data-kt-indicator");
+            }, 3000);
+        });
+    }
+
+    // Init tagify 
+    const initTagify = (el) => {
+        var inputElm = el;
+
+        const usersList = [
+            { value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
+            { value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
+            { value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
+            { value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
+            { value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
+            { value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
+            { value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
+            { value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
+        ];
+
+        function tagTemplate(tagData) {
+            return `
+                <tag title="${(tagData.title || tagData.email)}"
+                        contenteditable='false'
+                        spellcheck='false'
+                        tabIndex="-1"
+                        class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
+                        ${this.getAttributes(tagData)}>
+                    <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+                    <div class="d-flex align-items-center">
+                        <div class='tagify__tag__avatar-wrap ps-0'>
+                            <img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
+                        </div>
+                        <span class='tagify__tag-text'>${tagData.name}</span>
+                    </div>
+                </tag>
+            `
+        }
+
+        function suggestionItemTemplate(tagData) {
+            return `
+                <div ${this.getAttributes(tagData)}
+                    class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
+                    tabindex="0"
+                    role="option">
+
+                    ${tagData.avatar ? `
+                            <div class='tagify__dropdown__item__avatar-wrap me-2'>
+                                <img onerror="this.style.visibility='hidden'"  class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
+                            </div>` : ''
+                }
+
+                    <div class="d-flex flex-column">
+                        <strong>${tagData.name}</strong>
+                        <span>${tagData.email}</span>
+                    </div>
+                </div>
+            `
+        }
+
+        // initialize Tagify on the above input node reference
+        var tagify = new Tagify(inputElm, {
+            tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
+            enforceWhitelist: true,
+            skipInvalid: true, // do not remporarily add invalid tags
+            dropdown: {
+                closeOnSelect: false,
+                enabled: 0,
+                classname: 'users-list',
+                searchKeys: ['name', 'email']  // very important to set by which keys to search for suggesttions when typing
+            },
+            templates: {
+                tag: tagTemplate,
+                dropdownItem: suggestionItemTemplate
+            },
+            whitelist: usersList
+        })
+
+        tagify.on('dropdown:show dropdown:updated', onDropdownShow)
+        tagify.on('dropdown:select', onSelectSuggestion)
+
+        var addAllSuggestionsElm;
+
+        function onDropdownShow(e) {
+            var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
+
+            if (tagify.suggestedListItems.length > 1) {
+                addAllSuggestionsElm = getAddAllSuggestionsElm();
+
+                // insert "addAllSuggestionsElm" as the first element in the suggestions list
+                dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
+            }
+        }
+
+        function onSelectSuggestion(e) {
+            if (e.detail.elm == addAllSuggestionsElm)
+                tagify.dropdown.selectAll.call(tagify);
+        }
+
+        // create a "add all" custom suggestion element every time the dropdown changes
+        function getAddAllSuggestionsElm() {
+            // suggestions items should be based on "dropdownItem" template
+            return tagify.parseTemplate('dropdownItem', [{
+                class: "addAll",
+                name: "Add all",
+                email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
+                    return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
+                }, 0) + " Members"
+            }]
+            )
+        }
+    }
+
+    // Init quill editor 
+    const initQuill = (el) => {
+        var quill = new Quill('#kt_inbox_form_editor', {
+            modules: {
+                toolbar: [
+                    [{
+                        header: [1, 2, false]
+                    }],
+                    ['bold', 'italic', 'underline'],
+                    ['image', 'code-block']
+                ]
+            },
+            placeholder: 'Type your text here...',
+            theme: 'snow' // or 'bubble'
+        });
+
+        // Customize editor
+        const toolbar = el.querySelector('.ql-toolbar');
+
+        if (toolbar) {
+            const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
+            toolbar.classList.add(...classes);
+        }
+    }
+
+    // Init dropzone
+    const initDropzone = (el) => {
+        // set the dropzone container id
+        const id = '[data-kt-inbox-form="dropzone"]';
+        const dropzone = el.querySelector(id);
+        const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
+
+        // set the preview element template
+        var previewNode = dropzone.querySelector(".dropzone-item");
+        previewNode.id = "";
+        var previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+
+        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
+            url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
+            parallelUploads: 20,
+            maxFilesize: 1, // Max filesize in MB
+            previewTemplate: previewTemplate,
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: uploadButton // Define the element that should be used as click trigger to select files.
+        });
+
+
+        myDropzone.on("addedfile", function (file) {
+            // Hookup the start button
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+        });
+
+        // Update the total progress bar
+        myDropzone.on("totaluploadprogress", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.width = progress + "%";
+            });
+        });
+
+        myDropzone.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.opacity = "1";
+            });
+        });
+
+        // Hide the total progress bar when nothing"s uploading anymore
+        myDropzone.on("complete", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                });
+            }, 300);
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInboxCompose.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/inbox/listing.js

@@ -0,0 +1,58 @@
+"use strict";
+
+// Class definition
+var KTAppInboxListing = function () {
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            // 'paging': false,
+            // 'pageLength': false,      
+        });
+
+        datatable.on('draw', function () {
+            handleDatatableFooter();
+        });
+    }
+
+    // Handle datatable footer spacings
+    var handleDatatableFooter = () => {
+        const footerElement = document.querySelector('#kt_inbox_listing_wrapper > .row');
+        const spacingClasses = ['px-9', 'pt-3', 'pb-5'];
+        footerElement.classList.add(...spacingClasses);
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-inbox-listing-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_inbox_listing');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            handleSearchDatatable();
+            handleDatatableFooter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInboxListing.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/inbox/reply.js

@@ -0,0 +1,323 @@
+"use strict";
+
+// Class definition
+var KTAppInboxReply = function () {
+
+    // Private functions
+    const handlePreviewText = () => {
+        // Get all messages
+        const accordions = document.querySelectorAll('[data-kt-inbox-message="message_wrapper"]');
+        accordions.forEach(accordion => {
+            // Set variables
+            const header = accordion.querySelector('[data-kt-inbox-message="header"]');
+            const previewText = accordion.querySelector('[data-kt-inbox-message="preview"]');
+            const details = accordion.querySelector('[data-kt-inbox-message="details"]');
+            const message = accordion.querySelector('[data-kt-inbox-message="message"]');
+
+            // Init bootstrap collapse -- more info: https://getbootstrap.com/docs/5.1/components/collapse/#via-javascript
+            const collapse = new bootstrap.Collapse(message, { toggle: false });
+
+            // Handle header click action
+            header.addEventListener('click', e => {
+                // Return if KTMenu or buttons are clicked
+                if (e.target.closest('[data-kt-menu-trigger="click"]') || e.target.closest('.btn')) {
+                    return;
+                } else {
+                    previewText.classList.toggle('d-none');
+                    details.classList.toggle('d-none');
+                    collapse.toggle();
+                }
+            });
+        });
+    }
+
+    // Init reply form
+    const initForm = () => {
+        // Set variables
+        const form = document.querySelector('#kt_inbox_reply_form');
+        const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
+
+        // Handle CC and BCC
+        handleCCandBCC(form);
+
+        // Handle submit form
+        handleSubmit(form);
+
+        // Init tagify
+        allTagify.forEach(tagify => {
+            initTagify(tagify);
+        });
+
+        // Init quill editor
+        initQuill(form);
+
+        // Init dropzone
+        initDropzone(form);
+    }
+
+    // Handle CC and BCC toggle
+    const handleCCandBCC = (el) => {
+        // Get elements
+        const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
+        const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
+        const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
+        const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
+        const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
+        const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
+
+        // Handle CC button click
+        ccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.remove('d-none');
+            ccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        ccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.add('d-none');
+            ccElement.classList.remove('d-flex');
+        });
+
+        // Handle BCC button click
+        bccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.remove('d-none');
+            bccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        bccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.add('d-none');
+            bccElement.classList.remove('d-flex');
+        });
+    }
+
+    // Handle submit form
+    const handleSubmit = (el) => {
+        const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
+
+        // Handle button click event
+        submitButton.addEventListener("click", function () {
+            // Activate indicator
+            submitButton.setAttribute("data-kt-indicator", "on");
+
+            // Disable indicator after 3 seconds
+            setTimeout(function () {
+                submitButton.removeAttribute("data-kt-indicator");
+            }, 3000);
+        });
+    }
+
+    // Init tagify 
+    const initTagify = (el) => {
+        var inputElm = el;
+
+        const usersList = [
+            { value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
+            { value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
+            { value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
+            { value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
+            { value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
+            { value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
+            { value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
+            { value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
+        ];
+
+        function tagTemplate(tagData) {
+            return `
+                <tag title="${(tagData.title || tagData.email)}"
+                        contenteditable='false'
+                        spellcheck='false'
+                        tabIndex="-1"
+                        class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
+                        ${this.getAttributes(tagData)}>
+                    <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+                    <div class="d-flex align-items-center">
+                        <div class='tagify__tag__avatar-wrap ps-0'>
+                            <img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
+                        </div>
+                        <span class='tagify__tag-text'>${tagData.name}</span>
+                    </div>
+                </tag>
+            `
+        }
+
+        function suggestionItemTemplate(tagData) {
+            return `
+                <div ${this.getAttributes(tagData)}
+                    class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
+                    tabindex="0"
+                    role="option">
+
+                    ${tagData.avatar ? `
+                            <div class='tagify__dropdown__item__avatar-wrap me-2'>
+                                <img onerror="this.style.visibility='hidden'"  class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
+                            </div>` : ''
+                }
+
+                    <div class="d-flex flex-column">
+                        <strong>${tagData.name}</strong>
+                        <span>${tagData.email}</span>
+                    </div>
+                </div>
+            `
+        }
+
+        // initialize Tagify on the above input node reference
+        var tagify = new Tagify(inputElm, {
+            tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
+            enforceWhitelist: true,
+            skipInvalid: true, // do not remporarily add invalid tags
+            dropdown: {
+                closeOnSelect: false,
+                enabled: 0,
+                classname: 'users-list',
+                searchKeys: ['name', 'email']  // very important to set by which keys to search for suggesttions when typing
+            },
+            templates: {
+                tag: tagTemplate,
+                dropdownItem: suggestionItemTemplate
+            },
+            whitelist: usersList
+        })
+
+        tagify.on('dropdown:show dropdown:updated', onDropdownShow)
+        tagify.on('dropdown:select', onSelectSuggestion)
+
+        var addAllSuggestionsElm;
+
+        function onDropdownShow(e) {
+            var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
+
+            if (tagify.suggestedListItems.length > 1) {
+                addAllSuggestionsElm = getAddAllSuggestionsElm();
+
+                // insert "addAllSuggestionsElm" as the first element in the suggestions list
+                dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
+            }
+        }
+
+        function onSelectSuggestion(e) {
+            if (e.detail.elm == addAllSuggestionsElm)
+                tagify.dropdown.selectAll.call(tagify);
+        }
+
+        // create a "add all" custom suggestion element every time the dropdown changes
+        function getAddAllSuggestionsElm() {
+            // suggestions items should be based on "dropdownItem" template
+            return tagify.parseTemplate('dropdownItem', [{
+                class: "addAll",
+                name: "Add all",
+                email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
+                    return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
+                }, 0) + " Members"
+            }]
+            )
+        }
+    }
+
+    // Init quill editor 
+    const initQuill = (el) => {
+        var quill = new Quill('#kt_inbox_form_editor', {
+            modules: {
+                toolbar: [
+                    [{
+                        header: [1, 2, false]
+                    }],
+                    ['bold', 'italic', 'underline'],
+                    ['image', 'code-block']
+                ]
+            },
+            placeholder: 'Type your text here...',
+            theme: 'snow' // or 'bubble'
+        });
+
+        // Customize editor
+        const toolbar = el.querySelector('.ql-toolbar');
+
+        if (toolbar) {
+            const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
+            toolbar.classList.add(...classes);
+        }
+    }
+
+    // Init dropzone
+    const initDropzone = (el) => {
+        // set the dropzone container id
+        const id = '[data-kt-inbox-form="dropzone"]';
+        const dropzone = el.querySelector(id);
+        const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
+
+        // set the preview element template
+        var previewNode = dropzone.querySelector(".dropzone-item");
+        previewNode.id = "";
+        var previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+
+        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
+            url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
+            parallelUploads: 20,
+            maxFilesize: 1, // Max filesize in MB
+            previewTemplate: previewTemplate,
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: uploadButton // Define the element that should be used as click trigger to select files.
+        });
+
+
+        myDropzone.on("addedfile", function (file) {
+            // Hookup the start button
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+        });
+
+        // Update the total progress bar
+        myDropzone.on("totaluploadprogress", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.width = progress + "%";
+            });
+        });
+
+        myDropzone.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.opacity = "1";
+            });
+        });
+
+        // Hide the total progress bar when nothing"s uploading anymore
+        myDropzone.on("complete", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                });
+            }, 300);
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            handlePreviewText();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInboxReply.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/invoices/create.js

@@ -0,0 +1,111 @@
+"use strict";
+
+// Class definition
+var KTAppInvoicesCreate = function () {
+    var form;
+
+	// Private functions
+	var updateTotal = function() {
+		var items = [].slice.call(form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]'));
+		var grandTotal = 0;
+
+		var format = wNumb({
+			//prefix: '$ ',
+			decimals: 2,
+			thousand: ','
+		});
+
+		items.map(function (item) {
+            var quantity = item.querySelector('[data-kt-element="quantity"]');
+			var price = item.querySelector('[data-kt-element="price"]');
+
+			var priceValue = format.from(price.value);
+			priceValue = (!priceValue || priceValue < 0) ? 0 : priceValue;
+
+			var quantityValue = parseInt(quantity.value);
+			quantityValue = (!quantityValue || quantityValue < 0) ?  1 : quantityValue;
+
+			price.value = format.to(priceValue);
+			quantity.value = quantityValue;
+
+			item.querySelector('[data-kt-element="total"]').innerText = format.to(priceValue * quantityValue);			
+
+			grandTotal += priceValue * quantityValue;
+		});
+
+		form.querySelector('[data-kt-element="sub-total"]').innerText = format.to(grandTotal);
+		form.querySelector('[data-kt-element="grand-total"]').innerText = format.to(grandTotal);
+	}
+
+	var handleEmptyState = function() {
+		if (form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]').length === 0) {
+			var item = form.querySelector('[data-kt-element="empty-template"] tr').cloneNode(true);
+			form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
+		} else {
+			KTUtil.remove(form.querySelector('[data-kt-element="items"] [data-kt-element="empty"]'));
+		}
+	}
+
+	var handeForm = function (element) {
+		// Add item
+		form.querySelector('[data-kt-element="items"] [data-kt-element="add-item"]').addEventListener('click', function(e) {
+			e.preventDefault();
+
+			var item = form.querySelector('[data-kt-element="item-template"] tr').cloneNode(true);
+
+			form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
+
+			handleEmptyState();
+			updateTotal();			
+		});
+
+		// Remove item
+		KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="remove-item"]', 'click', function(e) {
+			e.preventDefault();
+
+			KTUtil.remove(this.closest('[data-kt-element="item"]'));
+
+			handleEmptyState();
+			updateTotal();			
+		});		
+
+		// Handle price and quantity changes
+		KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="quantity"], [data-kt-element="items"] [data-kt-element="price"]', 'change', function(e) {
+			e.preventDefault();
+
+			updateTotal();			
+		});
+	}
+
+	var initForm = function(element) {
+		// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var invoiceDate = $(form.querySelector('[name="invoice_date"]'));
+		invoiceDate.flatpickr({
+			enableTime: false,
+			dateFormat: "d, M Y",
+		});
+
+        // Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var dueDate = $(form.querySelector('[name="invoice_due_date"]'));
+		dueDate.flatpickr({
+			enableTime: false,
+			dateFormat: "d, M Y",
+		});
+	}
+
+	// Public methods
+	return {
+		init: function(element) {
+            form = document.querySelector('#kt_invoice_form');
+
+			handeForm();
+            initForm();
+			updateTotal();
+        }
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInvoicesCreate.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/list/list.js

@@ -0,0 +1,79 @@
+"use strict";
+
+// Class definition
+var KTProjectList = function () {    
+    var initChart = function () {
+        // init chart
+        var element = document.getElementById("kt_project_list_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var config = {
+            type: 'doughnut',
+            data: {
+                datasets: [{
+                    data: [30, 45, 25],
+                    backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
+                }],
+                labels: ['Active', 'Completed', 'Yet to start']
+            },
+            options: {
+                chart: {
+                    fontFamily: 'inherit'
+                },
+                borderWidth: 0,
+                cutout: '75%',
+                cutoutPercentage: 65,
+                responsive: true,
+                maintainAspectRatio: false,
+                title: {
+                    display: false
+                },
+                animation: {
+                    animateScale: true,
+                    animateRotate: true
+                },
+                stroke: {
+                    width: 0
+                },
+                tooltips: {
+                    enabled: true,
+                    intersect: false,
+                    mode: 'nearest',
+                    bodySpacing: 5,
+                    yPadding: 10,
+                    xPadding: 10,
+                    caretPadding: 0,
+                    displayColors: false,
+                    backgroundColor: '#20D489',
+                    titleFontColor: '#ffffff',
+                    cornerRadius: 4,
+                    footerSpacing: 0,
+                    titleSpacing: 0
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }                
+            }
+        };
+
+        var ctx = element.getContext('2d');
+        var myDoughnut = new Chart(ctx, config);
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectList.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/project/project.js

@@ -0,0 +1,316 @@
+"use strict";
+
+// Class definition
+var KTProjectOverview = function () {
+    // Colors
+    var primary = KTUtil.getCssVariableValue('--bs-primary');
+    var lightPrimary = KTUtil.getCssVariableValue('--bs-primary-light');
+    var success = KTUtil.getCssVariableValue('--bs-success');
+    var lightSuccess = KTUtil.getCssVariableValue('--bs-success-light');
+    var gray200 = KTUtil.getCssVariableValue('--bs-gray-200');
+    var gray500 = KTUtil.getCssVariableValue('--bs-gray-500');
+
+    // Private functions
+    var initChart = function () {        
+        // init chart
+        var element = document.getElementById("project_overview_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var config = {
+            type: 'doughnut',
+            data: {
+                datasets: [{
+                    data: [30, 45, 25],
+                    backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
+                }],
+                labels: ['Active', 'Completed', 'Yet to start']
+            },
+            options: {
+                chart: {
+                    fontFamily: 'inherit'
+                },
+                cutoutPercentage: 75,
+                responsive: true,
+                maintainAspectRatio: false,
+                cutout: '75%',
+                title: {
+                    display: false
+                },
+                animation: {
+                    animateScale: true,
+                    animateRotate: true
+                },
+                tooltips: {
+                    enabled: true,
+                    intersect: false,
+                    mode: 'nearest',
+                    bodySpacing: 5,
+                    yPadding: 10,
+                    xPadding: 10,
+                    caretPadding: 0,
+                    displayColors: false,
+                    backgroundColor: '#20D489',
+                    titleFontColor: '#ffffff',
+                    cornerRadius: 4,
+                    footerSpacing: 0,
+                    titleSpacing: 0
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
+        };
+
+        var ctx = element.getContext('2d');
+        var myDoughnut = new Chart(ctx, config);
+    }
+
+    var initGraph = function () {
+        var element = document.getElementById("kt_project_overview_graph");
+        var height = parseInt(KTUtil.css(element, 'height'));
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            series: [{
+                name: 'Incomplete',
+                data: [70, 70, 80, 80, 75, 75, 75]
+            }, {
+                name: 'Complete',
+                data: [55, 55, 60, 60, 55, 55, 60]
+            }],
+            chart: {
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: 'solid',
+                opacity: 1
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 3,
+                colors: [primary, success]
+            },
+            xaxis: {
+                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: gray500,
+                        fontSize: '12px'
+                    }
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: primary,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: gray500,
+                        fontSize: '12px',
+                    }
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px',
+                },
+                y: {
+                    formatter: function (val) {
+                        return val + " tasks"
+                    }
+                }
+            },
+            colors: [lightPrimary, lightSuccess],
+            grid: {
+                borderColor: gray200,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                //size: 5,
+                colors: [lightPrimary, lightSuccess],
+                strokeColor: [primary, success],
+                strokeWidth: 3
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        chart.render();
+    }
+
+    var initTable = function () {
+        var table = document.querySelector('#kt_profile_overview_table');
+
+        if (!table) {
+            return;
+        }
+
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
+            dateRow[1].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        const datatable = $(table).DataTable({
+            "info": false,
+            'order': []
+        });
+
+        // Filter dropdown elements
+        const filterOrders = document.getElementById('kt_filter_orders');
+        const filterYear = document.getElementById('kt_filter_year');
+
+        // Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
+        filterOrders.addEventListener('change', function (e) {
+            datatable.column(3).search(e.target.value).draw();
+        });
+
+        // Filter by date --- official docs reference: https://momentjs.com/docs/
+        var minDate;
+        var maxDate;
+
+        filterYear.addEventListener('change', function (e) {
+            const value = e.target.value;
+            switch (value) {
+                case 'thisyear': {
+                    minDate = moment().startOf('year').format();
+                    maxDate = moment().endOf('year').format();
+                    datatable.draw();
+                    break;
+                }
+                case 'thismonth': {
+                    minDate = moment().startOf('month').format();
+                    maxDate = moment().endOf('month').format();
+                    datatable.draw();
+                    break;
+                }
+                case 'lastmonth': {
+                    minDate = moment().subtract(1, 'months').startOf('month').format();
+                    maxDate = moment().subtract(1, 'months').endOf('month').format();
+                    datatable.draw();
+                    break;
+                }
+                case 'last90days': {
+                    minDate = moment().subtract(30, 'days').format();
+                    maxDate = moment().format();
+                    datatable.draw();
+                    break;
+                }
+                default: {
+                    minDate = moment().subtract(100, 'years').startOf('month').format();
+                    maxDate = moment().add(1, 'months').endOf('month').format();
+                    datatable.draw();
+                    break;
+                }
+            }
+        });
+
+        // Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
+        $.fn.dataTable.ext.search.push(
+            function (settings, data, dataIndex) {
+                var min = minDate;
+                var max = maxDate;
+                var date = parseFloat(moment(data[1]).format()) || 0; // use data for the age column
+
+                if ((isNaN(min) && isNaN(max)) ||
+                    (isNaN(min) && date <= max) ||
+                    (min <= date && isNaN(max)) ||
+                    (min <= date && date <= max)) {
+                    return true;
+                }
+                return false;
+            }
+        );
+
+        // Search --- official docs reference: https://datatables.net/reference/api/search()
+        var filterSearch = document.getElementById('kt_filter_search');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+            initGraph();
+            initTable();
+        }
+    }
+}();
+
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectOverview.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/settings/settings.js

@@ -0,0 +1,104 @@
+"use strict";
+
+// Class definition
+var KTProjectSettings = function () {
+
+    // Private functions
+    var handleForm = function () {
+        // Init Datepicker --- For more info, please check Flatpickr's official documentation: https://flatpickr.js.org/
+        $("#kt_datepicker_1").flatpickr();
+
+        // Form validation
+        var validation;
+        var _form = document.getElementById('kt_project_settings_form');
+        var submitButton = _form.querySelector('#kt_project_settings_submit');
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validation = FormValidation.formValidation(
+            _form,
+            {
+                fields: {
+                    name: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Project name is required'
+                            }
+                        }
+                    },
+                    type: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Project type is required'
+                            }
+                        }
+                    },
+                    description: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Project Description is required'
+                            }
+                        }
+                    },
+                    date: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Due Date is required'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    submitButton: new FormValidation.plugins.SubmitButton(),
+                    //defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row'
+                    })
+                }
+            }
+        );
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+
+                    swal.fire({
+                        text: "Thank you! You've updated your project settings",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-light-primary"
+                        }
+                    });
+
+                } 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 fw-bold btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            handleForm();
+        }
+    }
+}();
+
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectSettings.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/targets/targets.js

@@ -0,0 +1,38 @@
+"use strict";
+
+// Class definition
+var KTProjectTargets = function () {
+
+    var initDatatable = function () {
+        const table = document.getElementById('kt_profile_overview_table');
+
+        // set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
+            dateRow[1].setAttribute('data-order', realDate);
+        });
+
+        // init datatable --- more info on datatables: https://datatables.net/manual/
+        const datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "paging": false,
+        });
+
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initDatatable();
+        }
+    }
+}();
+
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectTargets.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/users/users.js

@@ -0,0 +1,52 @@
+"use strict";
+
+// Class definition
+var KTProjectUsers = function () {
+
+    var initTable = function () {
+        // Set date data order
+        const table = document.getElementById('kt_project_users_table');
+
+        if (!table) {
+            return;
+        }
+        
+        const tableRows = table.querySelectorAll('tbody tr');
+        
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
+            dateRow[1].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        const datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "columnDefs": [{
+                "targets": 4,
+                "orderable": false
+            }]
+        });
+
+        // Search --- official docs reference: https://datatables.net/reference/api/search()
+        var filterSearch = document.getElementById('kt_filter_search');
+        if (filterSearch) {
+            filterSearch.addEventListener('keyup', function (e) {
+                datatable.search(e.target.value).draw();
+            });
+        }        
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initTable();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProjectUsers.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/add/advanced.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var KTSubscriptionsAdvanced = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    var initCustomFieldsDatatable = function () {
+        // Define variables
+        const addButton = document.getElementById('kt_create_new_custom_fields_add');
+
+        // Duplicate input fields
+        const fieldName = table.querySelector('tbody tr td:first-child').innerHTML;
+        const fieldValue = table.querySelector('tbody tr td:nth-child(2)').innerHTML;
+        const deleteButton = table.querySelector('tbody tr td:last-child').innerHTML;
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'ordering': false,
+            'paging': false,
+            "lengthChange": false
+        });
+
+        // Define datatable row node
+        var rowNode;
+
+        // Handle add button
+        addButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            rowNode = datatable.row.add([
+                fieldName,
+                fieldValue,
+                deleteButton
+            ]).draw().node();
+
+            // Add custom class to last column -- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
+            $(rowNode).find('td').eq(2).addClass('text-end');
+
+            // Re-calculate index
+            initCustomFieldRowIndex();
+        });
+    }
+
+    // Handle row index count
+    var initCustomFieldRowIndex = function() {
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach((tr, index) => {
+            // add index number to input names & id
+            const fieldNameInput = tr.querySelector('td:first-child input');
+            const fieldValueInput = tr.querySelector('td:nth-child(2) input');
+            const fieldNameLabel = fieldNameInput.getAttribute('id');
+            const fieldValueLabel = fieldValueInput.getAttribute('id');
+
+            fieldNameInput.setAttribute('name', fieldNameLabel + '-' + index);
+            fieldValueInput.setAttribute('name', fieldValueLabel + '-' + index);
+        });
+    }
+
+    // Delete product
+    var deleteCustomField = function() {
+        KTUtil.on(table, '[data-kt-action="field_remove"]', 'click', function(e) {
+            e.preventDefault();
+
+            // Select parent row
+            const parent = e.target.closest('tr');
+
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete this field ?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted it!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove current row
+                        datatable.row($(parent)).remove().draw();
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "It was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    })
+                }
+            });
+        });
+    }
+
+    return {
+        init: function () {
+            table = document.getElementById('kt_create_new_custom_fields');
+
+            initCustomFieldsDatatable();
+            initCustomFieldRowIndex();            
+            deleteCustomField();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsAdvanced.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/add/customer-select.js

@@ -0,0 +1,85 @@
+"use strict";
+
+// Class definition
+var KTModalCustomerSelect = function() {
+    // Private variables
+    var element;
+    var suggestionsElement;
+    var resultsElement;
+    var wrapperElement;
+    var emptyElement;
+    var searchObject;
+    
+    var modal;
+
+    // Private functions
+    var processs = function(search) {
+        var timeout = setTimeout(function() {
+            var number = KTUtil.getRandomInt(1, 6);
+
+            // 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_customer_search_handler');
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_customer_search'));
+
+            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);
+
+            // Handle select
+            KTUtil.on(element, '[data-kt-search-element="customer"]', 'click', function() {
+                modal.hide();
+            });
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalCustomerSelect.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/add/products.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var KTSubscriptionsProducts = function () {
+    // Shared variables
+    var table;
+    var datatable;
+    var modalEl;
+    var modal;
+
+    var initDatatable = function() {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/        
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'ordering': false,
+            'paging': false,
+            "lengthChange": false
+        });
+    }
+
+    // Delete product
+    var deleteProduct = function() {
+        KTUtil.on(table, '[data-kt-action="product_remove"]', 'click', function(e) {
+            e.preventDefault();
+
+            // Select parent row
+            const parent = e.target.closest('tr');
+
+            // Get customer name
+            const productName = parent.querySelectorAll('td')[0].innerText;
+
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete " + productName + "?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted " + productName + "!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove current row
+                        datatable.row($(parent)).remove().draw();
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: customerName + " was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Modal handlers
+    var addProduct = function() {
+        // Select modal buttons
+        const closeButton = modalEl.querySelector('#kt_modal_add_product_close');
+        const cancelButton = modalEl.querySelector('#kt_modal_add_product_cancel');
+        const submitButton = modalEl.querySelector('#kt_modal_add_product_submit');
+
+        // Cancel button action
+        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) {
+					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",
+						}
+					});
+				}
+			});
+        });
+
+        // Add customer button handler
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Check all radio buttons
+            var radio = modalEl.querySelector('input[type="radio"]:checked');            
+
+            // Define datatable row node
+            var rowNode;
+
+            if (radio && radio.checked === true) {
+                rowNode = datatable.row.add( [
+                    radio.getAttribute('data-kt-product-name'),
+                    '1',
+                    radio.getAttribute('data-kt-product-price') + ' / ' + radio.getAttribute('data-kt-product-frequency'),
+                    table.querySelector('tbody tr td:last-child').innerHTML
+                ]).draw().node();
+
+                // Add custom class to last column -- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
+                $( rowNode ).find('td').eq(3).addClass('text-end');
+            }           
+
+            modal.hide(); // Remove modal
+        });
+    }
+
+    return {
+        init: function () {
+            modalEl = document.getElementById('kt_modal_add_product');
+
+            // Select modal -- more info on Bootstrap modal: https://getbootstrap.com/docs/5.0/components/modal/
+            modal = new bootstrap.Modal(modalEl);
+
+            table = document.querySelector('#kt_subscription_products_table');
+
+            initDatatable();
+            deleteProduct();
+            addProduct();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsProducts.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/list/export.js

@@ -0,0 +1,189 @@
+"use strict";
+
+// Class definition
+var KTSubscriptionsExport = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var validator;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var handleForm = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Date range 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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        setTimeout(function () {
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            Swal.fire({
+                                text: "Customer list has been successfully exported!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 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-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",
+                        }
+                    });
+                }
+            });
+        });
+
+        closeButton.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",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    var initForm = function () {
+        const datepicker = form.querySelector("[name=date]");
+
+        // Handle datepicker range -- For more info on flatpickr plugin, please visit: https://flatpickr.js.org/
+        $(datepicker).flatpickr({
+            altInput: true,
+            altFormat: "F j, Y",
+            dateFormat: "Y-m-d",
+            mode: "range"
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_subscriptions_export_modal');
+            modal = new bootstrap.Modal(element);
+
+            form = document.querySelector('#kt_subscriptions_export_form');
+            submitButton = form.querySelector('#kt_subscriptions_export_submit');
+            cancelButton = form.querySelector('#kt_subscriptions_export_cancel');
+            closeButton = element.querySelector('#kt_subscriptions_export_close');
+
+            handleForm();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsExport.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/list/list.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var KTSubscriptionsList = function () {
+    // Define shared variables
+    var table;
+    var datatable;
+    var toolbarBase;
+    var toolbarSelected;
+    var selectedCount;
+
+    // Private functions
+    var initDatatable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
+            dateRow[5].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)                
+            ]
+        });
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleRowDeletion();
+            toggleToolbars();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearch = function () {
+        const filterSearch = document.querySelector('[data-kt-subscription-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Filter Datatable
+    var handleFilter = function () {
+        // Select filter options
+        const filterForm = document.querySelector('[data-kt-subscription-table-filter="form"]');
+        const filterButton = filterForm.querySelector('[data-kt-subscription-table-filter="filter"]');
+        const resetButton = filterForm.querySelector('[data-kt-subscription-table-filter="reset"]');
+        const selectOptions = filterForm.querySelectorAll('select');
+
+        // Filter datatable on submit
+        filterButton.addEventListener('click', function () {
+            var filterString = '';
+
+            // Get filter values
+            selectOptions.forEach((item, index) => {
+                if (item.value && item.value !== '') {
+                    if (index !== 0) {
+                        filterString += ' ';
+                    }
+
+                    // Build filter value options
+                    filterString += item.value;
+                }
+            });
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search(filterString).draw();
+        });
+
+        // Reset datatable
+        resetButton.addEventListener('click', function () {
+            // Reset filter form
+            selectOptions.forEach((item, index) => {
+                // Reset Select2 dropdown --- official docs reference: https://select2.org/programmatic-control/add-select-clear-items
+                $(item).val(null).trigger('change');
+            });
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search('').draw();
+        });
+    }
+
+    // Delete subscirption
+    var handleRowDeletion = function () {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-subscriptions-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const customerName = parent.querySelectorAll('td')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + customerName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + customerName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        }).then(function () {
+                            // Detect checked checkboxes
+                            toggleToolbars();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        toolbarBase = document.querySelector('[data-kt-subscription-table-toolbar="base"]');
+        toolbarSelected = document.querySelector('[data-kt-subscription-table-toolbar="selected"]');
+        selectedCount = document.querySelector('[data-kt-subscription-table-select="selected_count"]');
+        const deleteSelected = document.querySelector('[data-kt-subscription-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    }).then(function () {
+                        toggleToolbars(); // Detect checked checkboxes
+                        initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    return {
+        // Public functions  
+        init: function () {
+            table = document.getElementById('kt_subscriptions_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initToggleToolbar();
+            handleSearch();
+            handleRowDeletion();
+            handleFilter();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsList.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/support-center/general.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var KTSupportCenterGeneral = function() {
+    var menuWrapper;
+
+    var initInstance = function(element) {
+        var elements = element;
+
+        if ( typeof elements === 'undefined' ) {
+            elements = document.querySelectorAll('.highlight');
+        }
+
+        if ( elements && elements.length > 0 ) {
+            for ( var i = 0; i < elements.length; ++i ) {
+                var highlight = elements[i];
+                var copy = highlight.querySelector('.highlight-copy');
+
+                if ( copy ) {
+                    var clipboard = new ClipboardJS(copy, {
+                        target: function(trigger) {
+                            var highlight = trigger.closest('.highlight');
+                            var el = highlight.querySelector('.tab-pane.active');
+
+                            if ( el == null ) {
+                                el = highlight.querySelector('.highlight-code');
+                            }
+
+                            return el;
+                        }
+                    });
+
+                    clipboard.on('success', function(e) {
+                        var caption = e.trigger.innerHTML;
+
+                        e.trigger.innerHTML = 'copied';
+                        e.clearSelection();
+
+                        setTimeout(function() {
+                            e.trigger.innerHTML = caption;
+                        }, 2000);
+                    });
+                }
+            }
+        }
+    }
+
+    var handleMenuScroll = function() {
+        var menuActiveItem = menuWrapper.querySelector(".menu-link.active");
+
+        if ( !menuActiveItem ) {
+            return;
+        } 
+
+        if ( KTUtil.isVisibleInContainer(menuActiveItem, menuWrapper) === true) {
+            return;
+        }
+
+        menuWrapper.scroll({
+            top: KTUtil.getRelativeTopPosition(menuActiveItem, menuWrapper),
+            behavior: 'smooth'
+        });
+    }
+
+    return {
+        init: function() {
+            initInstance();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSupportCenterGeneral.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/support-center/tickets/create.js

@@ -0,0 +1,219 @@
+"use strict";
+
+// Class definition
+var KTModalNewTicket = function () {
+	var submitButton;
+	var cancelButton;
+	var validator;
+	var form;
+	var modal;
+	var modalEl;
+
+	// Init form inputs
+	var initForm = function() {
+		// Ticket attachments
+		// For more info about Dropzone plugin visit:  https://www.dropzonejs.com/#usage
+		var myDropzone = new Dropzone("#kt_modal_create_ticket_attachments", { 
+			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 dueDate = $(form.querySelector('[name="due_date"]'));
+		dueDate.flatpickr({
+			enableTime: true,
+			dateFormat: "d, M Y, H:i",
+		});
+
+		// Ticket user. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="user"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('user');
+        });
+
+		// Ticket status. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="status"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('status');
+        });
+	}
+
+	// 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: {
+					subject: {
+						validators: {
+							notEmpty: {
+								message: 'Ticket subject is required'
+							}
+						}
+					},
+					user: {
+						validators: {
+							notEmpty: {
+								message: 'Ticket user is required'
+							}
+						}
+					},
+					due_date: {
+						validators: {
+							notEmpty: {
+								message: 'Ticket due date is required'
+							}
+						}
+					},
+					description: {
+						validators: {
+							notEmpty: {
+								message: 'Target description is required'
+							}
+						}
+					},
+					'notifications[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select at least one notifications 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_ticket');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			form = document.querySelector('#kt_modal_new_ticket_form');
+			submitButton = document.getElementById('kt_modal_new_ticket_submit');
+			cancelButton = document.getElementById('kt_modal_new_ticket_cancel');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalNewTicket.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/permissions/add-permission.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersAddPermission = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_permission');
+    const form = element.querySelector('#kt_modal_add_permission_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddPermission = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'permission_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Permission name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-permissions-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-permissions-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-permissions-modal-action="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 (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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddPermission();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddPermission.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/permissions/list.js

@@ -0,0 +1,117 @@
+"use strict";
+
+// Class definition
+var KTUsersPermissionsList = function () {
+    // Shared variables
+    var datatable;
+    var table;
+
+    // Init add schedule modal
+    var initPermissionsList = () => {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[2].innerHTML, "DD MMM YYYY, LT").format(); // select date from 2nd column in table
+            dateRow[2].setAttribute('data-order', realDate);
+        });
+
+         // Init datatable --- more info on datatables: https://datatables.net/manual/
+         datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'columnDefs': [
+                { orderable: false, targets: 1 }, // Disable ordering on column 1 (assigned)
+                { orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
+            ]
+        });        
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-permissions-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete user
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-permissions-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get permission name
+                const permissionName = parent.querySelectorAll('td')[0].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + permissionName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + permissionName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    return {
+        // Public functions
+        init: function () {
+            table = document.querySelector('#kt_permissions_table');
+            
+            if (!table) {
+                return;
+            }
+
+            initPermissionsList();
+            handleSearchDatatable();
+            handleDeleteRows();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersPermissionsList.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/permissions/update-permission.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePermission = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_permission');
+    const form = element.querySelector('#kt_modal_update_permission_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePermission = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'permission_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Permission name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-permissions-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-permissions-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-permissions-modal-action="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 (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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePermission();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePermission.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/list/add.js

@@ -0,0 +1,185 @@
+"use strict";
+
+// Class definition
+var KTUsersAddRole = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_role');
+    const form = element.querySelector('#kt_modal_add_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddRole = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'role_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Role name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+         // Submit button handler
+         const submitButton = element.querySelector('[data-kt-roles-modal-action="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 (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"
+                             }
+                         });
+                     }
+                 });
+             }
+         });
+        
+
+    }
+
+    // Select all handler
+    const handleSelectAll = () =>{
+        // Define variables
+        const selectAll = form.querySelector('#kt_roles_select_all');
+        const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
+
+        // Handle check state
+        selectAll.addEventListener('change', e => {
+
+            // Apply check state to all checkboxes
+            allCheckboxes.forEach(c => {
+                c.checked = e.target.checked;
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddRole();
+            handleSelectAll();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddRole.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/list/update-role.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePermissions = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_role');
+    const form = element.querySelector('#kt_modal_update_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePermissions = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'role_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Role name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-roles-modal-action="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 (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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Select all handler
+    const handleSelectAll = () => {
+        // Define variables
+        const selectAll = form.querySelector('#kt_roles_select_all');
+        const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
+
+        // Handle check state
+        selectAll.addEventListener('change', e => {
+
+            // Apply check state to all checkboxes
+            allCheckboxes.forEach(c => {
+                c.checked = e.target.checked;
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePermissions();
+            handleSelectAll();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePermissions.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/view/update-role.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePermissions = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_role');
+    const form = element.querySelector('#kt_modal_update_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePermissions = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'role_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Role name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-roles-modal-action="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 (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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Select all handler
+    const handleSelectAll = () => {
+        // Define variables
+        const selectAll = form.querySelector('#kt_roles_select_all');
+        const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
+
+        // Handle check state
+        selectAll.addEventListener('change', e => {
+
+            // Apply check state to all checkboxes
+            allCheckboxes.forEach(c => {
+                c.checked = e.target.checked;
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePermissions();
+            handleSelectAll();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePermissions.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/view/view.js

@@ -0,0 +1,225 @@
+"use strict";
+
+// Class definition
+var KTUsersViewRole = function () {
+    // Shared variables
+    var datatable;
+    var table;
+
+    // Init add schedule modal
+    var initViewRole = () => {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
+            dateRow[3].setAttribute('data-order', realDate);
+        });
+
+         // Init datatable --- more info on datatables: https://datatables.net/manual/
+         datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 4 }, // Disable ordering on column 4 (actions)
+            ]
+        });        
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-roles-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete user
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-roles-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const userName = parent.querySelectorAll('td')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + userName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + userName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        const deleteSelected = document.querySelector('[data-kt-view-roles-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    }).then(function(){
+                        toggleToolbars(); // Detect checked checkboxes
+                        initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Define variables
+        const toolbarBase = document.querySelector('[data-kt-view-roles-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-view-roles-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-view-roles-table-select="selected_count"]');
+
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            table = document.querySelector('#kt_roles_view_table');
+            
+            if (!table) {
+                return;
+            }
+
+            initViewRole();
+            handleSearchDatatable();
+            handleDeleteRows();
+            initToggleToolbar();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersViewRole.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/list/add.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTUsersAddUser = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_user');
+    const form = element.querySelector('#kt_modal_add_user_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddUser = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'user_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Full name is required'
+                            }
+                        }
+                    },
+                    'user_email': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Valid email address is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', e => {
+            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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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();	
+                } 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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();	
+                } 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 () {
+            initAddUser();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddUser.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/list/export-users.js

@@ -0,0 +1,170 @@
+"use strict";
+
+// Class definition
+var KTModalExportUsers = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_export_users');
+    const form = element.querySelector('#kt_modal_export_users_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init form inputs
+    var initForm = function () {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'format': {
+                        validators: {
+                            notEmpty: {
+                                message: 'File format is required'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        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 submit button whilst loading
+                        submitButton.disabled = true;
+
+                        setTimeout(function () {
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            Swal.fire({
+                                text: "User list has been successfully exported!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 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-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.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 () {
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalExportUsers.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/list/table.js

@@ -0,0 +1,315 @@
+"use strict";
+
+var KTUsersList = function () {
+    // Define shared variables
+    var table = document.getElementById('kt_table_users');
+    var datatable;
+    var toolbarBase;
+    var toolbarSelected;
+    var selectedCount;
+
+    // Private functions
+    var initUserTable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const lastLogin = dateRow[3].innerText.toLowerCase(); // Get last login time
+            let timeCount = 0;
+            let timeFormat = 'minutes';
+
+            // Determine date & time format -- add more formats when necessary
+            if (lastLogin.includes('yesterday')) {
+                timeCount = 1;
+                timeFormat = 'days';
+            } else if (lastLogin.includes('mins')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'minutes';
+            } else if (lastLogin.includes('hours')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'hours';
+            } else if (lastLogin.includes('days')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'days';
+            } else if (lastLogin.includes('weeks')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'weeks';
+            }
+
+            // Subtract date/time from today -- more info on moment datetime subtraction: https://momentjs.com/docs/#/durations/subtract/
+            const realDate = moment().subtract(timeCount, timeFormat).format();
+
+            // Insert real date to last login attribute
+            dateRow[3].setAttribute('data-order', realDate);
+
+            // Set real date for joined column
+            const joinedDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
+            dateRow[5].setAttribute('data-order', joinedDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)                
+            ]
+        });
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleDeleteRows();
+            toggleToolbars();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-user-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Filter Datatable
+    var handleFilterDatatable = () => {
+        // Select filter options
+        const filterForm = document.querySelector('[data-kt-user-table-filter="form"]');
+        const filterButton = filterForm.querySelector('[data-kt-user-table-filter="filter"]');
+        const selectOptions = filterForm.querySelectorAll('select');
+
+        // Filter datatable on submit
+        filterButton.addEventListener('click', function () {
+            var filterString = '';
+
+            // Get filter values
+            selectOptions.forEach((item, index) => {
+                if (item.value && item.value !== '') {
+                    if (index !== 0) {
+                        filterString += ' ';
+                    }
+
+                    // Build filter value options
+                    filterString += item.value;
+                }
+            });
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search(filterString).draw();
+        });
+    }
+
+    // Reset Filter
+    var handleResetForm = () => {
+        // Select reset button
+        const resetButton = document.querySelector('[data-kt-user-table-filter="reset"]');
+
+        // Reset datatable
+        resetButton.addEventListener('click', function () {
+            // Select filter options
+            const filterForm = document.querySelector('[data-kt-user-table-filter="form"]');
+            const selectOptions = filterForm.querySelectorAll('select');
+
+            // Reset select2 values -- more info: https://select2.org/programmatic-control/add-select-clear-items
+            selectOptions.forEach(select => {
+                $(select).val('').trigger('change');
+            });
+
+            // Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search('').draw();
+        });
+    }
+
+
+    // Delete subscirption
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-users-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get user name
+                const userName = parent.querySelectorAll('td')[1].querySelectorAll('a')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + userName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + userName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        }).then(function () {
+                            // Detect checked checkboxes
+                            toggleToolbars();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        toolbarBase = document.querySelector('[data-kt-user-table-toolbar="base"]');
+        toolbarSelected = document.querySelector('[data-kt-user-table-toolbar="selected"]');
+        selectedCount = document.querySelector('[data-kt-user-table-select="selected_count"]');
+        const deleteSelected = document.querySelector('[data-kt-user-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    }).then(function () {
+                        toggleToolbars(); // Detect checked checkboxes
+                        initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    return {
+        // Public functions  
+        init: function () {
+            if (!table) {
+                return;
+            }
+
+            initUserTable();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleResetForm();
+            handleDeleteRows();
+            handleFilterDatatable();
+
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersList.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-auth-app.js

@@ -0,0 +1,81 @@
+"use strict";
+
+// Class definition
+var KTUsersAddAuthApp = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_auth_app');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddAuthApp = () => {
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+    }
+
+    // QR code to text code swapper
+    var initCodeSwap = () => {
+        const qrCode = element.querySelector('[ data-kt-add-auth-action="qr-code"]');
+        const textCode = element.querySelector('[ data-kt-add-auth-action="text-code"]');
+        const qrCodeButton = element.querySelector('[ data-kt-add-auth-action="qr-code-button"]');
+        const textCodeButton = element.querySelector('[ data-kt-add-auth-action="text-code-button"]');
+        const qrCodeLabel = element.querySelector('[ data-kt-add-auth-action="qr-code-label"]');
+        const textCodeLabel = element.querySelector('[ data-kt-add-auth-action="text-code-label"]');
+
+        const toggleClass = () =>{
+            qrCode.classList.toggle('d-none');
+            qrCodeButton.classList.toggle('d-none');
+            qrCodeLabel.classList.toggle('d-none');
+            textCode.classList.toggle('d-none');
+            textCodeButton.classList.toggle('d-none');
+            textCodeLabel.classList.toggle('d-none');
+        }
+
+        // Swap to text code handler
+        textCodeButton.addEventListener('click', e =>{
+            e.preventDefault();
+
+            toggleClass();
+        });
+
+        qrCodeButton.addEventListener('click', e =>{
+            e.preventDefault();
+
+            toggleClass();
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddAuthApp();
+            initCodeSwap();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddAuthApp.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-one-time-password.js

@@ -0,0 +1,173 @@
+"use strict";
+
+// Class definition
+var KTUsersAddOneTimePassword = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_one_time_password');
+    const form = element.querySelector('#kt_modal_add_one_time_password_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init one time password modal
+    var initAddOneTimePassword = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'otp_mobile_number': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Valid mobile number is required'
+                            }
+                        }
+                    },
+                    'otp_confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Password confirmation is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddOneTimePassword();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddOneTimePassword.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-schedule.js

@@ -0,0 +1,223 @@
+"use strict";
+
+// Class definition
+var KTUsersAddSchedule = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_schedule');
+    const form = element.querySelector('#kt_modal_add_schedule_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddSchedule = () => {       
+
+        // Init flatpickr -- for more info: https://flatpickr.js.org/
+        $("#kt_modal_add_schedule_datepicker").flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+
+        // Init tagify -- for more info: https://yaireo.github.io/tagify/
+        const tagifyInput = form.querySelector('#kt_modal_add_schedule_tagify');
+        new Tagify(tagifyInput, {
+            whitelist: ["sean@dellito.com", "brian@exchange.com", "mikaela@pexcom.com", "f.mitcham@kpmg.com.au", "olivia@corpmail.com", "owen.neil@gmail.com", "dam@consilting.com", "emma@intenso.com", "ana.cf@limtel.com", "robert@benko.com", "lucy.m@fentech.com", "ethan@loop.com.au"],
+            maxTags: 10,
+            dropdown: {
+                maxItems: 20,           // <- mixumum allowed rendered suggestions
+                classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
+                enabled: 0,             // <- show suggestions on focus
+                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+            }
+        });
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		var validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'event_datetime': {
+						validators: {
+							notEmpty: {
+								message: 'Event date & time is required'
+							}
+						}
+					},
+                    'event_name': {
+						validators: {
+							notEmpty: {
+								message: 'Event name is required'
+							}
+						}
+					},
+                    'event_org': {
+						validators: {
+							notEmpty: {
+								message: 'Event organiser is required'
+							}
+						}
+					},
+                    'event_invitees': {
+						validators: {
+							notEmpty: {
+								message: 'Event invitees is required'
+							}
+						}
+					},					
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+        // Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="event_invitees"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('event_invitees');
+        });
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (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"
+							}
+						});
+					}
+				});
+			}
+		});
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddSchedule();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddSchedule.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-task.js

@@ -0,0 +1,324 @@
+"use strict";
+
+// Class definition
+var KTUsersAddTask = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_task');
+    const form = element.querySelector('#kt_modal_add_task_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add task modal
+    var initAddTask = () => {
+
+        // Init flatpickr -- for more info: https://flatpickr.js.org/
+        $("#kt_modal_add_task_datepicker").flatpickr({
+            dateFormat: "Y-m-d",
+        });
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'task_duedate': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Task due date is required'
+                            }
+                        }
+                    },
+                    'task_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Task name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (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"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Init update task status
+    var initUpdateTaskStatus = () => {
+        const allTaskMenus = document.querySelectorAll('[data-kt-menu-id="kt-users-tasks"]');
+
+        allTaskMenus.forEach(el => {
+            const resetButton = el.querySelector('[data-kt-users-update-task-status="reset"]');
+            const submitButton = el.querySelector('[data-kt-users-update-task-status="submit"]');
+            const taskForm = el.querySelector('[data-kt-menu-id="kt-users-tasks-form"]');
+
+            // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+            var validator = FormValidation.formValidation(
+                taskForm,
+                {
+                    fields: {
+                        'task_status': {
+                            validators: {
+                                notEmpty: {
+                                    message: 'Task due date is required'
+                                }
+                            }
+                        },
+                    },
+
+                    plugins: {
+                        trigger: new FormValidation.plugins.Trigger(),
+                        bootstrap: new FormValidation.plugins.Bootstrap5({
+                            rowSelector: '.fv-row',
+                            eleInvalidClass: '',
+                            eleValidClass: ''
+                        })
+                    }
+                }
+            );
+
+            // Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+            $(taskForm.querySelector('[name="task_status"]')).on('change', function () {
+                // Revalidate the field when an option is chosen
+                validator.revalidateField('task_status');
+            });
+
+            // Reset action handler
+            resetButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                Swal.fire({
+                    text: "Are you sure you would like to reset?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, reset it!",
+                    cancelButtonText: "No, return",
+                    customClass: {
+                        confirmButton: "btn btn-primary",
+                        cancelButton: "btn btn-active-light"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        taskForm.reset(); // Reset form		
+                        el.hide();
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: "Your form was not reset!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+
+            // Submit action handler
+            submitButton.addEventListener('click', e => {
+                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) {
+                                        el.hide();
+                                    }
+                                });
+
+                                //taskForm.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"
+                                }
+                            }).then(function(){
+                                //el.show();
+                            });
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddTask();
+            initUpdateTaskStatus();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddTask.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-details.js

@@ -0,0 +1,132 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateDetails = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_details');
+    const form = element.querySelector('#kt_modal_update_user_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdateDetails = () => {
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // 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);
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdateDetails();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdateDetails.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-email.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateEmail = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_email');
+    const form = element.querySelector('#kt_modal_update_email_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdateEmail = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'profile_email': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Email address is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdateEmail();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdateEmail.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-password.js

@@ -0,0 +1,194 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePassword = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_password');
+    const form = element.querySelector('#kt_modal_update_password_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePassword = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'current_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Current password is required'
+                            }
+                        }
+                    },
+                    'new_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function (input) {
+                                    if (input.value.length > 0) {
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function () {
+                                    return form.querySelector('[name="new_password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="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 (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePassword();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePassword.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-role.js

@@ -0,0 +1,132 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateRole = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_role');
+    const form = element.querySelector('#kt_modal_update_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdateRole = () => {
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', 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",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // 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);
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdateRole();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdateRole.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/view.js

@@ -0,0 +1,234 @@
+"use strict";
+
+// Class definition
+var KTUsersViewMain = function () {
+
+    // Init login session button
+    var initLoginSession = () => {
+        const button = document.getElementById('kt_modal_sign_out_sesions');
+
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like sign out all sessions?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, sign out!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have signed out all sessions!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your sessions are still preserved!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+
+    // Init sign out single user
+    var initSignOutUser = () => {
+        const signOutButtons = document.querySelectorAll('[data-kt-users-sign-out="single_user"]');
+
+        signOutButtons.forEach(button => {
+            button.addEventListener('click', e => {
+                e.preventDefault();
+
+                const deviceName = button.closest('tr').querySelectorAll('td')[1].innerText;
+
+                Swal.fire({
+                    text: "Are you sure you would like sign out " + deviceName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, sign out!",
+                    cancelButtonText: "No, return",
+                    customClass: {
+                        confirmButton: "btn btn-primary",
+                        cancelButton: "btn btn-active-light"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have signed out " + deviceName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        }).then(function(){
+                            button.closest('tr').remove();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: deviceName + "'s session is still preserved!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+        });
+
+
+    }
+
+    // Delete two step authentication handler
+    const initDeleteTwoStep = () => {
+        const deleteButton = document.getElementById('kt_users_delete_two_step');
+
+        deleteButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like remove this two-step authentication?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, remove it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have removed this two-step authentication!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your two-step authentication is still valid!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        })
+    }
+
+    // Email preference form handler
+    const initEmailPreferenceForm = () => {
+        // Define variables
+        const form = document.getElementById('kt_users_email_notification_form');
+        const submitButton = form.querySelector('#kt_users_email_notification_submit');
+        const cancelButton = form.querySelector('#kt_users_email_notification_cancel');
+
+        // Submit action handler
+        submitButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            // 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"
+                    }
+                });
+
+                //form.submit(); // Submit form
+            }, 2000);
+        });
+
+        cancelButton.addEventListener('click', 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				
+                } 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 () {
+            initLoginSession();
+            initSignOutUser();
+            initDeleteTwoStep();
+            initEmailPreferenceForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersViewMain.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/reset-password/new-password.js

@@ -0,0 +1,154 @@
+"use strict";
+
+// Class Definition
+var KTAuthNewPassword = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+    var passwordMeter;
+
+    var handleForm = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					 
+                    'password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function(input) {
+                                    if (input.value.length > 0) {        
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm-password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function() {
+                                    return form.querySelector('[name="password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                    'toc': {
+                        validators: {
+                            notEmpty: {
+                                message: 'You must accept the terms and conditions'
+                            }
+                        }
+                    }
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger({
+                        event: {
+                            password: false
+                        }  
+                    }),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',  // comment to enable invalid state icons
+                        eleValidClass: '' // comment to enable valid state icons
+                    })
+				}
+			}
+		);
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validator.revalidateField('password');
+
+            validator.validate().then(function(status) {
+		        if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully reset your password!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="password"]').value= "";   
+                                form.querySelector('[name="confirm-password"]').value= "";      
+                                passwordMeter.reset();  // reset password meter
+                                //form.submit();
+
+                                var redirectUrl = form.getAttribute('data-kt-redirect-url');
+                                if (redirectUrl) {
+                                    location.href = redirectUrl;
+                                }
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error 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-primary"
+                        }
+                    });
+                }
+		    });
+        });
+
+        form.querySelector('input[name="password"]').addEventListener('input', function() {
+            if (this.value.length > 0) {
+                validator.updateFieldStatus('password', 'NotValidated');
+            }
+        });
+    }
+
+    var validatePassword = function() {
+        return  (passwordMeter.getScore() === 100);
+    }
+
+    // Public Functions
+    return {
+        // public functions
+        init: function() {
+            form = document.querySelector('#kt_new_password_form');
+            submitButton = document.querySelector('#kt_new_password_submit');
+            passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAuthNewPassword.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/reset-password/reset-password.js

@@ -0,0 +1,111 @@
+"use strict";
+
+// Class Definition
+var KTAuthResetPassword = function() {
+    // Elements
+    var form;
+    var submitButton;
+	var validator;
+
+    var handleForm = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					
+					'email': {
+                        validators: {
+                            regexp: {
+                                regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                                message: 'The value is not a valid email address',
+                            },
+							notEmpty: {
+								message: 'Email address is required'
+							}
+						}
+					} 
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+						eleInvalidClass: '',  // comment to enable invalid state icons
+                        eleValidClass: '' // comment to enable valid state icons
+                    })
+				}
+			}
+		);		
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Validate form
+            validator.validate().then(function (status) {
+                if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "We have send a password reset link to your email.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="email"]').value= "";                          
+                                //form.submit();
+
+                                var redirectUrl = form.getAttribute('data-kt-redirect-url');
+                                if (redirectUrl) {
+                                    location.href = redirectUrl;
+                                }
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error 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-primary"
+                        }
+                    });
+                }
+            });  
+		});
+    }
+
+    // Public Functions
+    return {
+        // public functions
+        init: function() {
+            form = document.querySelector('#kt_password_reset_form');
+            submitButton = document.querySelector('#kt_password_reset_submit');
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAuthResetPassword.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/sign-in/general.js

@@ -0,0 +1,195 @@
+"use strict";
+
+// Class definition
+var KTSigninGeneral = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+
+    // Handle form
+    var handleValidation = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					
+					'email': {
+                        validators: {
+                            regexp: {
+                                regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                                message: 'The value is not a valid email address',
+                            },
+							notEmpty: {
+								message: 'Email address is required'
+							}
+						}
+					},
+                    'password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            }
+                        }
+                    } 
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',  // comment to enable invalid state icons
+                        eleValidClass: '' // comment to enable valid state icons
+                    })
+				}
+			}
+		);	
+    }
+
+    var handleSubmitDemo = function(e) {
+        // Handle form submit
+        submitButton.addEventListener('click', function (e) {
+            // Prevent button default action
+            e.preventDefault();
+
+            // Validate form
+            validator.validate().then(function (status) {
+                if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+                    
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully logged in!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="email"]').value= "";
+                                form.querySelector('[name="password"]').value= "";  
+                                                              
+                                //form.submit(); // submit form
+                                var redirectUrl = form.getAttribute('data-kt-redirect-url');
+                                if (redirectUrl) {
+                                    location.href = redirectUrl;
+                                }
+                            }
+                        });
+                    }, 2000);   						
+                } else {
+                    // Show error 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-primary"
+                        }
+                    });
+                }
+            });
+		});
+    }
+
+    var handleSubmitAjax = function(e) {
+        // Handle form submit
+        submitButton.addEventListener('click', function (e) {
+            // Prevent button default action
+            e.preventDefault();
+
+            // Validate form
+            validator.validate().then(function (status) {
+                if (status == 'Valid') {
+                    // Hide loading indication
+                    submitButton.removeAttribute('data-kt-indicator');
+
+                    // Enable button
+                    submitButton.disabled = false;
+                                        
+                    // Check axios library docs: https://axios-http.com/docs/intro 
+                    axios.post('/your/ajax/login/url', {
+                        email: form.querySelector('[name="email"]').value, 
+                        password: form.querySelector('[name="password"]').value 
+                    }).then(function (response) {
+                        if (response) {
+                            form.querySelector('[name="email"]').value= "";
+                            form.querySelector('[name="password"]').value= "";  
+
+                            const redirectUrl = form.getAttribute('data-kt-redirect-url');
+                            
+                            if (redirectUrl) {
+                                location.href = redirectUrl;
+                            }
+                        } else {
+                            // Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                            Swal.fire({
+                                text: "Sorry, the email or password is incorrect, please try again.",
+                                icon: "error",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            });
+                        }
+                    }).catch(function (error) {
+                        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"
+                            }
+                        });
+                    });
+                } else {
+                    // Show error 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-primary"
+                        }
+                    });
+                }
+            });
+		});
+    }
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            form = document.querySelector('#kt_sign_in_form');
+            submitButton = document.querySelector('#kt_sign_in_submit');
+            
+            handleValidation();
+            handleSubmitDemo(); // used for demo purposes only, if you use the below ajax version you can uncomment this one
+            //handleSubmitAjax(); // use for ajax submit
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSigninGeneral.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/sign-in/i18n.js

@@ -0,0 +1,433 @@
+"use strict";
+
+// Class definition
+var KTAuthI18nDemo = function() {
+    // Elements
+    var menu;
+	
+	var menuObj;
+
+	var translationStrings = {
+		// General
+		"general-progress" : {
+			"English" : "Please wait...",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+		"general-desc" : {
+			"English" : "Get unlimited access & earn money",
+			"Spanish" : "Obtenga acceso ilimitado y gane dinero",
+			"German" : "Erhalten Sie unbegrenzten Zugriff und verdienen Sie Geld",
+			"Japanese" : "無制限のアクセスを取得してお金を稼ぐ",
+			"French" : "Obtenez un accès illimité et gagnez de l'argent",
+		},
+
+		"general-or" : {
+			"English" : "Or",
+			"Spanish" : "O",
+			"German" : "Oder",
+			"Japanese" : "または",
+			"French" : "Ou",
+		},
+
+		// Sign in	
+		"sign-in-head-desc" : {
+			"English" : "Not a Member yet?",
+			"Spanish" : "¿No eres miembro todavía?",
+			"German" : "Noch kein Mitglied?",
+			"Japanese" : "まだメンバーではありませんか？",
+			"French" : "Pas encore membre?",
+		},	
+		 
+		"sign-in-head-link" : {
+			"English" : "Sign Up",
+			"Spanish" : "Inscribirse",
+			"German" : "Anmeldung",
+			"Japanese" : "サインアップ",
+			"French" : "S'S'inscrire",
+		},	 
+
+		"sign-in-title" : {
+			"English" : "Sign In",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		"sign-in-input-email" : {
+			"English" : "Email",
+			"Spanish" : "Correo electrónico",
+			"German" : "Email",
+			"Japanese" : "Eメール",
+			"French" : "E-mail",
+		},
+
+		"sign-in-input-password" : {
+			"English" : "Password",
+			"Spanish" : "Clave",
+			"German" : "Passwort",
+			"Japanese" : "パスワード",
+			"French" : "Mot de passe",
+		},
+
+		"sign-in-forgot-password" : {
+			"English" : "Forgot Password ?",
+			"Spanish" : "Has olvidado tu contraseña ?",
+			"German" : "Passwort vergessen ?",
+			"Japanese" : "パスワードをお忘れですか ？",
+			"French" : "Mot de passe oublié ?",
+		},
+
+		"sign-in-submit" : {
+			"English" : "Sign In",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		// Sing up
+		"sign-up-head-desc" : {
+			"English" : "Already a member ?",
+			"Spanish" : "Ya eres usuario ?",
+			"German" : "Schon ein Mitglied ?",
+			"Japanese" : "すでにメンバーですか？",
+			"French" : "Déjà membre ?",
+		},	
+
+		"sign-up-head-link" : {
+			"English" : "Sign In",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+		
+		"sign-up-title" : {
+			"English" : "Sign Up",
+			"Spanish" : "Inscribirse",
+			"German" : "Anmeldung",
+			"Japanese" : "サインアップ",
+			"French" : "S'S'inscrire",
+		},	
+
+		"sign-up-input-first-name" : {
+			"English" : "First Name",
+			"Spanish" : "Primer nombre",
+			"German" : "Vorname",
+			"Japanese" : "ファーストネーム",
+			"French" : "Prénom",
+		},
+
+		"sign-up-input-last-name" : {
+			"English" : "Last Name",
+			"Spanish" : "Apellido",
+			"German" : "Nachname",
+			"Japanese" : "苗字",
+			"French" : "Nom de famille",
+		},
+
+		"sign-up-input-email" : {
+			"English" : "Email",
+			"Spanish" : "Correo electrónico",
+			"German" : "Email",
+			"Japanese" : "Eメール",
+			"French" : "E-mail",
+		},
+
+		"sign-up-input-password" : {
+			"English" : "Password",
+			"Spanish" : "Clave",
+			"German" : "Passwort",
+			"Japanese" : "パスワード",
+			"French" : "Mot de passe",
+		},
+
+		"sign-up-input-confirm-password" : {
+			"English" : "Password",
+			"Spanish" : "Clave",
+			"German" : "Passwort",
+			"Japanese" : "パスワード",
+			"French" : "Mot de passe",
+		},
+
+		"sign-up-submit" : {
+			"English" : "Submit",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		"sign-up-hint" : {
+			"English" : "Use 8 or more characters with a mix of letters, numbers & symbols.",
+			"Spanish" : "Utilice 8 o más caracteres con una combinación de letras, números y símbolos.",
+			"German" : "Verwenden Sie 8 oder mehr Zeichen mit einer Mischung aus Buchstaben, Zahlen und Symbolen.",
+			"Japanese" : "文字、数字、記号を組み合わせた8文字以上を使用してください。",
+			"French" : "Utilisez 8 caractères ou plus avec un mélange de lettres, de chiffres et de symboles.",
+		},
+
+		// New password
+		"new-password-head-desc" : {
+			"English" : "Already a member ?",
+			"Spanish" : "Ya eres usuario ?",
+			"German" : "Schon ein Mitglied ?",
+			"Japanese" : "すでにメンバーですか？",
+			"French" : "Déjà membre ?",
+		},
+
+		"new-password-head-link" : {
+			"English" : "Sign In",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		"new-password-title" : {
+			"English" : "Setup New Password",
+			"Spanish" : "Configurar nueva contraseña",
+			"German" : "Neues Passwort einrichten",
+			"Japanese" : "新しいパスワードを設定する",
+			"French" : "Configurer un nouveau mot de passe",
+		},
+
+		"new-password-desc" : {
+			"English" : "Have you already reset the password ?",
+			"Spanish" : "¿Ya has restablecido la contraseña?",
+			"German" : "Hast du das Passwort schon zurückgesetzt?",
+			"Japanese" : "すでにパスワードをリセットしましたか？",
+			"French" : "Avez-vous déjà réinitialisé le mot de passe ?",
+		},
+
+		"new-password-input-password" : {
+			"English" : "Password",
+			"Spanish" : "Clave",
+			"German" : "Passwort",
+			"Japanese" : "パスワード",
+			"French" : "Mot de passe",
+		},
+
+		"new-password-hint" : {
+			"English" : "Use 8 or more characters with a mix of letters, numbers & symbols.",
+			"Spanish" : "Utilice 8 o más caracteres con una combinación de letras, números y símbolos.",
+			"German" : "Verwenden Sie 8 oder mehr Zeichen mit einer Mischung aus Buchstaben, Zahlen und Symbolen.",
+			"Japanese" : "文字、数字、記号を組み合わせた8文字以上を使用してください。",
+			"French" : "Utilisez 8 caractères ou plus avec un mélange de lettres, de chiffres et de symboles.",
+		},
+
+		"new-password-confirm-password" : {
+			"English" : "Confirm Password",
+			"Spanish" : "Confirmar contraseña",
+			"German" : "Passwort bestätigen",
+			"Japanese" : "パスワードを認証する",
+			"French" : "Confirmez le mot de passe",
+		},
+
+		"new-password-submit" : {
+			"English" : "Submit",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		// Password reset
+		"password-reset-head-desc" : {
+			"English" : "Already a member ?",
+			"Spanish" : "Ya eres usuario ?",
+			"German" : "Schon ein Mitglied ?",
+			"Japanese" : "すでにメンバーですか？",
+			"French" : "Déjà membre ?",
+		},
+
+		"password-reset-head-link" : {
+			"English" : "Sign In",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		"password-reset-title" : {
+			"English" : "Forgot Password ?",
+			"Spanish" : "Has olvidado tu contraseña ?",
+			"German" : "Passwort vergessen ?",
+			"Japanese" : "パスワードをお忘れですか ？",
+			"French" : "Mot de passe oublié ?",
+		},
+
+		"password-reset-desc" : {
+			"English" : "Enter your email to reset your password.",
+			"Spanish" : "Ingrese su correo electrónico para restablecer su contraseña.",
+			"German" : "Geben Sie Ihre E-Mail-Adresse ein, um Ihr Passwort zurückzusetzen.",
+			"Japanese" : "メールアドレスを入力してパスワードをリセットしてください。",
+			"French" : "Entrez votre e-mail pour réinitialiser votre mot de passe.",
+		},
+
+		"password-reset-input-email" : {
+			"English" : "Email",
+			"Spanish" : "Correo electrónico",
+			"German" : "Email",
+			"Japanese" : "Eメール",
+			"French" : "E-mail",
+		},
+
+		"password-reset-submit" : {
+			"English" : "Submit",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		"password-reset-cancel" : {
+			"English" : "Cancel",
+			"Spanish" : "Cancelar",
+			"German" : "Absagen",
+			"Japanese" : "キャンセル",
+			"French" : "Annuler",
+		},
+
+		// Two steps	
+		"two-step-head-desc" : {
+			"English" : "Didn’t get the code ?",
+			"Spanish" : "¿No recibiste el código?",
+			"German" : "Code nicht erhalten?",
+			"Japanese" : "コードを取得できませんでしたか？",
+			"French" : "Vous n'avez pas reçu le code ?",
+		},	
+
+		"two-step-head-resend" : {
+			"English" : "Resend",
+			"Spanish" : "Reenviar",
+			"German" : "Erneut senden",
+			"Japanese" : "再送",
+			"French" : "Renvoyer",
+		},
+
+		"two-step-head-or" : {
+			"English" : "Or",
+			"Spanish" : "O",
+			"German" : "Oder",
+			"Japanese" : "または",
+			"French" : "Ou",
+		},
+
+		"two-step-head-call-us" : {
+			"English" : "Call Us",
+			"Spanish" : "Llámenos",
+			"German" : "Rufen Sie uns an",
+			"Japanese" : "お電話ください",
+			"French" : "Appelez-nous",
+		},
+
+		"two-step-submit" : {
+			"English" : "Submit",
+			"Spanish" : "Iniciar Sesión",
+			"German" : "Registrarse",
+			"Japanese" : "ログイン",
+			"French" : "S'identifier",
+		},
+
+		"two-step-title" : {
+			"English" : "Two Step Verification",
+			"Spanish" : "Verificación de dos pasos",
+			"German" : "Verifizierung in zwei Schritten",
+			"Japanese" : "2段階認証",
+			"French" : "Vérification en deux étapes",
+		},
+
+		"two-step-deck" : {
+			"English" : "Enter the verification code we sent to",
+			"Spanish" : "Ingresa el código de verificación que enviamos a",
+			"German" : "Geben Sie den von uns gesendeten Bestätigungscode ein",
+			"Japanese" : "送信した確認コードを入力してください",
+			"French" : "Entrez le code de vérification que nous avons envoyé à",
+		},
+
+		"two-step-label" : {
+			"English" : "Type your 6 digit security code",
+			"Spanish" : "Escriba su código de seguridad de 6 dígitos",
+			"German" : "Geben Sie Ihren 6-stelligen Sicherheitscode ein",
+			"Japanese" : "6桁のセキュリティコードを入力します",
+			"French" : "Tapez votre code de sécurité à 6 chiffres",
+		}
+	}
+
+    // Handle form
+    var translate = function(lang) {
+        for (var label in translationStrings) {
+			if (translationStrings.hasOwnProperty(label)) {
+				if (translationStrings[label][lang]) {
+					let labelElement = document.querySelector('[data-kt-translate=' + label + ']');
+
+					if (labelElement !== null) {
+						if (labelElement.tagName === "INPUT") {
+							labelElement.setAttribute("placeholder", translationStrings[label][lang]);
+						} else {
+							labelElement.innerHTML = translationStrings[label][lang];
+						}						
+					}
+				}
+			}
+		}
+    }
+
+	var setLanguage = function(lang) {
+		const selectedLang = menu.querySelector('[data-kt-lang="' + lang + '"]');
+
+		if (selectedLang !== null) {
+			const currentLangName = document.querySelector('[data-kt-element="current-lang-name"]'); 
+			const currentLangFlag = document.querySelector('[data-kt-element="current-lang-flag"]'); 
+
+			const selectedLangName = selectedLang.querySelector('[data-kt-element="lang-name"]');
+			const selectedLangFlag = selectedLang.querySelector('[data-kt-element="lang-flag"]');
+
+			currentLangName.innerText = selectedLangName.innerText;
+			currentLangFlag.setAttribute("src", selectedLangFlag.getAttribute("src"));
+
+			localStorage.setItem("kt_auth_lang", lang);
+		}
+	}
+
+	var init = function() {
+		if ( localStorage.getItem("kt_auth_lang") !== null ) {
+			let lang = localStorage.getItem("kt_auth_lang");
+			
+			setLanguage(lang);
+			translate(lang);
+		}
+
+		menuObj.on("kt.menu.link.click", function(element) {
+			let lang = element.getAttribute("data-kt-lang");
+
+			setLanguage(lang);
+			translate(lang);
+		});
+	}
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            menu = document.querySelector('#kt_auth_lang_menu');
+
+			if (menu === null) {
+				return;
+			} 
+
+			menuObj = KTMenu.getInstance(menu);
+            
+            init();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAuthI18nDemo.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/sign-in/two-steps.js

@@ -0,0 +1,140 @@
+"use strict";
+
+// Class Definition
+var KTSigninTwoSteps = function() {
+    // Elements
+    var form;
+    var submitButton;
+
+    // Handle form
+    var handleForm = function(e) {        
+        // Handle form submit
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            var validated = true;
+
+            var inputs = [].slice.call(form.querySelectorAll('input[maxlength="1"]'));
+            inputs.map(function (input) {
+                if (input.value === '' || input.value.length === 0) {
+                    validated = false;
+                }
+            });
+
+            if (validated === true) {
+                // Show loading indication
+                submitButton.setAttribute('data-kt-indicator', 'on');
+
+                // Disable button to avoid multiple click 
+                submitButton.disabled = true;
+
+                // Simulate ajax request
+                setTimeout(function() {
+                    // Hide loading indication
+                    submitButton.removeAttribute('data-kt-indicator');
+
+                    // Enable button
+                    submitButton.disabled = false;
+
+                    // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                    Swal.fire({
+                        text: "You have been successfully verified!",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary"
+                        }
+                    }).then(function (result) {
+                        if (result.isConfirmed) { 
+                            inputs.map(function (input) {
+                                input.value = '';
+                            });
+
+                            var redirectUrl = form.getAttribute('data-kt-redirect-url');
+                            if (redirectUrl) {
+                                location.href = redirectUrl;
+                            }
+                        }
+                    });
+                }, 1000); 
+            } else {
+                swal.fire({
+                    text: "Please enter valid securtiy code and try again.",
+                    icon: "error",
+                    buttonsStyling: false,
+                    confirmButtonText: "Ok, got it!",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-light-primary"
+                    }
+                }).then(function() {
+                    KTUtil.scrollTop();
+                });
+            }
+        });
+    }
+
+    var handleType = function() {
+        var input1 = form.querySelector("[name=code_1]");
+        var input2 = form.querySelector("[name=code_2]");
+        var input3 = form.querySelector("[name=code_3]");
+        var input4 = form.querySelector("[name=code_4]");
+        var input5 = form.querySelector("[name=code_5]");
+        var input6 = form.querySelector("[name=code_6]");
+
+        input1.focus();
+
+        input1.addEventListener("keyup", function() {
+            if (this.value.length === 1) {
+                input2.focus();
+            }
+        });
+
+        input2.addEventListener("keyup", function() {
+            if (this.value.length === 1) {
+                input3.focus();
+            }
+        });
+
+        input3.addEventListener("keyup", function() {
+            if (this.value.length === 1) {
+                input4.focus();
+            }
+        });
+
+        input4.addEventListener("keyup", function() {
+            if (this.value.length === 1) {
+                input5.focus();
+            }
+        });
+
+        input5.addEventListener("keyup", function() {
+            if (this.value.length === 1) {
+                input6.focus();
+            }
+        });
+        
+        input6.addEventListener("keyup", function() {
+            if (this.value.length === 1) {
+                input6.blur();
+            }
+        });
+    }    
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            form = document.querySelector('#kt_sing_in_two_steps_form');
+            submitButton = document.querySelector('#kt_sing_in_two_steps_submit');
+
+            handleForm();
+            handleType();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSigninTwoSteps.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/sign-up/coming-soon.js

@@ -0,0 +1,164 @@
+"use strict";
+
+// Class Definition
+var KTSignupComingSoon = function() {
+    // Elements
+    var form;
+    var submitButton;
+	var validator; 
+
+    var counterDays;
+    var counterHours;
+    var counterMinutes;
+    var counterSeconds;
+
+    var handleForm = function(e) {
+        var validation;		 
+
+        if( !form ) {
+            return;
+        }        
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					
+					'email': {
+                        validators: {
+                            regexp: {
+                                regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                                message: 'The value is not a valid email address',
+                            },
+							notEmpty: {
+								message: 'Email address is required'
+							}
+						}
+					} 
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+				}
+			}
+		);		
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Validate form
+            validator.validate().then(function (status) {
+                if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "We have received your request. You will be notified once we go live.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.querySelector('[name="email"]').value= "";                            
+                                //form.submit();
+
+                                //form.submit(); // submit form
+                                var redirectUrl = form.getAttribute('data-kt-redirect-url');
+                                if (redirectUrl) {
+                                    location.href = redirectUrl;
+                                }
+                            }
+                        });
+                    }, 2000);   						
+                } else {
+                    // Show error 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-primary"
+                        }
+                    });
+                }
+            });
+		});
+    }
+
+    var initCounter = function() {
+        // Set the date we're counting down to
+        var currentTime = new Date(); 
+        var countDownDate = new Date(currentTime.getTime() + 1000 * 60 * 60 * 24 * 15 + 1000 * 60 * 60 * 10 + 1000 * 60 * 15).getTime();
+
+        var count = function() {
+            // Get todays date and time
+            var now = new Date().getTime();
+
+            // Find the distance between now an the count down date
+            var distance = countDownDate - now;
+
+            // Time calculations for days, hours, minutes and seconds
+            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+            // Display the result
+            if(counterDays) counterDays.innerHTML = days; 
+            if(counterHours) counterHours.innerHTML = hours;
+            if(counterMinutes) counterMinutes.innerHTML = minutes;
+            if(counterSeconds) counterSeconds.innerHTML = seconds;
+        };
+
+        // Update the count down every 1 second
+        var x = setInterval(count, 1000);
+
+        // Initial count
+        count();
+    }
+
+    // Public Functions
+    return {
+        // public functions
+        init: function() {
+            form = document.querySelector('#kt_coming_soon_form');
+            submitButton = document.querySelector('#kt_coming_soon_submit');
+           
+            handleForm();
+
+            counterDays = document.querySelector('#kt_coming_soon_counter_days');
+            if (counterDays) {                
+                counterHours = document.querySelector('#kt_coming_soon_counter_hours');
+                counterMinutes = document.querySelector('#kt_coming_soon_counter_minutes');
+                counterSeconds = document.querySelector('#kt_coming_soon_counter_seconds');
+                
+                initCounter();
+            }
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSignupComingSoon.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/sign-up/free-trial.js

@@ -0,0 +1,169 @@
+"use strict";
+
+// Class Definition
+var KTSignupFreeTrial = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+    var passwordMeter;
+
+    // Handle form
+    var handleForm = function(e) {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {					 
+					'email': {
+                        validators: {
+                            regexp: {
+                                regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                                message: 'The value is not a valid email address',
+                            },
+							notEmpty: {
+								message: 'Email address is required'
+							}
+						}
+					},
+                    'password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function(input) {
+                                    if (input.value.length > 0) {
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm-password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function() {
+                                    return form.querySelector('[name="password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                    'toc': {
+                        validators: {
+                            notEmpty: {
+                                message: 'You must accept the terms and conditions'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+					trigger: new FormValidation.plugins.Trigger({
+                        event: {
+                            password: false
+                        }  
+                    }),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }			 
+			}
+		);
+
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validator.revalidateField('password');
+
+            validator.validate().then(function(status) {
+		        if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully registered!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.reset();  // reset form                    
+                                passwordMeter.reset();  // reset password meter
+
+                                //form.submit(); // submit form
+                                var redirectUrl = form.getAttribute('data-kt-redirect-url');
+                                if (redirectUrl) {
+                                    location.href = redirectUrl;
+                                }
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error 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-primary"
+                        }
+                    });
+                }
+		    });
+        });
+
+        form.querySelector('input[name="password"]').addEventListener('input', function() {
+            if (this.value.length > 0) {
+                validator.updateFieldStatus('password', 'NotValidated');
+            }
+        });
+    }
+
+    // Password input validation
+    var validatePassword = function() {
+        return  (passwordMeter.getScore() === 100);
+    }
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            form = document.querySelector('#kt_free_trial_form');
+            submitButton = document.querySelector('#kt_free_trial_submit');
+            passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
+
+            handleForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSignupFreeTrial.init();
+});
+
+
+ 

think-backend.greaterchiangmai.com/public/assets/js/custom/authentication/sign-up/general.js

@@ -0,0 +1,184 @@
+"use strict";
+
+// Class definition
+var KTSignupGeneral = function() {
+    // Elements
+    var form;
+    var submitButton;
+    var validator;
+    var passwordMeter;
+
+    // Handle form
+    var handleForm  = function(e) {
+        // 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'
+							}
+						}
+					},
+					'email': {
+                        validators: {
+                            regexp: {
+                                regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                                message: 'The value is not a valid email address',
+                            },
+							notEmpty: {
+								message: 'Email address is required'
+							}
+						}
+					},
+                    'password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function(input) {
+                                    if (input.value.length > 0) {
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm-password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function() {
+                                    return form.querySelector('[name="password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                    'toc': {
+                        validators: {
+                            notEmpty: {
+                                message: 'You must accept the terms and conditions'
+                            }
+                        }
+                    }
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger({
+                        event: {
+                            password: false
+                        }  
+                    }),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',  // comment to enable invalid state icons
+                        eleValidClass: '' // comment to enable valid state icons
+                    })
+				}
+			}
+		);
+
+        // Handle form submit
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validator.revalidateField('password');
+
+            validator.validate().then(function(status) {
+		        if (status == 'Valid') {
+                    // Show loading indication
+                    submitButton.setAttribute('data-kt-indicator', 'on');
+
+                    // Disable button to avoid multiple click 
+                    submitButton.disabled = true;
+
+                    // Simulate ajax request
+                    setTimeout(function() {
+                        // Hide loading indication
+                        submitButton.removeAttribute('data-kt-indicator');
+
+                        // Enable button
+                        submitButton.disabled = false;
+
+                        // Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "You have successfully reset your password!",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        }).then(function (result) {
+                            if (result.isConfirmed) { 
+                                form.reset();  // reset form                    
+                                passwordMeter.reset();  // reset password meter
+                                //form.submit();
+
+                                //form.submit(); // submit form
+                                var redirectUrl = form.getAttribute('data-kt-redirect-url');
+                                if (redirectUrl) {
+                                    location.href = redirectUrl;
+                                }
+                            }
+                        });
+                    }, 1500);   						
+                } else {
+                    // Show error 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-primary"
+                        }
+                    });
+                }
+		    });
+        });
+
+        // Handle password input
+        form.querySelector('input[name="password"]').addEventListener('input', function() {
+            if (this.value.length > 0) {
+                validator.updateFieldStatus('password', 'NotValidated');
+            }
+        });
+    }
+
+    // Password input validation
+    var validatePassword = function() {
+        return (passwordMeter.getScore() === 100);
+    }
+
+    // Public functions
+    return {
+        // Initialization
+        init: function() {
+            // Elements
+            form = document.querySelector('#kt_sign_up_form');
+            submitButton = document.querySelector('#kt_sign_up_submit');
+            passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
+
+            handleForm ();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTSignupGeneral.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/landing.js

@@ -0,0 +1,29 @@
+"use strict";
+
+// Class definition
+var KTLandingPage = function () {
+    // Private methods
+    var initTyped = function() {
+        var typed = new Typed("#kt_landing_hero_text", {
+            strings: ["The Best Theme Ever", "The Most Trusted Theme", "#1 Selling Theme"],
+            typeSpeed: 50
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            //initTyped();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTLandingPage;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTLandingPage.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/pages/careers/apply.js

@@ -0,0 +1,179 @@
+"use strict";
+
+// Class definition
+var KTCareersApply = function () {
+	var submitButton;
+	var validator;
+	var form;
+
+	// Init form inputs
+	var initForm = function() {
+		// Team assign. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="position"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('position');
+        });
+
+		// Start date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var startDate = $(form.querySelector('[name="start_date"]'));
+		startDate.flatpickr({
+			enableTime: false,
+			dateFormat: "d, M Y",
+		});
+	}
+
+	// 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'
+							}
+						}
+					},
+					'age': {
+                        validators: {
+							notEmpty: {
+								message: 'Age is required'
+							}
+						}
+					},
+					'city': {
+                        validators: {
+							notEmpty: {
+								message: 'City is required'
+							}
+						}
+					},
+					'email': {
+                        validators: {
+							notEmpty: {
+								message: 'Email address is required'
+							},
+                            emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					},
+					'salary': {
+						validators: {
+							notEmpty: {
+								message: 'Expected salary is required'
+							}
+						}
+					},
+					'position': {
+						validators: {
+							notEmpty: {
+								message: 'Position is required'
+							}
+						}
+					},
+					'start_date': {
+						validators: {
+							notEmpty: {
+								message: 'Start date 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) {
+									//form.submit();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Scroll top
+
+						// 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"
+							}
+						}).then(function (result) {
+							KTUtil.scrollTop();
+						});
+					}
+				});
+			}
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			form = document.querySelector('#kt_careers_form');
+			submitButton = document.getElementById('kt_careers_submit_button');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTCareersApply.init();
+});

think-backend.greaterchiangmai.com/public/assets/js/custom/pages/general/contact.js

@@ -0,0 +1,206 @@
+"use strict";
+
+// Class definition
+var KTContactApply = function () {
+	var submitButton;
+	var validator;
+	var form;
+	var selectedlocation;
+
+	// Private functions
+    var initMap = function(elementId) {
+        // Check if Leaflet is included
+        if (!L) {
+            return;
+        }
+
+        // Define Map Location
+        var leaflet = L.map(elementId, {
+            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-primary shadow 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'
+        });
+
+		// Show current address
+		L.marker([40.724716, -73.984789], { icon: leafletIcon }).addTo(markerLayer).bindPopup('430 E 6th St, New York, 10009.', { closeButton: false }).openPopup();
+
+        // 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: 'Your selected - <b>"' + selectedlocation + ' - ' + result.latlng + '"</b>.',
+                    icon: "success",
+                    buttonsStyling: false,
+                    confirmButtonText: "Ok, got it!",
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                }).then(function (result) {
+                    // Confirmed
+                });
+            });
+        });
+    }
+
+	// Init form inputs
+	var initForm = function() {
+		// Team assign. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="position"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('position');
+        });		
+	}
+
+	// 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: 'Name is required'
+							}
+						}
+					},
+					'email': {
+                        validators: {
+							notEmpty: {
+								message: 'Email address is required'
+							},
+                            emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					},
+					'message': {
+                        validators: {
+							notEmpty: {
+								message: 'Message 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) {
+									//form.submit();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Scroll top
+
+						// 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"
+							}
+						}).then(function (result) {
+							KTUtil.scrollTop();
+						});
+					}
+				});
+			}
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			form = document.querySelector('#kt_contact_form');
+			submitButton = document.getElementById('kt_contact_submit_button');
+
+			initForm();
+			handleForm();
+			initMap('kt_contact_map');
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTContactApply.init();
+});