update

resources/views/auth/login.blade.php

@@ -16,20 +16,17 @@
                     Mewujudkan Sekolah <span class="text-emerald-600">Ramah Lingkungan</span> di Jakarta.
                 </h2>
                 <p class="text-slate-600 text-lg mb-8 leading-relaxed">
-                    Akses portal digital resmi penilaian Adiwiyata. Bergabunglah dengan 979+ sekolah yang berkomitmen menjaga kelestarian lingkungan hidup dan edukasi iklim.
+                    Akses portal digital resmi penilaian Adiwiyata. Bergabunglah dengan 1385+ sekolah yang berkomitmen menjaga kelestarian lingkungan hidup dan edukasi iklim.
-                    <a href="https://en.antaranews.com/news/396088/minister-asks-sekolah-rakyat-schools-to-adopt-climate-aware-education" target="_blank" class="text-emerald-600 inline-block align-middle ml-1">
-                        <span class="material-symbols-outlined text-sm">link</span>
-                    </a>
                 </p>
 
                 <!-- Achievement Stats -->
                 <div class="grid grid-cols-3 gap-4 mb-10">
                     <div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
-                        <p class="text-2xl font-bold text-emerald-600">46</p>
+                        <p class="text-2xl font-bold text-emerald-600">481</p>
                         <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Award 2025</p>
                     </div>
                     <div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
-                        <p class="text-2xl font-bold text-emerald-600">28K+</p>
+                        <p class="text-2xl font-bold text-emerald-600">89</p>
                         <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Nasional</p>
                     </div>
                     <div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">

resources/views/index.blade.php

@@ -27,15 +27,15 @@
                     <p class="text-xs font-medium text-emerald-300 uppercase">Sekolah Terdaftar</p>
                 </div>
                 <div class="text-white border-r border-white/10">
-                    <p class="text-3xl font-bold">789</p>
+                    <p class="text-3xl font-bold">1385</p>
                     <p class="text-xs font-medium text-emerald-300 uppercase">Sekolah Adiwiyata</p>
                 </div>
                 <div class="text-white border-r border-white/10">
-                    <p class="text-3xl font-bold">258</p>
+                    <p class="text-3xl font-bold">89</p>
                     <p class="text-xs font-medium text-emerald-300 uppercase">Predikat Mandiri</p>
                 </div>
                 <div class="text-white">
-                    <p class="text-3xl font-bold">5</p>
+                    <p class="text-3xl font-bold">6</p>
                     <p class="text-xs font-medium text-emerald-300 uppercase">Wilayah Terhubung</p>
                 </div>
             </div>
@@ -165,27 +165,27 @@
                     <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>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">328 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 Selatan</span>
-                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">224 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 Pusat</span>
-                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">324 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 Barat</span>
-                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">327 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>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">172 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="text-sm font-semibold text-slate-700">Kepulauan Seribu</span>
-                            <span class="bg-slate-100 text-slate-600 px-3 py-1 rounded-full text-xs font-bold">31 Sekolah</span>
+                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">10 Sekolah</span>
                         </div>
                     </div>
                 </div>

resources/views/sekolah.blade.php

@@ -24,6 +24,7 @@
                         <option value="Jakarta Selatan">Jakarta Selatan</option>
                         <option value="Jakarta Utara">Jakarta Utara</option>
                         <option value="Jakarta Barat">Jakarta Barat</option>
+                        <option value="Kepulauan Seribu">Kepulauan Seribu</option>
                     </select>
                     <select id="filterLevel" class="flex-1 lg:w-48 px-4 py-3.5 bg-white border border-slate-200 rounded-2xl outline-none">
                         <option value="All">Semua Jenjang</option>
@@ -36,112 +37,131 @@
             </div>
 
             <!-- School Grid -->
-            <div id="schoolGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
+            <div id="schoolGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                    <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 bg-amber-100 text-amber-700">
-                            Nasional
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 62 JAKARTA</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> Jakarta Timur
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-blue-100 text-blue-700">
-                            Provinsi
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 9 JAKARTA</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> Jakarta Timur
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-emerald-100 text-emerald-700">
-                            Kota
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SDS Merpati</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> Jakarta Pusat
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-amber-100 text-amber-700">
-                            Nasional
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">MAN 4 JAKARTA</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> Jakarta Selatan
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-indigo-100 text-indigo-700">
-                            Mandiri
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SDN Rambutan 03 Pagi</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> Jakarta Timur
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-blue-100 text-blue-700">
-                            Provinsi
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SMPN 23 JAKARTA</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> Jakarta Utara
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-amber-100 text-amber-700">
-                            Nasional
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 42 JAKARTA</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> Jakarta Timur
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-emerald-100 text-emerald-700">
-                            Kota
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SDN 01 Grogol</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> Jakarta Barat
-                    </p>
-                </div>
-                <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
-                    <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 bg-blue-100 text-blue-700">
-                            Provinsi
-                        </span>
-                    </div>
-                    <h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 1 JAKARTA</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> Jakarta Pusat
-                    </p>
-                </div>
             </div>
-
             <div class="mt-12 text-center">
-                <button class="px-8 py-3 bg-slate-100 text-slate-600 rounded-full font-bold hover:bg-slate-200 transition-colors">Tampilkan Lebih Banyak</button>
+                <button id="btnLoadMore" class="px-8 py-3 bg-slate-100 text-slate-600 rounded-full font-bold hover:bg-slate-200 transition-colors">Tampilkan Lebih Banyak</button>
             </div>
         </div>
     </section>
-@endsection
 @section('js')
+<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
+<script>
+$(document).ready(function () {
+
+    let allData = [];
+    let filteredData = [];
+    let visibleCount = 6;
+    let currentIndex = 0;
+    const perPage = 6;
+
+    // Load JSON
+    $.getJSON('{{asset("dataadiwiyata.json")}}', function (data) {
+        allData = data;
+        filteredData = allData;
+        renderData();
+    });
+
+    function renderData(reset = true) {
+
+        if (reset) {
+            $('#schoolGrid').html('');
+            currentIndex = 0;
+        }
+
+        let nextData = filteredData.slice(
+            currentIndex,
+            currentIndex + perPage
+        );
+
+        $.each(nextData, function (i, item) {
+            $('#schoolGrid').append(generateCard(item));
+        });
+
+        currentIndex += perPage;
+
+        // hide tombol jika data habis
+        if (currentIndex >= filteredData.length) {
+            $('#btnLoadMore').hide();
+        } else {
+            $('#btnLoadMore').show();
+        }
+    }
+
+
+    function generateCard(item) {
+        console.log(item);
+        let badgeColor = {
+            Nasional: 'bg-amber-100 text-amber-700',
+            Provinsi: 'bg-blue-100 text-blue-700',
+            Kota: 'bg-emerald-100 text-emerald-700',
+            Mandiri: 'bg-indigo-100 text-indigo-700'
+        };
+
+        let percent = item.skor ?? 0;
+
+        return `
+        <div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
+            <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 ${badgeColor[item.penghargaan] || 'bg-slate-100 text-slate-600'}">
+                    ${item.penghargaan}
+                </span>
+                <span class="text-slate-300 material-symbols-outlined">more_vert</span>
+            </div>
+
+            <h4 class="font-bold text-lg text-slate-800 mb-1">${item.sekolah}</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>
+                ${item.wilayah} - ${item.tahun}
+            </p>
+
+            <div class="pt-4 border-t border-slate-50 hidden">
+                <div class="flex justify-between text-xs font-bold mb-2">
+                    <span class="text-slate-400">Skor Terakhir</span>
+                    <span class="text-emerald-600">${percent}%</span>
+                </div>
+                <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+                    <div class="bg-emerald-500 h-full" style="width:${percent}%"></div>
+                </div>
+
+                <div class="mt-4 flex justify-between items-center">
+                    <span class="text-[10px] text-slate-400 font-medium">
+                        Update: ${item.update ?? '-'}
+                    </span>
+                    <button class="text-xs font-bold text-emerald-600 hover:underline">
+                        Lihat Detail
+                    </button>
+                </div>
+            </div>
+        </div>`;
+    }
+
+    function applyFilter() {
+        let keyword = $('#schoolSearch').val().toLowerCase();
+        let city = $('#filterCity').val();
+        let level = $('#filterLevel').val();
+
+        filteredData = allData.filter(item => {
+            let matchName = item.sekolah.toLowerCase().includes(keyword);
+            let matchCity = city === 'All' || item.wilayah === city;
+            let matchLevel = level === 'All' || item.penghargaan === level;
+
+            return matchName && matchCity && matchLevel;
+        });
+
+        renderData(true);
+    }
+
+    // Event listeners
+    $('#schoolSearch').on('keyup', applyFilter);
+    $('#filterCity, #filterLevel').on('change', applyFilter);
+
+    $('#btnLoadMore').on('click', function () {
+        visibleCount += perPage;
+        renderData(false);
+    });
+
+});
+</script>
+
 @endsection