Feature #4 : Villages

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/DistrictsController.php

@@ -132,4 +132,8 @@ class DistrictsController extends Controller
     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/VillagesController.php

@@ -0,0 +1,161 @@
+<?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,
+            ]);
+        }
+
+    }

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/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,19 @@
+<?php
+
+namespace Modules\Location\Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+
+class VillageSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        DB::unprepared(file_get_contents(__DIR__ . '/villages.sql'));
+    }
+}
+
+

module.json

@@ -47,7 +47,7 @@
                     },
                     {
                         "title": "Villages",
-                        "path": "",
+                        "path": "locations.villages",
                         "classes": "",
                         "attributes": [],
                         "permission": "",

resources/assets/js/app.js

@@ -2,29 +2,30 @@ 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');
 
 if (provinceSelect && !citySelect) {
     new TomSelect('#province_code', settings);
 }
 
-if (citySelect) {
+if (citySelect && !districtSelect) {
-    var tomcities = new TomSelect('#city_code', settings);
+    let tomcities = new TomSelect('#city_code', settings);
-    var tomprovince = new TomSelect('#province_code', {
+    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 +45,89 @@ if (citySelect) {
         }
     });
 }
+
+if (districtSelect) {
+    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);
+                });
+        }
+    });
+}

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,235 @@
+@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="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="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>
+    </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!" + data,
+                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);
+        // 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/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,12 @@ 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::resource('villages', VillagesController::class);
         });
     });