@extends('layouts.app')

@section('title', 'البحث عن الباركود')

@section('content')
<style>
    /* تنسيق منطقة الكاميرا */
    #camera-container {
        position: relative;
        background: #000;
        min-height: 400px;
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
    }
    
    #camera-container video,
    #camera-container canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 500px;
        object-fit: cover;
    }
    
    #camera-container canvas.drawingBuffer {
        display: none;
    }
    
    /* تنسيق overlay */
    #scanner-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 250px;
        border: 4px solid #00ff00;
        border-radius: 15px;
        pointer-events: none;
        z-index: 1000;
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
        }
        50% {
            box-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
        }
    }
    
    /* تنسيق responsive */
    @media (max-width: 768px) {
        #camera-container {
            min-height: 300px;
        }
        
        #scanner-overlay {
            width: 85%;
            height: 200px;
        }
    }
</style>
<div class="mb-4">
    <h1 class="page-title">
        <i class="fas fa-search me-2"></i>
        البحث عن الباركود
    </h1>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">الرئيسية</a></li>
            <li class="breadcrumb-item"><a href="{{ route('barcodes.index') }}">الباركودات</a></li>
            <li class="breadcrumb-item active">البحث</li>
        </ol>
    </nav>
</div>

<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-barcode me-2"></i>
                    معلومات الباركود
                </h5>
            </div>
            <div class="card-body">
                @if(isset($error))
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        {{ $error }}
                    </div>
                    
                    @if(isset($barcodeValue))
                    <div class="mt-3 mb-3">
                        <p class="text-muted">قيمة الباركود المدخلة: <code>{{ $barcodeValue }}</code></p>
                    </div>
                    @endif
                @endif
                
                @if(isset($barcode))
                    <!-- معلومات الباركود -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle me-2"></i>
                                <strong>تم العثور على الباركود بنجاح!</strong>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- معلومات المادة -->
                        <div class="col-md-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-box me-2"></i>
                                        معلومات المادة
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>اسم المادة:</strong><br>
                                        <span class="text-primary">{{ $barcode->item->name ?? 'غير محدد' }}</span>
                                    </p>
                                    <p class="mb-2">
                                        <strong>الترميز:</strong><br>
                                        <code>{{ $barcode->item->code ?? 'غير محدد' }}</code>
                                    </p>
                                    @if($barcode->item)
                                    <a href="{{ route('items.show', $barcode->item) }}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-eye me-1"></i>
                                        عرض تفاصيل المادة
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- معلومات الباركود -->
                        <div class="col-md-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-header bg-success text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-barcode me-2"></i>
                                        معلومات الباركود
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>قيمة الباركود:</strong><br>
                                        <code class="text-success" style="font-size: 1.1rem;">{{ $barcode->barcode_value }}</code>
                                    </p>
                                    <p class="mb-2">
                                        <strong>نوع الباركود:</strong><br>
                                        <span class="badge bg-info">{{ $barcode->barcode_type == 'code128' ? 'Code 128' : 'QR Code' }}</span>
                                    </p>
                                    <p class="mb-2">
                                        <strong>حالة الطباعة:</strong><br>
                                        @if($barcode->printed)
                                            <span class="badge bg-success">
                                                <i class="fas fa-check"></i> مطبوع
                                            </span>
                                            @if($barcode->printed_at)
                                                <br><small class="text-muted">{{ $barcode->printed_at->format('Y-m-d H:i') }}</small>
                                            @endif
                                        @else
                                            <span class="badge bg-warning">
                                                <i class="fas fa-clock"></i> غير مطبوع
                                            </span>
                                        @endif
                                    </p>
                                    <p class="mb-2">
                                        <strong>تاريخ التوليد:</strong><br>
                                        <small class="text-muted">{{ $barcode->generated_at->format('Y-m-d H:i') }}</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- معلومات الهيكل التنظيمي -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="card bg-light">
                                <div class="card-header bg-warning text-dark">
                                    <h6 class="mb-0">
                                        <i class="fas fa-sitemap me-2"></i>
                                        الهيكل التنظيمي
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        @php
                                            $extraData = $barcode->extra_data ?? [];
                                        @endphp
                                        <div class="col-md-3 mb-2">
                                            <strong>الهيئة:</strong><br>
                                            @if($barcode->item && $barcode->item->organization)
                                                <a href="{{ route('organizations.show', $barcode->item->organization) }}" class="text-primary">
                                                    {{ $barcode->item->organization->name }}
                                                </a>
                                            @elseif(isset($extraData['organization']))
                                                <span class="text-primary">{{ $extraData['organization'] }}</span>
                                            @else
                                                <span class="text-muted">غير محدد</span>
                                            @endif
                                        </div>
                                        <div class="col-md-3 mb-2">
                                            <strong>القسم:</strong><br>
                                            @if($barcode->item && $barcode->item->department)
                                                <a href="{{ route('departments.show', $barcode->item->department) }}" class="text-success">
                                                    {{ $barcode->item->department->name }}
                                                </a>
                                            @elseif(isset($extraData['department']))
                                                <span class="text-success">{{ $extraData['department'] }}</span>
                                            @else
                                                <span class="text-muted">غير محدد</span>
                                            @endif
                                        </div>
                                        <div class="col-md-3 mb-2">
                                            <strong>الشعبة:</strong><br>
                                            @if($barcode->item && $barcode->item->section)
                                                <a href="{{ route('sections.show', $barcode->item->section) }}" class="text-info">
                                                    {{ $barcode->item->section->name }}
                                                </a>
                                            @elseif(isset($extraData['section']))
                                                <span class="text-info">{{ $extraData['section'] }}</span>
                                            @else
                                                <span class="text-muted">غير محدد</span>
                                            @endif
                                        </div>
                                        <div class="col-md-3 mb-2">
                                            <strong>الوحدة:</strong><br>
                                            @if($barcode->item && $barcode->item->unit)
                                                <a href="{{ route('units.show', $barcode->item->unit) }}" class="text-warning">
                                                    {{ $barcode->item->unit->name }}
                                                </a>
                                            @elseif(isset($extraData['unit']))
                                                <span class="text-warning">{{ $extraData['unit'] }}</span>
                                            @else
                                                <span class="text-muted">غير محدد</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- معلومات إضافية -->
                    @if($barcode->extra_data)
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="card bg-light">
                                <div class="card-header bg-secondary text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-info-circle me-2"></i>
                                        معلومات إضافية
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        @if(isset($barcode->extra_data['sequence']))
                                        <div class="col-md-3 mb-2">
                                            <strong>التسلسل:</strong><br>
                                            <span class="badge bg-primary">{{ $barcode->extra_data['sequence'] }}</span>
                                        </div>
                                        @endif
                                        @if(isset($barcode->extra_data['type']))
                                        <div class="col-md-3 mb-2">
                                            <strong>النوع:</strong><br>
                                            {{ $barcode->extra_data['type'] }}
                                        </div>
                                        @endif
                                        @if($barcode->generatedBy)
                                        <div class="col-md-6 mb-2">
                                            <strong>تم التوليد بواسطة:</strong><br>
                                            {{ $barcode->generatedBy->name }}
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- الأزرار -->
                    <div class="row mt-4">
                        <div class="col-md-12 text-center">
                            <a href="{{ route('barcodes.show', $barcode) }}" class="btn btn-primary me-2">
                                <i class="fas fa-eye me-2"></i>
                                عرض تفاصيل الباركود
                            </a>
                            <a href="{{ route('barcodes.lookup') }}" class="btn btn-secondary me-2">
                                <i class="fas fa-redo me-2"></i>
                                بحث جديد
                            </a>
                            <a href="{{ route('barcodes.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-right me-2"></i>
                                العودة للقائمة
                            </a>
                        </div>
                    </div>
                @endif
                
                @if(!isset($barcode))
                    <!-- نموذج البحث -->
                    <form method="GET" action="{{ route('barcodes.lookup') }}">
                        <div class="mb-3">
                            <label for="code" class="form-label">
                                <i class="fas fa-barcode text-primary me-1"></i>
                                قيمة الباركود <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control form-control-lg" 
                                   id="code" 
                                   name="code" 
                                   placeholder="أدخل قيمة الباركود هنا أو امسحها بالكاميرا..."
                                   value="{{ request('code') ?? request('barcode_value') ?? request('value') }}"
                                   required
                                   autofocus>
                            <small class="form-text text-muted">
                                <i class="fas fa-info-circle"></i>
                                يمكنك إدخال قيمة الباركود مباشرة أو مسحها بواسطة الكاميرا أو جهاز الباركود
                            </small>
                        </div>
                        
                        <!-- منطقة الكاميرا -->
                        <div class="mb-3">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                    <span>
                                        <i class="fas fa-camera me-2"></i>
                                        <strong>مسح الباركود بالكاميرا</strong>
                                    </span>
                                    <button type="button" class="btn btn-sm btn-light btn-lg" id="toggle-camera-btn" onclick="toggleCamera()" style="font-weight: bold;">
                                        <i class="fas fa-video me-1"></i>
                                        <span id="camera-status">تشغيل الكاميرا</span>
                                    </button>
                                </div>
                                <div class="card-body p-0">
                                    <div id="camera-container" style="display: none; position: relative; background: #000; min-height: 400px; width: 100%; overflow: hidden;">
                                        <!-- QuaggaJS سيضع الكاميرا هنا -->
                                        <div id="scanner-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 250px; border: 4px solid #00ff00; border-radius: 15px; pointer-events: none; z-index: 1000; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);">
                                            <div style="position: absolute; top: -35px; left: 50%; transform: translateX(-50%); color: #00ff00; font-weight: bold; font-size: 16px; text-shadow: 0 0 10px #000, 0 0 20px #000; background: rgba(0, 0, 0, 0.7); padding: 5px 15px; border-radius: 5px;">
                                                ضع الباركود هنا
                                            </div>
                                        </div>
                                    </div>
                                    <div id="camera-placeholder" class="text-center p-4 bg-light">
                                        <i class="fas fa-camera fa-3x text-primary mb-3"></i>
                                        <p class="text-muted mb-2">
                                            <strong>الكاميرا ستعمل تلقائياً عند فتح الصفحة</strong>
                                        </p>
                                        <p class="text-muted mb-0">
                                            أو اضغط على زر "تشغيل الكاميرا" أعلاه لبدء المسح
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-search me-2"></i>
                                البحث
                            </button>
                            <a href="{{ route('barcodes.index') }}" class="btn btn-secondary btn-lg">
                                <i class="fas fa-arrow-right me-2"></i>
                                إلغاء
                            </a>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<!-- مكتبة QuaggaJS لقراءة الباركود من الكاميرا -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
<style>
    /* تنسيق QuaggaJS */
    #camera-container video {
        width: 100% !important;
        height: auto !important;
        max-height: 500px;
        object-fit: cover;
    }
    
    #camera-container canvas {
        display: none !important;
    }
    
    #camera-container canvas.drawingBuffer {
        display: none !important;
    }
    
    /* تحسين التنسيق */
    #camera-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<script>
    let stream = null;
    let isScanning = false;
    let quaggaInitialized = false;
    let isProcessing = false;
    let lastDetectedCode = '';
    let detectionTimeout = null;
    let detectionCount = {};
    let currentOverlay = null;
    let currentContainer = null;
    
    // دالة لتحديث موضع وحجم الإطار الأخضر بناءً على موقع الباركود
    function updateOverlayPosition(box) {
        console.log('updateOverlayPosition called', {box, overlay: currentOverlay, container: currentContainer});
        
        if (!box || !currentOverlay || !currentContainer) {
            console.log('updateOverlayPosition: missing elements', {box, overlay: currentOverlay, container: currentContainer});
            return;
        }
        
        try {
            // حساب حدود الباركود من box
            const x1 = Math.min(box[0][0], box[1][0], box[2][0], box[3][0]);
            const y1 = Math.min(box[0][1], box[1][1], box[2][1], box[3][1]);
            const x2 = Math.max(box[0][0], box[1][0], box[2][0], box[3][0]);
            const y2 = Math.max(box[0][1], box[1][1], box[2][1], box[3][1]);
            
            const barcodeWidth = x2 - x1;
            const barcodeHeight = y2 - y1;
            
            console.log('updateOverlayPosition: barcode bounds', {x1, y1, x2, y2, barcodeWidth, barcodeHeight});
            
            // الحصول على container rect
            const containerRect = currentContainer.getBoundingClientRect();
            console.log('updateOverlayPosition: container rect', containerRect);
            
            // محاولة الحصول على canvas من Quagga
            let canvas = null;
            let scaleX = 1;
            let scaleY = 1;
            
            if (Quagga && Quagga.canvas && Quagga.canvas.dom) {
                canvas = Quagga.canvas.dom.image || Quagga.canvas.dom.overlay;
                if (canvas) {
                    const canvasWidth = canvas.width;
                    const canvasHeight = canvas.height;
                    scaleX = containerRect.width / canvasWidth;
                    scaleY = containerRect.height / canvasHeight;
                    console.log('updateOverlayPosition: using canvas', {canvasWidth, canvasHeight, scaleX, scaleY});
                }
            }
            
            // إذا لم يكن canvas متاحاً، استخدم الفيديو
            if (!canvas) {
                const video = currentContainer.querySelector('video');
                if (video && video.videoWidth && video.videoHeight) {
                    scaleX = containerRect.width / video.videoWidth;
                    scaleY = containerRect.height / video.videoHeight;
                    console.log('updateOverlayPosition: using video', {videoWidth: video.videoWidth, videoHeight: video.videoHeight, scaleX, scaleY});
                } else {
                    // استخدام container مباشرة
                    scaleX = 1;
                    scaleY = 1;
                    console.log('updateOverlayPosition: using container directly', {scaleX, scaleY});
                }
            }
            
            // تحويل الإحداثيات من canvas/video إلى container
            const left = (x1 * scaleX);
            const top = (y1 * scaleY);
            const overlayWidth = barcodeWidth * scaleX;
            const overlayHeight = barcodeHeight * scaleY;
            
            console.log('updateOverlayPosition: calculated position', {left, top, overlayWidth, overlayHeight});
            
            // تحديث موضع وحجم الإطار الأخضر مع هامش
            const margin = 15;
            const finalLeft = Math.max(0, left - margin);
            const finalTop = Math.max(0, top - margin);
            const finalWidth = Math.min(containerRect.width - finalLeft, overlayWidth + (margin * 2));
            const finalHeight = Math.min(containerRect.height - finalTop, overlayHeight + (margin * 2));
            
            currentOverlay.style.position = 'absolute';
            currentOverlay.style.left = finalLeft + 'px';
            currentOverlay.style.top = finalTop + 'px';
            currentOverlay.style.width = finalWidth + 'px';
            currentOverlay.style.height = finalHeight + 'px';
            currentOverlay.style.transform = 'none';
            currentOverlay.style.borderColor = '#00ff00';
            currentOverlay.style.borderWidth = '3px';
            currentOverlay.style.boxShadow = '0 0 30px rgba(0, 255, 0, 0.8)';
            currentOverlay.style.zIndex = '1000';
            
            // تحديث نص الإطار
            const overlayText = currentOverlay.querySelector('#overlay-text');
            if (overlayText) {
                overlayText.innerHTML = '✓ تم اكتشاف الباركود';
                overlayText.style.color = '#00ff00';
                overlayText.style.top = '-40px';
            }
            
            console.log('updateOverlayPosition: overlay updated', {finalLeft, finalTop, finalWidth, finalHeight});
        } catch (error) {
            console.error('خطأ في تحديث موضع الإطار:', error, error.stack);
            resetOverlayPosition();
        }
    }
    
    // دالة لإعادة الإطار الأخضر إلى الحجم الافتراضي
    function resetOverlayPosition() {
        if (!currentOverlay) return;
        currentOverlay.style.left = '50%';
        currentOverlay.style.top = '50%';
        currentOverlay.style.transform = 'translate(-50%, -50%)';
        currentOverlay.style.width = '70%';
        currentOverlay.style.height = '250px';
        currentOverlay.style.borderColor = '#00ff00';
        currentOverlay.style.borderWidth = '4px';
        currentOverlay.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.5)';
        
        const overlayText = currentOverlay.querySelector('#overlay-text');
        if (overlayText) {
            overlayText.innerHTML = 'ضع الباركود هنا';
            overlayText.style.color = '#00ff00';
            overlayText.style.top = '-35px';
        }
    }

    // Auto-submit form when barcode is scanned (if input loses focus or Enter is pressed)
    document.getElementById('code')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            this.form.submit();
        }
    });
    
    // Auto-focus on input when page loads and open camera automatically
    document.addEventListener('DOMContentLoaded', function() {
        const input = document.getElementById('code');
        // إعادة تعيين المتغيرات عند تحميل الصفحة
        isProcessing = false;
        lastDetectedCode = '';
        detectionCount = {};
        if (detectionTimeout) {
            clearTimeout(detectionTimeout);
            detectionTimeout = null;
        }
        
        // إذا لم يكن هناك قيمة في الحقل، افتح الكاميرا تلقائياً
        if (input && !input.value) {
            // محاولة فتح الكاميرا تلقائياً بعد تحميل الصفحة
            setTimeout(() => {
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    console.log('محاولة فتح الكاميرا تلقائياً...');
                    toggleCamera();
                } else {
                    console.log('الكاميرا غير متاحة');
                }
            }, 1000);
        } else if (input && input.value) {
            // إذا كان هناك قيمة في الحقل (من قراءة سابقة)، امسحها وافتح الكاميرا
            setTimeout(() => {
                input.value = '';
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    console.log('محاولة فتح الكاميرا تلقائياً بعد مسح القيمة...');
                    toggleCamera();
                }
            }, 500);
        }
    });

    // تشغيل/إيقاف الكاميرا
    async function toggleCamera() {
        const container = document.getElementById('camera-container');
        const placeholder = document.getElementById('camera-placeholder');
        const statusBtn = document.getElementById('camera-status');
        const toggleBtn = document.getElementById('toggle-camera-btn');

        if (!isScanning) {
            // تشغيل الكاميرا
            try {
                // إظهار منطقة الكاميرا وإخفاء placeholder
                if (container) container.style.display = 'block';
                if (placeholder) placeholder.style.display = 'none';
                if (statusBtn) statusBtn.innerHTML = '<i class="fas fa-stop me-1"></i> إيقاف الكاميرا';
                if (toggleBtn) {
                    toggleBtn.classList.remove('btn-light');
                    toggleBtn.classList.add('btn-danger');
                }
                
                isScanning = true;
                
                // بدء قراءة الباركود (Html5QrcodeScanner سيدير الكاميرا بنفسه)
                startBarcodeScanning();
            } catch (error) {
                console.error('خطأ في الوصول إلى الكاميرا:', error);
                alert('لا يمكن الوصول إلى الكاميرا. يرجى التحقق من الصلاحيات أو اضغط على زر "تشغيل الكاميرا" يدوياً.');
                stopCamera();
            }
        } else {
            // إيقاف الكاميرا
            stopCamera();
        }
    }

    // بدء قراءة الباركود
    function startBarcodeScanning() {
        const codeInput = document.getElementById('code');
        const container = document.getElementById('camera-container');
        
        if (!codeInput || !container) {
            console.error('عناصر DOM غير موجودة');
            return;
        }
        
        // استخدام QuaggaJS لقراءة الباركود
        if (typeof Quagga !== 'undefined') {
            try {
                // إيقاف Quagga إذا كان يعمل بالفعل
                if (quaggaInitialized) {
                    try {
                        Quagga.offDetected();
                        Quagga.offProcessed();
                        Quagga.stop();
                    } catch (e) {
                        console.log('خطأ في إيقاف Quagga القديم:', e);
                    }
                    quaggaInitialized = false;
                }
                
                // إعادة تعيين المتغيرات قبل البدء
                isProcessing = false;
                lastDetectedCode = '';
                detectionCount = {};
                if (detectionTimeout) {
                    clearTimeout(detectionTimeout);
                    detectionTimeout = null;
                }
                
                // تنظيف container قبل البدء
                container.innerHTML = '';
                container.style.display = 'block';
                
                // إضافة overlay مرة أخرى
                const overlay = document.createElement('div');
                overlay.id = 'scanner-overlay';
                overlay.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 250px; border: 4px solid #00ff00; border-radius: 15px; pointer-events: none; z-index: 1000; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); transition: all 0.3s ease;';
                overlay.innerHTML = '<div id="overlay-text" style="position: absolute; top: -35px; left: 50%; transform: translateX(-50%); color: #00ff00; font-weight: bold; font-size: 16px; text-shadow: 0 0 10px #000, 0 0 20px #000; background: rgba(0, 0, 0, 0.7); padding: 5px 15px; border-radius: 5px;">ضع الباركود هنا</div>';
                container.appendChild(overlay);
                
                // حفظ المرجع للدوال
                currentOverlay = overlay;
                currentContainer = container;
                
                Quagga.init({
                    inputStream: {
                        name: "Live",
                        type: "LiveStream",
                        target: container,
                        constraints: {
                            width: { min: 640, ideal: 1280, max: 1920 },
                            height: { min: 480, ideal: 720, max: 1080 },
                            facingMode: "environment" // الكاميرا الخلفية
                        },
                        area: { // توسيع منطقة المسح لتشمل كامل الإطار
                            top: "0%",
                            right: "0%",
                            left: "0%",
                            bottom: "0%"
                        }
                    },
                    decoder: {
                        readers: [
                            "code_128_reader" // التركيز على Code 128 فقط لتحسين الدقة
                        ],
                        debug: {
                            drawBoundingBox: true,
                            showFrequency: false,
                            drawScanline: true,
                            showPattern: false
                        },
                        multiple: false // قراءة واحدة فقط في كل مرة
                    },
                    locate: true,
                    locator: {
                        halfSample: false,
                        patchSize: "large", // حجم متوسط لتحسين دقة الالتقاط
                        showCanvas: false,
                        showPatches: false,
                        showFoundPatches: false,
                        showSkeleton: false,
                        showBoundingBox: true,
                        boxFromPatches: {
                            showTransformed: true,
                            showTransformedBox: true,
                            showBB: true
                        }
                    },
                    numOfWorkers: 4, // زيادة عدد العمال لتحسين الأداء
                    frequency: 15 // تردد معتدل لقراءة أكثر استقراراً
                }, function(err) {
                    if (err) {
                        console.error('خطأ في تهيئة Quagga:', err);
                        alert('لا يمكن تهيئة قارئ الباركود: ' + (err.message || err));
                        stopCamera();
                        return;
                    }
                    console.log('تم تهيئة Quagga بنجاح');
                    
                    // إعادة تعيين المتغيرات قبل البدء
                    isProcessing = false;
                    lastDetectedCode = '';
                    detectionCount = {};
                    if (detectionTimeout) {
                        clearTimeout(detectionTimeout);
                        detectionTimeout = null;
                    }
                    
                    // إزالة معالجات الأحداث القديمة قبل إضافة معالجات جديدة
                    try {
                        Quagga.offDetected();
                        Quagga.offProcessed();
                    } catch (e) {
                        console.log('لا توجد معالجات قديمة لإزالتها');
                    }
                    
                    // استماع لقراءة الباركود
                    Quagga.onDetected(function(result) {
                    // منع المعالجة المتزامنة
                    if (isProcessing) {
                        return;
                    }
                    
                    console.log('onDetected called', result);
                    
                    // تحديث الإطار الأخضر بناءً على موقع الباركود
                    if (result && result.box && Array.isArray(result.box) && result.box.length >= 4) {
                        console.log('onDetected: updating overlay with box', result.box);
                        updateOverlayPosition(result.box);
                    } else if (result && result.codeResult && result.codeResult.code) {
                        // إذا لم يكن هناك box، حاول استخدام codeResult
                        console.log('onDetected: no box, trying to find box from codeResult');
                        // قد يكون box في مكان آخر
                        if (result.boxes && result.boxes.length > 0) {
                            const mainBox = result.boxes[0];
                            if (mainBox && Array.isArray(mainBox) && mainBox.length >= 4) {
                                console.log('onDetected: using first box from boxes', mainBox);
                                updateOverlayPosition(mainBox);
                            }
                        }
                    }
                    
                    // التحقق من وجود codeResult
                    if (!result || !result.codeResult || !result.codeResult.code) {
                        console.log('onDetected: no codeResult found');
                        return;
                    }
                    
                    let code = result.codeResult.code;
                    console.log('تم قراءة الباركود:', code);
                    console.log('نتيجة كاملة:', result);
                    console.log('نوع الباركود:', result.codeResult.format);
                    
                    if (code && code.length > 0) {
                        // تنظيف القيمة المقروءة
                        code = code.trim();
                        code = code.replace(/\s+/g, ''); // إزالة جميع المسافات
                        code = code.replace(/[^\w\-]/g, ''); // إزالة الأحرف الخاصة باستثناء الشرطة والأرقام والحروف
                        
                        // إصلاح الأخطاء الشائعة في القراءة
                        // H قد تُقرأ كـ 33 أو B5
                        if (code.startsWith('33') || code.startsWith('B5')) {
                            code = 'H' + code.substring(2);
                        }
                        
                        // إصلاح الأخطاء في الأرقام
                        // 11651 قد تُقرأ كـ 6116451705 أو 611645
                        if (code.includes('611645')) {
                            code = code.replace(/6116451705/g, '11651');
                            code = code.replace(/611645/g, '11651');
                        }
                        
                        // إصلاح الأخطاء في الشرطات
                        // قد تُقرأ الشرطة بشكل خاطئ أو تُحذف
                        if (!code.includes('-') && code.length > 5) {
                            // إضافة الشرطات في المواضع الصحيحة
                            // H116513560003 -> H-11651-3-5-6-0003
                            code = code.replace(/^H(\d{5})(\d)(\d)(\d)(\d{4})$/, 'H-$1-$2-$3-$4-$5');
                        }
                        
                        // إصلاح الأخطاء في الأرقام المتكررة
                        // 0003 قد تُقرأ كـ 00003 أو 003
                        code = code.replace(/-(\d{3,5})$/, function(match, p1) {
                            return '-' + p1.padStart(4, '0');
                        });
                        
                        // التحقق من أن القيمة ليست فارغة بعد التنظيف
                        if (!code || code.length < 3) {
                            console.log('القيمة المقروءة قصيرة جداً:', code);
                            return;
                        }
                        
                        // تسجيل القيمة المقروءة للتشخيص
                        console.log('القيمة المقروءة بعد التنظيف:', code);
                        
                        // إلغاء timeout السابق
                        if (detectionTimeout) {
                            clearTimeout(detectionTimeout);
                        }
                        
                        // زيادة عدد مرات قراءة هذه القيمة
                        if (!detectionCount[code]) {
                            detectionCount[code] = 0;
                        }
                        detectionCount[code]++;
                        
                        // التحقق من صحة الباركود - تبسيط الشرط بشكل أكبر
                        // إذا كانت القيمة طويلة (أكثر من 8 أحرف) وتحتوي على شرطة، نعتبرها صحيحة مباشرة
                        // أو إذا كانت القيمة تحتوي على أحرف وأرقام وشرطات فقط
                        const hasValidPattern = /^[A-Z0-9\-]+$/i.test(code); // فقط أحرف وأرقام وشرطات
                        const hasMinLength = code.length >= 8;
                        const hasDash = code.includes('-');
                        
                        // تبسيط الشرط: إذا كانت القيمة طويلة وتحتوي على شرطة، نعتبرها صحيحة مباشرة
                        // أو إذا تم قراءتها مرة واحدة على الأقل
                        let isValidCode = hasValidPattern && hasMinLength && (
                            (hasDash && code.length >= 10) ||
                            (detectionCount[code] >= 1 && code.length >= 8)
                        );
                        
                        // إذا كانت القيمة طويلة جداً (أكثر من 15 حرف)، نعتبرها صحيحة مباشرة
                        if (code.length >= 15 && hasValidPattern) {
                            isValidCode = true;
                        }
                        
                        console.log('onDetected: validation check', {
                            code,
                            hasValidPattern,
                            hasMinLength,
                            hasDash,
                            isValidCode,
                            detectionCount: detectionCount[code],
                            lastDetectedCode,
                            codeLength: code.length
                        });
                        
                        // إذا كانت القيمة صحيحة ولم يتم معالجتها من قبل
                        if (isValidCode && lastDetectedCode !== code) {
                            isProcessing = true;
                            lastDetectedCode = code;
                            
                            console.log('onDetected: valid code detected, processing...', code);
                            
                            // الحصول على حقل الإدخال
                            const codeInput = document.getElementById('code');
                            if (!codeInput) {
                                console.error('onDetected: code input field not found');
                                isProcessing = false;
                                return;
                            }
                            
                            // إدخال القيمة في حقل البحث
                            codeInput.value = code;
                            console.log('onDetected: code value set in input field', codeInput.value);
                            
                            // إظهار رسالة نجاح مع القيمة المقروءة
                            const successMsg = document.createElement('div');
                            successMsg.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #28a745; color: white; padding: 20px 40px; border-radius: 10px; z-index: 10000; font-size: 18px; font-weight: bold; box-shadow: 0 4px 20px rgba(0,0,0,0.3); text-align: center;';
                            successMsg.innerHTML = '✓ تم قراءة الباركود بنجاح!<br><small style="font-size: 14px; margin-top: 10px; display: block; font-family: monospace;">' + code + '</small>';
                            document.body.appendChild(successMsg);
                            
                            // إيقاف الكاميرا تلقائياً بعد القراءة
                            setTimeout(() => {
                                stopCamera();
                                successMsg.remove();
                                // الانتقال إلى صفحة البحث مع قيمة الباركود
                                const lookupUrl = '{{ route("barcodes.lookup") }}?code=' + encodeURIComponent(code);
                                console.log('onDetected: redirecting to', lookupUrl);
                                window.location.href = lookupUrl;
                            }, 1500);
                            
                            // إعادة تعيين العد
                            detectionCount = {};
                        } else {
                            console.log('onDetected: code not valid yet, waiting...', {
                                isValidCode,
                                lastDetectedCode,
                                code,
                                detectionCount: detectionCount[code]
                            });
                            // انتظار قليل قبل المحاولة مرة أخرى
                            detectionTimeout = setTimeout(() => {
                                // إعادة تعيين العد للقيم القديمة
                                Object.keys(detectionCount).forEach(key => {
                                    if (key !== code) {
                                        delete detectionCount[key];
                                    }
                                });
                            }, 2000);
                        }
                    }
                    });
                    
                    // إضافة معالج للأخطاء وتحديث موضع الإطار الأخضر
                    Quagga.onProcessed(function(result) {
                    try {
                        if (!result) {
                            return;
                        }
                        
                        const drawingCtx = Quagga.canvas.ctx.overlay;
                        const drawingCanvas = Quagga.canvas.dom.overlay;
                        
                        if (drawingCtx && drawingCanvas) {
                            if (result.boxes) {
                                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                                result.boxes.filter(function (box) {
                                    return box !== result.box;
                                }).forEach(function (box) {
                                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
                                });
                            }
                            
                            // تحديث موضع الإطار الأخضر بناءً على موقع الباركود
                            // استخدام result.box إذا كان موجوداً، أو result.boxes[0] إذا كان موجوداً
                            let boxToUse = null;
                            
                            // أولاً: جرب result.box
                            if (result.box) {
                                if (Array.isArray(result.box) && result.box.length >= 4) {
                                    boxToUse = result.box;
                                }
                            }
                            
                            // ثانياً: إذا لم يكن box موجوداً، جرب result.boxes
                            if (!boxToUse && result.boxes && result.boxes.length > 0) {
                                // استخدام أول box من boxes
                                const firstBox = result.boxes[0];
                                if (Array.isArray(firstBox) && firstBox.length >= 4) {
                                    boxToUse = firstBox;
                                }
                            }
                            
                            if (boxToUse) {
                                Quagga.ImageDebug.drawPath(boxToUse, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
                                console.log('onProcessed: updating overlay with box', boxToUse);
                                // استدعاء updateOverlayPosition بشكل مباشر
                                setTimeout(function() {
                                    updateOverlayPosition(boxToUse);
                                }, 0);
                            } else {
                                // إعادة الإطار الأخضر إلى الحجم الافتراضي إذا لم يتم اكتشاف باركود
                                if (!result.boxes || result.boxes.length === 0) {
                                    setTimeout(function() {
                                        resetOverlayPosition();
                                    }, 100);
                                }
                            }
                            
                            if (result.codeResult && result.codeResult.code) {
                                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
                            }
                        }
                    } catch (error) {
                        console.error('خطأ في onProcessed:', error);
                    }
                    });
                    
                    
                    // بدء Quagga بعد إضافة معالجات الأحداث
                    Quagga.start();
                    quaggaInitialized = true;
                    
                    // إضافة overlay بعد بدء Quagga
                    setTimeout(() => {
                        if (container.querySelector('#scanner-overlay')) {
                            container.appendChild(overlay);
                        }
                    }, 500);
                });
            } catch (error) {
                console.error('خطأ في تهيئة Quagga:', error);
                alert('لا يمكن تهيئة قارئ الباركود. يرجى المحاولة مرة أخرى.');
                stopCamera();
            }
        } else {
            console.log('QuaggaJS غير متاح');
            alert('مكتبة قراءة الباركود غير متاحة. يرجى تحديث الصفحة.');
        }
    }

    // طريقة بديلة بسيطة لقراءة الباركود
    function startSimpleScanning() {
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const codeInput = document.getElementById('code');
        
        if (!video || !canvas || !codeInput) return;
        
        const context = canvas.getContext('2d');
        
        function scanFrame() {
            if (!isScanning || !video.videoWidth || !video.videoHeight) {
                if (isScanning) {
                    requestAnimationFrame(scanFrame);
                }
                return;
            }
            
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            // محاولة قراءة الباركود من canvas
            // يمكن استخدام مكتبة أخرى هنا
            
            requestAnimationFrame(scanFrame);
        }
        
        video.addEventListener('loadedmetadata', () => {
            scanFrame();
        });
        
        if (video.readyState >= 2) {
            scanFrame();
        }
    }

    // إيقاف الكاميرا
    function stopCamera() {
        // إعادة تعيين المتغيرات
        isProcessing = false;
        lastDetectedCode = '';
        detectionCount = {};
        if (detectionTimeout) {
            clearTimeout(detectionTimeout);
            detectionTimeout = null;
        }
        
        // إزالة معالجات الأحداث
        if (typeof Quagga !== 'undefined') {
            try {
                Quagga.offDetected();
                Quagga.offProcessed();
            } catch (err) {
                console.error('خطأ في إزالة معالجات الأحداث:', err);
            }
        }
        
        // إيقاف QuaggaJS
        if (quaggaInitialized && typeof Quagga !== 'undefined') {
            try {
                Quagga.stop();
                quaggaInitialized = false;
            } catch (err) {
                console.error('خطأ في إيقاف Quagga:', err);
            }
        }
        
        // إيقاف stream
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            stream = null;
        }
        
        const video = document.getElementById('video');
        const container = document.getElementById('camera-container');
        const placeholder = document.getElementById('camera-placeholder');
        const statusBtn = document.getElementById('camera-status');
        const toggleBtn = document.getElementById('toggle-camera-btn');
        
        if (video) {
            video.srcObject = null;
            video.style.display = 'none';
        }
        
        // تنظيف محتوى container
        if (container) {
            container.innerHTML = '';
            container.style.display = 'none';
        }
        
        if (placeholder) placeholder.style.display = 'block';
        if (statusBtn) statusBtn.innerHTML = '<i class="fas fa-video me-1"></i> تشغيل الكاميرا';
        if (toggleBtn) {
            toggleBtn.classList.remove('btn-danger');
            toggleBtn.classList.add('btn-light');
        }
        isScanning = false;
    }

    // تنظيف عند إغلاق الصفحة
    window.addEventListener('beforeunload', () => {
        stopCamera();
    });
</script>
@endpush
@endsection