@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>
                    </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 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 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>
            </div>
        </div>
    </section>
@endsection
@section('js')
@endsection