Merge remote-tracking branch 'origin/master'

- Menambahkan fungsi reset untuk membersihkan pilihan kota, distrik, dan desa.
- Mengoptimalkan inisialisasi TomSelect untuk menghindari penghancuran yang tidak perlu.
- Memperbaiki pengambilan data untuk kota, distrik, dan desa berdasarkan pilihan pengguna.
- Menangani kesalahan saat mengambil data dengan menambahkan log kesalahan.

app/Exports/VillagesExport.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace Modules\Location\Exports;
+
+use Maatwebsite\Excel\Concerns\FromCollection;
+use Maatwebsite\Excel\Concerns\WithColumnFormatting;
+use Maatwebsite\Excel\Concerns\WithHeadings;
+use Maatwebsite\Excel\Concerns\WithMapping;
+use Modules\Location\Models\Village;
+
+class VillagesExport implements WithColumnFormatting, WithHeadings, FromCollection, withMapping
+{
+    public function collection(){
+        return Village::with('district.city.province')->get();
+    }
+
+    public function map($row): array{
+        return [
+            $row->id,
+            $row->code,
+            $row->name,
+            $row->postal_code,
+            $row->district->name,
+            $row->district->city->name,
+            $row->district->city->province->name,
+            $row->created_at
+        ];
+    }
+    public function headings(): array{
+        return [
+            'ID',
+            'Code',
+            'Name',
+            'Postal Code',
+            'District',
+            'City',
+            'Province',
+            'Created At'
+        ];
+    }
+
+    public function columnFormats(): array{
+        return [
+            'A' => \PhpOffice\PhpSpreadsheet\Style\NumberFormat::FORMAT_NUMBER,
+            'D' => \PhpOffice\PhpSpreadsheet\Style\NumberFormat::FORMAT_NUMBER,
+            'H' => \PhpOffice\PhpSpreadsheet\Style\NumberFormat::FORMAT_DATE_DATETIME
+        ];
+    }
+}

app/Http/Controllers/CitiesController.php

@@ -17,7 +17,8 @@ class CitiesController extends Controller
     public $user;
 
     public function index(){
-        return view('location::cities.index');
+        $provinces = Province::all();
+        return view('location::cities.index', compact('provinces'));
     }
 
     public function create(){
@@ -78,10 +79,14 @@ class CitiesController extends Controller
         // Apply search filter if provided
         if ($request->has('search') && !empty($request->get('search'))) {
             $search = $request->get('search');
+            $search = explode('|', $search);
+            if(isset($search[0]) &&!empty($search[0])){
+                $query->where('province_code',$search[0]);
+            }
             $query->where(function ($q) use ($search) {
-                $q->where('code', 'LIKE', "%$search%");
-                $q->orWhere('name', 'LIKE', "%$search%");
-                $q->orWhereRelation('province','name', 'LIKE', "%$search%");
+                $q->where('code', 'LIKE', "%$search[1]%");
+                $q->orWhere('name', 'LIKE', "%$search[1]%");
+                $q->orWhereRelation('province','name', 'LIKE', "%$search[1]%");
             });
         }
 
@@ -108,7 +113,7 @@ class CitiesController extends Controller
         $filteredRecords = $query->count();
 
         // Get the data for the current page
-        $cities = $query->with('province')->get();
+        $data = $query->with('province')->get();
 
         // Calculate the page count
         $pageCount = ceil($totalRecords/$request->get('size'));
@@ -124,7 +129,7 @@ class CitiesController extends Controller
             'pageCount'       => $pageCount,
             'page'            => $currentPage,
             'totalCount'      => $totalRecords,
-            'data'            => $cities,
+            'data'            => $data,
         ]);
     }
 

app/Http/Controllers/DistrictsController.php

@@ -16,7 +16,8 @@ class DistrictsController extends Controller
     public $user;
 
     public function index(){
-        return view('location::districts.index');
+        $provinces = Province::all();
+        return view('location::districts.index', compact('provinces'));
     }
 
     public function create(){
@@ -78,11 +79,16 @@ class DistrictsController extends Controller
         // Apply search filter if provided
         if ($request->has('search') && !empty($request->get('search'))) {
             $search = $request->get('search');
+            $search = explode('|', $search);
+            if(isset($search[0]) &&!empty($search[0])){
+                $query->where('province_code',$search[0]);
+            }
+            if(isset($search[1]) &&!empty($search[1])){
+                $query->where('city_code',$search[1]);
+            }
             $query->where(function ($q) use ($search) {
-                $q->where('code', 'LIKE', "%$search%");
-                $q->orWhere('name', 'LIKE', "%$search%");
-                $q->orWhereRelation('city','name', 'LIKE', "%$search%");
-                $q->orWhereRelation('city.province','name', 'LIKE', "%$search%");
+                $q->where('code', 'LIKE', "%$search[2]%");
+                $q->orWhere('name', 'LIKE', "%$search[2]%");
             });
         }
 
@@ -109,7 +115,7 @@ class DistrictsController extends Controller
         $filteredRecords = $query->count();
 
         // Get the data for the current page
-        $cities = $query->with('city.province')->get();
+        $data = $query->with('city.province')->get();
 
         // Calculate the page count
         $pageCount = ceil($totalRecords/$request->get('size'));
@@ -125,11 +131,15 @@ class DistrictsController extends Controller
             'pageCount'       => $pageCount,
             'page'            => $currentPage,
             'totalCount'      => $totalRecords,
-            'data'            => $cities,
+            'data'            => $data,
         ]);
     }
 
     public function export(Request $request){
         return Excel::download(new DistrictsExport, 'districts.xlsx');
     }
+
+    public function getDistrictsByCityId($id){
+        return response()->json(District::where('city_code', $id)->get());
+    }
 }

app/Http/Controllers/LocationController.php

@@ -1,67 +0,0 @@
-<?php
-
-namespace Modules\Location\Http\Controllers;
-
-use App\Http\Controllers\Controller;
-use Illuminate\Http\RedirectResponse;
-use Illuminate\Http\Request;
-use Illuminate\Http\Response;
-
-class LocationController extends Controller
-{
-    /**
-     * Display a listing of the resource.
-     */
-    public function index()
-    {
-        return view('location::index');
-    }
-
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create()
-    {
-        return view('location::create');
-    }
-
-    /**
-     * Store a newly created resource in storage.
-     */
-    public function store(Request $request): RedirectResponse
-    {
-        //
-    }
-
-    /**
-     * Show the specified resource.
-     */
-    public function show($id)
-    {
-        return view('location::show');
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     */
-    public function edit($id)
-    {
-        return view('location::edit');
-    }
-
-    /**
-     * Update the specified resource in storage.
-     */
-    public function update(Request $request, $id): RedirectResponse
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
-    public function destroy($id)
-    {
-        //
-    }
-}

app/Http/Controllers/ProvincesController.php

@@ -107,7 +107,7 @@ class ProvincesController extends Controller
         $filteredRecords = $query->count();
 
         // Get the data for the current page
-        $provinces = $query->get();
+        $data = $query->get();
 
         // Calculate the page count
         $pageCount = ceil($totalRecords/$request->get('size'));
@@ -123,7 +123,7 @@ class ProvincesController extends Controller
             'pageCount'       => $pageCount,
             'page'            => $currentPage,
             'totalCount'      => $totalRecords,
-            'data'            => $provinces,
+            'data'            => $data,
         ]);
     }
 

app/Http/Controllers/VillagesController.php

@@ -0,0 +1,169 @@
+<?php
+
+    namespace Modules\Location\Http\Controllers;
+
+    use App\Http\Controllers\Controller;
+    use Illuminate\Http\Request;
+    use Maatwebsite\Excel\Facades\Excel;
+    use Modules\Location\Exports\VillagesExport;
+    use Modules\Location\Http\Requests\VillageRequest;
+    use Modules\Location\Models\City;
+    use Modules\Location\Models\District;
+    use Modules\Location\Models\Province;
+    use Modules\Location\Models\Village;
+    use Exception;
+
+    class VillagesController extends Controller
+    {
+        public $user;
+
+        public function index()
+        {
+            $provinces = Province::all();
+            return view('location::villages.index',compact('provinces'));
+        }
+
+        public function store(VillageRequest $request)
+        {
+            $validate = $request->validated();
+
+            if ($validate) {
+                try {
+                    $village = Village::create($validate);
+                    return redirect()
+                        ->route('locations.villages.index')
+                        ->with('success', 'Village created successfully');
+                } catch (Exception $e) {
+                    return redirect()->back()->with('error', 'Failed to create village. ' . $e->getMessage());
+                }
+            }
+        }
+
+        public function create()
+        {
+            $provinces = Province::all();
+            return view('location::villages.create', compact('provinces'));
+        }
+
+        public function edit($id)
+        {
+            $village   = Village::find($id);
+            $provinces = Province::all();
+            $cities    = City::where('province_code', $village->province_code)->get();
+            $districts = District::where('city_code', $village->city_code)->get();
+            return view('location::villages.create', compact('village', 'provinces', 'cities', 'districts'));
+        }
+
+        public function update(VillageRequest $request, $id)
+        {
+            $validate = $request->validated();
+
+            if ($validate) {
+                try {
+                    $village = Village::find($id);
+                    $village->update($validate);
+                    return redirect()
+                        ->route('locations.villages.index')
+                        ->with('success', 'Village updated successfully');
+                } catch (Exception $e) {
+                    return redirect()->back()->with('error', 'Failed to update village. ' . $e->getMessage());
+                }
+            }
+        }
+
+        public function destroy($id)
+        {
+            try {
+                Village::destroy($id);
+                echo json_encode(['message' => 'Village deleted successfully', 'success' => true]);
+            } catch (Exception $e) {
+                echo json_encode(['message' => 'Failed to delete Village', 'success' => false]);
+            }
+        }
+
+        public function export(Request $request)
+        {
+            return Excel::download(new VillagesExport, 'villages.xlsx');
+        }
+
+        public function dataForDatatables(Request $request)
+        {
+            if (is_null($this->user) || !$this->user->can('provinces.view')) {
+                //abort(403, 'Sorry! You are not allowed to view users.');
+            }
+
+            // Retrieve data from the database
+            $query = Village::query();
+
+            // Apply search filter if provided
+            if ($request->has('search') && !empty($request->get('search'))) {
+                $search = $request->get('search');
+                $search = explode('|', $search);
+                if(isset($search[0]) &&!empty($search[0])){
+                    $query->where('province_code',$search[0]);
+                }
+                if(isset($search[1]) &&!empty($search[1])){
+                    $query->where('city_code',$search[1]);
+                }
+
+                if(isset($search[2]) &&!empty($search[2])){
+                    $query->where('district_code',$search[2]);
+                }
+                $query->where(function ($q) use ($search) {
+                    $q->where('code', 'LIKE', "%$search[3]%");
+                    $q->orWhere('name', 'LIKE', "%$search[3]%");
+                });
+            }
+
+            // Apply sorting if provided
+            if ($request->has('sortOrder') && !empty($request->get('sortOrder'))) {
+                $order  = $request->get('sortOrder');
+                $column = $request->get('sortField');
+                $query->orderBy($column, $order);
+            }
+
+            // Get the total count of records
+            $totalRecords = $query->count();
+
+            // Apply pagination if provided
+            if ($request->has('page') && $request->has('size')) {
+                $page   = $request->get('page');
+                $size   = $request->get('size');
+                $offset = ($page - 1) * $size; // Calculate the offset
+
+                $query->skip($offset)->take($size);
+            }
+
+            // Get the filtered count of records
+            $filteredRecords = $query->count();
+
+            // Get the data for the current page
+            $data = $query->with('district.city.province')->get();
+
+            // Calculate the page count
+            $pageCount = ceil($totalRecords / $request->get('size'));
+
+            // Calculate the current page number
+            $currentPage = 0 + 1;
+
+            // Return the response data as a JSON object
+            return response()->json([
+                'draw'            => $request->get('draw'),
+                'recordsTotal'    => $totalRecords,
+                'recordsFiltered' => $filteredRecords,
+                'pageCount'       => $pageCount,
+                'page'            => $currentPage,
+                'totalCount'      => $totalRecords,
+                'data'            => $data,
+            ]);
+        }
+
+        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());
+        }
+
+    }

app/Http/Requests/VillageRequest.php

@@ -0,0 +1,42 @@
+<?php
+
+    namespace Modules\Location\Http\Requests;
+
+    use Illuminate\Foundation\Http\FormRequest;
+
+    class VillageRequest extends FormRequest
+    {
+        /**
+         * Get the validation rules that apply to the request.
+         */
+        public function rules()
+        : array
+        {
+            $rules = [
+                'province_code' => 'required|exists:provinces,code',
+                'city_code'     => 'required|exists:cities,code',
+                'district_code' => 'required|exists:districts,code',
+                'postal_code'   => 'required|string|max:5',
+                'alt_name'      => 'nullable|string|max:255',
+            ];
+
+            if ($this->method() === 'PUT') {
+                $rules['code'] = 'required|string|max:6|unique:villages,code,' . $this->id;
+                $rules['name'] = 'required|string|max:2554|unique:villages,name,' . $this->id;
+            } else {
+                $rules['code'] = 'required|string|max:6|unique:villages,code';
+                $rules['name'] = 'required|string|max:2554|unique:villages,name';
+            }
+
+            return $rules;
+        }
+
+        /**
+         * Determine if the user is authorized to make this request.
+         */
+        public function authorize()
+        : bool
+        {
+            return true;
+        }
+    }

app/Models/Village.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Modules\Location\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Modules\Location\Database\Factories\VillageFactory;
+
+class Village extends Base
+{
+    protected $fillable = ['province_code','city_code','district_code', 'code', 'name','alt_name','postal_code'];
+
+    public function district(){
+        return $this->belongsTo(District::class, 'district_code', 'code');
+    }
+
+}

database/migrations/2024_08_08_144309_create_villages_table.php

@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('villages', function (Blueprint $table) {
+            $table->id();
+            $table->string('province_code')->index();
+            $table->string('city_code')->index();
+            $table->string('district_code')->index();
+            $table->string('code');
+            $table->string('name');
+            $table->string('alt_name')->nullable();
+            $table->string('postal_code', 5)->nullable();
+            $table->timestamps();
+            $table->softDeletes();
+            $table->uuid('created_by')->nullable();
+            $table->uuid('updated_by')->nullable();
+            $table->uuid('deleted_by')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('villages');
+    }
+};

database/seeders/CitySeeder.php

@@ -23,7 +23,9 @@
 
         public function data()
         {
-            return [
+
+            // return  = [
+            $originalData = [
                 ['province_code' => 11, 'code' => '11.01', 'name' => 'KAB. ACEH SELATAN'],
                 ['province_code' => 11, 'code' => '11.02', 'name' => 'KAB. ACEH TENGGARA'],
                 ['province_code' => 11, 'code' => '11.03', 'name' => 'KAB. ACEH TIMUR'],
@@ -540,5 +542,15 @@
                 ['province_code' => 92, 'code' => '92.71', 'name' => 'KOTA SORONG'],
 
             ];
+
+            $formattedData = array_map(function ($item) {
+                $item['name'] = ucwords(strtolower($item['name']));
+                return $item;
+            }, $originalData);
+
+            return $formattedData;
+
         }
+
+
     }

database/seeders/LocationDatabaseSeeder.php

@@ -16,6 +16,7 @@ class LocationDatabaseSeeder extends Seeder
             ProvinceSeeder::class,
             CitySeeder::class,
             DistrictSeeder::class,
+            VillageSeeder::class,
         ]);
     }
 }

database/seeders/VillageSeeder.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace Modules\Location\Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+
+class VillageSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+
+        try {
+            DB::unprepared(file_get_contents(__DIR__ . '/villages.sql'));
+        } catch (\Exception $e) {
+            Log::error('Seeder Error: ' . $e->getMessage());
+            throw $e;
+        }
+    }
+}

module.json

@@ -15,11 +15,13 @@
             {
                 "title": "Locations",
                 "path": "locations",
-                "icon": "ki-filled ki-map text-lg",
+                "icon": "ki-filled ki-map text-lg text-primary",
                 "classes": "",
                 "attributes": [],
                 "permission": "",
-                "roles": [],
+                "roles": [
+                    "administrator"
+                ],
                 "sub": [
                     {
                         "title": "Provinces",
@@ -27,7 +29,9 @@
                         "classes": "",
                         "attributes": [],
                         "permission": "",
-                        "roles": []
+                        "roles": [
+                            "administrator"
+                        ]
                     },
                     {
                         "title": "Cities",
@@ -35,7 +39,9 @@
                         "classes": "",
                         "attributes": [],
                         "permission": "",
-                        "roles": []
+                        "roles": [
+                            "administrator"
+                        ]
                     },
                     {
                         "title": "Districts",
@@ -43,15 +49,19 @@
                         "classes": "",
                         "attributes": [],
                         "permission": "",
-                        "roles": []
+                        "roles": [
+                            "administrator"
+                        ]
                     },
                     {
                         "title": "Villages",
-                        "path": "",
+                        "path": "locations.villages",
                         "classes": "",
                         "attributes": [],
                         "permission": "",
-                        "roles": []
+                        "roles": [
+                            "administrator"
+                        ]
                     }
                 ]
             }

resources/assets/js/app.js

@@ -2,29 +2,32 @@ import TomSelect from "tom-select";
 
 let settings = {
     plugins: ['dropdown_input'],
-    create: true,
+    create: false,
     createOnBlur: true
 };
 
 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);
 }
 
-if (citySelect) {
-    var tomcities = new TomSelect('#city_code', settings);
-    var tomprovince = new TomSelect('#province_code', {
+if (citySelect && !districtSelect) {
+    let tomcities = new TomSelect('#city_code', settings);
+    let tomprovince = new TomSelect('#province_code', {
         ...settings, // Spread existing settings
         onChange: function (value) {
-
+            console.log('Province selected 1:', value);
             // Destroy only if necessary (prevents unnecessary re-initialization)
             if (tomcities) {
                 tomcities.destroy();
             }
 
-            var url = 'locations/cities/province/' + value;
+            let url = 'locations/cities/province/' + value;
             fetch(url)
                 .then(response => response.json())
                 .then(data => {
@@ -44,3 +47,208 @@ if (citySelect) {
         }
     });
 }
+
+if (districtSelect && !villageSelect) {
+    let tomdistrict = new TomSelect('#district_code', settings);
+    let tomcities = new TomSelect('#city_code', {
+        ...settings,
+        onChange: function (value) {
+            console.log('City selected:', 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
+                    });
+                })
+                .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) {
+                            console.log('City selected:', 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
+                                    });
+                                })
+                                .catch(error => {
+                                    console.error('Error fetching data:', error);
+                                });
+                        }
+                    });
+                })
+                .catch(error => {
+                    console.error('Error fetching data:', error);
+                });
+        }
+    });
+}
+
+if (villageSelect) {
+    let tomvillage, tomdistrict, tomcities, tomprovince;
+
+    const resetFields = (fromLevel) => {
+        if (fromLevel <= 1) {
+            citySelect.value = "";
+            if (tomcities) tomcities.clear();
+        }
+        if (fromLevel <= 2) {
+            districtSelect.value = "";
+            if (tomdistrict) tomdistrict.clear();
+        }
+        if (fromLevel <= 3) {
+            villageSelect.value = "";
+            if (tomvillage) tomvillage.clear();
+        }
+        if (postalCode) postalCode.value = "";
+    };
+
+    tomvillage = new TomSelect('#village_code', settings);
+
+    tomdistrict = new TomSelect('#district_code', {
+        ...settings,
+        onChange: function (value) {
+            resetFields(3);
+
+            if (value) {
+                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.clear();
+                        tomvillage.clearOptions();
+                        tomvillage.addOptions(options);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching data:', error);
+                    });
+            }
+        }
+    });
+
+    tomcities = new TomSelect('#city_code', {
+        ...settings,
+        onChange: function (value) {
+            resetFields(2);
+
+            if (value) {
+                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.clear();
+                        tomdistrict.clearOptions();
+                        tomdistrict.addOptions(options);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching data:', error);
+                    });
+            }
+        }
+    });
+
+    tomprovince = new TomSelect('#province_code', {
+        ...settings,
+        onChange: function (value) {
+            resetFields(1);
+
+            if (value) {
+                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.clear();
+                        tomcities.clearOptions();
+                        tomcities.addOptions(options);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching data:', error);
+                    });
+            }
+        }
+    });
+
+    if (postalCode) {
+        villageSelect.addEventListener('change', function (event) {
+            if (event.target.value) {
+                fetch('locations/villages/postal-code/' + event.target.value)
+                    .then(response => response.json())
+                    .then(data => {
+                        postalCode.value = data.postal_code;
+                    })
+                    .catch(error => {
+                        console.error('Error fetching postal code:', error);
+                    });
+            } else {
+                postalCode.value = "";
+            }
+        });
+    }
+}
+
+

resources/views/cities/index.blade.php

@@ -4,84 +4,81 @@
     {{ Breadcrumbs::render('locations.cities') }}
 @endsection
 
-@section('content')
-    <div class="container-fluid">
-        <div class="grid">
-            <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="cities-table" data-api-url="{{ route('locations.cities.datatables') }}">
-                <div class="card-header py-5 flex-wrap">
-                    <h3 class="card-title">
-                        List of Cities
-                    </h3>
-                    <div class="flex flex-wrap gap-2 lg:gap-5">
-                        <div class="flex">
-                            <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
-                                <input placeholder="Search cities" id="search" type="text" value="">
+@push('styles')
+    <style>
+        .ts-dropdown,
+        .ts-control,
+        .ts-control input {
+        | font-size: 12 px;
+            line-height: 14px !important;
+        }
+    </style
+@endpush
 
-                            </label>
-                        </div>
-                        <div class="flex flex-wrap gap-2.5">
-                            <select class="select select-sm w-28">
-                                <option value="1">
-                                    Active
+@section('content')
+    <div class="grid">
+        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="cities-table" data-api-url="{{ route('locations.cities.datatables') }}">
+            <div class="card-header py-5 flex-wrap">
+                <h3 class="card-title">
+                    List of Cities
+                </h3>
+                <div class="flex flex-wrap gap-2 lg:gap-5">
+                    <div class="flex flex-wrap gap-2.5">
+                        <select id="province_code" name="province_code" class="select select-sm w-[150px]">
+                            <option value="">Select Province</option>
+                            @foreach($provinces as $province)
+                                <option value="{{ $province->code }}">
+                                    {{ $province->name }}
                                 </option>
-                                <option value="2">
-                                    Disabled
-                                </option>
-                                <option value="2">
-                                    Pending
-                                </option>
-                            </select>
-                            <select class="select select-sm w-28">
-                                <option value="desc">
-                                    Latest
-                                </option>
-                                <option value="asc">
-                                    Oldest
-                                </option>
-                            </select>
-                            <button class="btn btn-sm btn-outline btn-primary">
-                                <i class="ki-filled ki-setting-4"> </i> <Filters></Filters>
-                            </button>
-                            <div class="h-[24px] border border-r-gray-200"> </div>
-                            <a class="btn btn-sm btn-light" href="{{ route('locations.cities.export') }}"> Export to Excel </a>
-                            <a class="btn btn-sm btn-primary" href="{{ route('locations.cities.create') }}"> Add City </a>
-                        </div>
+                            @endforeach
+                        </select>
+
+                        <label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Search Cities" id="search" type="text" value="">
+                        </label>
+                        <button class="search btn btn-sm btn-outline btn-primary">
+                            <i class="ki-filled ki-setting-4"> </i>
+                            <Filters></Filters>
+                        </button>
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="{{ route('locations.cities.export') }}"> Export to Excel </a>
+                        <a class="btn btn-sm btn-primary" href="{{ route('locations.cities.create') }}"> Add City </a>
                     </div>
                 </div>
-                <div class="card-body">
-                    <div class="scrollable-x-auto">
-                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
-                            <thead>
-                            <tr>
-                                <th class="w-14">
-                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="code">
-                                    <span class="sort"> <span class="sort-label"> Code </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="name">
-                                    <span class="sort"> <span class="sort-label"> City </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="province">
-                                    <span class="sort"> <span class="sort-label"> Province </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
-                            </tr>
-                            </thead>
-                        </table>
+            </div>
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="code">
+                                <span class="sort"> <span class="sort-label"> Code </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="name">
+                                <span class="sort"> <span class="sort-label"> City </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="province">
+                                <span class="sort"> <span class="sort-label"> Province </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
                     </div>
-                    <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                        <div class="flex items-center gap-2">
-                            Show
-                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
-                        </div>
-                        <div class="flex items-center gap-4">
-                            <span data-datatable-info="true"> </span>
-                            <div class="pagination" data-datatable-pagination="true">
-                            </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
                         </div>
                     </div>
                 </div>
@@ -96,7 +93,7 @@
         function deleteData(data) {
             Swal.fire({
                 title: 'Are you sure?',
-                text: "You won't be able to revert this!" + data,
+                text: "You won't be able to revert this!",
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#3085d6',
@@ -113,7 +110,7 @@
                     $.ajax(`locations/cities/${data}`, {
                         type: 'DELETE'
                     }).then((response) => {
-                        swal.fire('Deleted!', 'User has been deleted.','success').then(() => {
+                        swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
                             window.location.reload();
                         });
                     }).catch((error) => {
@@ -127,6 +124,7 @@
     <script type="module">
         const element = document.querySelector('#cities-table');
         const searchInput = document.getElementById('search');
+        const searchButton = document.querySelector('.search');
 
         const apiUrl = element.getAttribute('data-api-url');
         const dataTableOptions = {
@@ -173,9 +171,16 @@
 
         let dataTable = new KTDataTable(element, dataTableOptions);
         // Custom search functionality
-        searchInput.addEventListener('input', function () {
-            const searchValue = this.value.trim();
-            dataTable.search(searchValue, true);
+        searchInput.addEventListener('keyup', function () {
+            const _province = document.getElementById('province_code').value;
+            const _search = searchInput.value.trim();
+            dataTable.search(`${_province}|${_search}`, true);
+        });
+
+        searchButton.addEventListener('click', function () {
+            const _province = document.getElementById('province_code').value;
+            const _search = searchInput.value.trim();
+            dataTable.search(`${_province}|${_search}`, true);
         });
     </script>
 @endpush

resources/views/districts/create.blade.php

@@ -17,7 +17,7 @@
             <div class="card pb-2.5">
                 <div class="card-header" id="basic_settings">
                     <h3 class="card-title">
-                        {{ isset($district->id) ? 'Edit' : 'Add' }} City
+                        {{ isset($district->id) ? 'Edit' : 'Add' }} District
                     </h3>
                     <div class="flex items-center gap-2">
                         <a href="{{ route('locations.districts.index') }}" class="btn btn-xs btn-info">Back</a>

resources/views/districts/index.blade.php

@@ -4,88 +4,89 @@
     {{ Breadcrumbs::render('locations.districts') }}
 @endsection
 
-@section('content')
-    <div class="container-fluid">
-        <div class="grid">
-            <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="districts-table" data-api-url="{{ route('locations.districts.datatables') }}">
-                <div class="card-header py-5 flex-wrap">
-                    <h3 class="card-title">
-                        List of Districts
-                    </h3>
-                    <div class="flex flex-wrap gap-2 lg:gap-5">
-                        <div class="flex">
-                            <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
-                                <input placeholder="Search districts" id="search" type="text" value="">
+@push('styles')
+    <style>
+        .ts-dropdown,
+        .ts-control,
+        .ts-control input {
+        | font-size: 12 px;
+            line-height: 14px !important;
+        }
+    </style
+@endpush
 
-                            </label>
-                        </div>
-                        <div class="flex flex-wrap gap-2.5">
-                            <select class="select select-sm w-28">
-                                <option value="1">
-                                    Active
+@section('content')
+    <div class="grid">
+        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="districts-table" data-api-url="{{ route('locations.districts.datatables') }}">
+            <div class="card-header py-5 flex-wrap">
+                <h3 class="card-title">
+                    List of Districts
+                </h3>
+                <div class="flex flex-wrap gap-2 lg:gap-5">
+                    <div class="flex flex-wrap gap-2.5">
+                        <select id="province_code" name="province_code" class="select select-sm w-[150px]">
+                            <option value="">Select Province</option>
+                            @foreach($provinces as $province)
+                                <option value="{{ $province->code }}">
+                                    {{ $province->name }}
                                 </option>
-                                <option value="2">
-                                    Disabled
-                                </option>
-                                <option value="2">
-                                    Pending
-                                </option>
-                            </select>
-                            <select class="select select-sm w-28">
-                                <option value="desc">
-                                    Latest
-                                </option>
-                                <option value="asc">
-                                    Oldest
-                                </option>
-                            </select>
-                            <button class="btn btn-sm btn-outline btn-primary">
-                                <i class="ki-filled ki-setting-4"> </i> <Filters></Filters>
-                            </button>
-                            <div class="h-[24px] border border-r-gray-200"> </div>
-                            <a class="btn btn-sm btn-light" href="{{ route('locations.districts.export') }}"> Export to Excel </a>
-                            <a class="btn btn-sm btn-primary" href="{{ route('locations.districts.create') }}"> Add District </a>
-                        </div>
+                            @endforeach
+                        </select>
+
+                        <select id="city_code" name="city_code" class="select select-sm w-[250px]">
+                            <option value="">Select City</option>
+                        </select>
+
+                        <label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Search Districts" id="search" type="text" value="">
+                        </label>
+                        <button class="search btn btn-sm btn-outline btn-primary">
+                            <i class="ki-filled ki-setting-4"> </i>
+                            <Filters></Filters>
+                        </button>
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="{{ route('locations.districts.export') }}"> Export to Excel </a>
+                        <a class="btn btn-sm btn-primary" href="{{ route('locations.districts.create') }}"> Add District </a>
                     </div>
                 </div>
-                <div class="card-body">
-                    <div class="scrollable-x-auto">
-                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
-                            <thead>
-                            <tr>
-                                <th class="w-14">
-                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="code">
-                                    <span class="sort"> <span class="sort-label"> Code </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="name">
-                                    <span class="sort"> <span class="sort-label"> District </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="city">
-                                    <span class="sort"> <span class="sort-label"> City </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="province">
-                                    <span class="sort"> <span class="sort-label"> Province </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
-                            </tr>
-                            </thead>
-                        </table>
+            </div>
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="code">
+                                <span class="sort"> <span class="sort-label"> Code </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="name">
+                                <span class="sort"> <span class="sort-label"> District </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="city">
+                                <span class="sort"> <span class="sort-label"> City </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="province">
+                                <span class="sort"> <span class="sort-label"> Province </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
                     </div>
-                    <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                        <div class="flex items-center gap-2">
-                            Show
-                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
-                        </div>
-                        <div class="flex items-center gap-4">
-                            <span data-datatable-info="true"> </span>
-                            <div class="pagination" data-datatable-pagination="true">
-                            </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
                         </div>
                     </div>
                 </div>
@@ -100,7 +101,7 @@
         function deleteData(data) {
             Swal.fire({
                 title: 'Are you sure?',
-                text: "You won't be able to revert this!" + data,
+                text: "You won't be able to revert this!",
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#3085d6',
@@ -117,7 +118,7 @@
                     $.ajax(`locations/districts/${data}`, {
                         type: 'DELETE'
                     }).then((response) => {
-                        swal.fire('Deleted!', 'User has been deleted.','success').then(() => {
+                        swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
                             window.location.reload();
                         });
                     }).catch((error) => {
@@ -131,11 +132,13 @@
     <script type="module">
         const element = document.querySelector('#districts-table');
         const searchInput = document.getElementById('search');
+        const searchButton = document.querySelector('.search');
 
         const apiUrl = element.getAttribute('data-api-url');
         const dataTableOptions = {
             apiEndpoint: apiUrl,
             pageSize: 5,
+            responsive: true,
             columns: {
                 select: {
                     render: (item, data, context) => {
@@ -183,9 +186,18 @@
 
         let dataTable = new KTDataTable(element, dataTableOptions);
         // Custom search functionality
-        searchInput.addEventListener('input', function () {
-            const searchValue = this.value.trim();
-            dataTable.search(searchValue, true);
+        searchInput.addEventListener('keyup', function () {
+            const _province = document.getElementById('province_code').value;
+            const _city = document.getElementById('city_code').value;
+            const _search = searchInput.value.trim();
+            dataTable.search(`${_province}|${_city}|${_search}`, true);
+        });
+
+        searchButton.addEventListener('click', function () {
+            const _province = document.getElementById('province_code').value;
+            const _city = document.getElementById('city_code').value;
+            const _search = searchInput.value.trim();
+            dataTable.search(`${_province}|${_city}|${_search}`, true);
         });
     </script>
 @endpush

resources/views/provinces/index.blade.php

@@ -5,79 +5,78 @@
 @endsection
 
 @section('content')
-    <div class="container-fluid">
-        <div class="grid">
-            <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="provinces-table" data-api-url="{{ route('locations.provinces.datatables') }}">
-                <div class="card-header py-5 flex-wrap">
-                    <h3 class="card-title">
-                        List of Provinces
-                    </h3>
-                    <div class="flex flex-wrap gap-2 lg:gap-5">
-                        <div class="flex">
-                            <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
-                                <input placeholder="Search provinces" id="search" type="text" value="">
+    <div class="grid">
+        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="provinces-table" data-api-url="{{ route('locations.provinces.datatables') }}">
+            <div class="card-header py-5 flex-wrap">
+                <h3 class="card-title">
+                    List of Provinces
+                </h3>
+                <div class="flex flex-wrap gap-2 lg:gap-5">
+                    <div class="flex">
+                        <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Search provinces" id="search" type="text" value="">
 
-                            </label>
-                        </div>
-                        <div class="flex flex-wrap gap-2.5">
-                            <select class="select select-sm w-28">
-                                <option value="1">
-                                    Active
-                                </option>
-                                <option value="2">
-                                    Disabled
-                                </option>
-                                <option value="2">
-                                    Pending
-                                </option>
-                            </select>
-                            <select class="select select-sm w-28">
-                                <option value="desc">
-                                    Latest
-                                </option>
-                                <option value="asc">
-                                    Oldest
-                                </option>
-                            </select>
-                            <button class="btn btn-sm btn-outline btn-primary">
-                                <i class="ki-filled ki-setting-4"> </i> <Filters></Filters>
-                            </button>
-                            <div class="h-[24px] border border-r-gray-200"> </div>
-                            <a class="btn btn-sm btn-light" href="{{ route('locations.provinces.export') }}"> Export to Excel </a>
-                            <a class="btn btn-sm btn-primary" href="{{ route('locations.provinces.create') }}"> Add Province </a>
-                        </div>
+                        </label>
+                    </div>
+                    <div class="flex flex-wrap gap-2.5">
+                        <select class="select select-sm w-28">
+                            <option value="1">
+                                Active
+                            </option>
+                            <option value="2">
+                                Disabled
+                            </option>
+                            <option value="2">
+                                Pending
+                            </option>
+                        </select>
+                        <select class="select select-sm w-28">
+                            <option value="desc">
+                                Latest
+                            </option>
+                            <option value="asc">
+                                Oldest
+                            </option>
+                        </select>
+                        <button class="btn btn-sm btn-outline btn-primary">
+                            <i class="ki-filled ki-setting-4"> </i>
+                            <Filters></Filters>
+                        </button>
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="{{ route('locations.provinces.export') }}"> Export to Excel </a>
+                        <a class="btn btn-sm btn-primary" href="{{ route('locations.provinces.create') }}"> Add Province </a>
                     </div>
                 </div>
-                <div class="card-body">
-                    <div class="scrollable-x-auto">
-                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
-                            <thead>
-                            <tr>
-                                <th class="w-14">
-                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="code">
-                                    <span class="sort"> <span class="sort-label"> Code </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="name">
-                                    <span class="sort"> <span class="sort-label"> Province </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
-                            </tr>
-                            </thead>
-                        </table>
+            </div>
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="code">
+                                <span class="sort"> <span class="sort-label"> Code </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="name">
+                                <span class="sort"> <span class="sort-label"> Province </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
                     </div>
-                    <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                        <div class="flex items-center gap-2">
-                            Show
-                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
-                        </div>
-                        <div class="flex items-center gap-4">
-                            <span data-datatable-info="true"> </span>
-                            <div class="pagination" data-datatable-pagination="true">
-                            </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
                         </div>
                     </div>
                 </div>
@@ -92,7 +91,7 @@
         function deleteData(data) {
             Swal.fire({
                 title: 'Are you sure?',
-                text: "You won't be able to revert this!" + data,
+                text: "You won't be able to revert this!",
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#3085d6',
@@ -109,7 +108,7 @@
                     $.ajax(`locations/provinces/${data}`, {
                         type: 'DELETE'
                     }).then((response) => {
-                        swal.fire('Deleted!', 'User has been deleted.','success').then(() => {
+                        swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
                             window.location.reload();
                         });
                     }).catch((error) => {
@@ -165,7 +164,9 @@
         // Custom search functionality
         searchInput.addEventListener('input', function () {
             const searchValue = this.value.trim();
-            dataTable.search(searchValue, true);
+            if (searchValue.length > 3) {
+                dataTable.search(searchValue, true);
+            }
         });
     </script>
 @endpush

resources/views/villages/create.blade.php

@@ -0,0 +1,161 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render(request()->route()->getName()) }}
+@endsection
+
+@section('content')
+    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+        @if(isset($village->id))
+            <form action="{{ route('locations.villages.update', $village->id) }}" method="POST">
+                <input type="hidden" name="id" value="{{ $village->id }}">
+            @method('PUT')
+        @else
+            <form method="POST" action="{{ route('locations.villages.store') }}">
+        @endif
+        @csrf
+            <div class="card pb-2.5">
+                <div class="card-header" id="basic_settings">
+                    <h3 class="card-title">
+                        {{ isset($village->id) ? 'Edit' : 'Add' }} Village
+                    </h3>
+                    <div class="flex items-center gap-2">
+                        <a href="{{ route('locations.villages.index') }}" class="btn btn-xs btn-info">Back</a>
+                    </div>
+                </div>
+                <div class="card-body grid gap-5">
+                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label class="form-label max-w-56">
+                            Province
+                        </label>
+                        <div class="flex flex-wrap items-baseline w-full">
+                            <select id="province_code" name="province_code" class="select w-full @error('province_code') border-danger @enderror">
+                                <option value="">Select Province</option>
+                                @foreach($provinces as $province)
+                                    @if(isset($village))
+                                        <option value="{{ $province->code }}" {{ isset($village->province_code) && $village->province_code == $province->code?'selected' : '' }}>
+                                            {{ $province->name }}
+                                        </option>
+                                    @else
+                                        <option value="{{ $province->code }}">
+                                            {{ $province->name }}
+                                        </option>
+                                    @endif
+                                @endforeach
+                            </select>
+                            @error('province_code')
+                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                            @enderror
+                        </div>
+                    </div>
+                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label class="form-label max-w-56">
+                            City
+                        </label>
+                        <div class="flex flex-wrap items-baseline w-full">
+                            <select id="city_code" name="city_code" class="select w-full @error('city_code') border-danger @enderror">
+                                <option value="">Select City</option>
+                                @if(isset($cities))
+                                    @foreach($cities as $city)
+                                        @if(isset($village))
+                                            <option value="{{ $city->code }}" {{ isset($village->city_code) && $village->city_code == $city->code?'selected' : '' }}>
+                                                {{ $city->name }}
+                                            </option>
+                                        @else
+                                            <option value="{{ $city->code }}">
+                                                {{ $city->name }}
+                                            </option>
+                                        @endif
+                                    @endforeach
+
+                                @endif
+                            </select>
+                            @error('city_code')
+                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                            @enderror
+                        </div>
+                    </div>
+                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label class="form-label max-w-56">
+                            District
+                        </label>
+                        <div class="flex flex-wrap items-baseline w-full">
+                            <select id="district_code" name="district_code" class="select w-full @error('district_code') border-danger @enderror">
+                                <option value="">Select District</option>
+                                @if(isset($districts))
+                                    @foreach($districts as $district)
+                                        @if(isset($village))
+                                            <option value="{{ $district->code }}" {{ isset($village->district_code) && $village->district_code == $district->code?'selected' : '' }}>
+                                                {{ $district->name }}
+                                            </option>
+                                        @else
+                                            <option value="{{ $district->code }}">
+                                                {{ $district->name }}
+                                            </option>
+                                        @endif
+                                    @endforeach
+
+                                @endif
+                            </select>
+                            @error('district_code')
+                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                            @enderror
+                        </div>
+                    </div>
+                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label class="form-label max-w-56">
+                            Code
+                        </label>
+                        <div class="flex flex-wrap items-baseline w-full">
+                            <input class="input  @error('code') border-danger @enderror" type="text" name="code" value="{{ $village->code ?? '' }}">
+                            @error('code')
+                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                            @enderror
+                        </div>
+                    </div>
+                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label class="form-label max-w-56">
+                            Name
+                        </label>
+                        <div class="flex flex-wrap items-baseline w-full">
+                            <input class="input  @error('name') border-danger @enderror" type="text" name="name" value="{{ $village->name ?? '' }}">
+                            @error('name')
+                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                            @enderror
+                        </div>
+                    </div>
+                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label class="form-label max-w-56">
+                            Alternative Name
+                        </label>
+                        <div class="flex flex-wrap items-baseline w-full">
+                            <input class="input  @error('alt_name') border-danger @enderror" type="text" name="alt_name" value="{{ $village->alt_name ?? '' }}">
+                            @error('alt_name')
+                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                            @enderror
+                        </div>
+                    </div>
+                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label class="form-label max-w-56">
+                            Postal Code
+                        </label>
+                        <div class="flex flex-wrap items-baseline w-full">
+                            <input class="input  @error('postal_code') border-danger @enderror" type="number" name="postal_code" value="{{ $village->postal_code ?? '' }}">
+                            @error('postal_code')
+                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                            @enderror
+                        </div>
+                    </div>
+                    <div class="flex justify-end">
+                        <button type="submit" class="btn btn-primary">
+                            Save
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+@endsection
+
+@push('scripts')
+@endpush

resources/views/villages/index.blade.php

@@ -0,0 +1,234 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render('locations.villages') }}
+@endsection
+
+@push('styles')
+    <style>
+        .ts-dropdown,
+        .ts-control,
+        .ts-control input {
+        | font-size: 12 px;
+            line-height: 14px !important;
+        }
+    </style
+@endpush
+
+@section('content')
+    <div class="grid">
+        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="villages-table" data-api-url="{{ route('locations.villages.datatables') }}">
+            <div class="card-header py-5 flex-wrap">
+                <h3 class="card-title">
+                    List of Vilalges
+                </h3>
+                <div class="flex flex-wrap gap-2">
+                    <div class="flex flex-wrap gap-1.5">
+                        <select id="province_code" name="province_code" class="select select-sm w-[150px]">
+                            <option value="">Select Province</option>
+                            @foreach($provinces as $province)
+                                <option value="{{ $province->code }}">
+                                    {{ $province->name }}
+                                </option>
+                            @endforeach
+                        </select>
+
+                        <select id="city_code" name="city_code" class="select select-sm w-[250px]">
+                            <option value="">Select City</option>
+                        </select>
+
+                        <select id="district_code" name="district_code" class="select select-sm w-[150px]">
+                            <option value="">Select District</option>
+                        </select>
+
+                        <label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Search villages" id="search" type="text" value="">
+                        </label>
+
+                        <button class="search btn btn-sm btn-outline btn-primary">
+                            <i class="ki-filled ki-setting-4"> </i>
+                            <Filters></Filters>
+                        </button>
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="{{ route('locations.villages.export') }}"> Export to Excel </a>
+                        <a class="btn btn-sm btn-primary" href="{{ route('locations.villages.create') }}"> Add District </a>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[100px]" data-datatable-column="code">
+                                <span class="sort"> <span class="sort-label"> Code </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="name">
+                                <span class="sort"> <span class="sort-label"> Village </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="alt_name">
+                                <span class="sort"> <span class="sort-label"> Alternative Name </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px]" data-datatable-column="postal_code">
+                                <span class="sort"> <span class="sort-label"> Postal Code </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="district">
+                                <span class="sort"> <span class="sort-label"> District </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="city">
+                                <span class="sort"> <span class="sort-label"> City </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="province">
+                                <span class="sort"> <span class="sort-label"> Province </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script type="text/javascript">
+        function deleteData(data) {
+            Swal.fire({
+                title: 'Are you sure?',
+                text: "You won't be able to revert this!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, delete it!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajaxSetup({
+                        headers: {
+                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
+                        }
+                    });
+
+                    $.ajax(`locations/villages/${data}`, {
+                        type: 'DELETE'
+                    }).then((response) => {
+                        swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
+                            window.location.reload();
+                        });
+                    }).catch((error) => {
+                        console.error('Error:', error);
+                        Swal.fire('Error!', 'An error occurred while deleting the file.', 'error');
+                    });
+                }
+            })
+        }
+    </script>
+    <script type="module">
+        const element = document.querySelector('#villages-table');
+        const searchInput = document.getElementById('search');
+        const searchButton = document.querySelector('.search');
+
+        const apiUrl = element.getAttribute('data-api-url');
+        const dataTableOptions = {
+            apiEndpoint: apiUrl,
+            columns: {
+                select: {
+                    render: (item, data, context) => {
+                        const checkbox = document.createElement('input');
+                        checkbox.className = 'checkbox checkbox-sm';
+                        checkbox.type = 'checkbox';
+                        checkbox.value = data.id.toString();
+                        checkbox.setAttribute('data-datatable-row-check', 'true');
+                        return checkbox.outerHTML.trim();
+                    },
+                },
+                code: {
+                    title: 'Code',
+                },
+                name: {
+                    title: 'Village',
+                },
+                alt_name: {
+                    title: 'Alternative Name',
+                },
+                postal_code: {
+                    title: 'Postal Code',
+                },
+                district: {
+                    title: 'District',
+                    render: (item, data) => {
+                        return data.district.name;
+                    }
+                },
+                city: {
+                    title: 'City',
+                    render: (item, data) => {
+                        return data.district.city.name;
+                    }
+                },
+                province: {
+                    title: 'Province',
+                    render: (item, data) => {
+                        return data.district.city.province.name;
+                    }
+                },
+                actions: {
+                    title: 'Status',
+                    render: (item, data) => {
+                        return `<div class="flex flex-nowrap justify-center">
+                            <a class="btn btn-sm btn-icon btn-clear btn-info" href="locations/villages/${data.id}/edit">
+                                <i class="ki-outline ki-notepad-edit"></i>
+                            </a>
+                            <a onclick="deleteData(${data.id})" class="delete btn btn-sm btn-icon btn-clear btn-danger">
+                                <i class="ki-outline ki-trash"></i>
+                            </a>
+                        </div>`;
+                    },
+                }
+            },
+        };
+
+        let dataTable = new KTDataTable(element, dataTableOptions);
+        dataTable.showSpinner();
+        // Custom search functionality
+        searchInput.addEventListener('keyup', function () {
+            const _province = document.getElementById('province_code').value;
+            const _city = document.getElementById('city_code').value;
+            const _district = document.getElementById('district_code').value;
+            const _search = searchInput.value.trim();
+            dataTable.search(`${_province}|${_city}|${_district}|${_search}`, true);
+        });
+
+        searchButton.addEventListener('click', function () {
+            const _province = document.getElementById('province_code').value;
+            const _city = document.getElementById('city_code').value;
+            const _district = document.getElementById('district_code').value;
+            const _search = searchInput.value.trim();
+            dataTable.search(`${_province}|${_city}|${_district}|${_search}`, true);
+        });
+    </script>
+@endpush
+

routes/api.php

@@ -13,7 +13,3 @@ use Modules\Location\Http\Controllers\LocationController;
  * is assigned the "api" middleware group. Enjoy building your API!
  *
 */
-
-Route::middleware(['auth:sanctum'])->prefix('v1')->group(function () {
-    Route::apiResource('location', LocationController::class)->names('location');
-});

routes/breadcrumbs.php

@@ -57,3 +57,19 @@
         $trail->parent('locations.districts');
         $trail->push('Edit District');
     });
+
+    //Villages
+    Breadcrumbs::for('locations.villages', function (BreadcrumbTrail $trail) {
+        $trail->parent('locations');
+        $trail->push('Villages', route('locations.villages.index'));
+    });
+
+    Breadcrumbs::for('locations.villages.create', function (BreadcrumbTrail $trail) {
+        $trail->parent('locations.villages');
+        $trail->push('Create Village', route('locations.villages.create'));
+    });
+
+    Breadcrumbs::for('locations.villages.edit', function (BreadcrumbTrail $trail) {
+        $trail->parent('locations.villages');
+        $trail->push('Edit Village');
+    });

routes/web.php

@@ -5,6 +5,7 @@ use Illuminate\Support\Facades\Route;
     use Modules\Location\Http\Controllers\DistrictsController;
     use Modules\Location\Http\Controllers\LocationController;
     use Modules\Location\Http\Controllers\ProvincesController;
+    use Modules\Location\Http\Controllers\VillagesController;
 
     /*
     |--------------------------------------------------------------------------
@@ -41,5 +42,14 @@ use Illuminate\Support\Facades\Route;
                 Route::get('city/{city_code}', [DistrictsController::class, 'getDistrictsByCityId'])->name('city');
             });
             Route::resource('districts', DistrictsController::class);
+
+            Route::name('villages.')->prefix('villages')->group(function () {
+                Route::get('restore/{id}', [VillagesController::class, 'restore'])->name('restore');
+                Route::get('datatables', [VillagesController::class, 'dataForDatatables'])->name('datatables');
+                Route::get('export', [VillagesController   ::class, 'export'])->name('export');
+                Route::get('district/{district_code}', [VillagesController::class, 'getVillagesByDistrictId'])->name('district');
+                Route::get('postal-code/{village_code}', [VillagesController::class, 'getPostalCodesByVillageId'])->name('postalcode');
+            });
+            Route::resource('villages', VillagesController::class);
         });
     });