467 lines
17 KiB
PHP
467 lines
17 KiB
PHP
@extends('user.template')
|
|
|
|
@section('content')
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero section">
|
|
|
|
<div class="container text-center d-flex flex-column justify-content-center align-items-center position-relative">
|
|
<h1>Selamat Datang di <span>SIG TPS</span></h1>
|
|
<p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
|
|
<div class="d-flex">
|
|
<a href="#about" class="btn-get-started scrollto">Lihat Peta</a>
|
|
<!-- <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a> -->
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /Hero Section -->
|
|
|
|
<!-- Featured Services Section -->
|
|
<section id="featured-services" class="featured-services section">
|
|
<div class="container">
|
|
|
|
<!-- Section Title -->
|
|
<div class="text-center section-title" data-aos="fade-up">
|
|
<h2>Timbulan Sampah</h2>
|
|
<p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per
|
|
hari</strong>.</p>
|
|
</div>
|
|
|
|
<div class="row gy-4">
|
|
|
|
<!-- Total Timbulan Sampah -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-trash2 icon"></i>
|
|
</div>
|
|
<h1>
|
|
{{ number_format($sampah->total_sampah ?? 0, 2, ',', '.') }}
|
|
</h1>
|
|
<p><strong>Total Timbulan Sampah</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Sampah Dikelola -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-gear icon"></i>
|
|
</div>
|
|
<h1>
|
|
{{ number_format($sampah->total_kelola ?? 0, 2, ',', '.') }}
|
|
</h1>
|
|
<p><strong>Total Sampah Dikelola</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Sampah Didaur Ulang -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-recycle icon"></i>
|
|
</div>
|
|
<h1>
|
|
{{ number_format($sampah->total_daur_ulang ?? 0, 2, ',', '.') }}
|
|
</h1>
|
|
<p><strong>Total Sampah Didaur Ulang</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Sisa Sampah -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-exclamation-triangle icon"></i>
|
|
</div>
|
|
<h1>
|
|
{{ number_format($sampah->sisa_sampah ?? 0, 2, ',', '.') }}
|
|
</h1>
|
|
<p><strong>Total Sisa Sampah</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<!-- /Featured Services Section -->
|
|
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="about section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Tentang</h2>
|
|
<p>Sistem Informasi Geografis yang menampilkan data lokasi secara visual dan interaktif.</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up">
|
|
|
|
<div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">
|
|
|
|
<div class="col-lg-5">
|
|
<div class="about-img">
|
|
<img src="{{ asset('assets/user/img/tentang-lg.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-7">
|
|
<h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane fade show active" id="about-tab1">
|
|
|
|
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
|
|
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
|
|
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Peta Interaktif Lokasi TPS</h4>
|
|
</div>
|
|
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
|
|
yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
|
|
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Informasi TPS Lengkap</h4>
|
|
</div>
|
|
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
|
|
pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
|
|
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Layanan Aduan TPS</h4>
|
|
</div>
|
|
<p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
|
|
mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
|
|
|
|
</div><!-- End Tab 1 Content -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /About Section -->
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="services section">
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row gy-5">
|
|
|
|
@foreach ($kategoriTps as $index => $item)
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="{{ 200 + $index * 100 }}">
|
|
|
|
<div class="service-item">
|
|
<div class="img">
|
|
@if ($item->foto_kategori)
|
|
<img src="{{ asset('storage/' . $item->foto_kategori) }}" class="img-fluid"
|
|
alt="{{ $item->nama_kategori }}">
|
|
@else
|
|
<img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid"
|
|
alt="Default">
|
|
@endif
|
|
</div>
|
|
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
@if ($item->nama_kategori == 'TPS')
|
|
<i class="bi bi-trash"></i>
|
|
@elseif ($item->nama_kategori == 'TPS 3R')
|
|
<i class="bi bi-recycle"></i>
|
|
@elseif ($item->nama_kategori == 'TPA')
|
|
<i class="bi bi-geo-alt"></i>
|
|
@else
|
|
<i class="bi bi-archive"></i>
|
|
@endif
|
|
</div>
|
|
|
|
<a href="#" class="stretched-link">
|
|
<h3>{{ $item->kepanjangan_kategori }}</h3>
|
|
</a>
|
|
|
|
<p>
|
|
{{ explode('.', $item->deskripsi)[0] }}.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /Services Section -->
|
|
|
|
{{-- Leaflet CSS & JS --}}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<style>
|
|
/* =============================
|
|
MAP SECTION
|
|
============================= */
|
|
#call-to-action.call-to-action {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
#call-to-action .container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.map-wrapper {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
|
position: relative;
|
|
}
|
|
|
|
#mapTPS {
|
|
width: 100%;
|
|
height: 450px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
/* =============================
|
|
FIX LEAFLET VS NAVBAR
|
|
============================= */
|
|
header,
|
|
.navbar,
|
|
#header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
background: #fff;
|
|
}
|
|
|
|
/* paksa semua control leaflet turun dari navbar */
|
|
.leaflet-top {
|
|
top: 0px !important;
|
|
/* SESUAIKAN TINGGI NAVBAR */
|
|
z-index: 400 !important;
|
|
}
|
|
|
|
.leaflet-bottom {
|
|
bottom: 0px !important;
|
|
}
|
|
|
|
/* =============================
|
|
Legend
|
|
============================= */
|
|
.legend {
|
|
background: white;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
line-height: 18px;
|
|
color: #333;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.legend i {
|
|
width: 16px;
|
|
height: 16px;
|
|
float: left;
|
|
margin-right: 8px;
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<section id="call-to-action" class="call-to-action section">
|
|
|
|
<!-- SECTION TITLE -->
|
|
<div class="section-title" data-aos="fade-up">
|
|
<h2>Peta Sebaran TPS</h2>
|
|
<p>Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
|
|
</div>
|
|
|
|
<!-- MAP -->
|
|
<div class="container" data-aos="fade-up">
|
|
<div class="map-wrapper">
|
|
<div id="mapTPS"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<script>
|
|
// =============================
|
|
// INIT MAP
|
|
// =============================
|
|
var map = L.map('mapTPS', {
|
|
zoomControl: true
|
|
}).setView([-7.6078, 111.903], 12);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: "© OpenStreetMap contributors",
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
// =============================
|
|
// ICON MARKER PER KATEGORI
|
|
// =============================
|
|
function markerIcon(color) {
|
|
return new L.Icon({
|
|
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41]
|
|
});
|
|
}
|
|
|
|
var iconTPS = markerIcon('green'); // TPS
|
|
var iconTPS3R = markerIcon('blue'); // TPS 3R
|
|
var iconTPA = markerIcon('red'); // TPA
|
|
var iconDefault = markerIcon('black');
|
|
|
|
// =============================
|
|
// DATA TPS DARI DATABASE
|
|
// =============================
|
|
var tpsData = @json($lokasiTps);
|
|
|
|
tpsData.forEach(function(tps) {
|
|
if (tps.latitude && tps.longitude) {
|
|
|
|
let iconKategori = iconDefault;
|
|
|
|
// SESUAIKAN ID KATEGORI
|
|
if (tps.kategori_tps_id == 3) {
|
|
iconKategori = iconTPS;
|
|
} else if (tps.kategori_tps_id == 5) {
|
|
iconKategori = iconTPS3R;
|
|
} else if (tps.kategori_tps_id == 6) {
|
|
iconKategori = iconTPA;
|
|
}
|
|
|
|
L.marker([tps.latitude, tps.longitude], {
|
|
icon: iconKategori
|
|
})
|
|
.addTo(map)
|
|
.bindPopup(`
|
|
<div style="min-width:200px">
|
|
<strong>${tps.nama_tps}</strong><br>
|
|
${tps.alamat_tps ?? '-'}<br>
|
|
<small>Status: ${tps.status_tps ?? '-'}</small>
|
|
</div>
|
|
`);
|
|
}
|
|
});
|
|
|
|
// =============================
|
|
// LEGEND
|
|
// =============================
|
|
var legend = L.control({
|
|
position: "bottomleft"
|
|
});
|
|
|
|
legend.onAdd = function() {
|
|
var div = L.DomUtil.create("div", "legend");
|
|
div.innerHTML = `
|
|
<strong>Kategori TPS</strong><br>
|
|
<i style="background:#198754"></i> TPS<br>
|
|
<i style="background:#0d6efd"></i> TPS 3R<br>
|
|
<i style="background:#dc3545"></i> TPA
|
|
`;
|
|
return div;
|
|
};
|
|
|
|
legend.addTo(map);
|
|
</script>
|
|
|
|
|
|
<!-- Aduan Section -->
|
|
<section id="aduan" class="contact section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Aduan TPS</h2>
|
|
<p>Laporkan permasalahan Tempat Pembuangan Sampah (TPS) di sekitar Anda</p>
|
|
</div>
|
|
<!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade">
|
|
<div class="row gy-4 gx-lg-5 align-items-center">
|
|
|
|
<!-- KIRI: INFO ADUAN -->
|
|
<div class="col-lg-6">
|
|
<div class="info">
|
|
<h3>Temukan Masalah di TPS?</h3>
|
|
<p>
|
|
Jika Anda menemukan TPS yang penuh, kotor, atau bermasalah,
|
|
silakan laporkan agar dapat segera ditindaklanjuti oleh petugas.
|
|
</p>
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="flex-shrink-0 bi bi-exclamation-triangle-fill"></i>
|
|
<div>
|
|
<h4>Cepat & Mudah</h4>
|
|
<p>Aduan dapat dikirim hanya dalam beberapa langkah.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="flex-shrink-0 bi bi-geo-alt-fill"></i>
|
|
<div>
|
|
<h4>Berbasis Lokasi TPS</h4>
|
|
<p>Pilih TPS langsung dari peta.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="flex-shrink-0 bi bi-chat-dots-fill"></i>
|
|
<div>
|
|
<h4>Ditanggapi Admin</h4>
|
|
<p>Aduan akan diproses oleh admin terkait.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KANAN: CTA BUTTON -->
|
|
<div class="text-center col-lg-6">
|
|
<div class="p-4 shadow-sm card">
|
|
<h4 class="mb-3">Ingin Mengajukan Aduan?</h4>
|
|
<p class="mb-4">
|
|
Klik tombol di bawah ini untuk memilih TPS dan mengisi form aduan.
|
|
</p>
|
|
|
|
{{-- <a href="#map" class="mb-2 btn btn-outline-success w-100">
|
|
<i class="bi bi-map-fill me-1"></i> Pilih TPS di Peta
|
|
</a>
|
|
|
|
<p class="my-2 small text-muted">atau</p> --}}
|
|
|
|
<a href="{{ route('user.aduan', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
|
|
<i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
@endsection
|