diff --git a/app/Http/Controllers/VillagesController.php b/app/Http/Controllers/VillagesController.php
index e55afde..88726f1 100644
--- a/app/Http/Controllers/VillagesController.php
+++ b/app/Http/Controllers/VillagesController.php
@@ -158,4 +158,12 @@
]);
}
+ public function getVillagesByDistrictId($id){
+ return response()->json(Village::where('district_code', $id)->get());
+ }
+
+ public function getPostalCodesByVillageId($id){
+ return response()->json(Village::where('code', $id)->first());
+ }
+
}
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index f2af0c2..93396b3 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -9,6 +9,8 @@ let settings = {
const provinceSelect = document.querySelector('#province_code');
const citySelect = document.querySelector('#city_code');
const districtSelect = document.querySelector('#district_code');
+const villageSelect = document.querySelector('#village_code');
+const postalCode = document.querySelector('#postal_code');
if (provinceSelect && !citySelect) {
new TomSelect('#province_code', settings);
@@ -46,9 +48,9 @@ if (citySelect && !districtSelect) {
});
}
-if (districtSelect) {
+if (districtSelect && !villageSelect) {
let tomdistrict = new TomSelect('#district_code', settings);
- let tomcities = new TomSelect('#city_code',{
+ let tomcities = new TomSelect('#city_code', {
...settings,
onChange: function (value) {
console.log('City selected:', value);
@@ -131,3 +133,175 @@ if (districtSelect) {
}
});
}
+
+if (villageSelect) {
+ let tomvillage = new TomSelect('#village_code', settings);
+ let tomdistrict = new TomSelect('#district_code', {
+ ...settings,
+ onChange: function (value) {
+ // Destroy only if necessary (prevents unnecessary re-initialization)
+ if (tomvillage) {
+ tomvillage.destroy();
+ }
+
+ let url = 'locations/villages/district/' + value;
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ const options = data.map(item => ({
+ value: item.code,
+ text: item.name
+ }));
+
+ tomvillage = new TomSelect('#village_code', {
+ ...settings, // Spread existing settings (including createOnBlur: false)
+ options: options
+ });
+ })
+ .catch(error => {
+ console.error('Error fetching data:', error);
+ });
+ }
+ });
+
+ let tomcities = new TomSelect('#city_code', {
+ ...settings,
+ onChange: function (value) {
+ // Destroy only if necessary (prevents unnecessary re-initialization)
+ if (tomdistrict) {
+ tomdistrict.destroy();
+ }
+
+ let url = 'locations/districts/city/' + value;
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ const options = data.map(item => ({
+ value: item.code,
+ text: item.name
+ }));
+
+ tomdistrict = new TomSelect('#district_code', {
+ ...settings, // Spread existing settings (including createOnBlur: false)
+ options: options,
+ onChange: function (value) {
+ // Destroy only if necessary (prevents unnecessary re-initialization)
+ if (tomvillage) {
+ tomvillage.destroy();
+ }
+
+ let url = 'locations/villages/district/' + value;
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ const options = data.map(item => ({
+ value: item.code,
+ text: item.name
+ }));
+
+ tomvillage = new TomSelect('#village_code', {
+ ...settings, // Spread existing settings (including createOnBlur: false)
+ options: options
+ });
+ })
+ .catch(error => {
+ console.error('Error fetching data:', error);
+ });
+ }
+ });
+ })
+ .catch(error => {
+ console.error('Error fetching data:', error);
+ });
+ }
+ });
+
+ let tomprovince = new TomSelect('#province_code', {
+ ...settings, // Spread existing settings
+ onChange: function (value) {
+ console.log('Province selected:', value);
+ // Destroy only if necessary (prevents unnecessary re-initialization)
+ if (tomcities) {
+ tomcities.destroy();
+ }
+
+ let 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,
+ onChange: function (value) {
+ // Destroy only if necessary (prevents unnecessary re-initialization)
+ if (tomdistrict) {
+ tomdistrict.destroy();
+ }
+
+ let url = 'locations/districts/city/' + value;
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ const options = data.map(item => ({
+ value: item.code,
+ text: item.name
+ }));
+
+ tomdistrict = new TomSelect('#district_code', {
+ ...settings, // Spread existing settings (including createOnBlur: false)
+ options: options,
+ onChange: function (value) {
+ // Destroy only if necessary (prevents unnecessary re-initialization)
+ if (tomvillage) {
+ tomvillage.destroy();
+ }
+
+ let url = 'locations/villages/district/' + value;
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ const options = data.map(item => ({
+ value: item.code,
+ text: item.name
+ }));
+
+ tomvillage = new TomSelect('#village_code', {
+ ...settings, // Spread existing settings (including createOnBlur: false)
+ options: options
+ });
+ })
+ .catch(error => {
+ console.error('Error fetching data:', error);
+ });
+ }
+ });
+ })
+ .catch(error => {
+ console.error('Error fetching data:', error);
+ });
+ }
+ });
+ })
+ .catch(error => {
+ console.error('Error fetching data:', error);
+ });
+ }
+ });
+
+ if (postalCode) {
+ villageSelect.addEventListener('change', function (event) {
+ fetch('locations/villages/postal-code/' + event.target.value)
+ .then(response => response.json())
+ .then(data => {
+ postalCode.value = data.postal_code;
+ })
+ });
+ }
+}
+
+
diff --git a/resources/views/cities/index.blade.php b/resources/views/cities/index.blade.php
index 143f75e..10229d7 100644
--- a/resources/views/cities/index.blade.php
+++ b/resources/views/cities/index.blade.php
@@ -16,70 +16,69 @@
@endpush
@section('content')
-