@{
    Layout = "_Layout";

    ViewData["Title"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Berita, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Berita";
    ViewData["TitleBeforeHighlight"] = "Kegiatan dan Informasi Terkini";
    ViewData["TitleHighlight"] = "dari Dinas Lingkungan Hidup DKI Jakarta";
}

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

<section class="py-12 bg-gray-50">
    <div class="container mx-auto max-w-6xl px-4">
        
        <!-- Filter Tabs -->
        <div class="mb-8">
            <div class="flex flex-wrap items-center justify-center gap-2 mb-6">
                <button class="filter-tab active px-6 py-2 rounded-sm font-medium transition-all" data-category="">
                    Semua
                </button>
                <button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="lingkungan">Lingkungan</button>
                <button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="kebersihan">Kebersihan</button>
                <button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="kegiatan">Kegiatan</button>
                <button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="pengumuman">Pengumuman</button>
            </div>
            <div class="flex flex-col md:flex-row gap-4 items-center justify-center mb-6">
                <div class="relative w-full">
                    <input
                        type="text"
                        id="search-input"
                        placeholder="Cari berita..."
                        class="w-full px-4 py-3 pr-11 pl-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                        autocomplete="off"
                    >
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <i class="h-5 w-5 text-gray-400" data-lucide="search"></i>
                    </div>
                </div>

                <div class="">
                    <select id="year-filter" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        <option value="">Semua Tahun</option>
                        <option value="2024">2024</option>
                        <option value="2023">2023</option>
                        <option value="2022">2022</option>
                        <option value="2021">2021</option>
                    </select>
                </div>


            </div>
        </div>

        <!-- News  -->
        <div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="news-grid">
                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" 
                         data-category="lingkungan" data-year="2024" data-title="Program Penghijauan Kota Jakarta Tahun 2024" data-date="2024-01-15">
                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Lingkungan</span>
                            <span class="text-xs text-gray-500">15 Januari 2024</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Program Penghijauan Kota Jakarta Tahun 2024</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Program penghijauan ini bertujuan untuk meningkatkan kualitas udara di Jakarta melalui penanaman pohon di berbagai titik strategis...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" 
                         data-category="kebersihan" data-year="2024" data-title="Operasi Kebersihan Lingkungan di Seluruh DKI Jakarta" data-date="2024-01-12">
                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Kebersihan</span>
                            <span class="text-xs text-gray-500">12 Januari 2024</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Operasi Kebersihan Lingkungan di Seluruh DKI Jakarta</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Dinas Lingkungan Hidup DKI Jakarta menggelar operasi kebersihan massal untuk menjaga kebersihan kota...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" 
                         data-category="kegiatan" data-year="2024" data-title="Workshop Pengelolaan Sampah Ramah Lingkungan" data-date="2024-01-10">
                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">Kegiatan</span>
                            <span class="text-xs text-gray-500">10 Januari 2024</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Workshop Pengelolaan Sampah Ramah Lingkungan</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Workshop ini mengajarkan masyarakat cara mengelola sampah dengan baik dan ramah lingkungan...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" 
                         data-category="pengumuman" data-year="2024" data-title="Pengumuman Jadwal Pengangkutan Sampah Hari Raya" data-date="2024-01-08">
                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Pengumuman</span>
                            <span class="text-xs text-gray-500">8 Januari 2024</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Pengumuman Jadwal Pengangkutan Sampah Hari Raya</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Informasi penting mengenai jadwal pengangkutan sampah selama periode hari raya...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" 
                         data-category="lingkungan" data-year="2023" data-title="Monitoring Kualitas Air Jakarta 2023" data-date="2023-12-20">
                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Lingkungan</span>
                            <span class="text-xs text-gray-500">20 Desember 2023</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Monitoring Kualitas Air Jakarta 2023</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Hasil monitoring kualitas air di berbagai wilayah Jakarta menunjukkan peningkatan yang signifikan...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" 
                         data-category="kegiatan" data-year="2023" data-title="Kampanye Reduce Reuse Recycle" data-date="2023-12-15">
                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">Kegiatan</span>
                            <span class="text-xs text-gray-500">15 Desember 2023</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Kampanye Reduce Reuse Recycle</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Kampanye 3R untuk mengajak masyarakat Jakarta berpartisipasi dalam menjaga lingkungan...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>
            </div>

            <!-- Pagination -->
            <div class="flex justify-center items-center mt-10 space-x-2" id="pagination">
                <button class="pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50" data-page="prev" disabled>
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </button>
                
                <button class="pagination-btn px-4 py-2 bg-green-600 text-white rounded-lg" data-page="1">1</button>
                <button class="pagination-btn px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50" data-page="2">2</button>
                <button class="pagination-btn px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50" data-page="3">3</button>
                
                <button class="pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50" data-page="next">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</section>

<register-block dynamic-section="css" key="cssPageBerita">
<style>
.filter-tab {
    background-color: #e5e7eb; 
    color: #374151;         
    border-radius: 1rem;  
    transition: all 0.2s;
}
.filter-tab:hover {
    background-color: #d1d5db;
}

.filter-tab.active {
    background-color: #16a34a;
    color: #fff;
}
.filter-tab.active:hover {
    background-color: #15803d;
}

.active-badge {
    display: none;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
</register-block>

<register-block dynamic-section="scripts" key="jsPageBerita">
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterTabs = document.querySelectorAll('.filter-tab');
    const searchInput = document.getElementById('search-input');
    const yearFilter = document.getElementById('year-filter');
    const newsCards = document.querySelectorAll('.news-card');
    const paginationBtns = document.querySelectorAll('.pagination-btn');
    
    let currentCategory = '';
    let currentSearchTerm = '';
    let currentYear = '';
    let currentPage = 1;
    const itemsPerPage = 6;

    // Filter functionality
    function filterNews() {
        let visibleCards = [];
        
        newsCards.forEach(card => {
            const cardCategory = card.dataset.category;
            const cardYear = card.dataset.year;
            const cardTitle = card.dataset.title.toLowerCase();
            
            const matchCategory = !currentCategory || cardCategory === currentCategory;
            const matchYear = !currentYear || cardYear === currentYear;
            const matchSearch = !currentSearchTerm || cardTitle.includes(currentSearchTerm.toLowerCase());
            
            if (matchCategory && matchYear && matchSearch) {
                visibleCards.push(card);
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
        
        // Update pagination
        updatePagination(visibleCards.length);
        paginateCards(visibleCards);
    }

    function paginateCards(visibleCards) {
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        
        visibleCards.forEach((card, index) => {
            if (index >= startIndex && index < endIndex) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    }

    function updatePagination(totalItems) {
        const totalPages = Math.ceil(totalItems / itemsPerPage);
        const pagination = document.getElementById('pagination');
        
        // Clear existing pagination
        pagination.innerHTML = '';
        
        // Previous button
        const prevBtn = document.createElement('button');
        prevBtn.className = 'pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50';
        prevBtn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>';
        prevBtn.disabled = currentPage === 1;
        prevBtn.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                updatePaginationState();
                filterNews();
            }
        });
        pagination.appendChild(prevBtn);
        
        // Page numbers
        for (let i = 1; i <= totalPages; i++) {
            const pageBtn = document.createElement('button');
            pageBtn.className = `pagination-btn px-4 py-2 rounded-lg ${i === currentPage ? 'bg-green-600 text-white' : 'border border-gray-300 hover:bg-gray-50'}`;
            pageBtn.textContent = i;
            pageBtn.addEventListener('click', () => {
                currentPage = i;
                updatePaginationState();
                filterNews();
            });
            pagination.appendChild(pageBtn);
        }
        
        // Next button
        const nextBtn = document.createElement('button');
        nextBtn.className = 'pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50';
        nextBtn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>';
        nextBtn.disabled = currentPage === totalPages;
        nextBtn.addEventListener('click', () => {
            if (currentPage < totalPages) {
                currentPage++;
                updatePaginationState();
                filterNews();
            }
        });
        pagination.appendChild(nextBtn);
    }

    function updatePaginationState() {
        const paginationBtns = document.querySelectorAll('.pagination-btn');
        paginationBtns.forEach(btn => {
            if (btn.textContent == currentPage) {
                btn.className = 'pagination-btn px-4 py-2 bg-green-600 text-white rounded-lg';
            } else if (!isNaN(btn.textContent)) {
                btn.className = 'pagination-btn px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50';
            }
        });
    }

    // Event listeners
    filterTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            filterTabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            currentCategory = this.dataset.category;
            currentPage = 1;
            filterNews();
        });
    });
    // Tambahkan badge ke tab aktif saat load awal
    const activeTab = document.querySelector('.filter-tab.active');
    if (activeTab && !activeTab.querySelector('.active-badge')) {
        const badge = document.createElement('span');
        badge.className = 'active-badge absolute top-1 right-1';
        activeTab.appendChild(badge);
    }

    searchInput.addEventListener('input', function() {
        currentSearchTerm = this.value;
        currentPage = 1;
        filterNews();
    });

    yearFilter.addEventListener('change', function() {
        currentYear = this.value;
        currentPage = 1;
        filterNews();
    });

    // Initial load
    filterNews();
});
</script>
</register-block>