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

{% block title %}Manajemen Kategori Layanan - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
{% endblock %}

{% block content %}
{% csrf_token %}
<div class="container-fluid px-2 sm:px-4 lg:px-6" id="categoryManager">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 sm:mb-6 gap-4">
        <div>
            <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 mb-1">Manajemen Kategori Layanan</h1>
            <p class="text-sm sm:text-base text-gray-600">Kelola kategori layanan dan program HMI</p>
        </div>
        <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
            <a href="{% url 'admin_panel:layanan:admin_service_category_create' %}" 
               class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-plus mr-2"></i>Tambah Kategori
            </a>
        </div>
    </div>
    
    <!-- Search & Filter -->
    <div class="bg-white rounded-xl shadow-sm p-4 sm:p-6 mb-6">
        <div class="flex flex-col sm:flex-row gap-4">
            <div class="flex-1">
                <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 text-sm"></i>
                    </div>
                    <input type="text" 
                           id="searchInput"
                           oninput="filterCategories()"
                           placeholder="Cari kategori..."
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
                </div>
            </div>
            <div class="flex gap-2">
                <select id="statusFilter" onchange="filterCategories()" class="px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
                    <option value="">Semua Status</option>
                    <option value="active">Aktif</option>
                    <option value="inactive">Tidak Aktif</option>
                </select>
                            </div>
                            </div>
                        </div>
                        
    <!-- Categories Grid -->
    <div id="categoriesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 mb-6">
        {% for category in categories %}
        <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden category-card" data-slug="{{ category.slug }}">
            <!-- Category Header -->
            <div class="p-4 sm:p-6">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex items-center flex-1">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                            <i class="{{ category.icon|default:'fas fa-cog' }} text-green-600 text-lg"></i>
                            </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="font-semibold text-gray-800 text-sm sm:text-base truncate">{{ category.name }}</h3>
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium mt-1 {% if category.is_active %}bg-green-100 text-green-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                                {% if category.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                            </span>
                        </div>
                    </div>
                </div>
                
                <p class="text-gray-600 text-xs sm:text-sm mb-4 line-clamp-2">{{ category.description|default:"" }}</p>
                
                <!-- Stats -->
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div class="text-center bg-gray-50 rounded-lg p-2">
                        <div class="text-lg font-bold text-gray-800">{{ category.order }}</div>
                        <div class="text-xs text-gray-500">Urutan</div>
                    </div>
                    <div class="text-center bg-gray-50 rounded-lg p-2">
                        <div class="text-lg font-bold text-gray-800">{{ category.service_count|default:0 }}</div>
                        <div class="text-xs text-gray-500">Layanan</div>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="flex gap-2">
                    <a href="{% url 'admin_panel:layanan:admin_service_category_update' category.slug %}" 
                       class="flex-1 bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
                        <i class="fas fa-edit mr-1"></i>Edit
                    </a>
                    <a href="{% url 'admin_panel:layanan:admin_service_category_delete' category.slug %}" 
                       class="flex-1 bg-red-50 hover:bg-red-100 text-red-700 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
                        <i class="fas fa-trash mr-1"></i>Hapus
                    </a>
                </div>
                    </div>
            
            <!-- Footer -->
            <div class="bg-gray-50 px-4 py-3 border-t border-gray-200">
                <div class="flex justify-between text-xs text-gray-500">
                    <span>Dibuat: {{ category.created_at|date:"d M Y" }}</span>
                    <span>Updated: {{ category.updated_at|date:"d M Y" }}</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- Empty State -->
    <div id="emptyState" class="text-center py-12" style="display: none;">
        <div class="text-gray-400 mb-4">
            <i class="fas fa-tags text-4xl sm:text-5xl"></i>
        </div>
        <h4 class="text-gray-600 text-lg sm:text-xl font-semibold mb-2">Tidak ada kategori ditemukan</h4>
        <p class="text-gray-500 text-sm sm:text-base mb-6">Mulai dengan membuat kategori layanan pertama.</p>
        <a href="{% url 'admin_panel:layanan:admin_service_category_create' %}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
            <i class="fas fa-plus mr-2"></i>Tambah Kategori Pertama
        </a>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Search and filter functions
function filterCategories() {
    const searchQuery = document.getElementById('searchInput').value.toLowerCase();
    const statusFilter = document.getElementById('statusFilter').value;
    const categoryCards = document.querySelectorAll('.category-card');
    let visibleCount = 0;
    
    categoryCards.forEach(card => {
        const name = card.querySelector('h3').textContent.toLowerCase();
        const description = card.querySelector('p').textContent.toLowerCase();
        const statusElement = card.querySelector('span');
        const isActive = statusElement.textContent.includes('Aktif');
        
        const matchesSearch = name.includes(searchQuery) || description.includes(searchQuery);
        const matchesStatus = statusFilter === '' || 
                            (statusFilter === 'active' && isActive) ||
                            (statusFilter === 'inactive' && !isActive);
        
        if (matchesSearch && matchesStatus) {
            card.style.display = 'block';
            visibleCount++;
        } else {
            card.style.display = 'none';
        }
    });
    
    // Show/hide empty state
    const emptyState = document.getElementById('emptyState');
    const categoriesGrid = document.getElementById('categoriesGrid');
    
    if (visibleCount === 0) {
        categoriesGrid.style.display = 'none';
        emptyState.style.display = 'block';
    } else {
        categoriesGrid.style.display = 'grid';
        emptyState.style.display = 'none';
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    console.log('Category manager initialized');
});
</script>
{% endblock %}