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

{% block title %}Cari Barang - Inventaris HMI{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Header Section -->
    <div class="text-center mb-8">
        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-search text-blue-600 text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 mb-2">Cari Barang</h1>
        <p class="text-gray-600">Temukan informasi barang berdasarkan kode, nama, atau nomor seri</p>
    </div>

    <!-- Search Form -->
    <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
        <form method="get" action="{% url 'inventaris:public_search' %}" class="max-w-2xl mx-auto">
            <div class="flex flex-col sm:flex-row gap-3">
                <div class="flex-1 relative">
                    <input type="text" 
                           name="q" 
                           value="{{ query }}"
                           placeholder="Masukkan kode barang, nama, atau nomor seri..."
                           class="form-input pl-12"
                           required
                           autofocus>
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                </div>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-search mr-2"></i>
                    Cari
                </button>
            </div>
        </form>
        
        <!-- Search Tips -->
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-500">
                <i class="fas fa-lightbulb mr-2"></i>
                Tips: Gunakan kode barang lengkap untuk hasil yang lebih akurat
            </p>
        </div>
    </div>

    <!-- Search Results -->
    {% if query %}
    <div class="mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-900">
                Hasil Pencarian untuk "{{ query }}"
            </h2>
            <span class="text-sm text-gray-500">
                {{ barang_list|length }} barang ditemukan
            </span>
        </div>

        {% if barang_list %}
        <div class="space-y-4">
            {% for barang in barang_list %}
            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <div class="flex-1">
                        <div class="flex items-start mb-3">
                            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-boxes text-green-600 text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-lg font-semibold text-gray-900 mb-1">{{ barang.nama }}</h3>
                                <p class="text-gray-600 text-sm mb-2">Kode: {{ barang.kode_barang }}</p>
                                
                                <div class="flex flex-wrap items-center gap-2 mb-3">
                                    <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>
                                    
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        <i class="fas fa-folder mr-1"></i>{{ barang.kategori.nama }}
                                    </span>
                                    
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        <i class="fas fa-map-marker-alt mr-1"></i>{{ barang.lokasi.nama }}
                                    </span>
                                </div>
                                
                                {% if barang.nomor_seri %}
                                <p class="text-sm text-gray-600">
                                    <i class="fas fa-barcode mr-2"></i>Seri: {{ barang.nomor_seri }}
                                </p>
                                {% endif %}
                                
                                {% if barang.spesifikasi %}
                                <p class="text-sm text-gray-600 mt-2">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    {{ barang.spesifikasi|truncatewords:15 }}
                                </p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row gap-2 mt-4 md:mt-0 md:ml-6">
                        <a href="{% url 'inventaris:public_barang_detail' barang.kode_barang %}" 
                           class="btn-primary btn-sm">
                            <i class="fas fa-eye mr-2"></i>
                            Lihat Detail
                        </a>
                        
                        {% if barang.status == 'aktif' %}
                        <span class="inline-flex items-center px-3 py-2 rounded-lg text-sm font-medium bg-green-50 text-green-700">
                            <i class="fas fa-check-circle mr-2"></i>
                            Tersedia
                        </span>
                        {% elif barang.status == 'dipinjam' %}
                        <span class="inline-flex items-center px-3 py-2 rounded-lg text-sm font-medium bg-yellow-50 text-yellow-700">
                            <i class="fas fa-hand-paper mr-2"></i>
                            Sedang Dipinjam
                        </span>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <!-- No Results -->
        <div class="bg-white rounded-2xl shadow-xl p-8 text-center">
            <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-search text-gray-400 text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak Ada Hasil</h3>
            <p class="text-gray-600 mb-4">
                Tidak ditemukan barang dengan kata kunci "{{ query }}"
            </p>
            <div class="space-y-2 text-sm text-gray-500">
                <p>• Pastikan ejaan kata kunci sudah benar</p>
                <p>• Coba gunakan kata kunci yang lebih umum</p>
                <p>• Gunakan kode barang lengkap jika ada</p>
            </div>
        </div>
        {% endif %}
    </div>
    {% else %}
    <!-- Search Instructions -->
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl p-6">
        <div class="flex items-start space-x-4">
            <div class="flex-shrink-0">
                <div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center">
                    <i class="fas fa-lightbulb text-white"></i>
                </div>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-bold text-blue-900 mb-3">Cara Mencari Barang</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                        <span>Masukkan kode barang lengkap</span>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                        <span>Cari berdasarkan nama barang</span>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                        <span>Gunakan nomor seri jika ada</span>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                        <span>Gunakan kata kunci parsial</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Quick Actions -->
    <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <a href="{% url 'inventaris:public_scan' %}" class="btn-secondary">
            <i class="fas fa-qrcode mr-3"></i>
            Scan Barcode/QR Code
        </a>
        <a href="{% url 'inventaris:public_search' %}" class="btn-outline">
            <i class="fas fa-refresh mr-3"></i>
            Reset Pencarian
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-focus search input
    const searchInput = document.querySelector('input[name="q"]');
    if (searchInput) {
        searchInput.focus();
        
        // Clear search on Escape key
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                this.value = '';
                this.focus();
            }
        });
    }
    
    // Highlight search terms in results
    const query = '{{ query }}';
    if (query) {
        const results = document.querySelectorAll('.bg-white.rounded-xl.shadow-lg');
        results.forEach(result => {
            const text = result.textContent.toLowerCase();
            const queryLower = query.toLowerCase();
            
            if (text.includes(queryLower)) {
                result.style.borderLeft = '4px solid #10b981';
            }
        });
    }
});
</script>
{% endblock %}