@extends('layouts.appNew')
@section('title',@$title) 
@section('css')
@endsection
@section('content')
<section id="directory" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h3 class="text-3xl font-extrabold text-slate-900 mb-4">Direktori Sekolah Adiwiyata</h3>
                <p class="text-slate-500 max-w-2xl mx-auto">Cari dan filter sekolah-sekolah di Jakarta yang telah berhasil meraih predikat Adiwiyata.</p>
            </div>

            <!-- Filters -->
            <div class="bg-slate-50 p-6 rounded-3xl mb-10 flex flex-col lg:flex-row gap-4 items-center">
                <div class="flex-1 w-full relative">
                    <span class="absolute left-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-slate-400">search</span>
                    <input type="text" id="schoolSearch" placeholder="Cari nama sekolah (contoh: SMAN 62)..." class="w-full pl-12 pr-4 py-3.5 bg-white border border-slate-200 rounded-2xl focus:ring-2 focus:ring-emerald-500 outline-none">
                </div>
                <div class="flex gap-4 w-full lg:w-auto">
                    <select id="filterCity" 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 Kota</option>
                        <option value="Jakarta Timur">Jakarta Timur</option>
                        <option value="Jakarta Pusat">Jakarta Pusat</option>
                        <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>
                        <option value="Provinsi">Provinsi</option>
                        <option value="Nasional">Nasional</option>
                        <option value="Mandiri">Mandiri</option>
                        <option value="Kota">Kota</option>
                    </select>
                </div>
            </div>

            <!-- School Grid -->
            <div id="schoolGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            </div>
            <div class="mt-12 text-center">
                <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>
@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