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

{% block title %}{{ barang.nama }} - Detail Barang - Inventaris HMI{% endblock %}
{% block page_title %}{{ barang.nama }}{% endblock %}
{% block page_subtitle %}{{ barang.kode_barang }} - Detail lengkap barang inventaris{% endblock %}

{% block content %}
<div class="space-y-3 sm:space-y-4 lg:space-y-6 px-2 sm:px-0" x-data="barangDetail()" x-init="init()">
    <!-- Header -->
    <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg overflow-hidden">
        <div class="inventory-gradient px-4 sm:px-6 lg:px-8 py-4 sm:py-5 lg:py-6 text-white relative">
            <div class="absolute inset-0 bg-gradient-to-r from-white/10 to-transparent"></div>
            <div class="relative z-10">
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
                    <div class="flex items-center space-x-2 sm:space-x-3 lg:space-x-4">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-16 lg:h-16 bg-white/20 rounded-lg sm:rounded-xl flex items-center justify-center">
                            <i class="fas fa-box text-lg sm:text-xl lg:text-2xl"></i>
                        </div>
                        <div>
                            <h1 class="text-lg sm:text-xl lg:text-3xl font-bold truncate">{{ barang.nama }}</h1>
                            <p class="text-inventory-100 mt-0.5 sm:mt-1 text-xs sm:text-sm">{{ barang.kode_barang }}</p>
                            <div class="flex items-center mt-1.5 sm:mt-2 space-x-2 sm:space-x-3 lg:space-x-4 flex-wrap gap-1.5 sm:gap-2">
                                <span class="inline-flex items-center px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs font-medium bg-white/20 text-white">
                                    <i class="fas fa-folder mr-1 text-xs"></i>
                                    <span class="truncate max-w-[80px] sm:max-w-none">{{ barang.kategori.nama }}</span>
                                </span>
                                <span class="inline-flex items-center px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs font-medium bg-white/20 text-white">
                                    <i class="fas fa-map-marker-alt mr-1 text-xs"></i>
                                    <span class="truncate max-w-[80px] sm:max-w-none">{{ barang.lokasi.nama }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="flex space-x-2 sm:space-x-3 w-full sm:w-auto">
                        <a href="{% url 'inventaris:barang_list' %}" class="flex-1 sm:flex-none bg-white/20 hover:bg-white/30 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg transition-all text-xs sm:text-sm text-center sm:text-left border-2 border-white/30 hover:border-white/50 shadow-md hover:shadow-lg font-semibold">
                            <i class="fas fa-arrow-left mr-1 sm:mr-2"></i><span class="hidden sm:inline">Kembali</span><span class="sm:hidden">Kemb</span>
                        </a>
                        <a href="{% url 'inventaris:barang_update' barang.pk %}" class="flex-1 sm:flex-none bg-white text-inventory-600 hover:bg-inventory-50 px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg transition-all font-semibold text-xs sm:text-sm text-center sm:text-left border-2 border-white/50 shadow-md hover:shadow-lg">
                            <i class="fas fa-edit mr-1 sm:mr-2"></i><span class="hidden sm:inline">Edit</span><span class="sm:hidden">Edit</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Decorative Elements -->
            <div class="absolute -top-4 -right-4 w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-white/10 rounded-full"></div>
            <div class="absolute -bottom-4 -left-4 w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 bg-white/10 rounded-full"></div>
        </div>

        <!-- Status Indicators -->
        <div class="px-4 sm:px-6 lg:px-8 py-3 sm:py-4 bg-gray-50 border-t-2 border-gray-200">
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 lg:gap-6 w-full sm:w-auto">
                    <div class="flex items-center">
                        <span class="text-xs sm:text-sm text-gray-500 mr-2">Kondisi:</span>
                        <span class="inline-flex items-center px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium
                            {% if barang.kondisi.kondisi == 'baru' %}bg-green-100 text-green-800
                            {% elif barang.kondisi.kondisi == 'baik' %}bg-blue-100 text-blue-800
                            {% elif barang.kondisi.kondisi == 'cukup' %}bg-yellow-100 text-yellow-800
                            {% elif barang.kondisi.kondisi == 'rusak_ringan' %}bg-orange-100 text-orange-800
                            {% elif barang.kondisi.kondisi == 'rusak_berat' %}bg-red-100 text-red-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full mr-1.5 sm:mr-2" style="background-color: {{ barang.kondisi.warna }}"></div>
                            {{ barang.kondisi.nama }}
                        </span>
                    </div>
                    
                    <div class="flex items-center">
                        <span class="text-xs sm:text-sm text-gray-500 mr-2">Status:</span>
                        <span class="inline-flex items-center px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium
                            {% if barang.status == 'aktif' %}bg-success-100 text-success-800
                            {% elif barang.status == 'nonaktif' %}bg-gray-100 text-gray-800
                            {% elif barang.status == 'dipinjam' %}bg-warning-100 text-warning-800
                            {% elif barang.status == 'rusak' %}bg-danger-100 text-danger-800
                            {% elif barang.status == 'hilang' %}bg-purple-100 text-purple-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full mr-1.5 sm:mr-2 status-indicator
                                {% if barang.status == 'aktif' %}status-available
                                {% elif barang.status == 'dipinjam' %}status-borrowed
                                {% elif barang.status == 'rusak' %}status-maintenance
                                {% endif %}"></div>
                            {{ barang.get_status_display }}
                        </span>
                    </div>
                </div>

                <div class="text-left sm:text-right w-full sm:w-auto border-t-2 sm:border-t-0 border-gray-200 pt-3 sm:pt-0">
                    <p class="text-xs sm:text-sm text-gray-500">Nilai Aset</p>
                    <p class="text-base sm:text-lg lg:text-xl font-bold text-gray-900">{{ barang.harga_perolehan|currency }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
        <!-- Main Information -->
        <div class="lg:col-span-2 space-y-3 sm:space-y-4 lg:space-y-6">
            <!-- Basic Information -->
            <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                <div class="flex items-center justify-between mb-3 sm:mb-4 lg:mb-6">
                    <h3 class="text-base sm:text-lg lg:text-xl font-semibold text-gray-900">
                        <i class="fas fa-info-circle text-inventory-600 mr-1.5 sm:mr-2 text-sm sm:text-base"></i>
                        <span class="text-sm sm:text-base lg:text-lg">Informasi Dasar</span>
                    </h3>
                    <button onclick="editBasicInfo()" class="text-inventory-600 hover:text-inventory-800 text-sm sm:text-base">
                        <i class="fas fa-edit"></i>
                    </button>
                </div>
                
                <div class="grid grid-cols-2 gap-3 sm:gap-4 lg:gap-6">
                    <div class="space-y-2 sm:space-y-3 lg:space-y-4">
                        <div>
                            <dt class="text-xs sm:text-sm font-medium text-gray-500 flex items-center mb-1">
                                <i class="fas fa-barcode text-inventory-600 mr-1.5 text-xs sm:text-sm"></i>
                                <span class="truncate">Kode Barang</span>
                            </dt>
                            <dd class="text-xs sm:text-sm lg:text-base font-semibold text-gray-900 font-mono truncate">{{ barang.kode_barang }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs sm:text-sm font-medium text-gray-500 flex items-center mb-1">
                                <i class="fas fa-tag text-inventory-600 mr-1.5 text-xs sm:text-sm"></i>
                                <span class="truncate">Nama Barang</span>
                            </dt>
                            <dd class="text-xs sm:text-sm lg:text-base font-medium text-gray-900 line-clamp-2">{{ barang.nama }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs sm:text-sm font-medium text-gray-500 flex items-center mb-1">
                                <i class="fas fa-folder text-inventory-600 mr-1.5 text-xs sm:text-sm"></i>
                                <span class="truncate">Kategori</span>
                            </dt>
                            <dd class="text-xs sm:text-sm text-gray-900 truncate">{{ barang.kategori.nama }}</dd>
                        </div>
                    </div>
                    
                    <div class="space-y-2 sm:space-y-3 lg:space-y-4">
                        {% if barang.merk %}
                            <div>
                                <dt class="text-xs sm:text-sm font-medium text-gray-500 flex items-center mb-1">
                                    <i class="fas fa-trademark text-inventory-600 mr-1.5 text-xs sm:text-sm"></i>
                                    <span class="truncate">Merk/Brand</span>
                                </dt>
                                <dd class="text-xs sm:text-sm text-gray-900 truncate">{{ barang.merk.nama }}</dd>
                            </div>
                        {% endif %}
                        {% if barang.model %}
                            <div>
                                <dt class="text-xs sm:text-sm font-medium text-gray-500 flex items-center mb-1">
                                    <i class="fas fa-cube text-inventory-600 mr-1.5 text-xs sm:text-sm"></i>
                                    <span class="truncate">Model/Tipe</span>
                                </dt>
                                <dd class="text-xs sm:text-sm text-gray-900 truncate">{{ barang.model }}</dd>
                            </div>
                        {% endif %}
                        {% if barang.nomor_seri %}
                            <div>
                                <dt class="text-xs sm:text-sm font-medium text-gray-500 flex items-center mb-1">
                                    <i class="fas fa-hashtag text-inventory-600 mr-1.5 text-xs sm:text-sm"></i>
                                    <span class="truncate">Nomor Seri</span>
                                </dt>
                                <dd class="text-xs sm:text-sm text-gray-900 font-mono truncate">{{ barang.nomor_seri }}</dd>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Acquisition Information -->
            <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                <h3 class="text-base sm:text-lg lg:text-xl font-semibold text-gray-900 mb-3 sm:mb-4 lg:mb-6">
                    <i class="fas fa-shopping-cart text-success-600 mr-1.5 sm:mr-2 text-sm sm:text-base"></i>
                    <span class="text-sm sm:text-base lg:text-lg">Informasi Perolehan</span>
                </h3>
                
                <div class="grid grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3 lg:gap-6">
                    <div class="text-center p-2 sm:p-3 lg:p-4 bg-success-50 rounded-lg border border-success-200">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-success-100 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3">
                            <i class="fas fa-calendar-alt text-success-600 text-sm sm:text-base lg:text-xl"></i>
                        </div>
                        <dt class="text-xs sm:text-sm font-medium text-gray-500">Tahun</dt>
                        <dd class="mt-0.5 sm:mt-1 text-sm sm:text-base lg:text-xl font-bold text-gray-900">{{ barang.tahun_perolehan }}</dd>
                    </div>
                    
                    <div class="text-center p-2 sm:p-3 lg:p-4 bg-purple-50 rounded-lg border border-purple-200">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3">
                            <i class="fas fa-money-bill-wave text-purple-600 text-sm sm:text-base lg:text-xl"></i>
                        </div>
                        <dt class="text-xs sm:text-sm font-medium text-gray-500">Harga</dt>
                        <dd class="mt-0.5 sm:mt-1 text-xs sm:text-sm lg:text-xl font-bold text-gray-900 truncate">{{ barang.harga_perolehan|currency }}</dd>
                    </div>
                    
                    <div class="text-center p-2 sm:p-3 lg:p-4 bg-indigo-50 rounded-lg border border-indigo-200 col-span-2 lg:col-span-1">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-indigo-100 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3">
                            <i class="fas fa-clock text-indigo-600 text-sm sm:text-base lg:text-xl"></i>
                        </div>
                        <dt class="text-xs sm:text-sm font-medium text-gray-500">Tanggal Masuk</dt>
                        <dd class="mt-0.5 sm:mt-1 text-xs sm:text-sm lg:text-lg font-bold text-gray-900">{{ barang.tanggal_masuk|date:"d M Y" }}</dd>
                    </div>
                </div>
            </div>

            <!-- Technical Specifications -->
            {% if barang.spesifikasi or barang.keterangan %}
                <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                    <h3 class="text-base sm:text-lg lg:text-xl font-semibold text-gray-900 mb-3 sm:mb-4 lg:mb-6">
                        <i class="fas fa-cogs text-orange-600 mr-1.5 sm:mr-2 text-sm sm:text-base"></i>
                        <span class="text-sm sm:text-base lg:text-lg">Detail Teknis & Keterangan</span>
                    </h3>
                    
                    {% if barang.spesifikasi %}
                        <div class="mb-3 sm:mb-4 lg:mb-6">
                            <dt class="text-xs sm:text-sm font-medium text-gray-500 mb-2 sm:mb-3">
                                <i class="fas fa-list-ul text-orange-600 mr-1 text-xs sm:text-sm"></i>
                                Spesifikasi Teknis
                            </dt>
                            <dd class="bg-gray-50 rounded-lg p-2 sm:p-3 lg:p-4 border border-gray-200">
                                <pre class="text-xs sm:text-sm text-gray-900 whitespace-pre-line font-sans">{{ barang.spesifikasi }}</pre>
                            </dd>
                        </div>
                    {% endif %}
                    
                    {% if barang.keterangan %}
                        <div>
                            <dt class="text-xs sm:text-sm font-medium text-gray-500 mb-2 sm:mb-3">
                                <i class="fas fa-sticky-note text-orange-600 mr-1 text-xs sm:text-sm"></i>
                                Keterangan Tambahan
                            </dt>
                            <dd class="bg-gray-50 rounded-lg p-2 sm:p-3 lg:p-4 border border-gray-200">
                                <p class="text-xs sm:text-sm text-gray-900 whitespace-pre-line">{{ barang.keterangan }}</p>
                            </dd>
                        </div>
                    {% endif %}
                </div>
            {% endif %}

            <!-- Activity History -->
            {% if peminjaman_history or perawatan_history %}
                <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-3 sm:mb-4 lg:mb-6 gap-3">
                        <h3 class="text-base sm:text-lg lg:text-xl font-semibold text-gray-900">
                            <i class="fas fa-history text-indigo-600 mr-1.5 sm:mr-2 text-sm sm:text-base"></i>
                            <span class="text-sm sm:text-base lg:text-lg">Riwayat Aktivitas</span>
                        </h3>
                        <div class="flex items-center space-x-2">
                            <button @click="activeTab = 'peminjaman'" 
                                    :class="activeTab === 'peminjaman' ? 'bg-inventory-100 text-inventory-700' : 'text-gray-500 hover:text-gray-700'"
                                    class="px-2 sm:px-3 py-1 rounded-lg text-xs sm:text-sm font-medium transition-colors">
                                Peminjaman
                            </button>
                            <button @click="activeTab = 'perawatan'" 
                                    :class="activeTab === 'perawatan' ? 'bg-inventory-100 text-inventory-700' : 'text-gray-500 hover:text-gray-700'"
                                    class="px-2 sm:px-3 py-1 rounded-lg text-xs sm:text-sm font-medium transition-colors">
                                Perawatan
                            </button>
                        </div>
                    </div>

                    <!-- Peminjaman History -->
                    <div x-show="activeTab === 'peminjaman'" x-transition>
                        {% if peminjaman_history %}
                            <div class="space-y-4">
                                {% for peminjaman in peminjaman_history %}
                                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                        <div class="flex items-center space-x-4">
                                            <div class="w-10 h-10 bg-inventory-100 rounded-full flex items-center justify-center">
                                                <i class="fas fa-user text-inventory-600"></i>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-900">{{ peminjaman.peminjam.nama_lengkap }}</p>
                                                <p class="text-sm text-gray-500">
                                                    {{ peminjaman.tanggal_pinjam|date:"d M Y" }} - {{ peminjaman.tanggal_kembali_rencana|date:"d M Y" }}
                                                </p>
                                                <p class="text-xs text-gray-400">{{ peminjaman.keperluan|truncatechars:50 }}</p>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                                                {% if peminjaman.status == 'pending' %}bg-warning-100 text-warning-800
                                                {% elif peminjaman.status == 'disetujui' %}bg-inventory-100 text-inventory-800
                                                {% elif peminjaman.status == 'dipinjam' %}bg-success-100 text-success-800
                                                {% elif peminjaman.status == 'dikembalikan' %}bg-gray-100 text-gray-800
                                                {% else %}bg-red-100 text-red-800{% endif %}">
                                                {{ peminjaman.get_status_display }}
                                            </span>
                                            <p class="text-xs text-gray-500 mt-1">{{ peminjaman.created_at|timesince }} lalu</p>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-8">
                                <i class="fas fa-hand-paper text-4xl text-gray-300 mb-4"></i>
                                <p class="text-gray-500">Belum ada riwayat peminjaman</p>
                            </div>
                        {% endif %}
                    </div>

                    <!-- Perawatan History -->
                    <div x-show="activeTab === 'perawatan'" x-transition>
                        {% if perawatan_history %}
                            <div class="space-y-4">
                                {% for perawatan in perawatan_history %}
                                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                        <div class="flex items-center space-x-4">
                                            <div class="w-10 h-10 bg-warning-100 rounded-full flex items-center justify-center">
                                                <i class="fas fa-tools text-warning-600"></i>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-900">{{ perawatan.get_jenis_perawatan_display }}</p>
                                                <p class="text-sm text-gray-500">{{ perawatan.tanggal_perawatan|date:"d M Y" }}</p>
                                                {% if perawatan.teknisi %}
                                                    <p class="text-xs text-gray-400">Teknisi: {{ perawatan.teknisi }}</p>
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-xs sm:text-sm font-medium text-gray-900">{{ perawatan.biaya|currency }}</p>
                                            <p class="text-xs text-gray-500">{{ perawatan.created_at|timesince }} lalu</p>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-8">
                                <i class="fas fa-tools text-4xl text-gray-300 mb-4"></i>
                                <p class="text-gray-500">Belum ada riwayat perawatan</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="space-y-3 sm:space-y-4 lg:space-y-6">
            <!-- Image Card -->
            <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg overflow-hidden">
                <div class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 lg:py-4 border-b-2 border-gray-200">
                    <h3 class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900">
                        <i class="fas fa-image text-purple-600 mr-1.5 sm:mr-2 text-xs sm:text-sm"></i>
                        <span class="text-xs sm:text-sm lg:text-base">Gambar Barang</span>
                    </h3>
                </div>
                <div class="p-3 sm:p-4 lg:p-6">
                    {% if barang.gambar %}
                        <div class="relative group">
                            <img src="{{ barang.gambar.url }}" alt="{{ barang.nama }}" 
                                 class="w-full h-32 sm:h-40 lg:h-48 object-cover rounded-lg cursor-pointer border border-gray-200"
                                 onclick="openImageModal('{{ barang.gambar.url }}', '{{ barang.nama }}')">
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200 rounded-lg flex items-center justify-center">
                                <i class="fas fa-search-plus text-white text-lg sm:text-xl lg:text-2xl opacity-0 group-hover:opacity-100 transition-opacity"></i>
                            </div>
                        </div>
                    {% else %}
                        <div class="w-full h-32 sm:h-40 lg:h-48 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg flex items-center justify-center border border-gray-200">
                            <div class="text-center">
                                <i class="fas fa-image text-2xl sm:text-3xl lg:text-4xl text-gray-400 mb-2"></i>
                                <p class="text-xs sm:text-sm text-gray-500">Tidak ada gambar</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                <h3 class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4">
                    <i class="fas fa-bolt text-yellow-600 mr-1.5 sm:mr-2 text-xs sm:text-sm"></i>
                    <span class="text-xs sm:text-sm lg:text-base">Aksi Cepat</span>
                </h3>
                <div class="space-y-2 sm:space-y-3">
                    {% if barang.status == 'aktif' %}
                        <a href="{% url 'inventaris:peminjaman_create' %}?barang={{ barang.pk }}" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-blue-700 hover:border-blue-800 text-sm sm:text-base">
                            <i class="fas fa-hand-paper"></i>
                            <span>Ajukan Peminjaman</span>
                        </a>
                    {% endif %}
                    
                    <a href="{% url 'inventaris:perawatan_create' %}?barang={{ barang.pk }}" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-yellow-600 hover:bg-yellow-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-yellow-700 hover:border-yellow-800 text-sm sm:text-base">
                        <i class="fas fa-tools"></i>
                        <span>Catat Perawatan</span>
                    </a>
                    
                    <a href="{% url 'inventaris:qr_barcode_view' barang.pk %}" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-gray-700 hover:border-gray-800 text-sm sm:text-base">
                        <i class="fas fa-qrcode"></i>
                        <span>QR Code & Barcode</span>
                    </a>
                    
                    <a href="{% url 'inventaris:generate_qr_barcode' barang.pk %}" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-green-700 hover:border-green-800 text-sm sm:text-base">
                        <i class="fas fa-sync-alt"></i>
                        <span>Generate QR & Barcode</span>
                    </a>
                </div>
            </div>

            <!-- QR Code & Barcode Display -->
            {% if qr_code_obj %}
                <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                    <h3 class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4">
                        <i class="fas fa-qrcode text-green-600 mr-1.5 sm:mr-2 text-xs sm:text-sm"></i>
                        <span class="text-xs sm:text-sm lg:text-base">QR Code & Barcode</span>
                    </h3>
                    
                    <div class="grid grid-cols-2 gap-2 sm:gap-3 lg:gap-6">
                        <!-- QR Code -->
                        <div class="text-center">
                            <h4 class="text-xs sm:text-sm lg:text-md font-medium text-gray-700 mb-2 sm:mb-3">QR Code</h4>
                            {% if qr_code_obj.qr_code_image %}
                                <div class="bg-white p-1.5 sm:p-2 lg:p-3 rounded-lg border-2 border-gray-200 inline-block mb-2 sm:mb-3">
                                    <img src="{{ qr_code_obj.qr_code_image.url }}" 
                                         alt="QR Code {{ barang.kode_barang }}" 
                                         class="w-16 h-16 sm:w-24 sm:h-24 lg:w-32 lg:h-32 mx-auto">
                                </div>
                                <div class="space-y-0.5 sm:space-y-1 text-xs text-gray-600">
                                    <p class="truncate">Kode: <span class="font-medium">{{ barang.kode_barang }}</span></p>
                                    <p class="truncate hidden sm:block">Nama: <span class="font-medium">{{ barang.nama|truncatechars:15 }}</span></p>
                                </div>
                                <div class="mt-2 sm:mt-3 flex flex-col sm:flex-row justify-center gap-1.5 sm:gap-2">
                                    <a href="{% url 'inventaris:view_qr_code' barang.pk %}" 
                                       target="_blank" 
                                       class="flex items-center justify-center gap-1 px-2.5 sm:px-3 py-1.5 sm:py-2 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-gray-700 hover:border-gray-800 text-xs sm:text-sm">
                                        <i class="fas fa-external-link-alt"></i>
                                        <span class="hidden sm:inline">View</span>
                                    </a>
                                    <button onclick="downloadQR()" class="flex items-center justify-center gap-1 px-2.5 sm:px-3 py-1.5 sm:py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-green-700 hover:border-green-800 text-xs sm:text-sm">
                                        <i class="fas fa-download"></i>
                                        <span class="hidden sm:inline">Download</span>
                                    </button>
                                </div>
                            {% else %}
                                <div class="text-center py-2 sm:py-4">
                                    <i class="fas fa-qrcode text-gray-400 text-xl sm:text-2xl mb-2"></i>
                                    <p class="text-gray-500 text-xs sm:text-sm">QR Code belum tersedia</p>
                                </div>
                            {% endif %}
                        </div>

                        <!-- Barcode -->
                        <div class="text-center">
                            <h4 class="text-xs sm:text-sm lg:text-md font-medium text-gray-700 mb-2 sm:mb-3">Barcode</h4>
                            {% if qr_code_obj.barcode_image %}
                                <div class="bg-white p-1.5 sm:p-2 lg:p-3 rounded-lg border-2 border-gray-200 inline-block mb-2 sm:mb-3">
                                    <img src="{{ qr_code_obj.barcode_image.url }}" 
                                         alt="Barcode {{ barang.kode_barang }}" 
                                         class="h-8 sm:h-12 lg:h-16 mx-auto">
                                </div>
                                <div class="space-y-0.5 sm:space-y-1 text-xs text-gray-600">
                                    <p class="truncate">Kode: <span class="font-medium">{{ barang.kode_barang }}</span></p>
                                    <p class="truncate hidden sm:block">Lokasi: <span class="font-medium">{{ barang.lokasi.nama|truncatechars:15 }}</span></p>
                                </div>
                                <div class="mt-2 sm:mt-3 flex flex-col sm:flex-row justify-center gap-1.5 sm:gap-2">
                                    <a href="{% url 'inventaris:view_barcode' barang.pk %}" 
                                       target="_blank" 
                                       class="flex items-center justify-center gap-1 px-2.5 sm:px-3 py-1.5 sm:py-2 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-gray-700 hover:border-gray-800 text-xs sm:text-sm">
                                        <i class="fas fa-external-link-alt"></i>
                                        <span class="hidden sm:inline">View</span>
                                    </a>
                                    <a href="{% url 'inventaris:print_barcode' barang.pk %}" 
                                       class="flex items-center justify-center gap-1 px-2.5 sm:px-3 py-1.5 sm:py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-blue-700 hover:border-blue-800 text-xs sm:text-sm">
                                        <i class="fas fa-print"></i>
                                        <span class="hidden sm:inline">Print</span>
                                    </a>
                                    <button onclick="downloadBarcode()" class="flex items-center justify-center gap-1 px-2.5 sm:px-3 py-1.5 sm:py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-green-700 hover:border-green-800 text-xs sm:text-sm">
                                        <i class="fas fa-download"></i>
                                        <span class="hidden sm:inline">Download</span>
                                    </button>
                                </div>
                            {% else %}
                                <div class="text-center py-2 sm:py-4">
                                    <i class="fas fa-barcode text-gray-400 text-xl sm:text-2xl mb-2"></i>
                                    <p class="text-gray-500 text-xs sm:text-sm">Barcode belum tersedia</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="mt-3 sm:mt-4 lg:mt-6 pt-3 sm:pt-4 border-t-2 border-gray-200">
                        <div class="grid grid-cols-2 sm:flex flex-wrap gap-2 sm:gap-2.5 justify-center">
                            <a href="{% url 'inventaris:qr_barcode_view' barang.pk %}" class="flex items-center justify-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-gray-700 hover:border-gray-800 text-xs sm:text-sm">
                                <i class="fas fa-eye"></i>
                                <span class="hidden sm:inline">Detail</span>
                            </a>
                            <a href="{% url 'inventaris:generate_qr_barcode' barang.pk %}" class="flex items-center justify-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 bg-yellow-600 hover:bg-yellow-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-yellow-700 hover:border-yellow-800 text-xs sm:text-sm">
                                <i class="fas fa-sync-alt"></i>
                                <span class="hidden sm:inline">Regen</span>
                            </a>
                            <button onclick="downloadAllCodes()" class="flex items-center justify-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-green-700 hover:border-green-800 text-xs sm:text-sm">
                                <i class="fas fa-download"></i>
                                <span class="hidden sm:inline">Download</span>
                            </button>
                            <button onclick="printAllCodes()" class="flex items-center justify-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-blue-700 hover:border-blue-800 text-xs sm:text-sm">
                                <i class="fas fa-print"></i>
                                <span class="hidden sm:inline">Print</span>
                            </button>
                        </div>
                    </div>
                </div>
            {% else %}
                <!-- Generate QR Code & Barcode -->
                <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                    <h3 class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4">
                        <i class="fas fa-qrcode text-gray-600 mr-1.5 sm:mr-2 text-xs sm:text-sm"></i>
                        <span class="text-xs sm:text-sm lg:text-base">QR Code & Barcode</span>
                    </h3>
                    <div class="text-center py-4 sm:py-6 lg:py-8">
                        <i class="fas fa-qrcode text-gray-400 text-2xl sm:text-3xl lg:text-4xl mb-2 sm:mb-3 lg:mb-4"></i>
                        <p class="text-gray-500 mb-3 sm:mb-4 text-xs sm:text-sm">QR Code dan Barcode belum dibuat untuk barang ini</p>
                        <a href="{% url 'inventaris:generate_qr_barcode' barang.pk %}" class="inline-flex items-center justify-center gap-2 px-4 sm:px-6 py-2.5 sm:py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-all shadow-md hover:shadow-lg border-2 border-green-700 hover:border-green-800 text-sm sm:text-base">
                            <i class="fas fa-plus"></i>
                            <span>Generate QR Code & Barcode</span>
                        </a>
                    </div>
                </div>
            {% endif %}

            <!-- Location & Status -->
            <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                <h3 class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4">
                    <i class="fas fa-map-marker-alt text-red-600 mr-1.5 sm:mr-2 text-xs sm:text-sm"></i>
                    <span class="text-xs sm:text-sm lg:text-base">Lokasi & Status</span>
                </h3>
                <div class="space-y-2 sm:space-y-3 lg:space-y-4">
                    <div class="p-2 sm:p-3 lg:p-4 bg-red-50 rounded-lg border border-red-200">
                        <dt class="text-xs sm:text-sm font-medium text-gray-500 mb-1 sm:mb-2">Lokasi Penyimpanan</dt>
                        <dd class="text-xs sm:text-sm text-gray-900 font-medium">{{ barang.lokasi.nama }}</dd>
                        {% if barang.lokasi.gedung %}
                            <p class="text-xs text-gray-500 mt-1">
                                {{ barang.lokasi.gedung }}{% if barang.lokasi.lantai %}, Lantai {{ barang.lokasi.lantai }}{% endif %}{% if barang.lokasi.ruangan %}, Ruang {{ barang.lokasi.ruangan }}{% endif %}
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Timestamps -->
            <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                <h3 class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4">
                    <i class="fas fa-clock text-gray-600 mr-1.5 sm:mr-2 text-xs sm:text-sm"></i>
                    <span class="text-xs sm:text-sm lg:text-base">Informasi Sistem</span>
                </h3>
                <div class="space-y-2 sm:space-y-3 text-xs sm:text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-500">Dibuat oleh:</span>
                        <span class="font-medium text-gray-900 truncate ml-2">{{ barang.created_by.nama_lengkap }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-500">Tanggal dibuat:</span>
                        <span class="font-medium text-gray-900">{{ barang.tanggal_masuk|date:"d M Y" }}</span>
                    </div>
                    {% if barang.updated_by %}
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500">Diperbarui oleh:</span>
                            <span class="font-medium text-gray-900 truncate ml-2">{{ barang.updated_by.nama_lengkap }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500">Terakhir diperbarui:</span>
                            <span class="font-medium text-gray-900">{{ barang.tanggal_update|date:"d M Y H:i" }}</span>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Documents -->
            {% if barang.dokumen %}
                <div class="bg-white rounded-lg sm:rounded-xl border-2 border-gray-300 shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6">
                    <h3 class="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 mb-2 sm:mb-3 lg:mb-4">
                        <i class="fas fa-file-alt text-blue-600 mr-1.5 sm:mr-2 text-xs sm:text-sm"></i>
                        <span class="text-xs sm:text-sm lg:text-base">Dokumen Pendukung</span>
                    </h3>
                    <a href="{{ barang.dokumen.url }}" target="_blank" 
                       class="flex items-center p-2 sm:p-3 lg:p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors border border-blue-200">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-2 sm:mr-3 lg:mr-4">
                            <i class="fas fa-file-alt text-blue-600 text-sm sm:text-base lg:text-xl"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-xs sm:text-sm font-medium text-gray-900 truncate">Dokumen Barang</p>
                            <p class="text-xs text-gray-500">Klik untuk membuka</p>
                        </div>
                        <i class="fas fa-external-link-alt text-blue-600 text-sm sm:text-base"></i>
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Image Modal -->
<div x-data="{ open: false, imageSrc: '', imageTitle: '' }" 
     x-show="open" x-cloak
     @open-image.window="open = true; imageSrc = $event.detail.src; imageTitle = $event.detail.title"
     class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
     @click="open = false">
    <div class="max-w-4xl max-h-[90vh] p-4" @click.stop>
        <div class="bg-white rounded-xl overflow-hidden">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900" x-text="imageTitle"></h3>
                <button @click="open = false" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-4">
                <img :src="imageSrc" :alt="imageTitle" class="max-w-full max-h-[70vh] object-contain mx-auto">
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function barangDetail() {
    return {
        activeTab: 'peminjaman',

        init() {
            // Initialize any components
        },

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

// Open image modal
function openImageModal(src, title) {
    window.dispatchEvent(new CustomEvent('open-image', {
        detail: { src: src, title: title }
    }));
}

// Edit basic info
function editBasicInfo() {
    window.location.href = '{% url "inventaris:barang_update" barang.pk %}';
}

// Generate QR Code
function generateQRCode() {
    window.location.href = '{% url "inventaris:generate_qr_barcode" barang.pk %}';
}

// Print barcode
function printBarcode() {
    window.location.href = '{% url "inventaris:print_barcode" barang.pk %}';
}

// Download QR Code
function downloadQR() {
    const qrImage = document.querySelector('img[alt*="QR Code"]');
    if (qrImage) {
        try {
            const link = document.createElement('a');
            link.href = qrImage.src;
            link.download = 'qr_code_{{ barang.kode_barang }}.png';
            link.click();
            showSuccess('Download Berhasil', 'QR Code berhasil didownload');
        } catch (error) {
            showError('Download Gagal', 'Gagal mendownload QR Code', {
                details: error.message
            });
        }
    } else {
        showError('QR Code Tidak Tersedia', 'QR Code belum dibuat untuk barang ini');
    }
}

// Download Barcode
function downloadBarcode() {
    const barcodeImage = document.querySelector('img[alt*="Barcode"]');
    if (barcodeImage) {
        try {
            const link = document.createElement('a');
            link.href = barcodeImage.src;
            link.download = 'barcode_{{ barang.kode_barang }}.png';
            link.click();
            showSuccess('Download Berhasil', 'Barcode berhasil didownload');
        } catch (error) {
            showError('Download Gagal', 'Gagal mendownload Barcode', {
                details: error.message
            });
        }
    } else {
        showError('Barcode Tidak Tersedia', 'Barcode belum dibuat untuk barang ini');
    }
}

// Download All Codes
function downloadAllCodes() {
    const qrImage = document.querySelector('img[alt*="QR Code"]');
    const barcodeImage = document.querySelector('img[alt*="Barcode"]');
    
    if (!qrImage && !barcodeImage) {
        showError('Tidak Ada File', 'QR Code dan Barcode belum dibuat untuk barang ini');
        return;
    }
    
    showInfo('Download Dimulai', 'Sedang mendownload QR Code dan Barcode...');
    
    try {
        if (qrImage) {
            const qrLink = document.createElement('a');
            qrLink.href = qrImage.src;
            qrLink.download = 'qr_code_{{ barang.kode_barang }}.png';
            qrLink.click();
        }
        
        setTimeout(() => {
            if (barcodeImage) {
                const barcodeLink = document.createElement('a');
                barcodeLink.href = barcodeImage.src;
                barcodeLink.download = 'barcode_{{ barang.kode_barang }}.png';
                barcodeLink.click();
            }
            showSuccess('Download Selesai', 'Semua file berhasil didownload');
        }, 500);
    } catch (error) {
        showError('Download Gagal', 'Gagal mendownload file', {
            details: error.message
        });
    }
}

// Print All Codes
function printAllCodes() {
    const qrImage = document.querySelector('img[alt*="QR Code"]');
    const barcodeImage = document.querySelector('img[alt*="Barcode"]');
    
    if (!qrImage && !barcodeImage) {
        showError('Tidak Ada File', 'QR Code dan Barcode belum dibuat untuk barang ini');
        return;
    }
    
    try {
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <html>
                <head>
                    <title>Print QR Code & Barcode - {{ barang.nama }}</title>
                    <style>
                        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
                        .container { display: flex; justify-content: space-around; align-items: center; }
                        .qr-section, .barcode-section { text-align: center; padding: 20px; border: 2px solid #000; }
                        .qr-section img { max-width: 200px; height: auto; }
                        .barcode-section img { max-width: 300px; height: auto; }
                        .info { margin-top: 10px; font-size: 12px; }
                        @media print {
                            body { margin: 0; padding: 10px; }
                            .container { flex-direction: column; gap: 20px; }
                        }
                    </style>
                </head>
                <body>
                    <div class="container">
                        <div class="qr-section">
                            <h3>QR Code</h3>
                            <img src="${qrImage.src}" alt="QR Code">
                            <div class="info">
                                <strong>{{ barang.nama }}</strong><br>
                                {{ barang.kode_barang }}
                            </div>
                        </div>
                        <div class="barcode-section">
                            <h3>Barcode</h3>
                            <img src="${barcodeImage.src}" alt="Barcode">
                            <div class="info">
                                <strong>{{ barang.nama }}</strong><br>
                                {{ barang.kode_barang }}
                            </div>
                        </div>
                    </div>
                </body>
            </html>
        `);
        printWindow.document.close();
        printWindow.print();
        showSuccess('Print Berhasil', 'QR Code dan Barcode berhasil dikirim ke printer');
    } catch (error) {
        showError('Print Gagal', 'Gagal membuka jendela print', {
            details: error.message,
            actions: [{
                id: 'retry',
                label: 'Coba Lagi',
                type: 'primary',
                callback: () => printAllCodes()
            }]
        });
    }
}

// Auto-refresh status every 30 seconds
setInterval(function() {
    // In a real implementation, you'd fetch updated status via AJAX
    console.log('Checking for status updates...');
}, 30000);
</script>
{% endblock %}