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

{% block title %}Scan Barcode/QR Code - 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-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-qrcode text-green-600 text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 mb-2">Scan Barcode/QR Code</h1>
        <p class="text-gray-600">Arahkan kamera ke barcode atau QR code untuk melihat informasi barang</p>
    </div>

    <!-- Scanner Section -->
    <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
        <div class="text-center mb-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-2">Scanner Kamera</h2>
            <p class="text-sm text-gray-600">Pastikan kamera memiliki akses untuk scan barcode</p>
        </div>
        
        <!-- Scanner Container -->
        <div id="scanner-container" class="mb-6" x-show="scannerActive">
            <div class="scanner-overlay">
                <div class="scanner-line"></div>
                <div class="scanner-corners"></div>
            </div>
        </div>
        
        <!-- Scanner Controls -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <button @click="toggleScanner()" 
                    class="btn-primary"
                    :class="{ 'bg-red-600 hover:bg-red-700': scannerActive }">
                <i class="fas mr-3" :class="scannerActive ? 'fa-stop' : 'fa-play'"></i>
                <span x-text="scannerActive ? 'Stop Scanner' : 'Mulai Scan'"></span>
            </button>
            
            <button @click="scannerActive = false; stopScanner()" 
                    x-show="scannerActive"
                    class="btn-secondary">
                <i class="fas fa-times mr-3"></i>
                Tutup Scanner
            </button>
        </div>
        
        <!-- Scanner Status -->
        <div x-show="scannerActive" class="mt-4 text-center">
            <div class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-100 text-green-800">
                <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
                Scanner aktif - Arahkan ke barcode
            </div>
        </div>
    </div>

    <!-- Manual Input Section -->
    <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
        <div class="text-center mb-6">
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-keyboard text-blue-600"></i>
            </div>
            <h2 class="text-lg font-semibold text-gray-900 mb-2">Input Manual</h2>
            <p class="text-sm text-gray-600">Masukkan kode barang secara manual jika scanner tidak berfungsi</p>
        </div>
        
        <form @submit.prevent="manualSearch()" class="max-w-md mx-auto">
            <div class="flex gap-3">
                <input type="text" 
                       id="manual-code"
                       placeholder="Masukkan kode barang..."
                       class="form-input flex-1"
                       required>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </form>
    </div>

    <!-- Instructions Section -->
    <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 Menggunakan Scanner</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>Pastikan kamera memiliki izin akses</span>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                        <span>Arahkan kamera ke barcode dengan jarak yang tepat</span>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                        <span>Pastikan pencahayaan cukup terang</span>
                    </div>
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-blue-600 mt-1"></i>
                        <span>Gunakan input manual jika scanner bermasalah</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <a href="{% url 'inventaris:public_search' %}" class="btn-secondary">
            <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-refresh mr-3"></i>
            Refresh Halaman
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Request camera permission
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                console.log('Camera access granted');
                // Stop the stream as we'll use Quagga
                stream.getTracks().forEach(track => track.stop());
            })
            .catch(function(err) {
                console.log('Camera access denied:', err);
                // Show manual input as fallback
                document.querySelector('#manual-code').focus();
            });
    }
    
    // Handle manual code input
    const manualInput = document.getElementById('manual-code');
    if (manualInput) {
        manualInput.addEventListener('input', function(e) {
            // Auto-submit if code looks complete (assuming 6+ characters)
            if (e.target.value.length >= 6) {
                setTimeout(() => {
                    if (e.target.value.length >= 6) {
                        window.location.href = `/inventaris/public/barang/${e.target.value}/`;
                    }
                }, 1000);
            }
        });
    }
});
</script>
{% endblock %}