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

{% block title %}QR Code & Barcode - {{ barang.nama }}{% endblock %}
{% block page_title %}QR Code & Barcode{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-4 px-2 sm:px-4 lg:px-6 xl:px-8">
    <div class="w-full space-y-6">
        <!-- Header -->
        <div class="bg-white rounded-xl shadow-lg border-2 border-blue-100 p-4 sm:p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3">
                    <a href="{% url 'inventaris_admin:barang_detail' barang.pk %}" 
                       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-xl sm:text-2xl font-bold text-gray-900">QR Code & Barcode</h1>
                        <p class="text-sm text-gray-600 mt-1">{{ barang.nama }} - {{ barang.kode_barang }}</p>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                    <a href="{% url 'inventaris_admin:print_barcode' 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 transform hover:-translate-y-0.5">
                        <i class="fas fa-print mr-2"></i>
                        <span class="hidden sm:inline">Cetak Barcode</span>
                        <span class="sm:hidden">Cetak</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- QR Code & Barcode Status -->
        {% if qr_code_obj %}
            <div class="bg-green-50 border-2 border-green-200 rounded-xl p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-green-800">QR Code & Barcode Tersedia</h3>
                        <p class="text-sm text-green-600 mt-1">Dibuat pada {{ qr_code_obj.created_at|date:"d M Y H:i" }}</p>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-4 sm:p-6">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-yellow-800">QR Code & Barcode Belum Dibuat</h3>
                        <p class="text-sm text-yellow-600 mt-1">QR Code dan Barcode hanya dapat dibuat oleh role inventaris khusus</p>
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- QR Code & Barcode Display -->
        {% if qr_code_obj %}
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 sm:gap-6">
                <!-- QR Code -->
                <div class="bg-white rounded-xl shadow-lg border-2 border-blue-100 p-4 sm:p-6">
                    <div class="text-center">
                        <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-4 flex items-center justify-center">
                            <i class="fas fa-qrcode text-blue-600 mr-2"></i>
                            QR Code
                        </h3>
                        
                        {% if qr_code_obj.qr_code_image %}
                            <div class="bg-white p-4 rounded-lg border-2 border-gray-200 inline-block mb-4">
                                <img src="{{ qr_code_obj.qr_code_image.url }}" 
                                     alt="QR Code {{ barang.kode_barang }}" 
                                     class="w-40 h-40 sm:w-48 sm:h-48 mx-auto">
                            </div>
                            
                            <div class="space-y-2 mb-4">
                                <p class="text-xs sm:text-sm text-gray-600">Kode Barang: <span class="font-medium text-gray-900">{{ barang.kode_barang }}</span></p>
                                <p class="text-xs sm:text-sm text-gray-600">Nama: <span class="font-medium text-gray-900">{{ barang.nama }}</span></p>
                                <p class="text-xs sm:text-sm text-gray-600">Kategori: <span class="font-medium text-gray-900">{{ barang.kategori.nama }}</span></p>
                            </div>
                            
                            <div class="mt-4 flex flex-col sm:flex-row justify-center space-y-2 sm:space-y-0 sm:space-x-3">
                                <a href="{{ qr_code_obj.qr_code_image.url }}" 
                                   target="_blank" 
                                   class="inline-flex items-center justify-center px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs sm:text-sm font-medium rounded-lg transition-colors duration-200">
                                    <i class="fas fa-external-link-alt mr-2"></i>
                                    <span class="hidden sm:inline">Lihat Full Size</span>
                                    <span class="sm:hidden">Lihat</span>
                                </a>
                                <button onclick="printQR()" 
                                        class="inline-flex items-center justify-center px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-medium rounded-lg transition-colors duration-200">
                                    <i class="fas fa-print mr-2"></i>
                                    <span class="hidden sm:inline">Cetak QR Code</span>
                                    <span class="sm:hidden">Cetak</span>
                                </button>
                            </div>
                        {% else %}
                            <div class="text-center py-8">
                                <i class="fas fa-qrcode text-gray-400 text-4xl mb-4"></i>
                                <p class="text-gray-500 text-sm">QR Code belum tersedia</p>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Barcode -->
                <div class="bg-white rounded-xl shadow-lg border-2 border-blue-100 p-4 sm:p-6">
                    <div class="text-center">
                        <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-4 flex items-center justify-center">
                            <i class="fas fa-barcode text-blue-600 mr-2"></i>
                            Barcode
                        </h3>
                        
                        {% if qr_code_obj.barcode_image %}
                            <div class="bg-white p-4 rounded-lg border-2 border-gray-200 inline-block mb-4">
                                <img src="{{ qr_code_obj.barcode_image.url }}" 
                                     alt="Barcode {{ barang.kode_barang }}" 
                                     class="h-20 sm:h-24 mx-auto">
                            </div>
                            
                            <div class="space-y-2 mb-4">
                                <p class="text-xs sm:text-sm text-gray-600">Kode Barang: <span class="font-medium text-gray-900">{{ barang.kode_barang }}</span></p>
                                <p class="text-xs sm:text-sm text-gray-600">Lokasi: <span class="font-medium text-gray-900">{{ barang.lokasi.nama }}</span></p>
                                <p class="text-xs sm:text-sm text-gray-600">Status: <span class="font-medium text-gray-900">{{ barang.get_status_display }}</span></p>
                            </div>
                            
                            <div class="mt-4 flex flex-col sm:flex-row justify-center space-y-2 sm:space-y-0 sm:space-x-3">
                                <a href="{{ qr_code_obj.barcode_image.url }}" 
                                   target="_blank" 
                                   class="inline-flex items-center justify-center px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs sm:text-sm font-medium rounded-lg transition-colors duration-200">
                                    <i class="fas fa-external-link-alt mr-2"></i>
                                    <span class="hidden sm:inline">Lihat Full Size</span>
                                    <span class="sm:hidden">Lihat</span>
                                </a>
                                <a href="{% url 'inventaris_admin:print_barcode' barang.pk %}" 
                                   class="inline-flex items-center justify-center px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-medium rounded-lg transition-colors duration-200">
                                    <i class="fas fa-print mr-2"></i>
                                    <span class="hidden sm:inline">Cetak Barcode</span>
                                    <span class="sm:hidden">Cetak</span>
                                </a>
                            </div>
                        {% else %}
                            <div class="text-center py-8">
                                <i class="fas fa-barcode text-gray-400 text-4xl mb-4"></i>
                                <p class="text-gray-500 text-sm">Barcode belum tersedia</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- QR Code Data -->
            <div class="bg-white rounded-xl shadow-lg border-2 border-blue-100 p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                    Data QR Code
                </h3>
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <pre class="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap break-words">{{ qr_code_obj.qr_code_data }}</pre>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<script>
function printQR() {
    const qrImage = document.querySelector('img[alt*="QR Code"]');
    if (qrImage) {
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <html>
                <head>
                    <title>Print QR Code - {{ barang.nama }}</title>
                    <style>
                        body { margin: 0; padding: 20px; text-align: center; font-family: Arial, sans-serif; }
                        .qr-container { display: inline-block; padding: 20px; border: 2px solid #000; }
                        .qr-info { margin-top: 10px; font-size: 14px; }
                        img { max-width: 300px; height: auto; }
                    </style>
                </head>
                <body>
                    <div class="qr-container">
                        <img src="${qrImage.src}" alt="QR Code">
                        <div class="qr-info">
                            <strong>{{ barang.nama }}</strong><br>
                            {{ barang.kode_barang }}<br>
                            {{ barang.kategori.nama }}
                        </div>
                    </div>
                </body>
            </html>
        `);
        printWindow.document.close();
        printWindow.print();
    }
}
</script>
{% endblock %}