{% extends 'admin_panel/base.html' %}
{% load static %}
{% load currency_filters %}

{% block page_title %}Detail Dokumen - {{ document.title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/documents/documents-list.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/documents/documents-mobile.css' %}">
<style>
.document-detail-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.document-header {
    background: linear-gradient(135deg, #4A90E2 0%, #6BA3F0 100%);
    color: white;
    padding: 2rem;
}

.document-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-row {
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #666;
    min-width: 200px;
}

.info-value {
    color: #333;
    flex: 1;
}

.file-preview {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

.file-icon {
    font-size: 4rem;
    color: #4A90E2;
}

.comment-card {
    background: #f8f9fa;
    border-left: 4px solid #4A90E2;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .document-meta {
        gap: 1rem;
    }
    .info-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .info-label {
        min-width: auto;
        font-size: 0.9rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <div class="mb-3">
        <a href="{% url 'admin_panel:documents_list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Kembali ke Daftar
        </a>
    </div>

    <div class="document-detail-card mb-4">
        <div class="document-header">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <h2 class="mb-0">{{ document.title }}</h2>
                    <div class="document-meta">
                        <div class="meta-item">
                            <i class="fas fa-tag"></i>
                            <span>{{ document.category.name }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar"></i>
                            <span>{{ document.document_year }}</span>
                        </div>
                        {% if document.document_number %}
                        <div class="meta-item">
                            <i class="fas fa-hashtag"></i>
                            <span>{{ document.document_number }}</span>
                        </div>
                        {% endif %}
                        <div class="meta-item">
                            <i class="fas fa-eye"></i>
                            <span>{{ document.view_count }} views</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-download"></i>
                            <span>{{ document.download_count }} downloads</span>
                        </div>
                    </div>
                </div>
                <div class="ms-3">
                    {% if document.status == 'published' %}
                        <span class="badge bg-success fs-6">Dipublikasikan</span>
                    {% elif document.status == 'draft' %}
                        <span class="badge bg-secondary fs-6">Draft</span>
                    {% elif document.status == 'review' %}
                        <span class="badge bg-warning fs-6">Review</span>
                    {% else %}
                        <span class="badge bg-dark fs-6">Diarsipkan</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="card-body p-4">

            <div class="info-row">
                <div class="info-label">
                    <i class="fas fa-align-left me-2"></i>Deskripsi
                </div>
                <div class="info-value">{{ document.description|linebreaksbr }}</div>
            </div>

            {% if document.summary %}
            <div class="info-row">
                <div class="info-label">
                    <i class="fas fa-sticky-note me-2"></i>Ringkasan
                </div>
                <div class="info-value">{{ document.summary }}</div>
            </div>
            {% endif %}

            <div class="info-row">
                <div class="info-label">
                    <i class="fas fa-file me-2"></i>File
                </div>
                <div class="info-value">
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        {% if document.file %}
                            <a href="{% url 'admin_panel:document_preview' document.pk %}" target="_blank" class="btn btn-info btn-sm">
                                <i class="fas fa-file-pdf me-1"></i> Preview
                            </a>
                            <a href="{{ document.file.url }}" target="_blank" class="btn btn-primary btn-sm">
                                <i class="fas fa-download me-1"></i> Download {{ document.file.name|slice:"-10:" }}
                            </a>
                            <small class="text-muted">{{ document.file.size|filesizeformat }}</small>
                        {% else %}
                            <span class="text-muted">
                                <i class="fas fa-exclamation-triangle me-1"></i> File tidak tersedia
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if document.tags %}
            <div class="info-row">
                <div class="info-label">
                    <i class="fas fa-tags me-2"></i>Tags
                </div>
                <div class="info-value">
                    {% for tag in document.get_tags_list %}
                        <span class="badge bg-light text-dark me-1">{{ tag }}</span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <div class="info-row">
                <div class="info-label">
                    <i class="fas fa-globe me-2"></i>Status Publikasi
                </div>
                <div class="info-value">
                    {% if document.is_public %}
                        <span class="badge bg-success">Dipublikasikan ke Website</span>
                    {% else %}
                        <span class="badge bg-secondary">Tidak Dipublikasikan</span>
                    {% endif %}
                    {% if document.is_featured %}
                        <span class="badge bg-warning text-dark ms-2">Unggulan</span>
                    {% endif %}
                </div>
            </div>

            <div class="info-row">
                <div class="info-label">
                    <i class="fas fa-user me-2"></i>Diunggah Oleh
                </div>
                <div class="info-value">
                    {% if document.uploaded_by %}
                        {{ document.uploaded_by.get_full_name|default:document.uploaded_by.username }}
                    {% else %}
                        <span class="text-muted">-</span>
                    {% endif %}
                </div>
            </div>

            <div class="info-row">
                <div class="info-label">
                    <i class="fas fa-clock me-2"></i>Waktu
                </div>
                <div class="info-value">
                    <div><strong>Dibuat:</strong> {{ document.created_at|date:"d F Y, H:i" }} WIB</div>
                    <div><strong>Terakhir diubah:</strong> {{ document.updated_at|date:"d F Y, H:i" }} WIB</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-light">
            <h5 class="mb-0">
                <i class="fas fa-comments me-2"></i>
                Komentar ({{ comments.count }})
            </h5>
        </div>
        <div class="card-body">
            {% if comments %}
                {% for comment in comments %}
                <div class="comment-card">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div>
                            <strong>{{ comment.name }}</strong>
                            <small class="text-muted ms-2">{{ comment.email }}</small>
                        </div>
                        <div>
                            <small class="text-muted">{{ comment.created_at|date:"d M Y H:i" }}</small>
                            {% if comment.is_approved %}
                                <span class="badge bg-success ms-2">Disetujui</span>
                            {% else %}
                                <span class="badge bg-warning text-dark ms-2">Pending</span>
                            {% endif %}
                        </div>
                    </div>
                    <p class="mb-0">{{ comment.comment }}</p>
                </div>
                {% endfor %}
            {% else %}
                <p class="text-muted text-center py-4">Belum ada komentar</p>
            {% endif %}
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-body">
            <div class="d-flex gap-2 flex-wrap">
                {% if document.file %}
                    <a href="{% url 'admin_panel:document_preview' document.pk %}" target="_blank" class="btn btn-info">
                        <i class="fas fa-file-pdf me-1"></i> Preview Dokumen
                    </a>
                {% endif %}
                <a href="{% url 'admin_panel:document_edit' document.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-1"></i> Edit Dokumen
                </a>
                {% if document.file %}
                    <a href="{{ document.file.url }}" target="_blank" class="btn btn-success">
                        <i class="fas fa-download me-1"></i> Download File
                    </a>
                {% endif %}
                <button type="button" class="btn btn-danger" onclick="deleteDocument()">
                    <i class="fas fa-trash me-1"></i> Hapus Dokumen
                </button>
                <a href="{% url 'admin_panel:documents_list' %}" class="btn btn-outline-secondary ms-auto">
                    <i class="fas fa-arrow-left me-1"></i> Kembali
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>function deleteDocument() {
    if (confirm('Apakah Anda yakin ingin menghapus dokumen "{{ document.title|escapejs }}"?\n\nTindakan ini tidak dapat dibatalkan.')) {
        $.ajax({
            url: '{% url "admin_panel:document_delete" document.pk %}',
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                if (response.success) {
                    if (window.showAlert) {
                        window.showAlert(response.message, 'success');
                    }
                    setTimeout(function() {
                        window.location.href = '{% url "admin_panel:documents_list" %}';
                    }, 1000);
                } else {
                    if (window.showAlert) {
                        window.showAlert(response.message, 'error');
                    }
                }
            },
            error: function() {
                if (window.showAlert) {
                    window.showAlert('Terjadi kesalahan saat menghapus dokumen', 'error');
                }
            }
        });
    }
}
</script>
{% endblock %}