{% extends 'public/base.html' %} 
{% load static %} 
{% load document_filters %} 

{% block extra_css %} 
<style> 
    .category-hero { 
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
        color: white; 
    } 
    .document-card { 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        border: 1px solid #e5e7eb; 
    } 
    .document-card:hover { 
        transform: translateY(-4px); 
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
    } 
    .document-card { 
        border-color: #e5e7eb; /* Menggunakan border terang */
    } 
    .document-card:hover { 
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0px 6px -2px rgba(0, 0, 0, 0.05); /* Mengurangi shadow hover */
    } 
    .category-badge { 
        padding: 0.25rem 0.75rem; 
        border-radius: 9999px; 
        font-size: 0.75rem; 
        font-weight: 600; 
    } 
    .category-lppd { background-color: #fffbeb; color: #d97706; } 
    .category-musdes { background-color: #f0fdf4; color: #16a34a; } 
    .category-laporan_lainnya { background-color: #f8fafc; color: #475569; } 
    .file-icon { 
        width: 48px; 
        height: 48px; 
        border-radius: 12px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 1.5rem; 
        color: white; 
    } 
    .file-pdf { background: linear-gradient(135deg, #ef4444, #dc2626); } 
    .file-doc, .file-docx { background: linear-gradient(135deg, #3b82f6, #2563eb); } 
    .file-xls, .file-xlsx { background: linear-gradient(135deg, #10b981, #059669); } 
    .file-default { background: linear-gradient(135deg, #64748b, #475569); } 
    .stats-card { 
        background: rgba(255,255,255,0.1); /* Latar belakang semi transparan terang */
        backdrop-filter: blur(10px); 
        border: 1px solid rgba(255,255,255,0.2); 
    } 
    .category-section { 
        background: linear-gradient(135deg, #fef2f2, #fee2e2); 
        border: 1px solid #fecaca; 
    } 
    /* Menghilangkan kelas tema gelap yang tidak relevan */
    /* .document-card { border-color: #374151; } */ 
    /* .document-card:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); } */ 
    /* .stats-card { background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); border: 1px solid rgba(255,255,255,0.1); } */
    /* .category-section { background: linear-gradient(135deg, #991b1b, #b91c1c); border: 1px solid #ef4444; } */

</style> 
{% endblock extra_css %} 

{% block content %} 
<main>
    <!-- 1. HEADER / HERO SECTION -->
    <header class="relative h-64 sm:h-80 md:h-96 lg:h-[500px] overflow-hidden">
        {% if hero_image_url %}
        <img src="{{ hero_image_url }}" alt="Laporan Desa Hero" class="w-full h-full object-cover">
        {% else %}
        <div class="w-full h-full bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center">
            <i class="fas fa-file-alt text-4xl sm:text-6xl text-white opacity-50"></i>
        </div>
        {% endif %}
        
        <div class="absolute bottom-0 left-0 right-0 p-4 sm:p-6 lg:p-8 text-white">
            <div class="max-w-7xl mx-auto text-center">
                <div class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
                    <i class="fas fa-file-alt mr-2"></i> Laporan Desa
                </div>
                <!-- H1 untuk judul utama halaman -->
                <h1 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold mb-2 leading-tight text-white"> 
                    <i class="fas fa-file-alt mr-3"></i> Laporan <span class="text-red-400">Desa</span>
                </h1> 
                <p class="text-sm sm:text-base lg:text-lg opacity-90 max-w-3xl mx-auto text-white"> Akses laporan dan dokumentasi kegiatan Desa Pulosarok </p> 
                
                <!-- Quick Stats (Article/Details) --> 
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto mt-8"> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">{{ documents.paginator.count|default:0 }}</div> 
                        <div class="text-sm opacity-80 text-white">Total Dokumen</div> 
                    </div> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">{{ years|length|default:0 }}</div> 
                        <div class="text-sm opacity-80 text-white">Tahun Tersedia</div> 
                    </div> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">100%</div> 
                        <div class="text-sm opacity-80 text-white">Akurat</div> 
                    </div> 
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4"> 
                        <div class="text-2xl font-bold mb-1 text-white">24/7</div> 
                        <div class="text-sm opacity-80 text-white">Akses</div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </header> 

    <!-- 2. MAIN CONTENT AREA -->
    <section id="document-list-section" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> 

        <!-- Category Information (Section Block) --> 
        <section class="category-section rounded-2xl p-8 mb-8"> 
            <header class="text-center mb-8"> 
                <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> 
                    <i class="fas fa-file-alt text-white text-3xl"></i> 
                </div> 
                <!-- H2 untuk sub-judul bagian -->
                <h2 class="text-2xl font-bold text-gray-900 mb-4"> Laporan Desa Pulosarok </h2> 
                <p class="text-gray-700 max-w-3xl mx-auto"> Desa Pulosarok menyediakan berbagai laporan dan dokumentasi kegiatan yang dapat diakses oleh masyarakat. Laporan ini mencakup laporan penyelenggaraan pemerintahan, musyawarah desa, dan laporan lainnya untuk mendukung transparansi dan akuntabilitas. </p> 
            </header>
            
            <!-- Category Types (Article Cards) --> 
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 
                <article class="bg-white rounded-xl p-6 text-center"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-chart-bar text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul kategori -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">LPPD</h3> 
                    <p class="text-sm text-gray-600">Laporan Penyelenggaraan Pemerintahan Desa</p> 
                </article> 
                <article class="bg-white rounded-xl p-6 text-center"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-users text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul kategori -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Musyawarah Desa</h3> 
                    <p class="text-sm text-gray-600">Notulensi dan hasil musyawarah desa</p> 
                </article> 
                <article class="bg-white rounded-xl p-6 text-center"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-gray-500 to-gray-600 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-file-alt text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul kategori -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Laporan Lainnya</h3> 
                    <p class="text-sm text-gray-600">Laporan kegiatan dan program desa</p> 
                </article> 
            </div> 
        </section> 

        <!-- Filter Section --> 
        <section id="filter-section" class="bg-white rounded-2xl p-6 mb-8 shadow-sm"> 
            <!-- H2 untuk judul bagian filter -->
            <h2 class="text-lg font-semibold text-gray-900 mb-4"> <i class="fas fa-filter text-red-500 mr-2"></i> Filter Dokumen </h2> 
            <form method="get" class="grid grid-cols-1 md:grid-cols-3 gap-4"> 
                <div> 
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Pencarian</label> 
                    <input type="text" id="search" name="search" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Cari dokumen..." value="{{ search }}"> 
                </div> 
                <div> 
                    <label for="year" class="block text-sm font-medium text-gray-700 mb-2">Tahun</label> 
                    <select id="year" name="year" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"> 
                        <option value="">Semua Tahun</option> 
                        {% for year in years %} 
                        <option value="{{ year }}" {% if selected_year == year|stringformat:"s" %}selected{% endif %}>{{ year }}</option> 
                        {% endfor %} 
                    </select> 
                </div> 
                <div class="flex items-end"> 
                    <button type="submit" class="w-full bg-gradient-to-r from-red-600 to-red-700 text-white px-4 py-2 rounded-lg font-semibold hover:from-red-700 hover:to-red-800 transition-all duration-300"> 
                        <i class="fas fa-search mr-2"></i>Filter 
                    </button> 
                </div> 
            </form> 
        </section> 

        <!-- Documents Grid --> 
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> 
            {% for document in documents %} 
            <article class="document-card bg-white rounded-xl p-6"> 
                <div class="flex items-start gap-4 mb-4"> 
                    <div class="file-icon file-{{ document.file|file_extension }}"> 
                        {% with ext=document.file|file_extension %} 
                        {% if ext == 'pdf' %} <i class="fas fa-file-pdf"></i> 
                        {% elif ext == 'doc' or ext == 'docx' %} <i class="fas fa-file-word"></i> 
                        {% elif ext == 'xls' or ext == 'xlsx' %} <i class="fas fa-file-excel"></i> 
                        {% else %} <i class="fas fa-file"></i> 
                        {% endif %} 
                        {% endwith %} 
                    </div> 
                    <div class="flex-1 min-w-0"> 
                        <header>
                            <div class="flex items-center gap-2 mb-2"> 
                                <span class="category-badge category-{{ document.category.category_type }}"> {{ document.category.name }} </span> 
                                <span class="text-xs text-gray-500">{{ document.document_year }}</span> 
                            </div> 
                            <!-- H3 untuk judul dokumen dalam daftar -->
                            <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2"> 
                                <a href="{% url 'documents:public_detail' document.slug %}" class="hover:text-red-600 transition-colors"> 
                                    {{ document.title }} 
                                </a> 
                            </h3> 
                        </header>
                        {% if document.document_number %} 
                        <p class="text-sm text-gray-600 mb-2"> 
                            <i class="fas fa-hashtag mr-1"></i>{{ document.document_number }} 
                        </p> 
                        {% endif %} 
                        {% if document.summary %} 
                        <p class="text-sm text-gray-600 mb-3 line-clamp-2"> 
                            {{ document.summary }} 
                        </p> 
                        {% endif %} 
                    </div> 
                </div> 
                <div class="flex items-center justify-between text-sm text-gray-500 mb-4"> 
                    <div class="flex items-center gap-4"> 
                        <span><i class="fas fa-eye mr-1"></i>{{ document.view_count }}</span> 
                        <span><i class="fas fa-download mr-1"></i>{{ document.download_count }}</span> 
                    </div> 
                    <span>{{ document.created_at|date:"d M Y" }}</span> 
                </div> 
                <footer>
                    <div class="flex gap-2"> 
                        <a href="{% url 'documents:public_detail' document.slug %}" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors text-center"> 
                            <i class="fas fa-eye mr-1"></i>Lihat 
                        </a> 
                        <a href="{% url 'documents:public_download' document.slug %}" class="flex-1 bg-red-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-red-700 transition-colors text-center"> 
                            <i class="fas fa-download mr-1"></i>Download 
                        </a> 
                    </div> 
                </footer>
            </article> 
            {% empty %} 
            <div class="col-span-full"> 
                <div class="bg-white rounded-xl p-12 text-center"> 
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"> 
                        <i class="fas fa-file-slash text-gray-400 text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk pesan kosong -->
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Tidak Ada Dokumen</h3> 
                    <p class="text-gray-600 mb-6"> Belum ada dokumen laporan yang tersedia. </p> 
                    <a href="{% url 'documents:public_list' %}" class="bg-gradient-to-r from-red-600 to-red-700 text-white px-6 py-3 rounded-lg font-semibold hover:from-red-700 hover:to-red-800 transition-all duration-300"> 
                        <i class="fas fa-list mr-2"></i>Lihat Semua Dokumen 
                    </a> 
                </div> 
            </div> 
            {% endfor %} 
        </div> 

        <!-- Pagination --> 
        {% if documents.has_other_pages %} 
        <div class="mt-8"> 
            <div class="flex justify-center"> 
                <nav class="flex items-center space-x-2" aria-label="Pagination"> 
                    {% if documents.has_previous %} 
                    <a href="?page=1{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50">
                        <i class="fas fa-angle-double-left"></i> 
                    </a> 
                    <a href="?page={{ documents.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">
                        <i class="fas fa-angle-left"></i> 
                    </a> 
                    {% endif %} 
                    {% for num in documents.paginator.page_range %} 
                    {% if documents.number == num %} 
                    <span aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-red-600 border border-red-600">{{ num }}</span> 
                    {% elif num > documents.number|add:'-3' and num < documents.number|add:'3' %} 
                    <a href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">{{ num }}</a> 
                    {% endif %} 
                    {% endfor %} 
                    {% if documents.has_next %} 
                    <a href="?page={{ documents.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 hover:bg-gray-50">
                        <i class="fas fa-angle-right"></i> 
                    </a> 
                    <a href="?page={{ documents.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if selected_year %}&year={{ selected_year }}{% endif %}" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50">
                        <i class="fas fa-angle-double-right"></i> 
                    </a> 
                    {% endif %} 
                </nav> 
            </div> 
        </div> 
        {% endif %} 

        <!-- Quick Access / FOOTER --> 
        <div class="mt-16"> 
            <!-- H2 untuk sub-judul bagian -->
            <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center"> 
                <i class="fas fa-external-link-alt text-red-500 mr-2"></i> Akses Cepat 
            </h2> 
            <footer class="grid grid-cols-1 md:grid-cols-3 gap-6"> 
                <a href="{% url 'documents:public_list' %}" class="document-card bg-white rounded-xl p-6 text-center group"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"> 
                        <i class="fas fa-list text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul akses cepat -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Semua Dokumen</h3> 
                    <p class="text-sm text-gray-600">Lihat semua dokumen transparansi</p> 
                </a> 
                <a href="{% url 'documents:transparansi_anggaran' %}" class="document-card bg-white rounded-xl p-6 text-center group"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"> 
                        <i class="fas fa-chart-pie text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul akses cepat -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Transparansi Anggaran</h3> 
                    <p class="text-sm text-gray-600">Dokumen anggaran dan keuangan</p> 
                </a> 
                <a href="{% url 'documents:produk_hukum' %}" class="document-card bg-white rounded-xl p-6 text-center group"> 
                    <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"> 
                        <i class="fas fa-gavel text-white text-2xl"></i> 
                    </div> 
                    <!-- H3 untuk judul akses cepat -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Produk Hukum</h3> 
                    <p class="text-sm text-gray-600">Peraturan dan keputusan desa</p> 
                </a> 
            </footer>
        </div> 
    </section> 
</main>

{% endblock content %} 

{% block extra_js %} 
<script> 
    document.addEventListener('DOMContentLoaded', function() { 
        // Auto-submit form on filter change 
        const filterSelects = document.querySelectorAll('#year'); 
        filterSelects.forEach(select => { 
            select.addEventListener('change', function() { 
                this.form.submit(); 
            }); 
        }); 
        
        // Add smooth scrolling for internal links 
        const links = document.querySelectorAll('a[href^="#"]'); 
        links.forEach(link => { 
            link.addEventListener('click', function(e) { 
                e.preventDefault(); 
                const target = document.querySelector(this.getAttribute('href')); 
                if (target) { 
                    target.scrollIntoView({ behavior: 'smooth' }); 
                } 
            }); 
        }); 
    }); 
</script> 
{% endblock extra_js %}