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

{% block title %}Daftar Lokasi - Inventaris HMI{% endblock %}
{% block page_title %}Daftar Lokasi{% endblock %}
{% block page_subtitle %}Kelola lokasi penyimpanan barang{% 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">Lokasi Penyimpanan</h1>
            <p class="mt-2 text-gray-600">Kelola lokasi penyimpanan barang inventaris</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{% url 'inventaris:lokasi_create' %}" class="btn-primary">
                <i class="fas fa-plus mr-2"></i>Tambah Lokasi
            </a>
        </div>
    </div>

    <!-- Grid View -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for lokasi in page_obj %}
            <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                <!-- Header -->
                <div class="bg-gradient-to-r from-red-500 to-red-600 px-6 py-4 text-white">
                    <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-map-marker-alt text-lg"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg">{{ lokasi.kode }}</h3>
                                <p class="text-red-100 text-sm">{{ lokasi.nama }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold">{{ lokasi.barang_set.count|default:0 }}</div>
                            <div class="text-red-100 text-xs">Items</div>
                        </div>
                    </div>
                </div>

                <!-- Content -->
                <div class="p-6">
                    <!-- Address Information -->
                    <div class="mb-4">
                        <div class="flex items-start space-x-3">
                            <i class="fas fa-building text-gray-400 mt-1"></i>
                            <div class="flex-1">
                                {% if lokasi.gedung %}
                                    <p class="text-sm font-medium text-gray-900">{{ lokasi.gedung }}</p>
                                {% endif %}
                                {% if lokasi.lantai or lokasi.ruangan %}
                                    <p class="text-sm text-gray-600">
                                        {% if lokasi.lantai %}Lantai {{ lokasi.lantai }}{% endif %}
                                        {% if lokasi.lantai and lokasi.ruangan %}, {% endif %}
                                        {% if lokasi.ruangan %}Ruang {{ lokasi.ruangan }}{% endif %}
                                    </p>
                                {% endif %}
                                {% if not lokasi.gedung and not lokasi.lantai and not lokasi.ruangan %}
                                    <p class="text-sm text-gray-400 italic">Detail lokasi belum diisi</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    {% if lokasi.deskripsi %}
                        <div class="mb-4">
                            <p class="text-gray-600 text-sm">{{ lokasi.deskripsi|truncatechars:100 }}</p>
                        </div>
                    {% endif %}

                    <!-- Stats -->
                    <div class="grid grid-cols-3 gap-2 mb-6">
                        <div class="text-center p-2 bg-success-50 rounded-lg">
                            <div class="text-sm font-bold text-success-600">{{ lokasi.barang_set.all|length|default:0 }}</div>
                            <div class="text-xs text-gray-600">Aktif</div>
                        </div>
                        <div class="text-center p-2 bg-warning-50 rounded-lg">
                            <div class="text-sm font-bold text-warning-600">{{ lokasi.barang_set.all|length|default:0 }}</div>
                            <div class="text-xs text-gray-600">Dipinjam</div>
                        </div>
                        <div class="text-center p-2 bg-danger-50 rounded-lg">
                            <div class="text-sm font-bold text-danger-600">{{ lokasi.barang_set.all|length|default:0 }}</div>
                            <div class="text-xs text-gray-600">Rusak</div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center space-x-2">
                        <a href="{% url 'inventaris:barang_list' %}?lokasi={{ lokasi.id }}" 
                           class="flex-1 btn-secondary btn-sm">
                            <i class="fas fa-eye mr-1"></i>Lihat Barang
                        </a>
                        <a href="{% url 'inventaris:lokasi_update' lokasi.pk %}" 
                           class="btn-warning btn-sm">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button onclick="deleteLokasi({{ lokasi.pk }}, '{{ lokasi.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 {{ lokasi.created_at|date:"d M Y" }}
                        </span>
                        <span class="flex items-center">
                            <i class="fas fa-map text-gray-400 mr-1"></i>
                            {{ lokasi.kode }}
                        </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-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-map-marker-plus text-4xl text-red-600"></i>
                    </div>
                    <h3 class="text-xl font-medium text-gray-900 mb-2">Belum ada lokasi</h3>
                    <p class="text-gray-600 mb-6">Buat lokasi penyimpanan untuk mengorganisir barang inventaris</p>
                    <a href="{% url 'inventaris:lokasi_create' %}" class="btn-primary">
                        <i class="fas fa-plus mr-2"></i>Tambah Lokasi 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> lokasi
                        </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-red-500 bg-red-50 text-sm font-medium text-red-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 lokasi
async function deleteLokasi(id, nama) {
    const itemCount = {{ page_obj.object_list.0.barang_set.count|default:0 }}; // This would be dynamic in real implementation
    
    let message = `Apakah Anda yakin ingin menghapus lokasi "${nama}"?`;
    if (itemCount > 0) {
        message += `\n\nPerhatian: Ada ${itemCount} barang di lokasi ini yang akan terpengaruh.`;
    }
    
    const confirmed = await confirmDelete(message);
    if (confirmed) {
        // Create and submit delete form
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{% url "inventaris:lokasi_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 %}