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

{% block title %}Daftar Kategori - Inventaris HMI{% endblock %}
{% block page_title %}Daftar Kategori{% endblock %}
{% block page_subtitle %}Kelola kategori barang inventaris{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 py-6 px-4 sm:py-8 sm:px-6 lg:px-8">
    <div class="space-y-8 max-w-7xl mx-auto">
        <!-- Header Actions -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border-2 border-green-100">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex-1">
                    <div class="flex items-center space-x-3 mb-2">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-md">
                            <i class="fas fa-folder text-white text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Kategori Barang</h1>
                            <p class="text-sm sm:text-base text-gray-600 mt-1">Kelola klasifikasi dan pengelompokan barang inventaris</p>
                        </div>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'inventaris:kategori_create' %}" 
                       class="inline-flex items-center px-4 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-md hover:shadow-lg font-medium">
                        <i class="fas fa-plus mr-2"></i>
                        <span class="hidden sm:inline">Tambah Kategori</span>
                        <span class="sm:hidden">Tambah</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Grid View -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            {% for kategori in page_obj %}
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200 hover:border-green-300 transition-all duration-300 hover:shadow-2xl transform hover:-translate-y-2">
                    <!-- Header -->
                    <div class="bg-gradient-to-br from-green-500 via-green-600 to-emerald-600 px-6 py-5 text-white relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"></div>
                        <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/5 rounded-full -ml-16 -mb-16"></div>
                        <div class="relative z-10 flex items-center justify-between">
                            <div class="flex items-center space-x-4 flex-1 min-w-0">
                                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                                    <i class="fas fa-folder text-2xl"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center space-x-2 mb-1.5">
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-white/25 backdrop-blur-sm text-white border border-white/30 shadow-sm">
                                            {{ kategori.kode }}
                                        </span>
                                    </div>
                                    <h3 class="font-bold text-lg truncate leading-tight">{{ kategori.nama }}</h3>
                                </div>
                            </div>
                            <div class="text-right ml-4 flex-shrink-0">
                                <div class="text-3xl font-bold drop-shadow-lg">{{ kategori.barang_set.count|default:0 }}</div>
                                <div class="text-green-100 text-xs font-medium mt-0.5">Items</div>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="p-6">
                        <!-- Description -->
                        <div class="mb-5">
                            {% if kategori.deskripsi %}
                                <p class="text-gray-600 text-sm leading-relaxed line-clamp-2">{{ kategori.deskripsi }}</p>
                            {% else %}
                                <p class="text-gray-400 text-sm italic">Tidak ada deskripsi</p>
                            {% endif %}
                        </div>

                        <!-- Stats -->
                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div class="text-center p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl border-2 border-green-200 hover:border-green-300 transition-all duration-200 shadow-sm hover:shadow-md">
                                <div class="flex items-center justify-center mb-2">
                                    <i class="fas fa-check-circle text-green-600 text-base mr-1.5"></i>
                                    <div class="text-2xl font-bold text-green-600">{{ kategori.barang_set.count|default:0 }}</div>
                                </div>
                                <div class="text-xs text-gray-600 font-semibold">Total</div>
                            </div>
                            <div class="text-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200 hover:border-blue-300 transition-all duration-200 shadow-sm hover:shadow-md">
                                <div class="flex items-center justify-center mb-2">
                                    <i class="fas fa-box text-blue-600 text-base mr-1.5"></i>
                                    <div class="text-2xl font-bold text-blue-600">{{ kategori.barang_set.count|default:0 }}</div>
                                </div>
                                <div class="text-xs text-gray-600 font-semibold">Barang</div>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="flex items-center space-x-3">
                            <a href="{% url 'inventaris:barang_list' %}?kategori={{ kategori.id }}" 
                               class="flex-1 inline-flex items-center justify-center px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl transition-all duration-200 text-sm font-semibold shadow-md hover:shadow-lg">
                                <i class="fas fa-eye mr-2 text-sm"></i>
                                <span>Lihat</span>
                            </a>
                            <a href="{% url 'inventaris:kategori_update' kategori.pk %}" 
                               class="inline-flex items-center justify-center px-3.5 py-2.5 bg-yellow-100 hover:bg-yellow-200 text-yellow-700 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg">
                                <i class="fas fa-edit text-base"></i>
                            </a>
                            <button onclick="deleteKategori({{ kategori.pk }}, '{{ kategori.nama }}')" 
                                    class="inline-flex items-center justify-center px-3.5 py-2.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg">
                                <i class="fas fa-trash text-base"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-t-2 border-gray-200">
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span class="flex items-center">
                                <i class="fas fa-calendar-alt mr-2 text-green-600 text-sm"></i>
                                <span class="font-medium">{{ kategori.created_at|date:"d M Y" }}</span>
                            </span>
                            <span class="flex items-center">
                                <i class="fas fa-sync-alt mr-2 text-green-600 text-sm"></i>
                                <span class="font-medium">{{ kategori.updated_at|timesince }} lalu</span>
                            </span>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="md:col-span-2 lg:col-span-3">
                    <div class="text-center py-20 bg-white rounded-xl shadow-lg border-2 border-dashed border-gray-200">
                        <div class="w-28 h-28 bg-gradient-to-br from-green-100 via-emerald-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                            <i class="fas fa-folder-plus text-5xl text-green-600"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">Belum ada kategori</h3>
                        <p class="text-gray-600 mb-8 max-w-md mx-auto">Buat kategori untuk mengklasifikasikan dan mengelompokkan barang inventaris dengan lebih terorganisir</p>
                        <a href="{% url 'inventaris:kategori_create' %}" 
                           class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-lg hover:shadow-xl font-medium">
                            <i class="fas fa-plus mr-2"></i>
                            Tambah Kategori Pertama
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
            <div class="bg-white rounded-2xl shadow-xl px-6 sm:px-8 py-6 border-2 border-gray-200">
                <div class="flex items-center justify-between">
                    <div class="flex-1 flex justify-between sm:hidden">
                        {% if page_obj.has_previous %}
                            <a href="?page={{ page_obj.previous_page_number }}" 
                               class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors font-medium">
                                <i class="fas fa-chevron-left mr-2"></i>Previous
                            </a>
                        {% endif %}
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}" 
                               class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors font-medium">
                                Next<i class="fas fa-chevron-right ml-2"></i>
                            </a>
                        {% endif %}
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Menampilkan <span class="font-semibold text-green-600">{{ page_obj.start_index }}</span> sampai 
                                <span class="font-semibold text-green-600">{{ page_obj.end_index }}</span> dari 
                                <span class="font-semibold text-green-600">{{ page_obj.paginator.count }}</span> kategori
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-lg shadow-sm -space-x-px" aria-label="Pagination">
                                {% if page_obj.has_previous %}
                                    <a href="?page={{ page_obj.previous_page_number }}" 
                                       class="relative inline-flex items-center px-3 py-2 rounded-l-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-green-50 hover:text-green-600 transition-colors">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                {% endif %}
                                
                                {% for num in page_obj.paginator.page_range %}
                                    {% if page_obj.number == num %}
                                        <span class="relative inline-flex items-center px-4 py-2 border border-green-500 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-semibold">
                                            {{ num }}
                                        </span>
                                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                        <a href="?page={{ num }}" 
                                           class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-green-50 hover:text-green-600 transition-colors">
                                            {{ num }}
                                        </a>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if page_obj.has_next %}
                                    <a href="?page={{ page_obj.next_page_number }}" 
                                       class="relative inline-flex items-center px-3 py-2 rounded-r-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-green-50 hover:text-green-600 transition-colors">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                {% endif %}
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Delete kategori
async function deleteKategori(id, nama) {
    const confirmed = await confirmDelete(`Apakah Anda yakin ingin menghapus kategori "${nama}"?\n\nSemua barang dalam kategori ini akan terpengaruh.`);
    if (confirmed) {
        // Create and submit delete form
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{% url "inventaris:kategori_delete" 0 %}'.replace('0', id);
        
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = 'csrfmiddlewaretoken';
        csrfInput.value = csrfToken;
        
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
{% endblock %}