Feature #3 : Districts

resources/assets/js/app.js

@@ -0,0 +1,46 @@
+import TomSelect from "tom-select";
+
+let settings = {
+    plugins: ['dropdown_input'],
+    create: true,
+    createOnBlur: true
+};
+
+const provinceSelect = document.querySelector('#province_code');
+const citySelect = document.querySelector('#city_code');
+
+if (provinceSelect && !citySelect) {
+    new TomSelect('#province_code', settings);
+}
+
+if (citySelect) {
+    var tomcities = new TomSelect('#city_code', settings);
+    var tomprovince = new TomSelect('#province_code', {
+        ...settings, // Spread existing settings
+        onChange: function (value) {
+
+            // Destroy only if necessary (prevents unnecessary re-initialization)
+            if (tomcities) {
+                tomcities.destroy();
+            }
+
+            var url = 'locations/cities/province/' + value;
+            fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                    const options = data.map(item => ({
+                        value: item.code,
+                        text: item.name
+                    }));
+
+                    tomcities = new TomSelect('#city_code', {
+                        ...settings, // Spread existing settings (including createOnBlur: false)
+                        options: options
+                    });
+                })
+                .catch(error => {
+                    console.error('Error fetching data:', error);
+                });
+        }
+    });
+}