@{
    Layout = "_Layout";

    ViewData["Title"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "DIKPLHD, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah";
    ViewData["TitleBeforeHighlight"] = "Dokumen Informasi";
    ViewData["TitleHighlight"] = "Kinerja Pengelolaan Lingkungan Hidup Daerah";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

<div class="flex justify-center">
    <div class="w-full max-w-6xl py-12">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold mb-4">DIKPLHD</h1>
            <p class="text-gray-600 max-w-4xl mx-auto">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>
</div>

<div class="container max-w-7xl mx-auto pb-8">
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- Main Content -->
        <div class="lg:w-2/3">
            <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg border border-gray-100 p-8 backdrop-blur-sm">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                        <i class="fas fa-file-archive text-green-600 mr-3"></i>
                        Dokumen Tersedia
                    </h2>
                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">4 Dokumen</span>
                </div>

                <!-- Document Items with Enhanced Design -->
                <div class="space-y-6">
                    <!-- Document Item 1 -->
                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
                        <div class="flex flex-col md:flex-row gap-6">
                            <!-- Image Preview Column -->
                            <div class="md:w-1/4">
                                <div class="relative overflow-hidden rounded-lg">
                                    
                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                                </div>
                            </div>

                            <!-- Document Details Column -->
                            <div class="md:w-3/4">
                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                                <p class="text-gray-600 mb-4 leading-relaxed">Ringkasan eksekutif dokumen informasi kinerja pengelolaan lingkungan hidup daerah</p>
                                <div class="flex flex-wrap justify-between items-center gap-4">
                                    <div class="flex items-center gap-4">
                                        <span class="flex items-center text-orange-500 font-medium">
                                            <i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
                                        </span>
                                        <span class="flex items-center text-gray-500">
                                            <i class="fas fa-download mr-2"></i>673 Download
                                        </span>
                                    </div>
                                    <div class="flex gap-3">
                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
                                            <i class="fas fa-eye mr-2"></i>View
                                        </a>
                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                            <i class="fas fa-download mr-2"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Document Item 2 -->
                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
                        <div class="flex flex-col md:flex-row gap-6">
                            <div class="md:w-1/4">
                                <div class="relative overflow-hidden rounded-lg">
                                    
                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku II DIKPLHD Tahun 2019</h3>
                                <p class="text-gray-600 mb-4 leading-relaxed">Dokumen lengkap informasi kinerja pengelolaan lingkungan hidup daerah</p>
                                <div class="flex flex-wrap justify-between items-center gap-4">
                                    <div class="flex items-center gap-4">
                                        <span class="flex items-center text-orange-500 font-medium">
                                            <i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
                                        </span>
                                        <span class="flex items-center text-gray-500">
                                            <i class="fas fa-download mr-2"></i>673 Download
                                        </span>
                                    </div>
                                    <div class="flex gap-3">
                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
                                            <i class="fas fa-eye mr-2"></i>View
                                        </a>
                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                            <i class="fas fa-download mr-2"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Document Item 3 -->
                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
                        <div class="flex flex-col md:flex-row gap-6">
                            <div class="md:w-1/4">
                                <div class="relative overflow-hidden rounded-lg">
                                    
                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Laporan Kualitas Udara DKI Jakarta 2023</h3>
                                <p class="text-gray-600 mb-4 leading-relaxed">Laporan komprehensif mengenai kondisi kualitas udara di wilayah DKI Jakarta</p>
                                <div class="flex flex-wrap justify-between items-center gap-4">
                                    <div class="flex items-center gap-4">
                                        <span class="flex items-center text-orange-500 font-medium">
                                            <i class="far fa-calendar-alt mr-2"></i>10 Jan 2025
                                        </span>
                                        <span class="flex items-center text-gray-500">
                                            <i class="fas fa-download mr-2"></i>412 Download
                                        </span>
                                    </div>
                                    <div class="flex gap-3">
                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
                                            <i class="fas fa-eye mr-2"></i>View
                                        </a>
                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                            <i class="fas fa-download mr-2"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Document Item 4 -->
                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
                        <div class="flex flex-col md:flex-row gap-6">
                            <div class="md:w-1/4">
                                <div class="relative overflow-hidden rounded-lg">
                                    <div class="absolute top-3 right-3 z-10 bg-green-500 p-2 rounded-full shadow-md">
                                        <i class="fas fa-file-excel text-white text-sm"></i>
                                    </div>
                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Data Pengelolaan Lingkungan Hidup 2024</h3>
                                <p class="text-gray-600 mb-4 leading-relaxed">Data statistik dan analisis komprehensif mengenai pengelolaan lingkungan hidup</p>
                                <div class="flex flex-wrap justify-between items-center gap-4">
                                    <div class="flex items-center gap-4">
                                        <span class="flex items-center text-orange-500 font-medium">
                                            <i class="far fa-calendar-alt mr-2"></i>5 Jan 2025
                                        </span>
                                        <span class="flex items-center text-gray-500">
                                            <i class="fas fa-download mr-2"></i>289 Download
                                        </span>
                                    </div>
                                    <div class="flex gap-3">
                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
                                            <i class="fas fa-eye mr-2"></i>View
                                        </a>
                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                            <i class="fas fa-download mr-2"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Enhanced Sidebar -->
        <div class="lg:w-1/3 space-y-6">
            <!-- Search Box -->
            <div class="bg-gradient-to-br from-white to-green-50 rounded-xl shadow-lg border border-green-100 p-6">
                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                    <i class="fas fa-search text-green-600 mr-3"></i>
                    Cari Dokumen
                </h3>
                <div class="relative">
                    <input type="text" class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" placeholder="Masukkan kata kunci...">
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-4 py-2 rounded-md hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md">
                        Cari
                    </button>
                </div>
            </div>

            <!-- Filter Options -->
            <div class="bg-gradient-to-br from-white to-blue-50 rounded-xl shadow-lg border border-blue-100 p-6">
                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                    <i class="fas fa-filter text-blue-600 mr-3"></i>
                    Filter Dokumen
                </h3>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Dokumen</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option>Semua Jenis</option>
                            <option>PDF</option>
                            <option>Excel</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option>Semua Tahun</option>
                            <option>2024</option>
                            <option>2023</option>
                            <option>2019</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Related Documents -->
            <div class="bg-gradient-to-br from-white to-purple-50 rounded-xl shadow-lg border border-purple-100 p-6">
                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                    <i class="fas fa-link text-purple-600 mr-3"></i>
                    Dokumen Terkait
                </h3>
                <div class="space-y-4">
                    <div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
                        <div class="w-16 h-16 flex-shrink-0">
                            <div class="w-full h-full bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-leaf text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Tata Lingkungan dan Kebersihan</h4>
                            <p class="text-gray-500 text-sm mb-2 flex items-center">
                                <i class="far fa-calendar-alt mr-1"></i>12 Jan 2025
                            </p>
                            <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
                                Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>

                    <div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
                        <div class="w-16 h-16 flex-shrink-0">
                            <div class="w-full h-full bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
                                <i class="fas fa-shield-alt text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Pengendalian Dampak Lingkungan</h4>
                            <p class="text-gray-500 text-sm mb-2 flex items-center">
                                <i class="far fa-calendar-alt mr-1"></i>8 Jan 2025
                            </p>
                            <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
                                Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>