ocabacaa
201 lines
5.6 KiB
PHP
201 lines
5.6 KiB
PHP
<?php
|
|
|
|
session_start();
|
|
|
|
if(!isset($_SESSION['role'])){
|
|
|
|
header("Location: ../index.php");
|
|
exit;
|
|
}
|
|
|
|
if($_SESSION['role'] != 'warga'){
|
|
|
|
header("Location: ../index.php");
|
|
exit;
|
|
}
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Buat Laporan</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
|
|
</head>
|
|
|
|
<body class="bg-slate-100 min-h-screen">
|
|
|
|
|
|
<div class="max-w-5xl mx-auto p-6">
|
|
|
|
<a href="dashboard.php"
|
|
class="inline-flex items-center gap-2 bg-slate-800 hover:bg-slate-900 text-white px-4 py-3 rounded-xl shadow">
|
|
|
|
← Kembali ke Dashboard
|
|
|
|
</a>
|
|
|
|
<div class="bg-white rounded-3xl shadow-lg p-8 mt-6">
|
|
|
|
<div class="mb-8">
|
|
|
|
<h1 class="text-3xl font-bold text-slate-800">
|
|
Buat Laporan Warga
|
|
</h1>
|
|
|
|
<p class="text-slate-500 mt-2">
|
|
Isi data warga yang membutuhkan bantuan sosial dan pilih lokasi pada peta.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<form action="simpan_laporan.php" method="POST" enctype="multipart/form-data" class="space-y-5">
|
|
|
|
<div>
|
|
|
|
<label class="block mb-2 font-medium text-slate-700">
|
|
Nama Warga
|
|
</label>
|
|
|
|
<input type="text" name="nama_warga" required
|
|
class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label class="block mb-2 font-medium text-slate-700">
|
|
Alamat
|
|
</label>
|
|
|
|
<textarea name="alamat" rows="3" required
|
|
class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label class="block mb-2 font-medium text-slate-700">
|
|
Kondisi Warga
|
|
</label>
|
|
|
|
<textarea name="kondisi" rows="4" required
|
|
class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label class="block mb-2 font-medium text-slate-700">
|
|
Foto Kondisi Warga
|
|
</label>
|
|
|
|
<input type="file" name="foto" accept="image/*" required class="w-full border rounded-xl px-4 py-3">
|
|
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
|
|
<div>
|
|
|
|
<label class="block mb-2 font-medium text-slate-700">
|
|
Latitude
|
|
</label>
|
|
|
|
<input type="text" name="latitude" id="latitude" readonly required
|
|
class="w-full border rounded-xl px-4 py-3 bg-slate-100">
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label class="block mb-2 font-medium text-slate-700">
|
|
Longitude
|
|
</label>
|
|
|
|
<input type="text" name="longitude" id="longitude" readonly required
|
|
class="w-full border rounded-xl px-4 py-3 bg-slate-100">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label class="block mb-3 font-medium text-slate-700">
|
|
Pilih Lokasi Pada Peta
|
|
</label>
|
|
|
|
<p class="text-sm text-slate-500 mb-3">
|
|
Klik pada peta untuk menentukan lokasi warga.
|
|
</p>
|
|
|
|
<div id="map" style="height:450px;" class="rounded-2xl border">
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
|
|
<script>
|
|
var map = L.map('map').setView(
|
|
[-0.0263, 109.3425],
|
|
11
|
|
);
|
|
|
|
L.tileLayer(
|
|
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19
|
|
}
|
|
).addTo(map);
|
|
|
|
var marker;
|
|
|
|
map.on('click', function(e) {
|
|
|
|
var lat = e.latlng.lat.toFixed(6);
|
|
var lng = e.latlng.lng.toFixed(6);
|
|
|
|
document.getElementById('latitude').value = lat;
|
|
document.getElementById('longitude').value = lng;
|
|
|
|
if (marker) {
|
|
map.removeLayer(marker);
|
|
}
|
|
|
|
marker = L.marker([lat, lng])
|
|
.addTo(map)
|
|
.bindPopup(
|
|
"Lat: " + lat +
|
|
"<br>Lng: " + lng
|
|
)
|
|
.openPopup();
|
|
|
|
});
|
|
|
|
setTimeout(function() {
|
|
map.invalidateSize();
|
|
}, 200);
|
|
</script>
|
|
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-semibold shadow">
|
|
|
|
Kirim Laporan
|
|
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|