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

{% block title %}Daftar Kondisi - Inventaris HMI{% endblock %}
{% block page_title %}Daftar Kondisi{% endblock %}
{% block page_subtitle %}Kelola kondisi barang inventaris{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Kondisi Barang</h1>
            <p class="mt-2 text-gray-600">Kelola status dan kondisi barang inventaris</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{% url 'inventaris:kondisi_create' %}" class="btn-primary">
                <i class="fas fa-plus mr-2"></i>Tambah Kondisi
            </a>
        </div>
    </div>

    <!-- Grid View -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for kondisi in page_obj %}
            <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                <!-- Header -->
                <div class="px-6 py-4 text-white" style="background: linear-gradient(135deg, {{ kondisi.warna }} 0%, {{ kondisi.warna }}dd 100%);">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-thermometer-half text-lg"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg">{{ kondisi.nama }}</h3>
                                <p class="text-white/80 text-sm">
                                    {% if kondisi.kondisi == 'baru' %}Baru
                                    {% elif kondisi.kondisi == 'baik' %}Baik
                                    {% elif kondisi.kondisi == 'cukup' %}Cukup Baik
                                    {% elif kondisi.kondisi == 'rusak_ringan' %}Rusak Ringan
                                    {% elif kondisi.kondisi == 'rusak_berat' %}Rusak Berat
                                    {% elif kondisi.kondisi == 'hilang' %}Hilang
                                    {% else %}{{ kondisi.kondisi }}{% endif %}
                                </p>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold">{{ kondisi.barang_set.count|default:0 }}</div>
                            <div class="text-white/80 text-xs">Items</div>
                        </div>
                    </div>
                </div>

                <!-- Content -->
                <div class="p-6">
                    <!-- Color Indicator -->
                    <div class="mb-4 flex items-center space-x-2">
                        <div class="w-6 h-6 rounded-full border-2 border-gray-300" style="background-color: {{ kondisi.warna }};"></div>
                        <span class="text-sm text-gray-600">Warna Indikator</span>
                    </div>

                    <!-- Description -->
                    {% if kondisi.deskripsi %}
                        <p class="text-gray-600 text-sm mb-4">{{ kondisi.deskripsi|truncatechars:100 }}</p>
                    {% else %}
                        <p class="text-gray-400 text-sm mb-4 italic">Tidak ada deskripsi</p>
                    {% endif %}

                    <!-- Stats -->
                    <div class="grid grid-cols-1 gap-4 mb-6">
                        <div class="text-center p-3 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border border-green-200">
                            <div class="text-2xl font-bold text-green-600">
                                {{ kondisi.barang_set.count|default:0 }}
                            </div>
                            <div class="text-xs text-gray-600 font-medium">Total Barang</div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center space-x-2">
                        <a href="{% url 'inventaris:barang_list' %}?kondisi={{ kondisi.id }}" 
                           class="flex-1 btn-secondary btn-sm">
                            <i class="fas fa-eye mr-1"></i>Lihat Barang
                        </a>
                        <a href="{% url 'inventaris:kondisi_update' kondisi.pk %}" 
                           class="btn-warning btn-sm">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button onclick="deleteKondisi({{ kondisi.pk }}, '{{ kondisi.nama }}')" 
                                class="btn-danger btn-sm">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>

                <!-- Footer -->
                <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>
                            <i class="fas fa-clock mr-1"></i>
                            Dibuat {{ kondisi.created_at|date:"d M Y" }}
                        </span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
                               style="background-color: {{ kondisi.warna }}20; color: {{ kondisi.warna }};">
                            {% if kondisi.kondisi == 'baru' %}Baru
                            {% elif kondisi.kondisi == 'baik' %}Baik
                            {% elif kondisi.kondisi == 'cukup' %}Cukup Baik
                            {% elif kondisi.kondisi == 'rusak_ringan' %}Rusak Ringan
                            {% elif kondisi.kondisi == 'rusak_berat' %}Rusak Berat
                            {% elif kondisi.kondisi == 'hilang' %}Hilang
                            {% else %}{{ kondisi.kondisi }}{% endif %}
                        </span>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="md:col-span-2 lg:col-span-3">
                <div class="text-center py-16 bg-white rounded-xl shadow-lg">
                    <div class="w-24 h-24 bg-gradient-to-br from-warning-100 to-warning-200 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-thermometer-half text-4xl text-warning-600"></i>
                    </div>
                    <h3 class="text-xl font-medium text-gray-900 mb-2">Belum ada kondisi</h3>
                    <p class="text-gray-600 mb-6">Buat kondisi untuk mengklasifikasikan status barang inventaris</p>
                    <a href="{% url 'inventaris:kondisi_create' %}" class="btn-primary">
                        <i class="fas fa-plus mr-2"></i>Tambah Kondisi Pertama
                    </a>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
        <div class="bg-white rounded-xl shadow-lg px-6 py-4">
            <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="btn-secondary">Previous</a>
                    {% endif %}
                    {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}" class="btn-secondary">Next</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> kondisi
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md 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-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-green-500 bg-green-50 text-sm font-medium text-green-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>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// Delete kondisi
async function deleteKondisi(id, nama) {
    const confirmed = await confirmDelete(`Apakah Anda yakin ingin menghapus kondisi "${nama}"?\n\nSemua barang dengan kondisi ini akan terpengaruh.`);
    if (confirmed) {
        // Create and submit delete form
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{% url "inventaris:kondisi_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 %}