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

{% block title %}Barang Tidak Ditemukan - Inventaris HMI{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto text-center">
    <!-- Error Icon -->
    <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
        <i class="fas fa-exclamation-triangle text-red-600 text-3xl"></i>
    </div>
    
    <!-- Error Message -->
    <h1 class="text-2xl font-bold text-gray-900 mb-4">Barang Tidak Ditemukan</h1>
    <p class="text-gray-600 mb-6">
        Barang dengan kode <span class="font-semibold text-gray-900">{{ kode_barang }}</span> tidak ditemukan dalam sistem inventaris.
    </p>
    
    <!-- Possible Reasons -->
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6 mb-8">
        <h2 class="text-lg font-semibold text-yellow-800 mb-3">Kemungkinan Penyebab:</h2>
        <div class="space-y-2 text-sm text-yellow-700 text-left">
            <div class="flex items-start space-x-3">
                <i class="fas fa-check-circle text-yellow-600 mt-1"></i>
                <span>Kode barang yang dimasukkan salah atau tidak lengkap</span>
            </div>
            <div class="flex items-start space-x-3">
                <i class="fas fa-check-circle text-yellow-600 mt-1"></i>
                <span>Barang belum terdaftar dalam sistem inventaris</span>
            </div>
            <div class="flex items-start space-x-3">
                <i class="fas fa-check-circle text-yellow-600 mt-1"></i>
                <span>Barang sudah dihapus atau tidak aktif</span>
            </div>
            <div class="flex items-start space-x-3">
                <i class="fas fa-check-circle text-yellow-600 mt-1"></i>
                <span>QR Code atau Barcode rusak atau tidak terbaca dengan benar</span>
            </div>
        </div>
    </div>
    
    <!-- Action Buttons -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
        <a href="{% url 'inventaris:public_search' %}" class="btn-primary">
            <i class="fas fa-search mr-3"></i>
            Cari Barang Lain
        </a>
        <a href="{% url 'inventaris:public_scan' %}" class="btn-outline">
            <i class="fas fa-qrcode mr-3"></i>
            Scan Ulang
        </a>
    </div>
    
    <!-- Manual Input -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Coba Input Manual</h3>
        <p class="text-gray-600 mb-4">Masukkan kode barang yang berbeda untuk mencari barang lain</p>
        
        <form action="{% url 'inventaris:public_search' %}" method="get" class="max-w-md mx-auto">
            <div class="flex gap-3">
                <input type="text" 
                       name="q" 
                       placeholder="Masukkan kode barang..."
                       class="form-input flex-1"
                       required
                       autofocus>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-focus the search input
    const searchInput = document.querySelector('input[name="q"]');
    if (searchInput) {
        searchInput.focus();
    }
    
    // Add click handler to copy the error code
    const errorCode = '{{ kode_barang }}';
    if (errorCode) {
        // Create a copy button for the error code
        const codeElement = document.createElement('div');
        codeElement.className = 'inline-flex items-center px-3 py-1 rounded-lg bg-gray-100 text-gray-800 text-sm font-mono cursor-pointer hover:bg-gray-200 transition-colors';
        codeElement.innerHTML = `
            <span>${errorCode}</span>
            <i class="fas fa-copy ml-2 text-gray-500"></i>
        `;
        codeElement.title = 'Klik untuk copy kode';
        
        codeElement.addEventListener('click', function() {
            navigator.clipboard.writeText(errorCode).then(function() {
                const icon = codeElement.querySelector('i');
                icon.className = 'fas fa-check ml-2 text-green-500';
                setTimeout(() => {
                    icon.className = 'fas fa-copy ml-2 text-gray-500';
                }, 1000);
            });
        });
        
        // Insert after the error message
        const errorMessage = document.querySelector('p:contains("{{ kode_barang }}")');
        if (errorMessage) {
            errorMessage.appendChild(codeElement);
        }
    }
});
</script>
{% endblock %}