fix(master-land): create func js get regency and get district

app/Http/Controllers/LocationController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\District;
+use App\Models\Regency;
+use Dflydev\DotAccessData\Data;
+use Illuminate\Http\Request;
+
+class LocationController extends Controller
+{
+    public function getRegencies($provinceId)
+    {
+        $regencies = Regency::where('province_id', $provinceId)->get();
+        return response()->json(['success' => true, 'data' => $regencies]);
+    }
+
+    public function getDistricts($regencyId)
+    {
+        $distircts = District::where('regency_id', $regencyId)->get();
+        return response()->json(['success' => true, 'data' => $distircts]);
+    }
+}

app/Http/Controllers/MasterData/LandController.php

@@ -4,6 +4,7 @@
 
 use App\Http\Controllers\Controller;
 use App\Models\Land;
+use App\Models\Province;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Validator;
 
@@ -12,7 +13,8 @@ class LandController extends Controller
     public function index()
     {
         $lands = Land::orderBy('created_at', 'desc')->get();
-        return view('master-data.lahan.index', compact('lands'));
+        $provinces = Province::all();
+        return view('master-data.lahan.index', compact('lands', 'provinces'));
     }
 
     public function store(Request $request)

app/Models/District.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class District extends Model
+{
+    use HasFactory;
+
+    protected $table = 'districts';
+    protected $guarded = [];
+}

public/assets/js/pages/customJs/master-data/lahan/index.js

@@ -1,3 +1,150 @@
+var map;
+document.addEventListener("DOMContentLoaded", function () {
+    // Initialize the first map
+    map = L.map("map", {
+        attributionControl: false,
+    }).setView([-8.157416852745705, 113.72281580436439], 16);
+
+    // Add tile layers to both maps
+    L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        maxZoom: 19,
+    }).addTo(map);
+
+    $("#showModal").on("shown.bs.modal", function () {
+        map.invalidateSize();
+    });
+});
+
+var form = document.getElementById("add-form");
+var provinceField = form.querySelector("#province-field");
+var provinceVal = new Choices(provinceField);
+
+var regencyContainer = form.querySelector("#regency-container");
+var regencyField = form.querySelector("#regency-field");
+var regencyVal = new Choices(regencyField, {
+    shouldSort: false,
+});
+
+var districtContainer = form.querySelector("#district-container");
+var districtField = form.querySelector("#district-field");
+var districtVal = new Choices(districtField, {
+    shouldSort: false,
+});
+
+var mapContainer = form.querySelector("#map-container");
+
+var loading = form.querySelector("#loading");
+
+function getRegencies(provinceId) {
+    regencyContainer.style.display = "none";
+    districtContainer.style.display = "none";
+    loading.style.display = "block";
+    mapContainer.style.display = "none";
+
+    const url = "/location/get-regency/" + provinceId;
+    $.ajax({
+        url: url,
+        type: "GET",
+        success: function (response) {
+            if (response.success) {
+                loading.style.display = "none";
+                const data = response.data;
+
+                regencyVal.clearStore();
+                regencyVal.clearChoices();
+
+                regencyVal.value = "";
+                regencyVal.setChoices([
+                    {
+                        value: "",
+                        label: "Pilih Kabupaten",
+                        selected: true,
+                        disabled: true,
+                    },
+                ]);
+
+                if (Array.isArray(data)) {
+                    regencyVal.setChoices(
+                        data.map((regency) => ({
+                            value: regency.id,
+                            label: regency.name,
+                            selected: false,
+                            disabled: false,
+                        }))
+                    );
+                    regencyContainer.style.display = "block";
+                } else {
+                    mapContainer.style.display = "block";
+                    mapContainer.innerHTML =
+                        "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
+                }
+            }
+        },
+        error: function (xhr, status, error) {
+            mapContainer.style.display = "block";
+            mapContainer.innerHTML =
+                "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
+        },
+    });
+}
+
+function showmap(districtId) {
+    mapContainer.style.display = "block";
+    map.invalidateSize();
+}
+
+function getDistricts(regencyId) {
+    districtContainer.style.display = "none";
+    loading.style.display = "block";
+    mapContainer.style.display = "none";
+
+    const url = "/location/get-district/" + regencyId;
+    $.ajax({
+        url: url,
+        type: "GET",
+        success: function (response) {
+            if (response.success) {
+                loading.style.display = "none";
+                const data = response.data;
+
+                districtVal.clearStore();
+                districtVal.clearChoices();
+
+                districtVal.value = "";
+                districtVal.setChoices([
+                    {
+                        value: "",
+                        label: "Pilih Kecamatan",
+                        selected: true,
+                        disabled: true,
+                    },
+                ]);
+
+                if (Array.isArray(data)) {
+                    districtVal.setChoices(
+                        data.map((district) => ({
+                            value: district.id,
+                            label: district.name,
+                            selected: false,
+                            disabled: false,
+                        }))
+                    );
+                    districtContainer.style.display = "block";
+                } else {
+                    mapContainer.style.display = "block";
+                    mapContainer.innerHTML =
+                        "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
+                }
+            }
+        },
+        error: function (xhr, status, error) {
+            mapContainer.style.display = "block";
+            mapContainer.innerHTML =
+                "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
+        },
+    });
+}
+
 function updateData(land) {
     var form = document.getElementById("edit-form");
     var landName = document.getElementById("landname-edit-field");

resources/views/layouts/app.blade.php

@@ -21,7 +21,7 @@
     <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
     <!-- custom Css-->
     <link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />
-
+    @stack('other-css')
 
 </head>
 
@@ -605,6 +605,7 @@ class="form-check-input">
 
     <!-- App js -->
     <script src="assets/js/app.js"></script>
+    <script src="assets/libs/jquery/jquery.min.js"></script>
 </body>
 
 </html>

resources/views/master-data/lahan/index.blade.php

@@ -1,6 +1,17 @@
 @extends('layouts.app')
 @push('title', 'Data Tanah')
 @section('content')
+    @push('other-css')
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+            integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+
+        <style>
+            #map {
+                height: 200px;
+                width: 100%;
+            }
+        </style>
+    @endpush
     <div class="page-content">
         <div class="container-fluid">
 
@@ -167,6 +178,8 @@ class="fw-medium link-primary">#VZ2101</a></td>
                                     </div>
                                 </div>
 
+                                <div class="row">
+                                    <div class="col-md-6">
                                         <div class="mb-3">
                                             <label for="rentalstart-field" class="form-label">Mulai Dari</label>
                                             <input type="date" id="rentalstart-field" class="form-control"
@@ -176,7 +189,8 @@ class="fw-medium link-primary">#VZ2101</a></td>
                                                 Masukan Tanggal Mulai
                                             </div>
                                         </div>
-
+                                    </div>
+                                    <div class="col-md-6">
                                         <div class="mb-3">
                                             <label for="rentaluntil-field" class="form-label">Sampai</label>
                                             <input type="date" id="rentaluntil-field" class="form-control"
@@ -186,6 +200,8 @@ class="fw-medium link-primary">#VZ2101</a></td>
                                                 Masukan Tanggal Sampai
                                             </div>
                                         </div>
+                                    </div>
+                                </div>
 
                                 <div class="mb-3">
                                     <label for="landname-field" class="form-label">Nama Lahan</label>
@@ -198,17 +214,24 @@ class="fw-medium link-primary">#VZ2101</a></td>
 
                                 <div class="mb-3">
                                     <label for="province-field" class="form-label">Provinsi</label>
-                                    <select name="province_id" id="province-field" class="form-control" required>
+                                    <select name="province_id" id="province-field" class="form-control" required
+                                        onchange="getRegencies(this.value)">
                                         <option value="" selected disabled>Pilih Provinsi</option>
+                                        @foreach ($provinces as $province)
+                                            <option value="{{ $province->id }}"
+                                                {{ old('province_id') == $province->id ? 'selected' : '' }}>
+                                                {{ $province->name }}</option>
+                                        @endforeach
                                     </select>
                                     <div class="invalid-feedback">
                                         Harap Pilih Provinsi
                                     </div>
                                 </div>
 
-                                <div class="mb-3">
+                                <div class="mb-3" id="regency-container" style="display: none">
                                     <label for="regency-field" class="form-label">Kabupaten atau Kota</label>
-                                    <select name="regency_id" id="regency-field" class="form-control" required>
+                                    <select name="regency_id" id="regency-field" class="form-control" required
+                                        onchange="getDistricts(this.value)">
                                         <option value="" selected disabled>Pilih Kabupaten atau Kota</option>
                                     </select>
                                     <div class="invalid-feedback">
@@ -216,9 +239,10 @@ class="fw-medium link-primary">#VZ2101</a></td>
                                     </div>
                                 </div>
 
-                                <div class="mb-3">
+                                <div class="mb-3" id="district-container" style="display: none">
                                     <label for="district-field" class="form-label">Kecamatan</label>
-                                    <select name="district_id" id="district-field" class="form-control" required>
+                                    <select name="district_id" id="district-field" class="form-control" required
+                                        onchange="showmap(this.value)">
                                         <option value="" selected disabled>Pilih Kecamatan</option>
                                     </select>
                                     <div class="invalid-feedback">
@@ -226,14 +250,15 @@ class="fw-medium link-primary">#VZ2101</a></td>
                                     </div>
                                 </div>
 
-                                <div>
+                                <div id="loading" class="text-center" style="display: none">
-                                    <label for="status-field" class="form-label">Deskripsi</label>
+                                    <div class="spinner-border text-primary" role="status">
-                                    <textarea name="description" id="status-field" rows="5" placeholder="Masukan Deskripsi" class="form-control"
+                                        <span class="visually-hidden">Loading...</span>
-                                        required>{{ old('description') }}</textarea>
-                                    <div class="invalid-feedback">
-                                        Masukan Deskripsi
                                     </div>
                                 </div>
+
+                                <div id="map-container" style="display: none">
+                                    <div id="map"></div>
+                                </div>
                             </div>
                             <div class="modal-footer">
                                 <div class="hstack gap-2 justify-content-end">
@@ -338,5 +363,9 @@ class="form-control" required>{{ old('description') }}</textarea>
         <script src="assets/js/pages/customJs/master-data/lahan/index.js"></script>
 
         <script src="assets/js/pages/form-validation.init.js"></script>
+
+        <!-- Make sure you put this AFTER Leaflet's CSS -->
+        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
     @endpush
 @endsection

routes/web.php

@@ -7,6 +7,7 @@
 use App\Http\Controllers\Auth\RegisteredUserController;
 use App\Http\Controllers\Auth\TwoStepVerifyController;
 use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\LocationController;
 use App\Http\Controllers\MasterData\IndicatorController;
 use App\Http\Controllers\MasterData\LandController;
 use App\Http\Controllers\MasterData\RuleController;
@@ -59,6 +60,11 @@
 Route::middleware(['auth', 'verifiedAcount'])->group(function () {
     Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])->name('auth.logout');
 
+    Route::prefix('location')->controller(LocationController::class)->name('location.')->group(function () {
+        Route::get('/get-regency/{id}', 'getRegencies')->name('get_regencies');
+        Route::get('/get-district/{id}', 'getDistricts')->name('get_districts');
+    });
+
     Route::middleware('admin')->group(function () {
         Route::get('/dashboard-admin', [DashboardController::class, 'admin'])->name('dashboard.admin');