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

{% block title %}Daftar Barang - Inventaris HMI{% endblock %}
{% block page_title %}Daftar Barang{% endblock %}
{% block page_subtitle %}Kelola inventaris barang organisasi HMI{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6 px-2 sm:px-0" x-data="barangList()" x-init="init()">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900">Inventaris Barang</h1>
        </div>
        <div class="flex gap-2">
            <button onclick="toggleView()" 
                    class="flex items-center gap-2 px-3 py-2 bg-white border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
                <i class="fas fa-list" id="view-icon"></i>
                <span id="view-text" class="hidden sm:inline">List</span>
            </button>
            <a href="{% url 'inventaris:barang_create' %}" 
               class="flex items-center gap-2 px-3 sm:px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
                <i class="fas fa-plus"></i>
                <span class="hidden sm:inline">Tambah</span>
            </a>
        </div>
    </div>

    <!-- Statistics -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        <div class="bg-white rounded-lg border-2 border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex flex-col items-center gap-2">
                <p class="text-xs text-gray-600 font-medium">Total</p>
                <p class="text-2xl sm:text-3xl font-bold text-gray-900">{{ page_obj.paginator.count }}</p>
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-boxes text-green-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg border-2 border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex flex-col items-center gap-2">
                <p class="text-xs text-gray-600 font-medium">Aktif</p>
                <p class="text-2xl sm:text-3xl font-bold text-gray-900">{{ aktif_count|default:0 }}</p>
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-blue-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg border-2 border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex flex-col items-center gap-2">
                <p class="text-xs text-gray-600 font-medium">Dipinjam</p>
                <p class="text-2xl sm:text-3xl font-bold text-gray-900">{{ dipinjam_count|default:0 }}</p>
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-hand-paper text-yellow-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg border-2 border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex flex-col items-center gap-2">
                <p class="text-xs text-gray-600 font-medium">Rusak</p>
                <p class="text-2xl sm:text-3xl font-bold text-gray-900">{{ rusak_count|default:0 }}</p>
                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="bg-white rounded-xl border-2 border-gray-300 shadow-lg p-6 sm:p-8 lg:p-10">
        <!-- Filter Header -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8 pb-6 border-b-2 border-gray-200">
            <div class="flex items-center gap-3">
                <div class="w-14 h-14 sm:w-16 sm:h-16 bg-green-600 rounded-xl flex items-center justify-center shadow-md">
                    <i class="fas fa-filter text-white text-lg sm:text-xl"></i>
                </div>
                <h3 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900">Filter & Pencarian</h3>
            </div>
            <button @click="showAdvancedFilter = !showAdvancedFilter" 
                    class="flex items-center gap-2 px-4 py-3 bg-gray-100 border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-200 hover:border-gray-400 transition-all text-base font-semibold shadow-sm">
                <i class="fas fa-cog text-base"></i>
                <span x-text="showAdvancedFilter ? 'Sembunyikan' : 'Filter Lanjutan'"></span>
                <i class="fas fa-chevron-down text-sm transition-transform duration-200" 
                   :class="showAdvancedFilter ? 'rotate-180' : ''"></i>
            </button>
        </div>

        <form method="get" class="space-y-6 sm:space-y-8">
            <!-- Basic Filters -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6">
                <!-- Search -->
                <div class="sm:col-span-2 lg:col-span-2">
                    <label for="search" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-search text-green-600 mr-2"></i>Pencarian
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400 text-base"></i>
                        </div>
                        <input type="text" 
                               name="search" 
                               id="search" 
                               value="{{ search|default:'' }}" 
                               placeholder="Cari kode, nama, nomor seri..." 
                               class="w-full pl-12 pr-5 py-3.5 sm:py-4 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all shadow-sm hover:shadow-md">
                    </div>
                </div>

                <!-- Kategori -->
                <div>
                    <label for="kategori" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-folder text-green-600 mr-2"></i>Kategori
                    </label>
                    <div class="relative">
                        <select name="kategori" 
                                id="kategori" 
                                class="w-full px-5 py-3.5 sm:py-4 pr-12 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 appearance-none cursor-pointer shadow-sm hover:shadow-md transition-all">
                            <option value="">Semua Kategori</option>
                            {% for kategori in kategori_list %}
                                <option value="{{ kategori.id }}" {% if request.GET.kategori == kategori.id|stringformat:"s" %}selected{% endif %}>
                                    {{ kategori.nama }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-400 text-base"></i>
                        </div>
                    </div>
                </div>

                <!-- Status -->
                <div>
                    <label for="status" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-info-circle text-green-600 mr-2"></i>Status
                    </label>
                    <div class="relative">
                        <select name="status" 
                                id="status" 
                                class="w-full px-5 py-3.5 sm:py-4 pr-12 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 appearance-none cursor-pointer shadow-sm hover:shadow-md transition-all">
                            <option value="">Semua Status</option>
                            <option value="aktif" {% if request.GET.status == 'aktif' %}selected{% endif %}>Aktif</option>
                            <option value="nonaktif" {% if request.GET.status == 'nonaktif' %}selected{% endif %}>Nonaktif</option>
                            <option value="dipinjam" {% if request.GET.status == 'dipinjam' %}selected{% endif %}>Dipinjam</option>
                            <option value="rusak" {% if request.GET.status == 'rusak' %}selected{% endif %}>Rusak</option>
                            <option value="hilang" {% if request.GET.status == 'hilang' %}selected{% endif %}>Hilang</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-400 text-base"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Advanced Filters -->
            <div x-show="showAdvancedFilter" 
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform -translate-y-2"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-5 sm:gap-6 pt-6 border-t-2 border-gray-200 bg-gray-50 rounded-xl p-6 sm:p-8 -mx-6 sm:-mx-8 lg:-mx-10">
                <!-- Kondisi -->
                <div>
                    <label for="kondisi" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-tools text-green-600 mr-2"></i>Kondisi
                    </label>
                    <div class="relative">
                        <select name="kondisi" 
                                id="kondisi" 
                                class="w-full px-5 py-3.5 sm:py-4 pr-12 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 appearance-none cursor-pointer shadow-sm hover:shadow-md transition-all">
                            <option value="">Semua Kondisi</option>
                            {% for kondisi in kondisi_list %}
                                <option value="{{ kondisi.id }}" {% if request.GET.kondisi == kondisi.id|stringformat:"s" %}selected{% endif %}>
                                    {{ kondisi.nama }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-400 text-base"></i>
                        </div>
                    </div>
                </div>

                <!-- Lokasi -->
                <div>
                    <label for="lokasi" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-map-marker-alt text-green-600 mr-2"></i>Lokasi
                    </label>
                    <div class="relative">
                        <select name="lokasi" 
                                id="lokasi" 
                                class="w-full px-5 py-3.5 sm:py-4 pr-12 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 appearance-none cursor-pointer shadow-sm hover:shadow-md transition-all">
                            <option value="">Semua Lokasi</option>
                            {% for lokasi in lokasi_list %}
                                <option value="{{ lokasi.id }}" {% if request.GET.lokasi == lokasi.id|stringformat:"s" %}selected{% endif %}>
                                    {{ lokasi.nama }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-400 text-base"></i>
                        </div>
                    </div>
                </div>

                <!-- Tahun -->
                <div>
                    <label for="tahun_perolehan" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-calendar text-green-600 mr-2"></i>Tahun Perolehan
                    </label>
                    <input type="number" 
                           name="tahun_perolehan" 
                           id="tahun_perolehan" 
                           value="{{ request.GET.tahun_perolehan }}" 
                           placeholder="2024" 
                           min="1900" 
                           max="2100"
                           class="w-full px-5 py-3.5 sm:py-4 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 shadow-sm hover:shadow-md transition-all">
                </div>

                <!-- Harga Min -->
                <div>
                    <label for="harga_min" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-money-bill-wave text-green-600 mr-2"></i>Harga Minimum
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <span class="text-gray-500 font-bold text-base">Rp</span>
                        </div>
                        <input type="text" 
                               name="harga_min" 
                               id="harga_min" 
                               value="{% if request.GET.harga_min %}{{ request.GET.harga_min|number_idr }}{% endif %}"
                               placeholder="0"
                               class="w-full pl-14 pr-5 py-3.5 sm:py-4 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 shadow-sm hover:shadow-md transition-all"
                               data-original-value="{% if request.GET.harga_min %}{{ request.GET.harga_min }}{% else %}0{% endif %}">
                    </div>
                </div>

                <!-- Harga Max -->
                <div>
                    <label for="harga_max" class="block text-base sm:text-lg font-bold text-gray-700 mb-3">
                        <i class="fas fa-money-bill-wave text-green-600 mr-2"></i>Harga Maksimum
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <span class="text-gray-500 font-bold text-base">Rp</span>
                        </div>
                        <input type="text" 
                               name="harga_max" 
                               id="harga_max" 
                               value="{% if request.GET.harga_max %}{{ request.GET.harga_max|number_idr }}{% endif %}"
                               placeholder="0"
                               class="w-full pl-14 pr-5 py-3.5 sm:py-4 text-base bg-white border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 shadow-sm hover:shadow-md transition-all"
                               data-original-value="{% if request.GET.harga_max %}{{ request.GET.harga_max }}{% else %}0{% endif %}">
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 sm:gap-5 pt-6 border-t-2 border-gray-200">
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
                    <button type="submit" 
                            class="flex items-center justify-center gap-3 px-6 sm:px-8 py-3.5 sm:py-4 bg-green-600 text-white font-bold text-base sm:text-lg rounded-lg hover:bg-green-700 transition-all shadow-lg hover:shadow-xl transform hover:scale-105">
                        <i class="fas fa-search text-lg"></i>
                        <span>Terapkan Filter</span>
                    </button>
                    <a href="{% url 'inventaris:barang_list' %}" 
                       class="flex items-center justify-center gap-3 px-6 sm:px-8 py-3.5 sm:py-4 bg-white border-2 border-gray-400 text-gray-800 font-bold text-base sm:text-lg rounded-lg hover:bg-gray-50 hover:border-gray-500 transition-all shadow-md hover:shadow-lg">
                        <i class="fas fa-undo text-lg"></i>
                        <span>Reset</span>
                    </a>
                </div>
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
                    <button type="button" 
                            onclick="exportData()" 
                            class="flex items-center justify-center gap-2 px-5 sm:px-6 py-3.5 sm:py-4 bg-blue-600 text-white font-bold text-base sm:text-lg rounded-lg hover:bg-blue-700 transition-all shadow-lg hover:shadow-xl">
                        <i class="fas fa-download text-lg"></i>
                        <span class="hidden sm:inline">Export</span>
                    </button>
                    <button type="button" 
                            onclick="importData()" 
                            class="flex items-center justify-center gap-2 px-5 sm:px-6 py-3.5 sm:py-4 bg-yellow-600 text-white font-bold text-base sm:text-lg rounded-lg hover:bg-yellow-700 transition-all shadow-lg hover:shadow-xl">
                        <i class="fas fa-upload text-lg"></i>
                        <span class="hidden sm:inline">Import</span>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Active Filters -->
    {% if request.GET.search or request.GET.kategori or request.GET.status or request.GET.kondisi or request.GET.lokasi or request.GET.tahun_perolehan or request.GET.harga_min or request.GET.harga_max %}
        <div class="bg-green-50 border-2 border-green-200 rounded-lg p-3 sm:p-4">
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                <div class="flex flex-wrap items-center gap-2">
                    <i class="fas fa-filter text-green-600"></i>
                    <span class="text-sm font-semibold text-green-800">Filter Aktif:</span>
                    {% if request.GET.search %}
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium border border-green-300">
                            Pencarian: "{{ request.GET.search }}"
                            <a href="?{% for key, value in request.GET.items %}{% if key != 'search' %}{{ key }}={{ value }}&{% endif %}{% endfor %}" class="text-green-600 hover:text-green-800">
                                <i class="fas fa-times"></i>
                            </a>
                        </span>
                    {% endif %}
                    {% if request.GET.kategori %}
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium border border-blue-300">
                            Kategori: "{{ request.GET.kategori }}"
                            <a href="?{% for key, value in request.GET.items %}{% if key != 'kategori' %}{{ key }}={{ value }}&{% endif %}{% endfor %}" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-times"></i>
                            </a>
                        </span>
                    {% endif %}
                    {% if request.GET.status %}
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium border border-purple-300">
                            Status: "{{ request.GET.status }}"
                            <a href="?{% for key, value in request.GET.items %}{% if key != 'status' %}{{ key }}={{ value }}&{% endif %}{% endfor %}" class="text-purple-600 hover:text-purple-800">
                                <i class="fas fa-times"></i>
                            </a>
                        </span>
                    {% endif %}
                </div>
                <a href="{% url 'inventaris:barang_list' %}" 
                   class="text-sm text-green-700 hover:text-green-900 font-medium">
                    <i class="fas fa-times-circle mr-1"></i>Hapus Semua
                </a>
            </div>
        </div>
    {% endif %}


    <!-- Grid View (Default) -->
    <div id="grid-view">
        <div id="grid-content" class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
            {% for barang in page_obj %}
                <div class="bg-white rounded-lg border-2 border-gray-200 shadow-sm hover:shadow-md transition-all overflow-hidden">
                    <!-- Image -->
                    <div class="relative bg-gray-200 h-32 sm:h-48">
                        {% if barang.gambar %}
                            <img src="{{ barang.gambar.url }}" alt="{{ barang.nama }}" class="w-full h-full object-cover">
                        {% else %}
                            <div class="w-full h-full flex items-center justify-center">
                                <i class="fas fa-box text-3xl text-gray-400"></i>
                            </div>
                        {% endif %}
                        <!-- Status Badge -->
                        <div class="absolute top-2 right-2">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border
                                {% if barang.status == 'aktif' %}bg-green-100 text-green-800 border-green-300
                                {% elif barang.status == 'nonaktif' %}bg-gray-100 text-gray-800 border-gray-300
                                {% elif barang.status == 'dipinjam' %}bg-yellow-100 text-yellow-800 border-yellow-300
                                {% elif barang.status == 'rusak' %}bg-red-100 text-red-800 border-red-300
                                {% elif barang.status == 'hilang' %}bg-purple-100 text-purple-800 border-purple-300
                                {% else %}bg-gray-100 text-gray-800 border-gray-300{% endif %}">
                                {{ barang.get_status_display|slice:":3" }}
                            </span>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="p-3 sm:p-4">
                        <h3 class="text-sm font-semibold text-gray-900 truncate mb-1">{{ barang.nama }}</h3>
                        <p class="text-xs text-gray-500 truncate mb-2">{{ barang.kode_barang }}</p>
                        
                        <!-- Kondisi -->
                        <div class="mb-2">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border
                                {% if barang.kondisi.kondisi == 'baru' %}bg-green-100 text-green-800 border-green-300
                                {% elif barang.kondisi.kondisi == 'baik' %}bg-blue-100 text-blue-800 border-blue-300
                                {% elif barang.kondisi.kondisi == 'cukup' %}bg-yellow-100 text-yellow-800 border-yellow-300
                                {% elif barang.kondisi.kondisi == 'rusak_ringan' %}bg-orange-100 text-orange-800 border-orange-300
                                {% elif barang.kondisi.kondisi == 'rusak_berat' %}bg-red-100 text-red-800 border-red-300
                                {% else %}bg-gray-100 text-gray-800 border-gray-300{% endif %}">
                                {{ barang.kondisi.nama }}
                            </span>
                        </div>

                        <!-- Price -->
                        <div class="mb-3 pt-2 border-t border-gray-200">
                            <div class="flex items-center justify-between">
                                <span class="text-xs sm:text-sm font-bold text-gray-900 truncate">{{ barang.harga_perolehan|currency }}</span>
                                <span class="text-xs text-gray-500">{{ barang.tahun_perolehan }}</span>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="flex gap-2">
                            <button onclick="viewBarang('{{ barang.pk }}')" 
                                    class="flex-1 flex items-center justify-center gap-1 px-2 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-xs font-medium">
                                <i class="fas fa-eye"></i>
                                <span class="hidden sm:inline">Detail</span>
                            </button>
                            <a href="{% url 'inventaris:barang_update' barang.pk %}" 
                               class="flex-1 flex items-center justify-center gap-1 px-2 py-1.5 bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 transition-colors text-xs font-medium">
                                <i class="fas fa-edit"></i>
                                <span class="hidden sm:inline">Edit</span>
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <!-- List View -->
    <div id="list-view" class="hidden bg-white rounded-lg border-2 border-gray-200 shadow-sm overflow-hidden">
        <div id="list-content">
            {% if page_obj.object_list %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                <input type="checkbox" class="rounded border-gray-300 text-green-600">
                            </th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Barang</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase hidden sm:table-cell">Kategori</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase hidden md:table-cell">Kondisi</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase hidden lg:table-cell">Lokasi</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase hidden md:table-cell">Harga</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for barang in page_obj %}
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 sm:px-6 py-4">
                                    <input type="checkbox" class="rounded border-gray-300 text-green-600">
                                </td>
                                <td class="px-4 sm:px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 sm:w-12 sm:h-12 flex-shrink-0">
                                            {% if barang.gambar %}
                                                <img src="{{ barang.gambar.url }}" alt="{{ barang.nama }}" class="w-full h-full rounded-lg object-cover">
                                            {% else %}
                                                <div class="w-full h-full bg-gray-200 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-box text-gray-400"></i>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="min-w-0">
                                            <div class="text-sm font-medium text-gray-900 truncate">{{ barang.nama }}</div>
                                            <div class="text-xs text-gray-500 truncate">{{ barang.kode_barang }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 hidden sm:table-cell">
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-folder text-green-600"></i>
                                        <span class="text-sm text-gray-900">{{ barang.kategori.nama }}</span>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 hidden md:table-cell">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border
                                        {% if barang.kondisi.kondisi == 'baru' %}bg-green-100 text-green-800 border-green-300
                                        {% elif barang.kondisi.kondisi == 'baik' %}bg-blue-100 text-blue-800 border-blue-300
                                        {% elif barang.kondisi.kondisi == 'cukup' %}bg-yellow-100 text-yellow-800 border-yellow-300
                                        {% elif barang.kondisi.kondisi == 'rusak_ringan' %}bg-orange-100 text-orange-800 border-orange-300
                                        {% elif barang.kondisi.kondisi == 'rusak_berat' %}bg-red-100 text-red-800 border-red-300
                                        {% else %}bg-gray-100 text-gray-800 border-gray-300{% endif %}">
                                        {{ barang.kondisi.nama }}
                                    </span>
                                </td>
                                <td class="px-4 sm:px-6 py-4 hidden lg:table-cell">
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-map-marker-alt text-gray-400"></i>
                                        <span class="text-sm text-gray-500">{{ barang.lokasi.nama }}</span>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border
                                        {% if barang.status == 'aktif' %}bg-green-100 text-green-800 border-green-300
                                        {% elif barang.status == 'nonaktif' %}bg-gray-100 text-gray-800 border-gray-300
                                        {% elif barang.status == 'dipinjam' %}bg-yellow-100 text-yellow-800 border-yellow-300
                                        {% elif barang.status == 'rusak' %}bg-red-100 text-red-800 border-red-300
                                        {% elif barang.status == 'hilang' %}bg-purple-100 text-purple-800 border-purple-300
                                        {% else %}bg-gray-100 text-gray-800 border-gray-300{% endif %}">
                                        {{ barang.get_status_display }}
                                    </span>
                                </td>
                                <td class="px-4 sm:px-6 py-4 hidden md:table-cell">
                                    <span class="text-sm text-gray-900" x-text="formatCurrency({{ barang.harga_perolehan }})"></span>
                                </td>
                                <td class="px-4 sm:px-6 py-4 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <button onclick="viewBarang('{{ barang.pk }}')" 
                                                class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <a href="{% url 'inventaris:barang_update' barang.pk %}" 
                                           class="p-2 text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button onclick="deleteBarang('{{ barang.pk }}', '{{ barang.nama|escapejs }}')" 
                                                class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-16">
                <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-box-open text-4xl text-gray-400"></i>
                </div>
                <h3 class="text-xl font-medium text-gray-900 mb-2">
                    {% if request.GET.search %}Tidak ada barang yang ditemukan{% else %}Belum ada barang inventaris{% endif %}
                </h3>
                <p class="text-gray-600 mb-6">
                    {% if request.GET.search %}Coba ubah kata kunci pencarian{% else %}Mulai tambahkan barang inventaris{% endif %}
                </p>
                {% if not request.GET.search %}
                    <a href="{% url 'inventaris:barang_create' %}" 
                       class="inline-flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors">
                        <i class="fas fa-plus"></i>Tambah Barang Pertama
                    </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Pagination -->
    <div id="pagination-container">
        {% if page_obj.has_other_pages %}
            <div class="bg-white rounded-lg border-2 border-gray-200 shadow-sm px-4 sm:px-6 py-4 sm:py-5">
                <!-- Mobile Pagination -->
                <div class="flex items-center justify-between sm:hidden gap-3">
                    {% if page_obj.has_previous %}
                        <button onclick="loadPage('{{ page_obj.previous_page_number }}')" 
                               class="flex items-center justify-center gap-2 px-4 py-3 bg-white border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-semibold shadow-sm flex-1 transition-colors">
                            <i class="fas fa-chevron-left"></i>
                            <span>Sebelumnya</span>
                        </button>
                    {% else %}
                        <div class="flex-1"></div>
                    {% endif %}
                    
                    <div class="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg border border-gray-300">
                        <span class="text-sm font-bold text-gray-900">{{ page_obj.number }}</span>
                        <span class="text-sm text-gray-500">/</span>
                        <span class="text-sm text-gray-600">{{ page_obj.paginator.num_pages }}</span>
                    </div>
                    
                    {% if page_obj.has_next %}
                        <button onclick="loadPage('{{ page_obj.next_page_number }}')" 
                               class="flex items-center justify-center gap-2 px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold shadow-md flex-1 transition-colors">
                            <span>Selanjutnya</span>
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    {% else %}
                        <div class="flex-1"></div>
                    {% endif %}
                </div>
                
                <!-- Desktop Pagination -->
                <div class="hidden sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            Halaman <span class="font-bold text-gray-900">{{ page_obj.number }}</span> dari 
                            <span class="font-bold text-gray-900">{{ page_obj.paginator.num_pages }}</span>
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-lg shadow-sm border-2 border-gray-200 overflow-hidden">
                            {% if page_obj.has_previous %}
                                <button onclick="loadPage('{{ page_obj.previous_page_number }}')" 
                                       class="relative inline-flex items-center px-4 py-2 border-r-2 border-gray-200 bg-white text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-chevron-left mr-2"></i>
                                    <span>Sebelumnya</span>
                                </button>
                            {% 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 bg-green-600 text-white text-sm font-bold border-r-2 border-green-700">
                                        {{ num }}
                                    </span>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <button onclick="loadPage('{{ num }}')" 
                                           class="relative inline-flex items-center px-4 py-2 border-r-2 border-gray-200 bg-white text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
                                        {{ num }}
                                    </button>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                                <button onclick="loadPage('{{ page_obj.next_page_number }}')" 
                                       class="relative inline-flex items-center px-4 py-2 bg-white text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
                                    <span>Selanjutnya</span>
                                    <i class="fas fa-chevron-right ml-2"></i>
                                </button>
                            {% endif %}
                        </nav>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function barangList() {
    return {
        showAdvancedFilter: false,
        isGridView: false,

        init() {
            this.loadSavedView();
        },

        loadSavedView() {
            const savedView = localStorage.getItem('barang-view-preference');
            if (savedView === 'list') {
                toggleView();
            }
        },

        formatCurrency(amount) {
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(amount);
        }
    }
}

// Toggle between grid and list view
function toggleView() {
    const gridView = document.getElementById('grid-view');
    const listView = document.getElementById('list-view');
    const viewIcon = document.getElementById('view-icon');
    const viewText = document.getElementById('view-text');

    if (gridView.classList.contains('hidden')) {
        // Switch to grid view
        gridView.classList.remove('hidden');
        listView.classList.add('hidden');
        viewIcon.className = 'fas fa-list';
        viewText.textContent = 'List';
        localStorage.setItem('barang-view-preference', 'grid');
    } else {
        // Switch to list view
        gridView.classList.add('hidden');
        listView.classList.remove('hidden');
        viewIcon.className = 'fas fa-th-large';
        viewText.textContent = 'Grid';
        localStorage.setItem('barang-view-preference', 'list');
    }
}

// AJAX Pagination
function loadPage(page) {
    const gridView = document.getElementById('grid-view');
    const listView = document.getElementById('list-view');
    const gridContent = document.getElementById('grid-content');
    const listContent = document.getElementById('list-content');
    const paginationContainer = document.getElementById('pagination-container');
    
    // Convert page to number if it's a string
    page = parseInt(page);
    
    // Show loading state
    const currentView = gridView.classList.contains('hidden') ? 'list' : 'grid';
    const loadingHtml = `
        <div class="flex items-center justify-center py-12">
            <div class="text-center">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-300 border-t-green-600 mb-4"></div>
                <p class="text-gray-600 font-medium">Memuat data...</p>
            </div>
        </div>
    `;
    
    if (currentView === 'grid') {
        gridContent.innerHTML = loadingHtml;
    } else {
        listContent.innerHTML = loadingHtml;
    }
    paginationContainer.innerHTML = loadingHtml;
    
    // Get current URL parameters
    const url = new URL(window.location);
    url.searchParams.set('page', page);
    
    // Add AJAX header
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url.toString());
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Accept', 'text/html');
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            // Create temporary container
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = xhr.responseText;
            
            // Extract content based on current view
            if (currentView === 'grid') {
                const newGridContent = tempDiv.querySelector('#grid-content');
                const newPagination = tempDiv.querySelector('#pagination-container');
                
                if (newGridContent) {
                    gridContent.innerHTML = newGridContent.innerHTML;
                }
                if (newPagination) {
                    paginationContainer.innerHTML = newPagination.innerHTML;
                }
            } else {
                const newListContent = tempDiv.querySelector('#list-content');
                const newPagination = tempDiv.querySelector('#pagination-container');
                
                if (newListContent) {
                    listContent.innerHTML = newListContent.innerHTML;
                }
                if (newPagination) {
                    paginationContainer.innerHTML = newPagination.innerHTML;
                }
            }
            
            // Update URL without reload
            window.history.pushState({}, '', url.toString());
            
            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });
            
            // Re-initialize Alpine.js if needed
            if (window.Alpine) {
                window.Alpine.initTree(document.body);
            }
        } else {
            showError('Gagal Memuat Data', 'Gagal memuat data. Silakan refresh halaman.');
        }
    };
    
    xhr.onerror = function() {
        showError('Kesalahan', 'Terjadi kesalahan. Silakan refresh halaman.');
    };
    
    xhr.send();
}

// View barang detail
function viewBarang(id) {
    window.location.href = '{% url "inventaris:barang_detail" 0 %}'.replace('0', id);
}

// Delete barang
async function deleteBarang(id, nama) {
    const confirmed = await confirmDelete(`Apakah Anda yakin ingin menghapus barang "${nama}"?\n\nTindakan ini tidak dapat dibatalkan.`);
    if (confirmed) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{% url "inventaris:barang_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();
    }
}

// Export functions
function exportData() {
    showInfo('Fitur Export', 'Fitur export akan diimplementasikan.');
}

function importData() {
    showInfo('Fitur Import', 'Fitur import akan diimplementasikan.');
}

// Change per page
function changePerPage(value) {
    const url = new URL(window.location);
    url.searchParams.set('per_page', value);
    url.searchParams.delete('page');
    window.location.href = url.toString();
}

// Format harga input
function formatHargaInput(input) {
    let value = input.value.replace(/[^\d]/g, '');
    if (value) {
        value = parseInt(value).toLocaleString('id-ID');
        input.value = value;
    } else {
        input.value = '';
    }
}

// Convert harga to number for submit
function convertHargaToNumber(input) {
    let value = input.value.replace(/[^\d]/g, '');
    if (value) {
        input.value = value;
    } else {
        input.value = '';
    }
}

// Initialize harga formatting
document.addEventListener('DOMContentLoaded', function() {
    const hargaMinInput = document.getElementById('harga_min');
    const hargaMaxInput = document.getElementById('harga_max');
    
    if (hargaMinInput && hargaMinInput.value) {
        formatHargaInput(hargaMinInput);
    }
    if (hargaMaxInput && hargaMaxInput.value) {
        formatHargaInput(hargaMaxInput);
    }
    
    if (hargaMinInput) {
        hargaMinInput.addEventListener('input', function() {
            formatHargaInput(this);
        });
    }
    
    if (hargaMaxInput) {
        hargaMaxInput.addEventListener('input', function() {
            formatHargaInput(this);
        });
    }
    
    const filterForm = document.querySelector('form[method="get"]');
    if (filterForm) {
        filterForm.addEventListener('submit', function(e) {
            if (hargaMinInput) {
                convertHargaToNumber(hargaMinInput);
            }
            if (hargaMaxInput) {
                convertHargaToNumber(hargaMaxInput);
            }
        });
    }
});
</script>
{% endblock %}