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

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

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">QR Code & Barcode</h1>
            <p class="mt-2 text-gray-600">{{ barang.nama }} - {{ barang.kode_barang }}</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{% url 'inventaris:barang_detail' barang.pk %}" class="btn-secondary">
                <i class="fas fa-arrow-left mr-2"></i>Kembali ke Detail
            </a>
            <button onclick="printAll()" class="btn-primary">
                <i class="fas fa-print mr-2"></i>Print Semua
            </button>
        </div>
    </div>

    <!-- QR Code & Barcode Status -->
    {% if qr_code_obj %}
        <div class="bg-green-50 border border-green-200 rounded-xl p-4">
            <div class="flex items-center">
                <i class="fas fa-check-circle text-green-600 text-xl mr-3"></i>
                <div>
                    <h3 class="text-lg font-semibold text-green-800">QR Code & Barcode Tersedia</h3>
                    <p class="text-sm text-green-600">Dibuat pada {{ qr_code_obj.created_at|date:"d M Y H:i" }}</p>
                </div>
            </div>
        </div>
    {% else %}
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
            <div class="flex items-center">
                <i class="fas fa-exclamation-triangle text-yellow-600 text-xl mr-3"></i>
                <div>
                    <h3 class="text-lg font-semibold text-yellow-800">QR Code & Barcode Belum Dibuat</h3>
                    <p class="text-sm text-yellow-600">Klik tombol "Generate" untuk membuat QR Code dan Barcode</p>
                </div>
            </div>
        </div>
    {% endif %}

    <!-- Generate Button -->
    {% if not qr_code_obj %}
        <div class="text-center">
            <a href="{% url 'inventaris:generate_qr_barcode' barang.pk %}" class="btn-primary btn-lg">
                <i class="fas fa-qrcode mr-2"></i>Generate QR Code & Barcode
            </a>
        </div>
    {% endif %}

    <!-- QR Code & Barcode Display -->
    {% if qr_code_obj %}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- QR Code -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="text-center">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">
                        <i class="fas fa-qrcode text-inventory-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-48 h-48 mx-auto">
                        </div>
                        
                        <div class="space-y-2">
                            <p class="text-sm text-gray-600">Kode Barang: <span class="font-medium">{{ barang.kode_barang }}</span></p>
                            <p class="text-sm text-gray-600">Nama: <span class="font-medium">{{ barang.nama }}</span></p>
                            <p class="text-sm text-gray-600">Kategori: <span class="font-medium">{{ barang.kategori.nama }}</span></p>
                        </div>
                        
                        <div class="mt-4 flex justify-center space-x-3">
                            <a href="{% url 'inventaris:view_qr_code' barang.pk %}" 
                               target="_blank" 
                               class="btn-secondary btn-sm">
                                <i class="fas fa-external-link-alt mr-1"></i>View Full Size
                            </a>
                            <button onclick="printQR()" class="btn-primary btn-sm">
                                <i class="fas fa-print mr-1"></i>Print QR Code
                            </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">QR Code belum tersedia</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Barcode -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="text-center">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">
                        <i class="fas fa-barcode text-inventory-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-24 mx-auto">
                        </div>
                        
                        <div class="space-y-2">
                            <p class="text-sm text-gray-600">Kode Barang: <span class="font-medium">{{ barang.kode_barang }}</span></p>
                            <p class="text-sm text-gray-600">Lokasi: <span class="font-medium">{{ barang.lokasi.nama }}</span></p>
                            <p class="text-sm text-gray-600">Status: <span class="font-medium">{{ barang.get_status_display }}</span></p>
                        </div>
                        
                        <div class="mt-4 flex justify-center space-x-3">
                            <a href="{% url 'inventaris:view_barcode' barang.pk %}" 
                               target="_blank" 
                               class="btn-secondary btn-sm">
                                <i class="fas fa-external-link-alt mr-1"></i>View Full Size
                            </a>
                            <a href="{% url 'inventaris:print_barcode' barang.pk %}" 
                               class="btn-primary btn-sm">
                                <i class="fas fa-print mr-1"></i>Print Barcode
                            </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">Barcode belum tersedia</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- QR Code Data -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-info-circle text-inventory-600 mr-2"></i>
                Data QR Code
            </h3>
            <div class="bg-gray-50 rounded-lg p-4">
                <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{ qr_code_obj.qr_code_data }}</pre>
            </div>
        </div>

        <!-- Actions -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-tools text-inventory-600 mr-2"></i>
                Aksi
            </h3>
            <div class="flex flex-wrap gap-3">
                <a href="{% url 'inventaris:generate_qr_barcode' barang.pk %}" class="btn-warning">
                    <i class="fas fa-sync-alt mr-2"></i>Regenerate QR Code & Barcode
                </a>
                <button onclick="downloadAll()" class="btn-success">
                    <i class="fas fa-download mr-2"></i>Download Semua
                </button>
                <button onclick="printAll()" class="btn-primary">
                    <i class="fas fa-print mr-2"></i>Print Semua
                </button>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<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();
    }
}

function printBarcode() {
    window.open('{% url "inventaris:print_barcode" barang.pk %}', '_blank');
}

function printAll() {
    const qrImage = document.querySelector('img[alt*="QR Code"]');
    const barcodeImage = document.querySelector('img[alt*="Barcode"]');
    
    if (qrImage && barcodeImage) {
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <html>
                <head>
                    <title>Print QR Code & Barcode - {{ barang.nama }}</title>
                    <style>
                        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
                        .container { display: flex; justify-content: space-around; align-items: center; }
                        .qr-section, .barcode-section { text-align: center; padding: 20px; border: 2px solid #000; }
                        .qr-section img { max-width: 200px; height: auto; }
                        .barcode-section img { max-width: 300px; height: auto; }
                        .info { margin-top: 10px; font-size: 12px; }
                        @media print {
                            body { margin: 0; padding: 10px; }
                            .container { flex-direction: column; gap: 20px; }
                        }
                    </style>
                </head>
                <body>
                    <div class="container">
                        <div class="qr-section">
                            <h3>QR Code</h3>
                            <img src="${qrImage.src}" alt="QR Code">
                            <div class="info">
                                <strong>{{ barang.nama }}</strong><br>
                                {{ barang.kode_barang }}
                            </div>
                        </div>
                        <div class="barcode-section">
                            <h3>Barcode</h3>
                            <img src="${barcodeImage.src}" alt="Barcode">
                            <div class="info">
                                <strong>{{ barang.nama }}</strong><br>
                                {{ barang.kode_barang }}
                            </div>
                        </div>
                    </div>
                </body>
            </html>
        `);
        printWindow.document.close();
        printWindow.print();
    }
}

function downloadAll() {
    // Download QR Code
    const qrImage = document.querySelector('img[alt*="QR Code"]');
    if (qrImage) {
        const link = document.createElement('a');
        link.href = qrImage.src;
        link.download = 'qr_code_{{ barang.kode_barang }}.png';
        link.click();
    }
    
    // Download Barcode
    const barcodeImage = document.querySelector('img[alt*="Barcode"]');
    if (barcodeImage) {
        const link = document.createElement('a');
        link.href = barcodeImage.src;
        link.download = 'barcode_{{ barang.kode_barang }}.png';
        link.click();
    }
}
</script>
{% endblock %}