From 13ee09a322318059b98ffede56b41704da037b59 Mon Sep 17 00:00:00 2001
From: Ilham Wara Nugroho <ilhamwara@gmail.com>
Date: Mon, 2 Feb 2026 13:34:35 +0700
Subject: [PATCH] update

---
 resources/views/index.blade.php | 233 ++++++++++++++++++++++++++------
 1 file changed, 188 insertions(+), 45 deletions(-)

diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 4458cf9..d975f78 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -35,8 +35,8 @@
                     <p class="text-xs font-medium text-emerald-300 uppercase">Predikat Mandiri</p>
                 </div>
                 <div class="text-white">
-                    <p class="text-3xl font-bold">31+</p>
-                    <p class="text-xs font-medium text-emerald-300 uppercase">Provinsi Terhubung</p>
+                    <p class="text-3xl font-bold">5</p>
+                    <p class="text-xs font-medium text-emerald-300 uppercase">Wilayah Terhubung</p>
                 </div>
             </div>
         </div>
@@ -124,7 +124,7 @@
                     <span class="px-3 py-1 rounded-full bg-emerald-500 text-[10px] font-bold uppercase mb-6 inline-block">Regional</span>
                     <h4 class="text-2xl font-bold mb-4">Adiwiyata Kota</h4>
                     <p class="text-sm text-slate-400 leading-relaxed mb-6">Penerapan awal Gerakan PBLHS di tingkat wilayah administratif (Jakarta Pusat, Barat, Timur, Selatan, Utara, &amp; Kepulauan Seribu).</p>
-                    <div class="pt-6 border-t border-white/10 text-xs font-semibold text-emerald-400">Target Skor: ≥ 80%</div>
+                    <div class="pt-6 border-t border-white/10 text-xs font-semibold text-emerald-400">Target Skor: ≥ 70%</div>
                 </div>
 
                 <!-- Stage 2 -->
@@ -156,56 +156,51 @@
             </div>
         </div>
     </section>
-    <section id="peta" class="py-24 bg-slate-50">
+    <section class="py-20 bg-slate-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-                <div>
-                    <h2 class="text-sm font-bold text-emerald-600 uppercase tracking-widest mb-4">DISTRIBUSI DATA</h2>
-                    <h3 class="text-4xl font-extrabold text-slate-900 mb-8 leading-tight">Persebaran Sekolah <br> Adiwiyata di Jakarta</h3>
-                    
-                    <div class="space-y-6">
-                        <div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;">
-                            <div class="flex justify-between items-center mb-2">
-                                <span class="font-bold text-slate-700">Jakarta Timur</span>
-                                <span class="text-emerald-600 font-bold">210 Sekolah</span>
-                            </div>
-                            <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
-                                <div class="bg-emerald-500 h-full" style="width: 85%"></div>
-                            </div>
+            <div class="grid lg:grid-cols-3 gap-12 items-center">
+                <div class="lg:col-span-1">
+                    <h3 class="text-3xl font-extrabold text-slate-900 mb-6">Sebaran Sekolah Adiwiyata</h3>
+                    <p class="text-slate-600 mb-8">Peta interaktif distribusi sekolah peraih penghargaan Adiwiyata di 5 Wilayah Kota Administrasi dan 1 Kabupaten Administrasi DKI Jakarta.</p>
+                    <div class="space-y-4">
+                        <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
+                            <span class="text-sm font-semibold text-slate-700">Jakarta Timur</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">24 Sekolah</span>
                         </div>
-                        <div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;">
-                            <div class="flex justify-between items-center mb-2">
-                                <span class="font-bold text-slate-700">Jakarta Selatan</span>
-                                <span class="text-emerald-600 font-bold">185 Sekolah</span>
-                            </div>
-                            <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
-                                <div class="bg-emerald-500 h-full" style="width: 75%"></div>
-                            </div>
+                        <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
+                            <span class="text-sm font-semibold text-slate-700">Jakarta Selatan</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
                         </div>
-                        <div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;">
-                            <div class="flex justify-between items-center mb-2">
-                                <span class="font-bold text-slate-700">Jakarta Barat</span>
-                                <span class="text-emerald-600 font-bold">142 Sekolah</span>
-                            </div>
-                            <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
-                                <div class="bg-emerald-500 h-full" style="width: 60%"></div>
-                            </div>
+                        <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
+                            <span class="text-sm font-semibold text-slate-700">Jakarta Pusat</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
                         </div>
-                        <div class="bg-white p-6 rounded-2xl shadow-sm stats-card border-l-emerald-300 opacity-60" style="opacity: 0;">
-                            <p class="text-xs text-slate-400 italic">*Data update per Januari 2026</p>
+                        <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
+                            <span class="text-sm font-semibold text-slate-700">Jakarta Barat</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
+                        </div>
+                        <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
+                            <span class="text-sm font-semibold text-slate-700">Jakarta Utara</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
+                        </div>
+                        <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
+                            <span class="text-sm font-semibold text-slate-700">Lainnya</span>
+                            <span class="bg-slate-100 text-slate-600 px-3 py-1 rounded-full text-xs font-bold">31 Sekolah</span>
                         </div>
                     </div>
                 </div>
-                <div class="relative">
-                    <div class="absolute -inset-4 bg-emerald-200/50 rounded-[40px] blur-2xl"></div>
-                    <div class="relative bg-white p-4 rounded-[32px] shadow-2xl overflow-hidden">
-                        <img src="{{asset('img1.png')}}" alt="Visual Achievement" class="w-full rounded-2xl" style="">
-                        <div class="absolute bottom-10 left-10 p-6 glass rounded-2xl max-w-xs border-emerald-100">
-                            <div class="flex items-center gap-2 mb-2">
-                                <span class="material-symbols-outlined text-emerald-600">verified</span>
-                                <span class="text-xs font-bold text-emerald-800">PRESTASI TERBARU</span>
+                <div class="lg:col-span-2">
+                    <div class="relative">
+                        <div class="absolute -inset-4 bg-emerald-200/50 rounded-[40px] blur-2xl"></div>
+                        <div class="relative bg-white p-4 rounded-[32px] shadow-2xl overflow-hidden">
+                            <img src="{{asset('img1.png')}}" alt="Visual Achievement" class="w-full rounded-2xl" style="">
+                            <div class="absolute bottom-10 left-10 p-6 glass rounded-2xl max-w-xs border-emerald-100">
+                                <div class="flex items-center gap-2 mb-2">
+                                    <span class="material-symbols-outlined text-emerald-600">verified</span>
+                                    <span class="text-xs font-bold text-emerald-800">PRESTASI TERBARU</span>
+                                </div>
+                                <p class="text-sm font-semibold text-slate-700">SMAN 42 Jakarta terpilih sebagai sekolah terinspiratif PBLHS 2025.</p>
                             </div>
-                            <p class="text-sm font-semibold text-slate-700">SMAN 42 Jakarta terpilih sebagai sekolah terinspiratif PBLHS 2025.</p>
                         </div>
                     </div>
                 </div>
@@ -279,4 +274,152 @@
             </div>
         </div>
     </section>
+@endsection
+@section('js')
+<script>
+
+        const schoolsData = [
+            { name: "SMAN 62 JAKARTA", city: "Jakarta Timur", year: 2025, level: "Nasional", score: 89.9 },
+            { name: "SMAN 9 JAKARTA", city: "Jakarta Timur", year: 2025, level: "Provinsi", score: 84.5 },
+            { name: "SDS Merpati", city: "Jakarta Pusat", year: 2026, level: "Kota", score: 78.2 },
+            { name: "MAN 4 JAKARTA", city: "Jakarta Selatan", year: 2025, level: "Nasional", score: 91.2 },
+            { name: "SDN Rambutan 03 Pagi", city: "Jakarta Timur", year: 2024, level: "Mandiri", score: 95.0 },
+            { name: "SMPN 23 JAKARTA", city: "Jakarta Utara", year: 2023, level: "Provinsi", score: 82.1 },
+            { name: "SMAN 42 JAKARTA", city: "Jakarta Timur", year: 2025, level: "Nasional", score: 88.4 },
+            { name: "SDN 01 Grogol", city: "Jakarta Barat", year: 2025, level: "Kota", score: 75.6 },
+            { name: "SMAN 1 JAKARTA", city: "Jakarta Pusat", year: 2024, level: "Provinsi", score: 83.9 }
+        ];
+
+        function getLevelColor(level) {
+            switch(level) {
+                case 'Mandiri': return 'bg-indigo-100 text-indigo-700';
+                case 'Nasional': return 'bg-amber-100 text-amber-700';
+                case 'Provinsi': return 'bg-blue-100 text-blue-700';
+                default: return 'bg-emerald-100 text-emerald-700';
+            }
+        }
+
+        function renderSchools(filter = { name: '', city: 'All', level: 'All' }) {
+            const grid = document.getElementById('schoolGrid');
+            grid.innerHTML = '';
+
+            const filtered = schoolsData.filter(s => {
+                const nameMatch = s.name.toLowerCase().includes(filter.name.toLowerCase());
+                const cityMatch = filter.city === 'All' || s.city === filter.city;
+                const levelMatch = filter.level === 'All' || s.level === filter.level;
+                return nameMatch && cityMatch && levelMatch;
+            });
+
+            if (filtered.length === 0) {
+                grid.innerHTML = `<div class="col-span-full py-20 text-center text-slate-400">Tidak ada sekolah yang ditemukan.</div>`;
+                return;
+            }
+
+            filtered.forEach(s => {
+                const card = document.createElement('div');
+                card.className = 'school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl';
+                card.innerHTML = `
+                    <div class="flex justify-between items-start mb-4">
+                        <span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${getLevelColor(s.level)}">
+                            ${s.level}
+                        </span>
+                        <span class="text-slate-300 material-symbols-outlined">more_vert</span>
+                    </div>
+                    <h4 class="font-bold text-lg text-slate-800 mb-1">${s.name}</h4>
+                    <p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
+                        <span class="material-symbols-outlined text-sm">location_on</span> ${s.city}
+                    </p>
+                    <div class="pt-4 border-t border-slate-50">
+                        <div class="flex justify-between text-xs font-bold mb-2">
+                            <span class="text-slate-400">Skor Terakhir</span>
+                            <span class="text-emerald-600">${s.score}%</span>
+                        </div>
+                        <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+                            <div class="bg-emerald-500 h-full adiwiyata-level-bar" style="width: ${s.score}%"></div>
+                        </div>
+                        <div class="mt-4 flex justify-between items-center">
+                            <span class="text-[10px] text-slate-400 font-medium">Update: Des 2025</span>
+                            <button class="text-xs font-bold text-emerald-600 hover:underline">Lihat Detail</button>
+                        </div>
+                    </div>
+                `;
+                grid.appendChild(card);
+            });
+        }
+
+        async function initMap() {
+            const { Map, InfoWindow } = await google.maps.importLibrary("maps");
+            const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
+
+            const map = new Map(document.getElementById("map"), {
+                center: { lat: -6.2146, lng: 106.8451 }, // Jakarta Center
+                zoom: 11,
+                mapId: 'DEMO_MAP_ID',
+                gestureHandling: 'greedy',
+                clickableIcons: false,
+                disableDefaultUI: true
+            });
+
+            // Sample Markers for distribution
+            const locations = [
+                { name: "SMAN 62 Jakarta", pos: { lat: -6.3243, lng: 106.8654 }, level: "Nasional" },
+                { name: "MAN 4 Jakarta", pos: { lat: -6.2862, lng: 106.7725 }, level: "Nasional" },
+                { name: "SDS Merpati", pos: { lat: -6.1823, lng: 106.8322 }, level: "Kota" },
+                { name: "SDN Rambutan 03", pos: { lat: -6.3012, lng: 106.8821 }, level: "Mandiri" }
+            ];
+
+            locations.forEach(loc => {
+                const glyph = document.createElement("span");
+                glyph.className = "material-symbols-outlined";
+                glyph.textContent = 'school';
+                glyph.style.color = 'white';
+
+                const pin = new PinElement({
+                    glyph: glyph,
+                    scale: 1.5,
+                    background: loc.level === 'Mandiri' ? "#4f46e5" : "#10b981",
+                    borderColor: "#ffffff",
+                });
+
+                const marker = new AdvancedMarkerElement({
+                    map,
+                    position: loc.pos,
+                    content: pin.element
+                });
+
+                const header = document.createElement('span');
+                header.className = 'font-bold text-slate-800 p-2';
+                header.textContent = loc.name;
+
+                const content = document.createElement('div');
+                content.className = 'p-3 text-xs leading-relaxed';
+                content.innerHTML = `<p>Status: <b>${loc.level}</b></p><p>Lokasi: DKI Jakarta</p>`;
+
+                const infoWindow = new InfoWindow({ headerContent: header, content: content });
+                marker.addListener('click', () => infoWindow.open(map, marker));
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            renderSchools();
+            initMap();
+
+            const searchInput = document.getElementById('schoolSearch');
+            const cityFilter = document.getElementById('filterCity');
+            const levelFilter = document.getElementById('filterLevel');
+
+            const handleFilterChange = () => {
+                renderSchools({
+                    name: searchInput.value,
+                    city: cityFilter.value,
+                    level: levelFilter.value
+                });
+            };
+
+            searchInput.addEventListener('input', handleFilterChange);
+            cityFilter.addEventListener('change', handleFilterChange);
+            levelFilter.addEventListener('change', handleFilterChange);
+        });
+    
+</script>
 @endsection
\ No newline at end of file