@{
    Layout = "_Layout";

    ViewData["Title"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
    ViewData["Keywords"] = "Laporan Pemantauan Kualitas Air, Regulasi Lingkungan, Kualitas Air, Data Lingkungan, Jakarta";
    ViewData["OgTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
    ViewData["TwitterTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Laporan Pemantauan Kualitas Air";
    ViewData["TitleBeforeHighlight"] = "Laporan";
    ViewData["TitleHighlight"] = "Pemantauan Kualitas Air";
}

<!-- 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">Peraturan</h1>
            <p class="text-gray-600 max-w-4xl mx-auto">Regulasi Pemantauan Kualitas Air</p>
        </div>
    </div>
</div>

<div class="container max-w-6xl 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>