@extends('layouts.appNew')
@section('content')
<!-- Header Section -->
    <header class="pt-32 pb-12 bg-white border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div>
                    <h2 class="text-3xl font-extrabold text-slate-900 tracking-tight">Publikasi </h2>
                    <p class="text-slate-600 mt-2">Daftar Informasi Publik Dinas Lingkungan Hidup Provinsi DKI Jakarta dapat dilihat dihalaman data ini atau dapat dilihat pada halaman pusat data Pemerintah Provinsi DKI Jakarta (data.jakarta.go.id) baik data secara berkala, sesaat dan serta merta apabila dibutuhkan</p>
                </div>
                <div class="relative w-full md:w-96">
                    <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 w-5 h-5"></i>
                    <input type="text" id="dataset-search" placeholder="Cari nama publikasi..." class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid lg:grid-cols-1 gap-8">
            

            <!-- Dataset Grid -->
            <div class="lg:col-span-3">
                <div class="flex justify-between items-center mb-6">
                    <p class="text-sm text-slate-500 font-medium"><span id="count-display">{{count($publikasi)}}</span> Dataset ditemukan</p>
                    <div class="flex items-center space-x-2">
                        <label class="text-xs font-bold text-slate-400 uppercase">Urutkan:</label>
                        <select class="bg-transparent border-none text-sm font-bold text-blue-600 focus:ring-0 outline-none cursor-pointer">
                            <option>Terbaru</option>
                            <option>Populer</option>
                            <option>A-Z</option>
                        </select>
                    </div>
                </div>

                <div id="dataset-container" class="space-y-4">
                    <!-- Dataset Item Udara -->
                    <div class="grid lg:grid-cols-3 gap-8">
                        @foreach($publikasi as $val)
                            <div class="dataset-item bg-white  rounded-2xl shadow-lg transition-all" data-category="udara">
                                <div class="flex flex-col justify-between">
                                    <div class="p-6">
                                        <h4 class="text-[14px] font-bold text-slate-900 mb-2">{{ substr($val['name'],0,50) }}...</h4>
                                        <div class="flex flex-wrap gap-2 mb-4 mt-4">
                                            <span class="bg-blue-100 text-blue-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">Publikasi</span>
                                            <span class="bg-emerald-100 text-emerald-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">{{ $val['tahun'] }}</span>
                                        </div>
                                        <div class="flex gap-3">
                                            <a href="{{ $val['file'] }}" class="_df_button hover:cursor-pointer flex-1 md:w-full border border-slate-200 text-white bg-emerald-700 py-2 px-4 rounded-xl text-sm font-bold flex items-center justify-center">
                                                Lihat Laporan
                                            </a>
                                            <a download href="{{ $val['file'] }}" class="flex-1 md:w-full border border-slate-200 text-white bg-blue-700 py-2 px-4 rounded-xl text-sm font-bold flex items-center justify-center">
                                                Unduh
                                            </a>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Pagination -->
                <div class="mt-12">
                    
                </div>
            </div>
        </div>
    </main>
@endsection