{{-- Camera Barcode Scanner - JavaScript Auto-Injection --}}
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
(function() {
    'use strict';

    if (window.__cameraBarcodeScannerModuleInitialized) {
        return;
    }
    window.__cameraBarcodeScannerModuleInitialized = true;

    const INIT_DELAY_MS = 500;
    const BUTTON_CHECK_INTERVAL_MS = 2000;
    const DUPLICATE_SCAN_TTL_MS = 2000;
    const AUTO_CLOSE_DELAY_MS = 350;
    const POS_MOBILE_CAMERA_MAX_WIDTH = 767;
    const MODULE_EVENT_NAMESPACE = '.cameraBarcodeScanner';
    const SCANNER_STATUS_READY =
        '<div class="alert alert-info"><i class="fa fa-info-circle"></i> Ready to scan. Hold the barcode horizontally inside the frame.</div>';
    const SCANNER_STATUS_ACTIVE =
        '<div class="alert alert-info"><i class="fa fa-info-circle"></i> Scanning... Hold the barcode steady and keep it inside the frame.</div>';

    // Configuration for different pages/routes
    const pageConfigs = {
        // POS Create page
        'pos': {
            selectors: ['#search_product', '#search_product_barcode_type_check'],
            buttonPosition: 'before' // Insert before quick add button
        },
        // Purchase Create/Edit page
        'purchase': {
            selectors: ['#search_product'],
            buttonPosition: 'end' // Insert at end of input-group-btn
        },
        // Sell Create page
        'sell': {
            selectors: ['#search_product'],
            buttonPosition: 'end'
        },
        // Stock Transfer Create page
        'stock_transfer': {
            selectors: ['#search_product_for_srock_adjustment'],
            buttonPosition: 'end'
        },
        // Stock Adjustment Create page
        'stock_adjustment': {
            selectors: ['#search_product_for_srock_adjustment'],
            buttonPosition: 'end'
        }
    };

    const fallbackSelectors = [
        '#search_product',
        '#search_product_for_purchase_return',
        '#search_product_for_srock_adjustment',
        '#search_product_inventory',
        '#search_product_exchange',
        'input[id^="search_product_for_"]',
        'input[id*="search_product_for_"]',
        'input[id*="search_product"]'
    ];

    $(function() {
        setTimeout(initCameraScanner, INIT_DELAY_MS);

        if (!window.__cameraBarcodeScannerButtonInterval) {
            window.__cameraBarcodeScannerButtonInterval = setInterval(
                checkAndInjectButtons,
                BUTTON_CHECK_INTERVAL_MS
            );
        }
    });

    function detectCurrentPage() {
        const path = window.location.pathname.toLowerCase();
        
        if (path.includes('/sale-pos/create') || path.includes('/sale_pos/create') || path.includes('/pos/create')) {
            return 'pos';
        } else if (path.includes('/purchases/create') || path.includes('/purchases/edit')) {
            return 'purchase';
        } else if (path.includes('/sells/create') || path.includes('/sells/edit')) {
            return 'sell';
        } else if (path.includes('/stock-transfers/create')) {
            return 'stock_transfer';
        } else if (path.includes('/stock-adjustments/create')) {
            return 'stock_adjustment';
        }
        
        // Default: try to detect by common selectors
        if ($('#search_product').length && $('#search_product_barcode_type_check').length) {
            return 'pos';
        } else if ($('#search_product').length) {
            return 'purchase'; // Default to purchase pattern
        }
        
        return null;
    }

    function initCameraScanner() {
        const currentPage = detectCurrentPage();

        // Inject modal first (only once)
        if ($('#camera_scanner_modal').length === 0) {
            injectCameraModal();
        }

        injectButtonsForAvailableInputs();

        // Initialize scanner functionality
        initializeScannerLogic();

        console.log('Camera Barcode Scanner module initialized for page:', currentPage || 'auto-detected');
    }

    function checkAndInjectButtons() {
        injectButtonsForAvailableInputs();
    }

    function injectButtonsForAvailableInputs() {
        const currentPage = detectCurrentPage();

        if (currentPage && pageConfigs[currentPage]) {
            const config = pageConfigs[currentPage];
            config.selectors.forEach(function(selector) {
                injectCameraButton(selector, config.buttonPosition);
            });
        }

        fallbackSelectors.forEach(function(selector) {
            $(selector).each(function() {
                const inputId = $(this).attr('id');
                if (!inputId) {
                    return;
                }

                injectCameraButton('#' + inputId, 'end');
            });
        });
    }

    function injectCameraButton(targetInputSelector, buttonPosition) {
        const normalizedTargetSelector = normalizeSelector(targetInputSelector);
        if (!normalizedTargetSelector || !$(normalizedTargetSelector).length) {
            return;
        }

        // Find the input group containing the search field
        const $inputGroup = $(normalizedTargetSelector).closest('.input-group');
        if (!$inputGroup.length) {
            return;
        }

        if (shouldHidePosCameraButton(normalizedTargetSelector)) {
            $inputGroup.find('.camera_scanner_btn').remove();
            return;
        }
        
        // Check if button already exists in this input group
        if ($inputGroup.find('.camera_scanner_btn').length > 0) {
            return;
        }
        
        let $inputGroupBtn = $inputGroup.find('.input-group-btn');
        
        // Create input-group-btn if it doesn't exist
        if ($inputGroupBtn.length === 0) {
            $inputGroupBtn = $('<span>').addClass('input-group-btn');
            $(normalizedTargetSelector).after($inputGroupBtn);
        }
        
        // Create camera button
        const $cameraBtn = $('<button>')
            .attr({
                type: 'button',
                class: 'btn btn-default bg-white btn-flat camera_scanner_btn',
                'data-toggle': 'modal',
                'data-target': '#camera_scanner_modal',
                'data-scanner-target': normalizedTargetSelector,
                title: 'Camera Scanner'
            })
            .html('<i class="fa fa-camera text-primary fa-lg"></i>');
        
        // Insert button based on position preference
        if (buttonPosition === 'before') {
            // Try to insert before quick add button (POS page)
            const $quickAddBtn = $inputGroupBtn.find('.pos_add_quick_product');
            if ($quickAddBtn.length) {
                $cameraBtn.insertBefore($quickAddBtn);
            } else {
                $inputGroupBtn.prepend($cameraBtn);
            }
        } else {
            // Insert at the end (default for most pages)
            $inputGroupBtn.append($cameraBtn);
        }
    }

    function shouldHidePosCameraButton(normalizedTargetSelector) {
        return detectCurrentPage() === 'pos' &&
            normalizedTargetSelector === '#search_product' &&
            !isMobileViewport();
    }

    function isMobileViewport() {
        if (window.matchMedia) {
            return window.matchMedia('(max-width: ' + POS_MOBILE_CAMERA_MAX_WIDTH + 'px)').matches;
        }

        return window.innerWidth <= POS_MOBILE_CAMERA_MAX_WIDTH;
    }

    function injectCameraModal() {
        // Create modal HTML
        const modalHTML = `
<div class="modal fade" id="camera_scanner_modal" tabindex="-1" role="dialog" aria-labelledby="camera_scanner_modal_label">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="camera_scanner_modal_label">
                    <i class="fa fa-camera"></i> Camera Scanner
                </h4>
            </div>
            <div class="modal-body">
                <div id="camera_scanner_container" style="width: 100%; text-align: center;">
                    <div id="camera_scanner_camera" style="width: 100%; display: inline-block;"></div>
                    <div id="camera_scanner_result" style="margin-top: 15px; display: none;">
                        <div class="alert alert-success">
                            <strong>Barcode Scanned</strong>: 
                            <span id="scanned_barcode"></span>
                        </div>
                    </div>
                </div>
                <div id="camera_scanner_status" style="margin-top: 10px; text-align: center;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="stop_camera_btn" style="display: none;">
                    <i class="fa fa-stop"></i> Stop Camera
                </button>
                <button type="button" class="btn btn-default" id="start_camera_btn">
                    <i class="fa fa-play"></i> Start Camera
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
        `;
        
        // Append modal to body
        $('body').append(modalHTML);
    }

    function normalizeSelector(selector) {
        if (!selector || typeof selector !== 'string') {
            return null;
        }

        return selector.charAt(0) === '#' ? selector : '#' + selector;
    }

    function getDefaultTargetInputSelector() {
        for (let i = 0; i < fallbackSelectors.length; i++) {
            const $candidate = $(fallbackSelectors[i]).filter(':enabled').first();
            if ($candidate.length && $candidate.attr('id')) {
                return '#' + $candidate.attr('id');
            }
        }

        return '#search_product';
    }

    function resolveTargetSelectorFromButton($button) {
        if ($button && $button.length) {
            const configuredTarget = normalizeSelector($button.attr('data-scanner-target'));
            if (configuredTarget && $(configuredTarget).length) {
                return configuredTarget;
            }

            const $groupInput = $button
                .closest('.input-group')
                .find('input[type="text"], input[type="search"]')
                .filter(function() {
                    return !!$(this).attr('id');
                })
                .first();

            if ($groupInput.length) {
                return '#' + $groupInput.attr('id');
            }
        }

        return getDefaultTargetInputSelector();
    }

    function resolveTargetInput(selector) {
        const normalizedSelector = normalizeSelector(selector) || getDefaultTargetInputSelector();
        let $targetInput = $(normalizedSelector).filter(':enabled').first();

        if (detectCurrentPage() === 'pos' && $('#search_product').length && !$('#search_product').is(':disabled')) {
            $targetInput = $('#search_product');
        }

        if ($targetInput.length) {
            return $targetInput;
        }

        for (let i = 0; i < fallbackSelectors.length; i++) {
            const $candidate = $(fallbackSelectors[i]).filter(':enabled').first();
            if ($candidate.length) {
                return $candidate;
            }
        }

        return $();
    }

    function getAutocompleteInstance($input) {
        if (!$input.length || typeof $input.autocomplete !== 'function') {
            return null;
        }

        return $input.data('ui-autocomplete') || $input.autocomplete('instance') || null;
    }

    function triggerAutocompleteSearch($input, searchTerm) {
        const autocompleteInstance = getAutocompleteInstance($input);
        if (!autocompleteInstance) {
            return false;
        }

        const minLength = autocompleteInstance.options && typeof autocompleteInstance.options.minLength === 'number'
            ? autocompleteInstance.options.minLength
            : 1;

        if (searchTerm.length < minLength) {
            return false;
        }

        try {
            $input.autocomplete('search', searchTerm);
            return true;
        } catch (error) {
            console.log('Autocomplete search error:', error);
            return false;
        }
    }

    function triggerEnterSearch($input) {
        const enterEventData = { keyCode: 13, which: 13, key: 'Enter' };

        $input.trigger($.Event('keydown', enterEventData));
        $input.trigger($.Event('keypress', enterEventData));
        $input.trigger($.Event('keyup', enterEventData));
    }

    function applyDecodedTextToTarget(decodedText, targetSelector) {
        const normalizedText = (decodedText || '').toString().trim();
        if (!normalizedText.length) {
            return false;
        }

        const $targetInput = resolveTargetInput(targetSelector);
        if (!$targetInput.length) {
            return false;
        }

        if ($targetInput.attr('id')) {
            targetSelector = '#' + $targetInput.attr('id');
        }

        $targetInput.val(normalizedText).focus();

        if (
            $targetInput.is('#search_product') &&
            typeof window.executePosProductSearch === 'function'
        ) {
            window.executePosProductSearch(normalizedText);
            return true;
        }

        if (triggerAutocompleteSearch($targetInput, normalizedText)) {
            return true;
        }

        $targetInput.trigger('input');
        $targetInput.trigger('change');
        triggerEnterSearch($targetInput);

        return true;
    }

    function initializeScannerLogic() {
        if (window.__cameraBarcodeScannerLogicInitialized) {
            return;
        }
        window.__cameraBarcodeScannerLogicInitialized = true;

        let html5QrcodeScanner = null;
        let isScanning = false;
        let isProcessingScan = false;
        let targetInputSelector = getDefaultTargetInputSelector();
        let explicitTargetInputSelector = null;
        let lastTriggeredButton = null;
        let lastDecodedText = '';
        let lastDecodedAt = 0;

        // Initialize when modal is shown
        $(document)
            .off('click' + MODULE_EVENT_NAMESPACE, '.camera_scanner_btn')
            .on('click' + MODULE_EVENT_NAMESPACE, '.camera_scanner_btn', function() {
                lastTriggeredButton = $(this);
                targetInputSelector = resolveTargetSelectorFromButton(lastTriggeredButton);
            });

        $(document)
            .off('shown.bs.modal' + MODULE_EVENT_NAMESPACE, '#camera_scanner_modal')
            .on('shown.bs.modal' + MODULE_EVENT_NAMESPACE, '#camera_scanner_modal', function(e) {
                const normalizedExplicitTarget = normalizeSelector(explicitTargetInputSelector);

                if (normalizedExplicitTarget && $(normalizedExplicitTarget).length) {
                    targetInputSelector = normalizedExplicitTarget;
                } else {
                    const $clickedBtn = e.relatedTarget ? $(e.relatedTarget) : lastTriggeredButton;
                    targetInputSelector = resolveTargetSelectorFromButton($clickedBtn);
                }

                explicitTargetInputSelector = null;

                $('#camera_scanner_result').hide();
                $('#scanned_barcode').text('');
                $('#camera_scanner_status').html(SCANNER_STATUS_READY);
            });

        $(document)
            .off('hidden.bs.modal' + MODULE_EVENT_NAMESPACE, '#camera_scanner_modal')
            .on('hidden.bs.modal' + MODULE_EVENT_NAMESPACE, '#camera_scanner_modal', function() {
                stopScanner();
                isProcessingScan = false;
                explicitTargetInputSelector = null;
                $('#camera_scanner_result').hide();
                $('#scanned_barcode').text('');
                $('#camera_scanner_status').html('');
            });

        $(document)
            .off('click' + MODULE_EVENT_NAMESPACE, '#start_camera_btn')
            .on('click' + MODULE_EVENT_NAMESPACE, '#start_camera_btn', function() {
                startScanner();
            });

        $(document)
            .off('click' + MODULE_EVENT_NAMESPACE, '#stop_camera_btn')
            .on('click' + MODULE_EVENT_NAMESPACE, '#stop_camera_btn', function() {
                stopScanner();
            });

        function getScannerConfig() {
            return {
                fps: 12,
                qrbox: function(viewfinderWidth, viewfinderHeight) {
                    return {
                        width: Math.max(220, Math.floor(Math.min(viewfinderWidth * 0.9, 420))),
                        height: Math.max(90, Math.floor(Math.min(viewfinderHeight * 0.28, 140)))
                    };
                },
                disableFlip: false,
                experimentalFeatures: {
                    useBarCodeDetectorIfSupported: true
                },
                supportedScanTypes: [
                    Html5QrcodeScanType.SCAN_TYPE_CAMERA
                ],
                formatsToSupport: [
                    Html5QrcodeSupportedFormats.EAN_13,
                    Html5QrcodeSupportedFormats.EAN_8,
                    Html5QrcodeSupportedFormats.UPC_A,
                    Html5QrcodeSupportedFormats.UPC_E,
                    Html5QrcodeSupportedFormats.CODE_128,
                    Html5QrcodeSupportedFormats.CODE_39,
                    Html5QrcodeSupportedFormats.CODE_93,
                    Html5QrcodeSupportedFormats.CODABAR,
                    Html5QrcodeSupportedFormats.ITF,
                    Html5QrcodeSupportedFormats.QR_CODE,
                    Html5QrcodeSupportedFormats.AZTEC,
                    Html5QrcodeSupportedFormats.DATA_MATRIX
                ]
            };
        }

        function startScanner() {
            if (isScanning) {
                return;
            }

            if (typeof Html5Qrcode === 'undefined') {
                showError('Scanner library failed to load. Please refresh the page and try again.');
                return;
            }

            // Check if browser supports camera
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                showError('Camera is not supported in this browser. Please use a modern browser with camera access.');
                return;
            }

            isProcessingScan = false;
            $('#camera_scanner_result').hide();
            $('#scanned_barcode').text('');
            $('#camera_scanner_status').html(SCANNER_STATUS_ACTIVE);

            try {
                // Create scanner instance
                html5QrcodeScanner = new Html5Qrcode('camera_scanner_camera');

                // Start scanning
                html5QrcodeScanner.start(
                    { facingMode: 'environment' },
                    getScannerConfig(),
                    onScanSuccess,
                    onScanError
                ).then(() => {
                    isScanning = true;
                    $('#start_camera_btn').hide();
                    $('#stop_camera_btn').show();
                    $('#camera_scanner_status').html(SCANNER_STATUS_ACTIVE);
                }).catch((err) => {
                    if (html5QrcodeScanner) {
                        try {
                            html5QrcodeScanner.clear();
                        } catch (clearError) {
                            console.log('Scanner clear error:', clearError);
                        }
                    }
                    html5QrcodeScanner = null;
                    isScanning = false;
                    console.error('Failed to start scanner:', err);
                    let errorMsg = 'Failed to start camera. ';
                    if (err && err.message) {
                        errorMsg += err.message;
                    } else {
                        errorMsg += 'Please check camera permissions.';
                    }
                    showError(errorMsg);
                });

            } catch (error) {
                console.error('Scanner initialization error:', error);
                showError('Scanner initialization error: ' + error.message);
            }
        }

        function stopScanner(options) {
            options = options || {};

            const scannerInstance = html5QrcodeScanner;
            const scannerWasRunning = isScanning;
            html5QrcodeScanner = null;
            isScanning = false;
            $('#start_camera_btn').show();
            $('#stop_camera_btn').hide();

            if (!options.keepStatus) {
                $('#camera_scanner_status').html('');
            }

            if (scannerInstance) {
                if (!scannerWasRunning) {
                    try {
                        scannerInstance.clear();
                    } catch (clearError) {
                        console.log('Scanner clear error:', clearError);
                    }

                    return;
                }

                scannerInstance.stop().then(() => {
                    scannerInstance.clear();
                }).catch((err) => {
                    console.error('Failed to stop scanner:', err);
                });
            }
        }

        function onScanSuccess(decodedText) {
            const normalizedText = (decodedText || '').toString().trim();
            if (!normalizedText.length) {
                return;
            }

            const now = Date.now();
            if (isProcessingScan) {
                return;
            }

            if (normalizedText === lastDecodedText && now - lastDecodedAt < DUPLICATE_SCAN_TTL_MS) {
                return;
            }

            lastDecodedText = normalizedText;
            lastDecodedAt = now;
            isProcessingScan = true;

            const wasApplied = applyDecodedTextToTarget(normalizedText, targetInputSelector);
            if (!wasApplied) {
                isProcessingScan = false;
                showError('Barcode was detected, but no supported search input is available on this page.');
                return;
            }

            // Show success message
            $('#scanned_barcode').text(normalizedText);
            $('#camera_scanner_result').show();
            $('#camera_scanner_status').html(
                '<div class="alert alert-success"><i class="fa fa-check-circle"></i> Barcode detected. Applying result...</div>'
            );

            console.log('Barcode scanned:', normalizedText);

            stopScanner({ keepStatus: true });

            setTimeout(() => {
                $('#camera_scanner_modal').modal('hide');
            }, AUTO_CLOSE_DELAY_MS);
        }

        function onScanError(errorMessage) {
            // Suppress frequent not-found messages while scanning frames.
            if (!errorMessage.includes('No MultiFormat Readers') &&
                !errorMessage.includes('NotFoundException') &&
                !errorMessage.includes('No QR code') &&
                !errorMessage.includes('No MultiFormat')) {
                console.log('Scan error:', errorMessage);
            }
        }

        function showError(message) {
            $('#camera_scanner_status').html(
                '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> ' + message + '</div>'
            );
        }

        // Expose function to change target input
        window.setCameraScannerTarget = function(selector) {
            targetInputSelector = normalizeSelector(selector) || getDefaultTargetInputSelector();
            explicitTargetInputSelector = targetInputSelector;
        };

        window.openCameraBarcodeScanner = function(selector) {
            const normalizedSelector = normalizeSelector(selector) || getDefaultTargetInputSelector();

            explicitTargetInputSelector = normalizedSelector;
            targetInputSelector = normalizedSelector;

            if ($('#camera_scanner_modal').length === 0) {
                injectCameraModal();
            }

            $('#camera_scanner_modal').modal('show');
        };
    }
})();
</script>

<style>
/* Camera Scanner Button Styles */
.camera_scanner_btn {
    margin-left: 2px;
}

.camera_scanner_btn:hover {
    background-color: #f0f0f0 !important;
}

#camera_scanner_camera {
    min-height: 300px;
    background-color: #000;
    border-radius: 4px;
}

#camera_scanner_camera video {
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
}

#camera_scanner_camera canvas {
    display: none;
}
</style>