{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Kelola Dokumen - {{ post.judul }}{% endblock %}
{% block page_title %}Kelola Dokumen{% endblock %}

{% block extra_css %}
<style>
    .document-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .document-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #e5e7eb;
        background: white;
    }
    
    .document-item-header {
        padding: 1rem;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .document-item-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .document-item-actions {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        display: flex;
        space-x: 0.25rem;
    }
    
    .document-item-info {
        padding: 1rem;
    }
    
    .document-item-caption {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: 0.5rem;
    }
    
    .upload-area {
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        background: #f9fafb;
        transition: all 0.3s ease;
    }
    
    .upload-area:hover {
        border-color: #3b82f6;
        background: #eff6ff;
    }
    
    .upload-area.dragover {
        border-color: #3b82f6;
        background: #eff6ff;
    }
    
    .file-type-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    
    .type-pdf { background: #fecaca; color: #dc2626; }
    .type-doc { background: #dbeafe; color: #1e40af; }
    .type-docx { background: #dbeafe; color: #1e40af; }
    .type-xls { background: #d1fae5; color: #065f46; }
    .type-xlsx { background: #d1fae5; color: #065f46; }
    .type-ppt { background: #fef3c7; color: #92400e; }
    .type-pptx { background: #fef3c7; color: #92400e; }
    .type-txt { background: #f3f4f6; color: #374151; }
    .type-other { background: #e5e7eb; color: #6b7280; }
    
    .file-size {
        font-size: 0.75rem;
        color: #6b7280;
        margin-top: 0.25rem;
    }
    
    .download-btn {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        background: #3b82f6;
        color: white;
        border-radius: 6px;
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: background-color 0.2s;
    }
    
    .download-btn:hover {
        background: #2563eb;
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Kelola Dokumen</h1>
            <p class="text-gray-600 mt-1">{{ post.judul }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{% url 'admin_panel:blog_detail' post.pk %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali ke Detail
            </a>
            <button onclick="openAddDocumentModal()" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>
                Tambah Dokumen
            </button>
        </div>
    </div>

    <!-- Upload Form Modal -->
    <div id="addDocumentModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Tambah Dokumen</h3>
                </div>
                <form method="post" enctype="multipart/form-data" id="documentForm">
                    {% csrf_token %}
                    <div class="px-6 py-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">File Dokumen</label>
                            <div class="upload-area" id="uploadArea">
                                <i class="fas fa-file-upload text-4xl text-gray-400 mb-2"></i>
                                <p class="text-sm text-gray-600">Drag & drop dokumen atau klik untuk memilih</p>
                                <input type="file" name="dokumen" id="id_dokumen" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt" class="hidden" required>
                            </div>
                            <div id="filePreview" class="hidden mt-2 p-3 bg-gray-50 rounded-md">
                                <div class="flex items-center">
                                    <i class="fas fa-file text-2xl text-gray-400 mr-3"></i>
                                    <div>
                                        <div class="font-medium text-gray-900" id="fileName"></div>
                                        <div class="text-sm text-gray-500" id="fileSize"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label for="id_caption" class="block text-sm font-medium text-gray-700 mb-2">Caption</label>
                            <input type="text" name="caption" id="id_caption" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="Masukkan caption dokumen">
                        </div>
                        <div>
                            <label for="id_alt_text" class="block text-sm font-medium text-gray-700 mb-2">Alt Text</label>
                            <input type="text" name="alt_text" id="id_alt_text" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="Masukkan alt text untuk aksesibilitas">
                        </div>
                        <div>
                            <label for="id_order" class="block text-sm font-medium text-gray-700 mb-2">Urutan</label>
                            <input type="number" name="order" id="id_order" value="0" min="0"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
                        <button type="button" onclick="closeAddDocumentModal()" 
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                            Batal
                        </button>
                        <button type="submit" 
                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
                            Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Document Grid -->
    {% if documents %}
    <div class="document-grid">
        {% for document in documents %}
        <div class="document-item">
            <div class="document-item-header">
                <div class="document-item-icon {{ document.file_type|lower }}">
                    {% if document.file_type == 'PDF' %}
                        <i class="fas fa-file-pdf text-red-500"></i>
                    {% elif document.file_type == 'DOC' or document.file_type == 'DOCX' %}
                        <i class="fas fa-file-word text-blue-500"></i>
                    {% elif document.file_type == 'XLS' or document.file_type == 'XLSX' %}
                        <i class="fas fa-file-excel text-green-500"></i>
                    {% elif document.file_type == 'PPT' or document.file_type == 'PPTX' %}
                        <i class="fas fa-file-powerpoint text-yellow-500"></i>
                    {% elif document.file_type == 'TXT' %}
                        <i class="fas fa-file-alt text-gray-500"></i>
                    {% else %}
                        <i class="fas fa-file text-gray-500"></i>
                    {% endif %}
                </div>
                <div class="file-type-badge type-{{ document.file_type|lower }}">
                    {{ document.file_type }}
                </div>
                <h3 class="font-medium text-gray-900">{{ document.caption|default:document.dokumen.name|slice:"0:30" }}</h3>
                <div class="file-size">{{ document.file_size|filesizeformat }}</div>
            </div>
            
            <div class="document-item-actions">
                <button onclick="editDocument({{ document.pk }}, '{{ document.caption }}', '{{ document.alt_text }}', {{ document.order }})" 
                        class="p-1 text-blue-600 hover:text-blue-800 bg-white rounded-full shadow-sm">
                    <i class="fas fa-edit text-xs"></i>
                </button>
                <form method="post" action="{% url 'admin_panel:blog_document_delete' document.pk %}" class="inline">
                    {% csrf_token %}
                    <button type="submit" onclick="return confirm('Hapus dokumen ini?')" 
                            class="p-1 text-red-600 hover:text-red-800 bg-white rounded-full shadow-sm">
                        <i class="fas fa-trash text-xs"></i>
                    </button>
                </form>
            </div>
            
            <div class="document-item-info">
                {% if document.caption %}
                <div class="document-item-caption">{{ document.caption }}</div>
                {% endif %}
                <div class="text-xs text-gray-500 mt-1">
                    Urutan: {{ document.order }}
                </div>
                <div class="mt-3">
                    <a href="{{ document.dokumen.url }}" target="_blank" class="download-btn">
                        <i class="fas fa-download mr-2"></i>
                        Download
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <i class="fas fa-file-alt text-6xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Belum ada dokumen</h3>
        <p class="text-gray-500 mb-4">Tambahkan dokumen untuk melengkapi konten blog</p>
        <button onclick="openAddDocumentModal()" 
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
            <i class="fas fa-plus mr-2"></i>
            Tambah Dokumen Pertama
        </button>
    </div>
    {% endif %}
</div>

<!-- Edit Document Modal -->
<div id="editDocumentModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Edit Dokumen</h3>
            </div>
            <form method="post" action="" id="editDocumentForm">
                {% csrf_token %}
                <div class="px-6 py-4 space-y-4">
                    <div>
                        <label for="edit_caption" class="block text-sm font-medium text-gray-700 mb-2">Caption</label>
                        <input type="text" name="caption" id="edit_caption" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="edit_alt_text" class="block text-sm font-medium text-gray-700 mb-2">Alt Text</label>
                        <input type="text" name="alt_text" id="edit_alt_text" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="edit_order" class="block text-sm font-medium text-gray-700 mb-2">Urutan</label>
                        <input type="number" name="order" id="edit_order" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
                    <button type="button" onclick="closeEditDocumentModal()" 
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                        Batal
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function openAddDocumentModal() {
    document.getElementById('addDocumentModal').classList.remove('hidden');
}

function closeAddDocumentModal() {
    document.getElementById('addDocumentModal').classList.add('hidden');
    document.getElementById('documentForm').reset();
    document.getElementById('filePreview').classList.add('hidden');
}

function openEditDocumentModal() {
    document.getElementById('editDocumentModal').classList.remove('hidden');
}

function closeEditDocumentModal() {
    document.getElementById('editDocumentModal').classList.add('hidden');
}

function editDocument(pk, caption, altText, order) {
    document.getElementById('edit_caption').value = caption || '';
    document.getElementById('edit_alt_text').value = altText || '';
    document.getElementById('edit_order').value = order || 0;
    document.getElementById('editDocumentForm').action = `/admin/blog/documents/${pk}/edit/`;
    openEditDocumentModal();
}

// Upload area functionality
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('id_dokumen');
const filePreview = document.getElementById('filePreview');
const fileName = document.getElementById('fileName');
const fileSize = document.getElementById('fileSize');

uploadArea.addEventListener('click', () => fileInput.click());

uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', () => {
    uploadArea.classList.remove('dragover');
});

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        fileInput.files = files;
        previewFile(files[0]);
    }
});

fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        previewFile(e.target.files[0]);
    }
});

function previewFile(file) {
    fileName.textContent = file.name;
    fileSize.textContent = formatFileSize(file.size);
    filePreview.classList.remove('hidden');
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Close modals when clicking outside
document.addEventListener('click', (e) => {
    if (e.target.id === 'addDocumentModal') {
        closeAddDocumentModal();
    }
    if (e.target.id === 'editDocumentModal') {
        closeEditDocumentModal();
    }
});
</script>
{% endblock %}