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

{% block title %}{{ barang.nama }} - Inventaris HMI{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Header Section -->
    <div class="bg-white rounded-2xl shadow-xl p-6 mb-6">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
            <div class="flex-1">
                <div class="flex items-center mb-3">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4">
                        <i class="fas fa-boxes text-green-600 text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900 mobile-title">{{ barang.nama }}</h1>
                        <p class="text-gray-600 mobile-text">Kode: {{ barang.kode_barang }}</p>
                    </div>
                </div>
                
                <!-- Status Badge -->
                <div class="flex items-center space-x-2">
                    <span class="status-badge status-{{ barang.status }}">
                        {% if barang.status == 'aktif' %}
                            <i class="fas fa-check-circle mr-1"></i>Aktif
                        {% elif barang.status == 'dipinjam' %}
                            <i class="fas fa-hand-paper mr-1"></i>Dipinjam
                        {% elif barang.status == 'rusak' %}
                            <i class="fas fa-exclamation-triangle mr-1"></i>Rusak
                        {% elif barang.status == 'maintenance' %}
                            <i class="fas fa-tools mr-1"></i>Maintenance
                        {% endif %}
                    </span>
                    
                    {% if barang.kondisi %}
                    <span class="status-badge bg-gray-100 text-gray-800">
                        <i class="fas fa-thermometer-half mr-1"></i>{{ barang.kondisi.kondisi }}
                    </span>
                    {% endif %}
                </div>
            </div>
            
            <!-- QR Code Preview -->
            {% if qr_code_obj and qr_code_obj.qr_code_image %}
            <div class="mt-4 md:mt-0 md:ml-6">
                <div class="bg-white p-3 rounded-xl border-2 border-gray-200">
                    <img src="{{ qr_code_obj.qr_code_image.url }}" 
                         alt="QR Code {{ barang.kode_barang }}" 
                         class="w-20 h-20 mx-auto">
                </div>
                <p class="text-xs text-gray-500 text-center mt-2">QR Code</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Main Information Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Basic Information -->
        <div class="bg-white rounded-2xl shadow-xl p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-info-circle text-blue-600 mr-3"></i>
                Informasi Dasar
            </h2>
            
            <div class="space-y-4">
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Kode Barang</span>
                    <span class="text-gray-900 font-semibold">{{ barang.kode_barang }}</span>
                </div>
                
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Nama</span>
                    <span class="text-gray-900 font-semibold">{{ barang.nama }}</span>
                </div>
                
                {% if barang.nomor_seri %}
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Nomor Seri</span>
                    <span class="text-gray-900 font-semibold">{{ barang.nomor_seri }}</span>
                </div>
                {% endif %}
                
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Kategori</span>
                    <span class="text-gray-900 font-semibold">{{ barang.kategori.nama }}</span>
                </div>
                
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Lokasi</span>
                    <span class="text-gray-900 font-semibold">{{ barang.lokasi.nama }}</span>
                </div>
                
                {% if barang.merk %}
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Merk</span>
                    <span class="text-gray-900 font-semibold">{{ barang.merk.nama }}</span>
                </div>
                {% endif %}
                
                <div class="flex justify-between items-center py-2">
                    <span class="text-gray-600 font-medium">Tahun Perolehan</span>
                    <span class="text-gray-900 font-semibold">{{ barang.tahun_perolehan }}</span>
                </div>
            </div>
        </div>

        <!-- Specifications -->
        <div class="bg-white rounded-2xl shadow-xl p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-cogs text-green-600 mr-3"></i>
                Spesifikasi & Detail
            </h2>
            
            <div class="space-y-4">
                {% if barang.spesifikasi %}
                <div>
                    <span class="text-gray-600 font-medium block mb-2">Spesifikasi</span>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-700">
                        {{ barang.spesifikasi|linebreaks }}
                    </div>
                </div>
                {% endif %}
                
                {% if barang.deskripsi %}
                <div>
                    <span class="text-gray-600 font-medium block mb-2">Deskripsi</span>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-700">
                        {{ barang.deskripsi|linebreaks }}
                    </div>
                </div>
                {% endif %}
                
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Tanggal Masuk</span>
                    <span class="text-gray-900 font-semibold">{{ barang.tanggal_masuk|date:"d M Y" }}</span>
                </div>
                
                <div class="flex justify-between items-center py-2 border-b border-gray-100">
                    <span class="text-gray-600 font-medium">Nilai Perolehan</span>
                    <span class="text-gray-900 font-semibold">
                        {% if barang.nilai_perolehan %}
                            Rp {{ barang.nilai_perolehan|number_idr }}
                        {% else %}
                            -
                        {% endif %}
                    </span>
                </div>
                
                <div class="flex justify-between items-center py-2">
                    <span class="text-gray-600 font-medium">Kondisi</span>
                    <span class="status-badge status-{{ barang.kondisi.kondisi|lower|cut:' ' }}">
                        {{ barang.kondisi.kondisi }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Maintenance History -->
    {% if perawatan_history %}
    <div class="bg-white rounded-2xl shadow-xl p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
            <i class="fas fa-tools text-orange-600 mr-3"></i>
            Riwayat Perawatan Terbaru
        </h2>
        
        <div class="space-y-3">
            {% for perawatan in perawatan_history %}
            <div class="bg-gray-50 rounded-lg p-4">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
                    <div class="flex items-center mb-2 sm:mb-0">
                        <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-wrench text-orange-600 text-sm"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900">{{ perawatan.jenis_perawatan }}</h3>
                            <p class="text-sm text-gray-600">{{ perawatan.tanggal_perawatan|date:"d M Y" }}</p>
                        </div>
                    </div>
                    <span class="status-badge 
                        {% if perawatan.status == 'selesai' %}bg-green-100 text-green-800
                        {% elif perawatan.status == 'proses' %}bg-yellow-100 text-yellow-800
                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ perawatan.status|title }}
                    </span>
                </div>
                
                {% if perawatan.teknisi %}
                <p class="text-sm text-gray-600 mb-2">
                    <i class="fas fa-user-cog mr-2"></i>{{ perawatan.teknisi }}
                </p>
                {% endif %}
                
                {% if perawatan.deskripsi %}
                <p class="text-sm text-gray-700">{{ perawatan.deskripsi|truncatewords:20 }}</p>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- QR Code & Barcode Section -->
    {% if qr_code_obj %}
    <div class="bg-white rounded-2xl shadow-xl p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
            <i class="fas fa-qrcode text-purple-600 mr-3"></i>
            QR Code & Barcode
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- QR Code -->
            {% if qr_code_obj.qr_code_image %}
            <div class="text-center">
                <h3 class="text-md font-medium text-gray-700 mb-3">QR Code</h3>
                <div class="bg-white p-4 rounded-xl border-2 border-gray-200 inline-block mb-3">
                    <img src="{{ qr_code_obj.qr_code_image.url }}" 
                         alt="QR Code {{ barang.kode_barang }}" 
                         class="w-32 h-32 mx-auto">
                </div>
                <p class="text-xs text-gray-600">Scan untuk melihat informasi barang</p>
            </div>
            {% endif %}

            <!-- Barcode -->
            {% if qr_code_obj.barcode_image %}
            <div class="text-center">
                <h3 class="text-md font-medium text-gray-700 mb-3">Barcode</h3>
                <div class="bg-white p-4 rounded-xl border-2 border-gray-200 inline-block mb-3">
                    <img src="{{ qr_code_obj.barcode_image.url }}" 
                         alt="Barcode {{ barang.kode_barang }}" 
                         class="h-16 mx-auto">
                </div>
                <p class="text-xs text-gray-600">Scan dengan barcode scanner</p>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Action Buttons -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <a href="{% url 'inventaris:public_scan' %}" class="btn-primary">
            <i class="fas fa-qrcode mr-3"></i>
            Scan Barang Lain
        </a>
        <a href="{% url 'inventaris:public_search' %}" class="btn-outline">
            <i class="fas fa-search mr-3"></i>
            Cari Barang Lain
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add click to copy functionality for important info
    const codeElement = document.querySelector('span:contains("{{ barang.kode_barang }}")');
    if (codeElement) {
        codeElement.style.cursor = 'pointer';
        codeElement.title = 'Klik untuk copy kode barang';
        codeElement.addEventListener('click', function() {
            navigator.clipboard.writeText('{{ barang.kode_barang }}').then(function() {
                // Show temporary success message
                const originalText = codeElement.textContent;
                codeElement.textContent = 'Copied!';
                codeElement.style.color = '#10b981';
                setTimeout(() => {
                    codeElement.textContent = originalText;
                    codeElement.style.color = '';
                }, 1000);
            });
        });
    }
});
</script>
{% endblock %}