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

{% block title %}Daftar Kategori - Admin Panel{% endblock %}
{% block page_title %}Daftar Kategori{% endblock %}

{% block content %}
<!-- Mobile-First Responsive Container -->
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-4 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header Section -->
        <div class="mb-6 sm:mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl flex items-center justify-center">
                        <i class="fas fa-folder text-white text-lg"></i>
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">Daftar Kategori</h1>
                        <p class="text-sm text-gray-600 mt-1">Kelola kategori barang inventaris</p>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                    <a href="{% url 'inventaris_admin:dashboard' %}" 
                       class="inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-200 shadow-sm">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span class="hidden sm:inline">Kembali Dashboard</span>
                        <span class="sm:hidden">Dashboard</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
            <!-- Total Kategori -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl transition-shadow duration-200">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-folder text-purple-600 text-lg"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500 truncate">Total Kategori</p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900">{{ page_obj.paginator.count }}</p>
                    </div>
                </div>
            </div>

            <!-- Kategori Aktif -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl transition-shadow duration-200">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-check-circle text-green-600 text-lg"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500 truncate">Aktif</p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900">{{ kategori_aktif|default:0 }}</p>
                    </div>
                </div>
            </div>

            <!-- Total Barang -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl transition-shadow duration-200">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-boxes text-blue-600 text-lg"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500 truncate">Total Barang</p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900">{{ total_barang|default:0 }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search Section -->
        <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 mb-6 sm:mb-8">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
                <!-- Search -->
                <div class="flex-1 max-w-md">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" 
                               placeholder="Cari kategori..." 
                               class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-purple-500 focus:border-purple-500 sm:text-sm"
                               id="search-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- Kategori List -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- Desktop Table Header -->
            <div class="hidden lg:block">
                <div class="bg-gray-50 px-6 py-3 border-b border-gray-200">
                    <div class="grid grid-cols-12 gap-4 text-xs font-medium text-gray-500 uppercase tracking-wide">
                        <div class="col-span-4">Kategori</div>
                        <div class="col-span-3">Deskripsi</div>
                        <div class="col-span-2">Jumlah Barang</div>
                        <div class="col-span-2">Status</div>
                        <div class="col-span-1 text-center">Aksi</div>
                    </div>
                </div>
            </div>

            <!-- Kategori Items -->
            <div class="divide-y divide-gray-200">
                {% for kategori in page_obj %}
                    <!-- Desktop Row -->
                    <div class="hidden lg:block hover:bg-gray-50 transition-colors duration-200">
                        <div class="px-6 py-4">
                            <div class="grid grid-cols-12 gap-4 items-center">
                                <!-- Kategori Info -->
                                <div class="col-span-4">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-folder text-purple-600"></i>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-sm font-medium text-gray-900 truncate">{{ kategori.nama }}</p>
                                            <p class="text-xs text-gray-500">{{ kategori.kode_kategori }}</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Deskripsi -->
                                <div class="col-span-3">
                                    <p class="text-sm text-gray-900 truncate">{{ kategori.deskripsi|default:"-" }}</p>
                                </div>

                                <!-- Jumlah Barang -->
                                <div class="col-span-2">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ kategori.barang_set.count }} barang
                                    </span>
                                </div>

                                <!-- Status -->
                                <div class="col-span-2">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        {% if kategori.is_active %}bg-green-100 text-green-800
                                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                                        {% if kategori.is_active %}Aktif{% else %}Nonaktif{% endif %}
                                    </span>
                                </div>

                                <!-- Actions -->
                                <div class="col-span-1">
                                    <div class="flex items-center justify-center space-x-1">
                                        <a href="{% url 'inventaris_admin:kategori_detail' kategori.pk %}" 
                                           class="text-blue-600 hover:text-blue-800 p-1 rounded-lg hover:bg-blue-50 transition-colors duration-200" title="Lihat Detail">
                                            <i class="fas fa-eye text-sm"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Card -->
                    <div class="lg:hidden p-4 hover:bg-gray-50 transition-colors duration-200">
                        <div class="flex items-start space-x-3">
                            <!-- Icon -->
                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-folder text-purple-600 text-lg"></i>
                            </div>

                            <!-- Content -->
                            <div class="flex-1 min-w-0">
                                <div class="flex items-start justify-between">
                                    <div class="min-w-0 flex-1">
                                        <h3 class="text-sm font-medium text-gray-900 truncate">{{ kategori.nama }}</h3>
                                        <p class="text-xs text-gray-500 mt-1">{{ kategori.kode_kategori }}</p>
                                        
                                        <!-- Status Badges -->
                                        <div class="flex flex-wrap gap-1 mt-2">
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                {{ kategori.barang_set.count }} barang
                                            </span>
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                                {% if kategori.is_active %}bg-green-100 text-green-800
                                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                                {% if kategori.is_active %}Aktif{% else %}Nonaktif{% endif %}
                                            </span>
                                        </div>
                                        
                                        {% if kategori.deskripsi %}
                                        <p class="text-xs text-gray-500 mt-2">{{ kategori.deskripsi }}</p>
                                        {% endif %}
                                    </div>

                                    <!-- Mobile Actions -->
                                    <div class="flex items-center space-x-1 ml-2">
                                        <a href="{% url 'inventaris_admin:kategori_detail' kategori.pk %}" 
                                           class="text-blue-600 hover:text-blue-800 p-2 rounded-lg hover:bg-blue-50 transition-colors duration-200" title="Lihat Detail">
                                            <i class="fas fa-eye text-sm"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <!-- Empty State -->
                    <div class="text-center py-12">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-folder text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Belum ada kategori</h3>
                        <p class="text-gray-500 mb-6">Mulai dengan menambahkan kategori pertama</p>
                    </div>
                {% endfor %}
            </div>
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
            <div class="mt-6 sm:mt-8">
                <nav 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="relative 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-chevron-left mr-2"></i>Sebelumnya
                            </a>
                        {% endif %}
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}" 
                               class="ml-3 relative 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">
                                Selanjutnya<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-medium">{{ page_obj.start_index }}</span>
                                sampai
                                <span class="font-medium">{{ page_obj.end_index }}</span>
                                dari
                                <span class="font-medium">{{ page_obj.paginator.count }}</span>
                                hasil
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                                {% if page_obj.has_previous %}
                                    <a href="?page={{ page_obj.previous_page_number }}" 
                                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <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-purple-500 bg-purple-50 text-sm font-medium text-purple-600">
                                            {{ 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-gray-50">
                                            {{ num }}
                                        </a>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if page_obj.has_next %}
                                    <a href="?page={{ page_obj.next_page_number }}" 
                                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                {% endif %}
                            </nav>
                        </div>
                    </div>
                </nav>
            </div>
        {% endif %}
    </div>
</div>


<script>
// Search functionality
document.getElementById('search-input').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const items = document.querySelectorAll('[data-search]');
    
    items.forEach(item => {
        const text = item.textContent.toLowerCase();
        if (text.includes(searchTerm)) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
});


// Mobile-friendly interactions
document.addEventListener('DOMContentLoaded', function() {
    if ('ontouchstart' in window) {
        document.querySelectorAll('a, button').forEach(element => {
            element.addEventListener('touchstart', function() {
                this.style.transform = 'scale(0.98)';
            });
            element.addEventListener('touchend', function() {
                this.style.transform = 'scale(1)';
            });
        });
    }
});
</script>

<style>
/* Mobile-first responsive improvements */
@media (max-width: 640px) {
    .grid-cols-2 {
        gap: 0.75rem;
    }
    
    .p-4 {
        padding: 1rem;
    }
    
    .text-xs {
        font-size: 0.75rem;
    }
    
    .text-sm {
        font-size: 0.875rem;
    }
}

/* Enhanced hover effects */
.hover\:shadow-xl:hover {
}

/* Smooth transitions */
* {
    transition: all 0.2s ease;
}

/* Custom scrollbar for mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }
}
</style>
{% endblock %}