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

{% block title %}{{ barang.nama }} - Detail Barang{% endblock %}
{% block page_title %}Detail Barang{% endblock %}

{% block content %}
<!-- Full Width Detail Page - Pure Tailwind CSS -->
<div class="w-screen min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-4 sm:py-6 lg:py-8 px-2 sm:px-4 lg:px-6 xl:px-8 -mx-2 sm:-mx-4 lg:-mx-6 xl:-mx-8">
    <!-- Header Section -->
    <div class="w-full mb-6 sm:mb-8 lg:mb-10">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="flex items-center gap-3">
                <a href="{% url 'inventaris_admin:barang_list' %}" 
                   class="w-10 h-10 bg-white border border-gray-300 rounded-xl flex items-center justify-center hover:bg-gray-50 transition-colors duration-200 shadow-sm">
                    <i class="fas fa-arrow-left text-gray-600"></i>
                </a>
                <div>
                    <h1 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900">{{ barang.nama }}</h1>
                    <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-600 mt-2">{{ barang.kode_barang }}</p>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                <a href="{% url 'inventaris_admin:qr_barcode_view' barang.pk %}" 
                   class="inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-sm font-medium rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                    <i class="fas fa-qrcode mr-2"></i>
                    <span class="hidden sm:inline">Cetak Barcode</span>
                    <span class="sm:hidden">Barcode</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="w-full grid grid-cols-1 xl:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
        <!-- Left Column - Image and Status Cards -->
        <div class="xl:col-span-1 space-y-4 sm:space-y-6">
            <!-- Image Section -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
                {% if barang.gambar %}
                    <img src="{{ barang.gambar.url }}" alt="{{ barang.nama }}" 
                         class="w-full h-64 sm:h-80 lg:h-[450px] xl:h-[600px] object-cover rounded-lg border border-gray-200 shadow-sm">
                {% else %}
                    <div class="w-full h-64 sm:h-80 lg:h-[450px] xl:h-[600px] bg-gray-100 rounded-lg flex items-center justify-center border border-gray-200">
                        <div class="text-center">
                            <i class="fas fa-boxes text-gray-400 text-4xl mb-2"></i>
                            <p class="text-gray-500 text-sm">Tidak ada gambar</p>
                        </div>
                    </div>
                {% endif %}
            </div>

            <!-- Status Cards -->
            <div class="space-y-4 sm:space-y-5 lg:space-y-6">
                <!-- Kondisi -->
                <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm sm:text-base font-medium text-gray-500">Kondisi</p>
                            <p class="text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 mt-2">{{ barang.kondisi.get_kondisi_display }}</p>
                        </div>
                        <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-lg flex items-center justify-center
                            {% if barang.kondisi.kondisi == 'baik' %}bg-green-100
                            {% elif barang.kondisi.kondisi == 'rusak_ringan' %}bg-yellow-100
                            {% elif barang.kondisi.kondisi == 'rusak_berat' %}bg-red-100
                            {% else %}bg-gray-100{% endif %}">
                            <i class="fas fa-thermometer-half text-lg
                                {% if barang.kondisi.kondisi == 'baik' %}text-green-600
                                {% elif barang.kondisi.kondisi == 'rusak_ringan' %}text-yellow-600
                                {% elif barang.kondisi.kondisi == 'rusak_berat' %}text-red-600
                                {% else %}text-gray-600{% endif %}"></i>
                        </div>
                    </div>
                </div>

                <!-- Status -->
                <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm sm:text-base font-medium text-gray-500">Status</p>
                            <p class="text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 mt-2">{{ barang.get_status_display }}</p>
                        </div>
                        <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-lg flex items-center justify-center
                            {% if barang.status == 'aktif' %}bg-green-100
                            {% elif barang.status == 'dipinjam' %}bg-blue-100
                            {% elif barang.status == 'rusak' %}bg-red-100
                            {% else %}bg-gray-100{% endif %}">
                            <i class="fas fa-toggle-on text-lg
                                {% if barang.status == 'aktif' %}text-green-600
                                {% elif barang.status == 'dipinjam' %}text-blue-600
                                {% elif barang.status == 'rusak' %}text-red-600
                                {% else %}text-gray-600{% endif %}"></i>
                        </div>
                    </div>
                </div>

                <!-- Lokasi -->
                <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm sm:text-base font-medium text-gray-500">Lokasi</p>
                            <p class="text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 mt-2">{{ barang.lokasi.nama }}</p>
                        </div>
                        <div class="w-14 h-14 sm:w-16 sm:h-16 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-map-marker-alt text-purple-600 text-lg"></i>
                        </div>
                    </div>
                </div>
                
                <!-- QR Code Status -->
                <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <p class="text-sm sm:text-base font-medium text-gray-500 mb-2">QR Code & Barcode</p>
                            {% if qr_code_obj %}
                                <p class="text-base sm:text-lg font-semibold text-green-600">Tersedia</p>
                                <p class="text-sm text-gray-500 mt-2">Dibuat: {{ qr_code_obj.created_at|date:"d M Y" }}</p>
                            {% else %}
                                <p class="text-base sm:text-lg font-semibold text-yellow-600">Belum Dibuat</p>
                                <p class="text-sm text-gray-500 mt-2">Hanya role inventaris yang bisa membuat</p>
                            {% endif %}
                        </div>
                        <div class="w-14 h-14 sm:w-16 sm:h-16 {% if qr_code_obj %}bg-green-100{% else %}bg-yellow-100{% endif %} rounded-lg flex items-center justify-center ml-4">
                            <i class="fas fa-qrcode {% if qr_code_obj %}text-green-600{% else %}text-yellow-600{% endif %} text-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column - Detailed Information -->
        <div class="xl:col-span-2 space-y-6 sm:space-y-8 lg:space-y-10">
            <!-- Basic Information -->
            <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                <h3 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-semibold text-gray-900 mb-5 sm:mb-6 lg:mb-8">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                    Informasi Dasar
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 sm:gap-6 lg:gap-8">
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500">Kode Barang</p>
                        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-2 font-semibold">{{ barang.kode_barang }}</p>
                    </div>
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500">Kategori</p>
                        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-2 font-semibold">{{ barang.kategori.nama }}</p>
                    </div>
                    {% if barang.merk %}
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500">Merk</p>
                        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-2 font-semibold">{{ barang.merk }}</p>
                    </div>
                    {% endif %}
                    {% if barang.model %}
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500">Model</p>
                        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-2 font-semibold">{{ barang.model }}</p>
                    </div>
                    {% endif %}
                    {% if barang.nomor_seri %}
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500">Nomor Seri</p>
                        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-2 font-semibold">{{ barang.nomor_seri }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Acquisition Information -->
            <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                <h3 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-semibold text-gray-900 mb-5 sm:mb-6 lg:mb-8">
                    <i class="fas fa-shopping-cart text-green-600 mr-2"></i>
                    Informasi Perolehan
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 sm:gap-6 lg:gap-8">
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500">Tahun Perolehan</p>
                        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-2 font-semibold">{{ barang.tahun_perolehan }}</p>
                    </div>
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500">Harga Perolehan</p>
                        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-2 font-semibold">Rp {{ barang.harga_perolehan|number_idr }}</p>
                    </div>
                </div>
            </div>

            <!-- Technical Details -->
            {% if barang.spesifikasi or barang.keterangan %}
            <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                <h3 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-semibold text-gray-900 mb-5 sm:mb-6 lg:mb-8">
                    <i class="fas fa-cogs text-orange-600 mr-2"></i>
                    Detail Teknis
                </h3>
                <div class="space-y-5 sm:space-y-6">
                    {% if barang.spesifikasi %}
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500 mb-3">Spesifikasi</p>
                        <div class="bg-gray-50 rounded-lg p-4 sm:p-5 lg:p-6">
                            <p class="text-base sm:text-lg lg:text-xl text-gray-900 whitespace-pre-line">{{ barang.spesifikasi }}</p>
                        </div>
                    </div>
                    {% endif %}
                    {% if barang.keterangan %}
                    <div>
                        <p class="text-sm sm:text-base font-medium text-gray-500 mb-3">Keterangan Tambahan</p>
                        <div class="bg-gray-50 rounded-lg p-4 sm:p-5 lg:p-6">
                            <p class="text-base sm:text-lg lg:text-xl text-gray-900 whitespace-pre-line">{{ barang.keterangan }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Documents -->
            {% if barang.dokumen %}
            <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                <h3 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-semibold text-gray-900 mb-5 sm:mb-6 lg:mb-8">
                    <i class="fas fa-file-alt text-indigo-600 mr-2"></i>
                    Dokumen Pendukung
                </h3>
                <div class="flex items-center p-4 sm:p-5 lg:p-6 bg-gray-50 rounded-lg">
                    <div class="w-14 h-14 sm:w-16 sm:h-16 bg-indigo-100 rounded-lg flex items-center justify-center mr-4 sm:mr-5">
                        <i class="fas fa-file-alt text-indigo-600 text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <p class="text-base sm:text-lg font-medium text-gray-900">Dokumen Pendukung</p>
                        <p class="text-sm sm:text-base text-gray-500">File terlampir</p>
                    </div>
                    <a href="{{ barang.dokumen.url }}" target="_blank" 
                       class="inline-flex items-center px-4 sm:px-5 py-2 sm:py-3 bg-indigo-600 text-white text-sm sm:text-base font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-200">
                        <i class="fas fa-download mr-2"></i>Download
                    </a>
                </div>
            </div>
            {% endif %}

            <!-- Recent Activities -->
            <div class="bg-white rounded-xl shadow-lg p-5 sm:p-6 lg:p-8">
                <h3 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-semibold text-gray-900 mb-5 sm:mb-6 lg:mb-8">
                    <i class="fas fa-history text-purple-600 mr-2"></i>
                    Aktivitas Terbaru
                </h3>
                <div class="space-y-3">
                    {% if recent_peminjaman %}
                        {% for peminjaman in recent_peminjaman %}
                            <div class="flex items-start gap-3 sm:gap-4 p-3 sm:p-4 bg-gray-50 rounded-lg">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-hand-paper text-blue-600 text-sm"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm sm:text-base font-medium text-gray-900">Peminjaman</p>
                                    <p class="text-sm text-gray-600">Dipinjam oleh {{ peminjaman.peminjam.nama_lengkap }}</p>
                                    <p class="text-xs text-gray-500 mt-1">{{ peminjaman.created_at|timesince }} yang lalu</p>
                                </div>
                                <span class="inline-flex items-center px-2 sm:px-3 py-1 rounded-full text-xs font-medium flex-shrink-0
                                    {% if peminjaman.status == 'pending' %}bg-yellow-100 text-yellow-800
                                    {% elif peminjaman.status == 'disetujui' %}bg-blue-100 text-blue-800
                                    {% elif peminjaman.status == 'dipinjam' %}bg-green-100 text-green-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ peminjaman.get_status_display }}
                                </span>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center py-8 sm:py-12">
                            <div class="w-12 h-12 sm:w-16 sm:h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-inbox text-gray-400 text-xl sm:text-2xl"></i>
                            </div>
                            <p class="text-gray-500 text-sm sm:text-base">Belum ada aktivitas</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}