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

{% block extra_head %}
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
{% endblock extra_head %}

{% block extra_css %}
<style>
    .document-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #e5e7eb;
    }
    .document-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .document-card {
        border-color: #e5e7eb;
    }
    
    .category-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .category-apbdes { background-color: #dbeafe; color: #1e40af; }
    .category-realisasi_anggaran { background-color: #dcfce7; color: #166534; }
    .category-dana_desa { background-color: #fef3c7; color: #92400e; }
    .category-perdes { background-color: #e0e7ff; color: #3730a3; }
    .category-perkades { background-color: #fce7f3; color: #be185d; }
    .category-sk_kades { background-color: #f3e8ff; color: #7c3aed; }
    .category-profil_desa { background-color: #ecfdf5; color: #065f46; }
    .category-data_kependudukan { background-color: #f0f9ff; color: #0369a1; }
    .category-peta_desa { background-color: #fef2f2; color: #dc2626; }
    .category-lppd { background-color: #fffbeb; color: #d97706; }
    .category-musdes { background-color: #f0fdf4; color: #16a34a; }
    .category-laporan_lainnya { background-color: #f8fafc; color: #475569; }
    .category-lainnya { background-color: #f1f5f9; color: #334155; }
    
    .file-icon {
        width: 80px;
        height: 80px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: white;
    }
    .file-pdf { background: linear-gradient(135deg, #ef4444, #dc2626); }
    .file-doc { background: linear-gradient(135deg, #3b82f6, #2563eb); }
    .file-docx { background: linear-gradient(135deg, #3b82f6, #2563eb); }
    .file-xls { background: linear-gradient(135deg, #10b981, #059669); }
    .file-xlsx { background: linear-gradient(135deg, #10b981, #059669); }
    .file-ppt { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .file-pptx { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .file-txt { background: linear-gradient(135deg, #6b7280, #4b5563); }
    .file-zip { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
    .file-default { background: linear-gradient(135deg, #64748b, #475569); }
    
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    .info-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: #f8fafc;
        border-radius: 0.5rem;
        border: 1px solid #e2e8f0;
    }
    .info-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.875rem;
    }
    .icon-blue { background: #3b82f6; }
    .icon-green { background: #10b981; }
    .icon-purple { background: #8b5cf6; }
    .icon-orange { background: #f59e0b; }
    .icon-red { background: #ef4444; }
</style>
{% endblock extra_css %}

{% block content %}
<!-- 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="Document Detail Hero" class="w-full h-full object-cover">
    {% else %}
    <div class="w-full h-full bg-gradient-to-br from-blue-500 to-purple-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> Detail Dokumen
            </div>
            <h1 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold mb-2 leading-tight text-white">
                Detail <span class="text-blue-400">Dokumen</span>
            </h1>
            <p class="text-sm sm:text-base lg:text-lg opacity-90 max-w-3xl mx-auto text-white">
                Informasi lengkap dokumen transparansi
            </p>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <!-- Document Header -->
    <div class="document-card bg-white rounded-2xl p-8 mb-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- File Icon -->
            <div class="flex-shrink-0">
                <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>
                    {% elif ext == 'ppt' or ext == 'pptx' %}
                    <i class="fas fa-file-powerpoint"></i>
                    {% elif ext == 'txt' %}
                    <i class="fas fa-file-alt"></i>
                    {% elif ext == 'zip' %}
                    <i class="fas fa-file-archive"></i>
                    {% else %}
                    <i class="fas fa-file"></i>
                    {% endif %}
                    {% endwith %}
                </div>
            </div>
            <!-- Document Info -->
            <div class="flex-1">
                <div class="flex flex-wrap items-center gap-3 mb-4">
                    <span class="category-badge category-{{ document.category.category_type }}">
                        {{ document.category.name }}
                    </span>
                    <span class="text-sm text-gray-500">{{ document.document_year }}</span>
                    {% if document.document_number %}
                    <span class="text-sm text-gray-500">
                        <i class="fas fa-hashtag mr-1"></i>{{ document.document_number }}
                    </span>
                    {% endif %}
                </div>
                <h2 class="text-2xl font-bold text-gray-900 mb-4">
                    {{ document.title }}
                </h2>
                {% if document.summary %}
                <p class="text-gray-600 mb-6 leading-relaxed">
                    {{ document.summary }}
                </p>
                {% endif %}
                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-4">
                    {% if document.file and document.file.name %}
                        {% with ext=document.file|file_extension %}
                        {% if ext == 'pdf' %}
                        <a href="{{ document.file.url }}" target="_blank" class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                            <i class="fas fa-external-link-alt mr-2"></i> Buka PDF di Tab Baru
                        </a>
                        {% elif ext == 'doc' or ext == 'docx' %}
                        <a href="{{ document.file.url }}" target="_blank" class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                            <i class="fas fa-external-link-alt mr-2"></i> Buka Word di Tab Baru
                        </a>
                        {% elif ext == 'xls' or ext == 'xlsx' %}
                        <a href="{{ document.file.url }}" target="_blank" class="bg-gradient-to-r from-green-600 to-green-700 text-white px-8 py-3 rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                            <i class="fas fa-external-link-alt mr-2"></i> Buka Excel di Tab Baru
                        </a>
                        {% elif ext == 'ppt' or ext == 'pptx' %}
                        <a href="{{ document.file.url }}" target="_blank" class="bg-gradient-to-r from-orange-600 to-orange-700 text-white px-8 py-3 rounded-lg font-semibold hover:from-orange-700 hover:to-orange-800 transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                            <i class="fas fa-external-link-alt mr-2"></i> Buka PowerPoint di Tab Baru
                        </a>
                        {% elif ext == 'txt' %}
                        <a href="{{ document.file.url }}" target="_blank" class="bg-gradient-to-r from-gray-600 to-gray-700 text-white px-8 py-3 rounded-lg font-semibold hover:from-gray-700 hover:to-gray-800 transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                            <i class="fas fa-external-link-alt mr-2"></i> Buka Text di Tab Baru
                        </a>
                        {% else %}
                        <a href="{{ document.file.url }}" target="_blank" class="bg-gradient-to-r from-purple-600 to-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-purple-800 transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                            <i class="fas fa-external-link-alt mr-2"></i> Buka File di Tab Baru
                        </a>
                        {% endif %}
                        {% endwith %}
                        <a href="{% url 'documents:public_download' document.slug %}" class="bg-gradient-to-r from-green-600 to-green-700 text-white px-8 py-3 rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                            <i class="fas fa-download mr-2"></i> Download Dokumen
                        </a>
                    {% else %}
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mr-3"></i>
                                <div>
                                    <h4 class="text-yellow-800 font-semibold">File Tidak Tersedia</h4>
                                    <p class="text-yellow-700 text-sm">File dokumen ini tidak tersedia untuk di-download atau di-preview.</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    <a href="{% url 'documents:public_list' %}" class="bg-transparent border-2 border-gray-300 text-gray-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-all duration-300 text-center">
                        <i class="fas fa-arrow-left mr-2"></i> Kembali ke Daftar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Document Details -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-8">
            <!-- Document Information -->
            <div class="document-card bg-white rounded-xl p-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-6">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i> Informasi Dokumen
                </h3>
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-icon icon-blue">
                            <i class="fas fa-calendar"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Tanggal Upload</div>
                            <div class="font-semibold text-gray-900">{{ document.created_at|date:"d M Y" }}</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon icon-green">
                            <i class="fas fa-user"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Diupload Oleh</div>
                            <div class="font-semibold text-gray-900">{{ document.uploaded_by.get_full_name|default:document.uploaded_by.username }}</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon icon-purple">
                            <i class="fas fa-eye"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Dilihat</div>
                            <div class="font-semibold text-gray-900">{{ document.view_count }} kali</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon icon-orange">
                            <i class="fas fa-download"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Didownload</div>
                            <div class="font-semibold text-gray-900">{{ document.download_count }} kali</div>
                        </div>
                    </div>
                    {% if document.file_size %}
                    <div class="info-item">
                        <div class="info-icon icon-red">
                            <i class="fas fa-weight-hanging"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Ukuran File</div>
                            <div class="font-semibold text-gray-900">{{ document.file_size|filesizeformat }}</div>
                        </div>
                    </div>
                    {% endif %}
                    {% if document.file_extension %}
                    <div class="info-item">
                        <div class="info-icon icon-blue">
                            <i class="fas fa-file"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Format</div>
                            <div class="font-semibold text-gray-900">{{ document.file_extension|upper }}</div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Document Description -->
            {% if document.description %}
            <div class="document-card bg-white rounded-xl p-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-4">
                    <i class="fas fa-align-left text-green-500 mr-2"></i> Deskripsi Dokumen
                </h3>
                <div class="prose max-w-none">
                    {{ document.description|linebreaks }}
                </div>
            </div>
            {% endif %}

            <!-- Tags -->
            {% if document.tags %}
            <div class="document-card bg-white rounded-xl p-6">
                <h3 class="text-xl font-semibold text-gray-900 mb-4">
                    <i class="fas fa-tags text-purple-500 mr-2"></i> Tag
                </h3>
                <div class="flex flex-wrap gap-2">
                    {% for tag in document.tags|split_tags:"," %}
                    <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">
                        {{ tag }}
                    </span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Related Documents -->
            {% if related_documents %}
            <div class="document-card bg-white rounded-xl p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-link text-blue-500 mr-2"></i> Dokumen Terkait
                </h3>
                <div class="space-y-3">
                    {% for related in related_documents %}
                    <a href="{% url 'documents:public_detail' related.slug %}" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <h4 class="font-semibold text-gray-900 text-sm mb-1 line-clamp-2">
                            {{ related.title }}
                        </h4>
                        <div class="flex items-center gap-2 text-xs text-gray-500">
                            <span>{{ related.document_year }}</span>
                            <span>•</span>
                            <span>{{ related.view_count }} views</span>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Category Info -->
            <div class="document-card bg-white rounded-xl p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-folder text-orange-500 mr-2"></i> Kategori
                </h3>
                <div class="space-y-3">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
                            <i class="fas {{ document.category.icon|default:'fa-file' }} text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">{{ document.category.name }}</h4>
                            {% if document.category.description %}
                            <p class="text-sm text-gray-600">{{ document.category.description }}</p>
                            {% endif %}
                        </div>
                    </div>
                    <a href="{% url 'documents:public_list' %}?type={{ document.category.category_type }}" class="block w-full text-center bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                        <i class="fas fa-list mr-2"></i>Lihat Semua {{ document.category.name }}
                    </a>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="document-card bg-white rounded-xl p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-bolt text-yellow-500 mr-2"></i> Akses Cepat
                </h3>
                <div class="space-y-3">
                    <a href="{% url 'documents:public_list' %}" class="block w-full text-center bg-gray-100 text-gray-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors">
                        <i class="fas fa-list mr-2"></i>Semua Dokumen
                    </a>
                    <a href="{% url 'documents:transparansi_anggaran' %}" class="block w-full text-center bg-green-100 text-green-700 px-4 py-2 rounded-lg font-semibold hover:bg-green-200 transition-colors">
                        <i class="fas fa-chart-pie mr-2"></i>Transparansi Anggaran
                    </a>
                    <a href="{% url 'documents:produk_hukum' %}" class="block w-full text-center bg-purple-100 text-purple-700 px-4 py-2 rounded-lg font-semibold hover:bg-purple-200 transition-colors">
                        <i class="fas fa-gavel mr-2"></i>Produk Hukum
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Inline PDF Preview Section -->
{% if document.file and document.file.name and document.file|file_extension == 'pdf' %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white rounded-2xl p-8 shadow-sm">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-semibold text-gray-900">
                <i class="fas fa-file-pdf text-red-500 mr-2"></i> Preview Dokumen
            </h3>
            <div class="flex items-center gap-2">
                <a href="{{ document.file.url }}" target="_blank" class="bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors text-sm">
                    <i class="fas fa-external-link-alt mr-1"></i> Buka di Tab Baru
                </a>
                <a href="{% url 'documents:public_download' document.slug %}" class="bg-green-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-green-700 transition-colors text-sm">
                    <i class="fas fa-download mr-1"></i> Download
                </a>
            </div>
        </div>
        
        <div class="border border-gray-200 rounded-lg overflow-hidden">
            <iframe 
                src="{{ document.file.url }}#toolbar=1&navpanes=1&scrollbar=1&view=FitH" 
                class="w-full h-96 md:h-[600px] lg:h-[700px] border-0"
                title="Preview {{ document.title }}">
                <p>Browser Anda tidak mendukung preview PDF. 
                   <a href="{{ document.file.url }}" target="_blank" class="text-blue-600 hover:text-blue-800">Klik di sini untuk membuka file</a>
                </p>
            </iframe>
        </div>
        
        <div class="mt-4 text-sm text-gray-600 text-center">
            <i class="fas fa-info-circle mr-1"></i>
            Jika preview tidak muncul, silakan gunakan tombol "Buka di Tab Baru" atau "Download" di atas.
        </div>
    </div>
</div>
{% endif %}

{% endblock content %}

{% block extra_js %}
<script>
// Cache busting - force reload of updated template
console.log('Document detail template loaded - version 2.0');

document.addEventListener('DOMContentLoaded', function() {
    // 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' });
            }
        });
    });

    // Track document view (if needed for analytics)
    console.log('Document viewed:', '{{ document.title }}');
    
    // Remove any existing modal elements that might be cached
    const existingModal = document.getElementById('previewModal');
    if (existingModal) {
        existingModal.remove();
        console.log('Removed cached modal element');
    }
    
    // Add visual indicator that new system is active
    const previewButtons = document.querySelectorAll('a[target="_blank"]');
    previewButtons.forEach(button => {
        if (button.textContent.includes('Buka') || button.textContent.includes('Preview')) {
            button.style.border = '2px solid #10b981';
            button.style.boxShadow = '0 0 10px rgba(16, 185, 129, 0.3)';
        }
    });
});
</script>
{% endblock extra_js %}