@extends('layouts.appNew')
@section('content')
<!-- Hero Section -->
    <header class="relative pt-32 pb-20 overflow-hidden">
        <div class="absolute top-0 right-0 -z-10 w-1/2 h-full bg-gradient-to-l from-blue-50 to-transparent rounded-bl-full opacity-50"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <span class="inline-block bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-bold mb-4">
                        Portal Status Lingkungan Hidup Daerah
                    </span>
                    <h2 class="text-5xl font-extrabold text-slate-900 leading-tight mb-6">
                        Wujudkan Jakarta <span class="text-blue-600 underline decoration-blue-200 underline-offset-8">Berkelanjutan</span> Melalui Transparansi Data
                    </h2>
                    <p class="text-lg text-slate-600 mb-8 max-w-lg">
                        Sistem informasi terintegrasi untuk pemantauan kinerja pengelolaan lingkungan hidup Provinsi DKI Jakarta berbasis kerangka kerja DPSIR.
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="{{ url('dataset') }}" class="flex items-center space-x-2 bg-blue-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-blue-700 transition-all transform hover:-translate-y-1 shadow-xl">
                            <span>Cari Data Spesifik</span>
                            <i data-lucide="search" class="w-5 h-5"></i>
                        </a>
                        {{-- <button class="flex items-center space-x-2 bg-white border border-slate-200 text-slate-700 px-8 py-4 rounded-xl font-bold hover:bg-slate-50 transition-all">
                            <i data-lucide="search" class="w-5 h-5"></i>
                            <span>Cari Data Spesifik</span>
                        </button> --}}
                    </div>
                </div>

                <!-- Live Data Panel -->
                <div id="data-panel" class="relative">
                    <div class="bg-white p-6 rounded-3xl shadow-2xl border border-slate-100 relative z-10">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="font-bold text-slate-800">Statistik</h3>
                            <i data-lucide="activity" class="text-blue-600 w-5 h-5"></i>
                        </div>
                        <div class="space-y-6">
                            <!-- Stat Item 1 -->
                            <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100 hidden">
                                <div class="flex items-center space-x-4">
                                    <div class="p-3 bg-white rounded-xl shadow-sm text-blue-500">
                                        <i data-lucide="database"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Jumlah Dataset Indikator</p>
                                        <p class="font-bold text-xl">{{ $count['dataset'] }} <span class="text-xs font-normal text-slate-400">Dataset</span></p>
                                    </div>
                                </div>
                                {{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-yellow-100 text-yellow-700">Sedang</span> --}}
                            </div>
                            <!-- Stat Item 2 -->
                            <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                <div class="flex items-center space-x-4">
                                    <div class="p-3 bg-white rounded-xl shadow-sm text-orange-500">
                                        <i data-lucide="users-2"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Organisasi/Instansi</p>
                                        <p class="font-bold text-xl">{{ $count['instansi'] }}</p>
                                    </div>
                                </div>
                                {{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-green-100 text-green-700">Terkelola</span> --}}
                            </div>
                            <!-- Stat Item 3 -->
                            <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                <div class="flex items-center space-x-4">
                                    <div class="p-3 bg-white rounded-xl shadow-sm text-cyan-500">
                                        <i data-lucide="grid"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Dataset Utama</p>
                                        <p class="font-bold text-xl">{{ $count['resource'] }}</p>
                                    </div>
                                </div>
                                {{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-blue-100 text-blue-700">Cukup</span> --}}
                            </div>
                            <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                <div class="flex items-center space-x-4">
                                    <div class="p-3 bg-white rounded-xl shadow-sm text-cyan-500">
                                        <i data-lucide="grid"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Dataset Tambahan</p>
                                        <p class="font-bold text-xl">{{ $count['dataset_tambahan'] }}</p>
                                    </div>
                                </div>
                                {{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-blue-100 text-blue-700">Cukup</span> --}}
                            </div>
                        </div>
                    </div>
                    <!-- Decorative Blobs -->
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-green-200 rounded-full blur-3xl opacity-40 -z-10"></div>
                    <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-200 rounded-full blur-3xl opacity-40 -z-10"></div>
                </div>
            </div>
        </div>
    </header>

    <!-- DPSIR Framework -->
    <section class="py-20 bg-blue-900 text-white overflow-hidden relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h3 class="text-center text-3xl font-bold mb-4">Hasil Analisis DPSIR untuk 8 Matra Lingkungan</h3>
            <p class="text-center text-blue-200 max-w-2xl mx-auto mb-16">
                Analisis hubungan kausalitas antara aktivitas manusia dan perubahan lingkungan untuk merumuskan respon kebijakan yang tepat.
            </p>
            <div class="flex gap-4">
                <div class="w-1/2">
                    <div class="flex flex-col gap-2">
                        <div data-d="Eksploitasi sumber daya alam" data-p="Fragmentasi habitat" data-s="Penurunan populasi tumbuhan endemik" data-i="Gangguan penyerbukan pertanian" data-r="Penetapan area ekploitasi terbatas" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>1. Keanekaragaman Hayati</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                        <div data-d="Pengembangan industri sebagai mesin pertumbuhan ekonomi" data-p="Pembuangan air limbah (BOD, COD, TSS)" data-s="Penurunan kualitas air permukaan" data-i="Ketersediaan air bersih semakin berkurang" data-r="Instalasi pengolahan air limbah" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>2. Kualitas Air</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                        <div data-d="Urbanisasi pesisir" data-p="Pembuangan Limbah domestik ke laut" data-s="Degradasi terumbu karang" data-i="Penurunan hasil tangkapan ikan" data-r="Pengelolaan wilayah pesisir terpadu" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>3. Laut, Pesisir dan Pantai</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                        <div data-d="Peningkatan aktivitas transportasi" data-p="Emisi gas buang (CO2, NOx, SO2, PM2.5)" data-s="Konsentrasi polutan PM2.5" data-i="Gangguan kesehatan (ISPA)" data-r="Transportasi ramah lingkungan, penghijauan kota" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>4. Kualitas Udara</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                        <div data-d="Perluasan pemukiman" data-p="Alih fungsi lahan" data-s="Penurunan tutupan hutan" data-i="Erosi" data-r="Pengaturan Koefisien Dasar Bangunan < 50%" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>5. Lahan dan Hutan</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                        <div data-d="Peningkatan konsumsi" data-p="Produksi sampah berlebih" data-s="Timbunan sampah di TPA" data-i="Emisi metana" data-r="Ekonomi Sirkular" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>6. Pengelolaan Sampah dan Limbah</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                        <div data-d="Pertumbuhan ekonomi berbasis fosil" data-p="Emisi dari sektor energi & transportasi" data-s="Perubahan pola curah hujan (musim tak menentu)" data-i="Bencana hidrometeorologi meningkat (banjir, kekeringan)" data-r="Insentif ekonomi hijau" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>7. Perubahan Iklim</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                        <div data-d="Pembangunan tidak berkelanjutan" data-p="Pemukiman di daerah rawan" data-s="Kerentanan wilayah meningkat terhadap bencana" data-i="Kerugian ekonomi" data-r="Tata ruang berbasis risiko" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>8. Risiko Bencana</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
                    </div>
                </div>
                <div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                            <div class="text-4xl font-black mb-4 text-blue-400">D</div>
                            <h4 class="font-bold mb-2 text-lg">Driving Force</h4>
                            <p class="text-sm opacity-70 d">Eksploitasi sumber daya alam.</p>
                        </div>
                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                            <div class="text-4xl font-black mb-4 text-blue-400">P</div>
                            <h4 class="font-bold mb-2 text-lg">Pressure</h4>
                            <p class="text-sm opacity-70 p">Fragmentasi habitat.</p>
                        </div>
                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                            <div class="text-4xl font-black mb-4 text-blue-400">S</div>
                            <h4 class="font-bold mb-2 text-lg">State</h4>
                            <p class="text-sm opacity-70 s">Penurunan populasi tumbuhan endemik.</p>
                        </div>
                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                            <div class="text-4xl font-black mb-4 text-blue-400">I</div>
                            <h4 class="font-bold mb-2 text-lg">Impact</h4>
                            <p class="text-sm opacity-70 i">Gangguan penyerbukan pertanian.</p>
                        </div>
                        <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                            <div class="text-4xl font-black mb-4 text-blue-400">R</div>
                            <h4 class="font-bold mb-2 text-lg">Response</h4>
                            <p class="text-sm opacity-70 r">Penetapan area ekploitasi terbatas.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- Publication Section -->
    <section id="publikasi" class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
                <div class="max-w-xl">
                    <h3 class="text-3xl font-bold text-slate-900 mb-4 tracking-tight">Dataset Utama Terbaru</h3>
                    <p class="text-slate-600">Akses seluruh arsip Dataset Kinerja Pengelolaan Lingkungan Hidup Daerah dari tahun ke tahun</p>
                </div>
                {{-- <div class="flex space-x-2">
                    <button class="year-filter px-4 py-2 text-sm font-semibold bg-blue-600 text-white rounded-lg" data-year="all">Semua Tahun</button>
                    <button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2024">2024</button>
                    <button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2023">2023</button>
                </div> --}}
            </div>

            <div class="grid md:grid-cols-3 gap-6">
                <!-- Report Card 1 -->
                @foreach($dataset as $dataSet)
                <div class="report-card bg-white rounded-2xl p-6 border border-slate-200 hover:border-blue-400 hover:shadow-xl transition-all group" data-year="2024">
                    <div class="flex justify-between items-start mb-6">
                        <div class="bg-blue-50 text-blue-700 px-3 py-1 rounded-md text-sm font-bold">{{ $dataSet->tahun_data }}</div>
                        <i data-lucide="file-text" class="text-slate-300 group-hover:text-blue-500 transition-colors"></i>
                    </div>
                    <h4 class="font-bold text-slate-800 mb-2 leading-tight h-12">{{ $dataSet->name }}</h4>
                    <div class="flex items-center text-xs text-slate-400 mb-6 space-x-4">
                        <span class="flex items-center"><i data-lucide="info" class="w-3 h-3 mr-1"></i> {{ $dataSet->instansi->name }}</span>
                    </div>
                    <a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="w-full flex items-center justify-center space-x-2 bg-slate-50 text-slate-700 py-3 rounded-xl font-bold group-hover:bg-blue-600 group-hover:text-white transition-all">
                        <i data-lucide="eye" class="w-5 h-5"></i>
                        <span>Lihat Detail</span>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection
@section('js')
<script>
    $('.dpsir').on('click',function(){
        var d = $(this).attr('data-d');
        var p = $(this).attr('data-p');
        var s = $(this).attr('data-s');
        var i = $(this).attr('data-i');
        var r = $(this).attr('data-r');

        $('.d').html(d);
        $('.p').html(p);
        $('.s').html(s);
        $('.i').html(i);
        $('.r').html(r); 
    });
</script>
@endsection