@{
    Layout = "_Layout";

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

    // Breadcumb
    ViewData["BreadcrumbText"] = "Peraturan Terkait Lingkungan Hidup";
    ViewData["TitleBeforeHighlight"] = "Peraturan";
    ViewData["TitleHighlight"] = "Terkait Lingkungan Hidup";
}

<!-- 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 leading-relaxed">
                Kumpulan peraturan dan regulasi lengkap yang berkaitan dengan pengelolaan lingkungan hidup di wilayah DKI Jakarta. 
                Dokumen-dokumen ini mencakup berbagai kebijakan, pedoman teknis, dan standar operasional yang menjadi acuan dalam 
                pelaksanaan program-program perlindungan dan pengelolaan lingkungan hidup untuk mewujudkan Jakarta yang lebih hijau, 
                bersih, dan berkelanjutan.
            </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-sm 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
                </h2>
            <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <label class="text-sm font-medium text-gray-700">Kategori:</label>
                        <select id="kategoriSelect" class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
                            <option>Pengelolaan Limbah B3</option>
                            <option>Pengendalian Pencemaran Air</option>
                            <option>Pengendalian Pencemaran Udara</option>
                            <option>Pengelolaan Limbah Padat</option>
                            <option title="Peraturan dan Pedoman Terkait Pengendalian Dampak Perubahan Iklim">Peraturan dan Pedoman Terkait...</option>
                            <option title="Peraturan Gubernur Jakarta Sadar Sampah dan Standar Teknis Prasarana dan Sarana Penanganan Sampah">Peraturan Gubernur Jakarta Sadar...</option>
                        </select>
                    </div>
                      <div class="flex items-center gap-2">
                        <label class="text-sm font-medium text-gray-700">Tahun:</label>
                        <select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
                            <option>Semua Tahun</option>
                            <option>2024</option>
                            <option>2023</option>
                            <option>2019</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="flex flex-col">
                <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800 border border-orange-200 mb-4 gap-2">
                    <i class="w-4 h-4 text-green-600" data-lucide="book-open-text"></i>
                    <h2 id="kategoriLabel" class="text-sm font-semibold">Pengelolaan Limbah B3</h2>
                </div>
                <div id="dokumenGrid" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <!-- Daftar dokumen default -->
                    <div class="bg-white rounded-xl shadow-sm">
                        <div class="relative overflow-hidden rounded-lg">
                            <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                            <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm">
                        <div class="relative overflow-hidden rounded-lg">
                            <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                            <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm">
                        <div class="relative overflow-hidden rounded-lg">
                            <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                            <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm">
                        <div class="relative overflow-hidden rounded-lg">
                            <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                            <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                        </div>
                    </div>
                    <!-- ...tambahkan dokumen lain jika perlu... -->
                </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>

        </div>
    </div>
</div>

<register-block dynamic-section="css" key="cssDIKPLHD">
    <link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
    <link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>

<register-block dynamic-section="scripts" key="jsDIKPLHD">
    <script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
    <script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        const dokumenHTML = {
            "Pengelolaan Limbah B3": `
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
            `,
            "Pengendalian Pencemaran Air": `
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Panduan Pengendalian Pencemaran Air 2023</h3>
                    </div>
                </div>
            `,
            "Pengendalian Pencemaran Udara": `
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Pedoman Pengendalian Udara Bersih 2024</h3>
                    </div>
                </div>
            `,
            "Pengelolaan Limbah Padat": `
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Standar Teknis Pengelolaan Limbah Padat</h3>
                    </div>
                </div>
            `,
            "Peraturan dan Pedoman Terkait...": `
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Pengendalian Dampak Perubahan Iklim</h3>
                    </div>
                </div>
            `,
            "Peraturan Gubernur Jakarta Sadar...": `
                <div class="bg-white rounded-xl shadow-sm">
                    <div class="relative overflow-hidden rounded-lg">
                        <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                        <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Gubernur Jakarta Sadar Sampah</h3>
                    </div>
                </div>
            `
        };

        $(function() {
            function getSelectedKategori() {
                let selected = $('#kategoriSelect option:selected').text();
                if (selected.startsWith("Peraturan dan Pedoman")) return "Peraturan dan Pedoman Terkait...";
                if (selected.startsWith("Peraturan Gubernur Jakarta Sadar")) return "Peraturan Gubernur Jakarta Sadar...";
                return selected;
            }

            $('#kategoriSelect').on('change', function() {
                const kategori = getSelectedKategori();
                $('#kategoriLabel').text($(this).find('option:selected').text());
                $('#dokumenGrid').html(dokumenHTML[kategori] || '');
            });
        });
    </script>
</register-block>