@{
    Layout = "_Layout";

        ViewData["Title"] = "Video - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["Description"] = "Kumpulan Video Edukasi dan Dokumentasi Kegiatan Lingkungan Hidup DKI Jakarta";
        ViewData["Keywords"] = "Video, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["OgTitle"] = "Video - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["OgDescription"] = "Kumpulan Video Edukasi dan Dokumentasi Kegiatan Lingkungan Hidup DKI Jakarta";
        ViewData["TwitterTitle"] = "Video - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["TwitterDescription"] = "Kumpulan Video Edukasi dan Dokumentasi Kegiatan Lingkungan Hidup DKI Jakarta";

        // Breadcumb
        ViewData["BreadcrumbText"] = "Video";
        ViewData["TitleBeforeHighlight"] = "Video";
        ViewData["TitleHighlight"] = "Terkini";
}

<!-- 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">
        
        <!-- Search and Year Filter -->
        <div class="mb-8">
            <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 video..."
                        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>
                    <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>

        <!-- Video Grid -->
        <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"
                         data-year="2024" data-title="Video Penghijauan Jakarta 2024" data-date="2024-01-15" data-desc="Video dokumentasi program penghijauan di Jakarta tahun 2024.">
                    <div class="aspect-w-16 aspect-h-9 w-full">
                        <iframe class="w-full h-48" src="https://www.youtube.com/embed/05NdDFoOHPE" title="Video Penghijauan Jakarta 2024" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="p-6">
                        <h3 class="font-bold text-gray-800 mb-1 line-clamp-2">Video Penghijauan Jakarta 2024</h3>
                        <div class="text-xs text-gray-500 mb-2">15 Januari 2024</div>
                        <div class="text-gray-600 text-sm line-clamp-3">Video dokumentasi program penghijauan di Jakarta tahun 2024.</div>
                    </div>
                </article>
                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
                         data-year="2024" data-title="Operasi Kebersihan DKI" data-date="2024-01-12" data-desc="Liputan operasi kebersihan lingkungan di seluruh DKI Jakarta.">
                    <div class="aspect-w-16 aspect-h-9 w-full">
                        <iframe class="w-full h-48" src="https://www.youtube.com/embed/ZIPBeKs4" title="Operasi Kebersihan DKI" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="p-6">
                        <h3 class="font-bold text-gray-800 mb-1 line-clamp-2">Operasi Kebersihan DKI</h3>
                        <div class="text-xs text-gray-500 mb-2">12 Januari 2024</div>
                        <div class="text-gray-600 text-sm line-clamp-3">Liputan operasi kebersihan lingkungan di seluruh DKI Jakarta.</div>
                    </div>
                </article>
                <article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
                         data-year="2024" data-title="Workshop Pengelolaan Sampah" data-date="2024-01-10" data-desc="Workshop edukasi pengelolaan sampah ramah lingkungan.">
                    <div class="aspect-w-16 aspect-h-9 w-full">
                        <iframe class="w-full h-48" src="https://www.youtube.com/embed/F0R5Wu2EY5c" title="Workshop Pengelolaan Sampah" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="p-6">
                        <h3 class="font-bold text-gray-800 mb-1 line-clamp-2">Workshop Pengelolaan Sampah</h3>
                        <div class="text-xs text-gray-500 mb-2">10 Januari 2024</div>
                        <div class="text-gray-600 text-sm line-clamp-3">Workshop edukasi pengelolaan sampah ramah lingkungan.</div>
                    </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="jsPageVideo">
<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="jsPageVideo">
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search-input');
    const yearFilter = document.getElementById('year-filter');
    const newsCards = document.querySelectorAll('.news-card');
    // Pagination
    let currentSearchTerm = '';
    let currentYear = '';
    let currentPage = 1;
    const itemsPerPage = 6;

    function filterNews() {
        let visibleCards = [];
        newsCards.forEach(card => {
            const cardYear = card.dataset.year;
            const cardTitle = card.dataset.title.toLowerCase();
            const matchYear = !currentYear || cardYear === currentYear;
            const matchSearch = !currentSearchTerm || cardTitle.includes(currentSearchTerm.toLowerCase());
            if (matchYear && matchSearch) {
                visibleCards.push(card);
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
        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');
        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';
            }
        });
    }

    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>