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

{% block title %}Kategori Dokumentasi{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-6 md:p-8 mb-8 text-white shadow-lg">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
            <div class="mb-4 md:mb-0">
                <h1 class="text-2xl md:text-3xl font-bold mb-2">
                    <i class="fas fa-folder mr-2"></i>
                    Kategori Dokumentasi
                </h1>
                <p class="text-purple-100 text-sm md:text-base">Kelola kategori untuk dokumentasi</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{% url 'admin_panel:dokumentasi_admin:dokumentasi_list' %}" 
                   class="inline-flex items-center px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali ke Dokumentasi
                </a>
                <a href="{% url 'admin_panel:dokumentasi_admin:kategori_create' %}" 
                   class="inline-flex items-center px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
                    <i class="fas fa-plus mr-2"></i>
                    Tambah Kategori
                </a>
            </div>
        </div>
    </div>

    <!-- Kategori Grid -->
    {% if kategori_list %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
        {% for kategori in kategori_list %}
        <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col">
            <div class="p-4 md:p-6 flex-1">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center flex-1 min-w-0">
                        <div class="w-10 h-10 md:w-12 md:h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="fas fa-folder text-purple-600 text-lg md:text-xl"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <h3 class="text-base md:text-lg font-semibold text-gray-900 truncate">{{ kategori.nama }}</h3>
                            <p class="text-xs md:text-sm text-gray-500 font-mono truncate">{{ kategori.slug }}</p>
                        </div>
                    </div>
                </div>
                
                {% if kategori.deskripsi %}
                <p class="text-xs md:text-sm text-gray-600 mb-4 line-clamp-2">{{ kategori.deskripsi|truncatewords:15 }}</p>
                {% endif %}
                
                <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                    <div class="flex items-center text-xs md:text-sm text-gray-500">
                        <i class="fas fa-file-alt mr-2"></i>
                        <span>{{ kategori.dokumen_count }} dokumen</span>
                    </div>
                </div>
            </div>
            
            <div class="px-4 md:px-6 pb-4 md:pb-6 pt-0 border-t border-gray-200">
                <div class="grid grid-cols-2 gap-2">
                    <a href="{% url 'admin_panel:dokumentasi_admin:kategori_edit' kategori.pk %}" 
                       class="px-3 py-2 bg-yellow-50 text-yellow-600 rounded-lg text-xs font-medium hover:bg-yellow-100 transition-colors text-center">
                        <i class="fas fa-edit mr-1"></i>Edit
                    </a>
                    {% if kategori.dokumen_count == 0 %}
                    <button onclick="openDeleteKategoriModal({{ kategori.pk }}, '{{ kategori.nama|escapejs }}', '{{ kategori.slug|escapejs }}', '{{ kategori.deskripsi|truncatewords:20|escapejs }}')" 
                            class="px-3 py-2 bg-red-50 text-red-600 rounded-lg text-xs font-medium hover:bg-red-100 transition-colors">
                        <i class="fas fa-trash mr-1"></i>Hapus
                    </button>
                    {% else %}
                    <button onclick="openDeleteKategoriModal({{ kategori.pk }}, '{{ kategori.nama|escapejs }}', '{{ kategori.slug|escapejs }}', '{{ kategori.deskripsi|truncatewords:20|escapejs }}', {{ kategori.dokumen_count }})" 
                            class="px-3 py-2 bg-red-50 text-red-600 rounded-lg text-xs font-medium hover:bg-red-100 transition-colors">
                        <i class="fas fa-trash mr-1"></i>Hapus
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <!-- Empty State -->
    <div class="bg-white rounded-xl shadow-md p-12 text-center">
        <i class="fas fa-folder-open text-gray-400 text-6xl mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Belum Ada Kategori</h3>
        <p class="text-gray-500 mb-6">Mulai tambahkan kategori untuk mengorganisir dokumentasi.</p>
        <a href="{% url 'admin_panel:dokumentasi_admin:kategori_create' %}" 
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700">
            <i class="fas fa-plus mr-2"></i>
            Tambah Kategori Pertama
        </a>
    </div>
    {% endif %}
</div>

<!-- Delete Kategori Modal -->
<div id="deleteKategoriModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="bg-red-50 border-b border-red-200 px-6 py-4 rounded-t-xl">
            <div class="flex items-center">
                <i class="fas fa-exclamation-triangle text-red-600 text-2xl mr-3"></i>
                <h3 class="text-lg font-semibold text-red-900">Hapus Kategori</h3>
            </div>
        </div>
        
        <div class="p-6">
            <p class="text-gray-700 mb-4">Anda akan menghapus kategori berikut:</p>
            
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4">
                <div class="flex items-start">
                    <i class="fas fa-folder text-purple-500 text-2xl mr-4 mt-1"></i>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-900 mb-2" id="deleteKategoriNama"></h4>
                        <div class="space-y-1 text-sm text-gray-600">
                            <p class="font-mono" id="deleteKategoriSlug"></p>
                            <p id="deleteKategoriDeskripsi"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Warning jika ada dokumen -->
            <div id="deleteKategoriWarning" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4 hidden">
                <div class="flex items-start">
                    <i class="fas fa-exclamation-circle text-red-600 mr-2 mt-0.5"></i>
                    <div class="text-sm text-red-800">
                        <p class="font-semibold mb-2">Kategori ini tidak dapat dihapus karena masih memiliki dokumen:</p>
                        <ul id="deleteKategoriDokumenList" class="list-disc list-inside space-y-1 max-h-48 overflow-y-auto">
                        </ul>
                    </div>
                </div>
            </div>

            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-yellow-600 mr-2 mt-0.5"></i>
                    <div class="text-sm text-yellow-800">
                        <p class="font-semibold mb-1">Perhatian:</p>
                        <ul class="list-disc list-inside space-y-1">
                            <li>Kategori hanya dapat dihapus jika tidak memiliki dokumen</li>
                            <li>Tindakan ini tidak dapat dibatalkan</li>
                        </ul>
                    </div>
                </div>
            </div>

            <form id="deleteKategoriForm" method="post" class="space-y-4">
                {% csrf_token %}
                <div class="flex flex-col sm:flex-row gap-3 justify-end">
                    <button type="button" onclick="closeDeleteKategoriModal()" 
                            class="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors font-medium">
                        <i class="fas fa-times mr-2"></i>Batal
                    </button>
                    <button type="submit" id="deleteKategoriSubmit"
                            class="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors font-medium">
                        <i class="fas fa-trash mr-2"></i>Ya, Hapus Kategori
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openDeleteKategoriModal(pk, nama, slug, deskripsi, dokumenCount) {
    document.getElementById('deleteKategoriNama').textContent = nama;
    document.getElementById('deleteKategoriSlug').textContent = slug;
    document.getElementById('deleteKategoriDeskripsi').textContent = deskripsi || '-';
    document.getElementById('deleteKategoriForm').action = "{% url 'admin_panel:dokumentasi_admin:kategori_delete' 0 %}".replace('0', pk);
    
    const warningDiv = document.getElementById('deleteKategoriWarning');
    const dokumenList = document.getElementById('deleteKategoriDokumenList');
    const submitBtn = document.getElementById('deleteKategoriSubmit');
    
    if (dokumenCount && dokumenCount > 0) {
        // Fetch dokumen yang menggunakan kategori ini
        fetch(`/admin/dokumentasi/kategori/${pk}/dokumen/`)
            .then(response => response.json())
            .then(data => {
                if (data.dokumen && data.dokumen.length > 0) {
                    dokumenList.innerHTML = '';
                    data.dokumen.forEach(doc => {
                        const li = document.createElement('li');
                        li.textContent = doc.judul;
                        dokumenList.appendChild(li);
                    });
                    warningDiv.classList.remove('hidden');
                    submitBtn.disabled = true;
                    submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
                } else {
                    warningDiv.classList.add('hidden');
                    submitBtn.disabled = false;
                    submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                if (dokumenCount > 0) {
                    warningDiv.classList.remove('hidden');
                    dokumenList.innerHTML = `<li>Kategori ini memiliki ${dokumenCount} dokumen. Harap pindahkan atau hapus dokumen terlebih dahulu.</li>`;
                    submitBtn.disabled = true;
                    submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
                }
            });
    } else {
        warningDiv.classList.add('hidden');
        submitBtn.disabled = false;
        submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
    }
    
    document.getElementById('deleteKategoriModal').classList.remove('hidden');
}

function closeDeleteKategoriModal() {
    document.getElementById('deleteKategoriModal').classList.add('hidden');
    document.getElementById('deleteKategoriWarning').classList.add('hidden');
    document.getElementById('deleteKategoriDokumenList').innerHTML = '';
}

// Close modal when clicking outside
document.getElementById('deleteKategoriModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteKategoriModal();
    }
});
</script>
{% endblock %}