{% extends "macros/base.html" %}
{% from 'macros/modals.html' import confirm_modal, scanner_modal %}

{% block title %}Inventario{% endblock %}

{% block head %}
<script src="https://unpkg.com/html5-qrcode"></script>
<style>
    .table th:last-child, 
    .table td:last-child {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }

    .name-cell {
        max-width: 200px; /* Adjust based on preference */
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (min-width: 992px) {
        .name-cell {
            max-width: 400px;
        }
    }

    .sort-asc::after {
        content: " ↓";
        font-size: 0.8rem;
    }

    .sort-desc::after {
        content: " ↑";
        font-size: 0.8rem;
    }

    th[onclick] {
        cursor: pointer;
        user-select: none;
    }

    th[onclick]:hover {
        background-color: var(--input-bg) !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="row g-3">

    <!-- ── LEFT COLUMN ── -->
    <div class="col-12 col-lg-5">

        <!-- New product prompt -->
        <div id="new-product-prompt"
            class="new-product-prompt p-3 mb-3 d-none d-flex justify-content-between align-items-center">
            <span>Nuevo: <b id="new-barcode-display"></b></span>
            <button onclick="dismissPrompt()" class="btn btn-sm" style="background:rgba(0,0,0,0.25);color:#fff;">
                Omitir
            </button>
        </div>

        <!-- Last scanned card -->
        <div class="discord-card p-3 mb-3 text-center">
            <p class="mb-1 fw-semibold"
                style="color:var(--text-muted); font-size:0.8rem; text-transform:uppercase; letter-spacing:.05em;">
                Último Escaneado</p>
            <img id="display-img" src="./static/placeholder.png" class="mb-2" alt="product">
            <h5 id="display-name" class="mb-1">Esperando scan...</h5>
            <div class="price-tag" id="display-price">$0</div>
            <p id="display-barcode" class="mb-0 mt-1" style="font-family:monospace; opacity:.5; font-size:.8rem;">
            </p>
        </div>

        <button class="btn btn-accent mb-3 w-100" onclick="startScanner()">
            <i class="bi bi-qr-code-scan me-2"></i>Escanear con Cámara
        </button>

        <!-- Edit / Create card -->
        <div class="discord-card p-3">
            <h6 id="form-title" class="mb-3 fw-bold">Editar / Crear</h6>
            <form action="/upsert" method="POST" id="product-form">
                <input class="form-control mb-2" type="text" name="barcode" id="form-barcode" placeholder="Barcode"
                    required>
                <input class="form-control mb-2" type="text" name="name" id="form-name" placeholder="Nombre" required>

                <div class="row g-2 mb-2">
                    <div class="col-8">
                        <input class="form-control" type="number" name="price" id="form-price"
                            placeholder="Precio (CLP)" required>
                    </div>
                    <div class="col-4">
                        <select class="form-select" name="unit_type" id="form-unit-type">
                            <option value="unit">Unidad</option>
                            <option value="kg">Kg</option>
                        </select>
                    </div>
                </div>

                <input class="form-control mb-2" type="number" step="1" name="stock" id="form-stock"
                    placeholder="Stock Inicial">

                <div class="input-group mb-3">
                    <input class="form-control" type="text" name="image_url" id="form-image" placeholder="URL Imagen">
                    <input type="file" id="camera-input" accept="image/*" capture="environment" style="display: none;"
                        onchange="handleFileUpload(this)">
                    <button class="btn btn-outline-secondary" type="button"
                        onclick="document.getElementById('camera-input').click()">
                        <i class="bi bi-camera"></i>
                    </button>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-accent flex-grow-1">
                        <i class="bi bi-floppy me-1"></i>Guardar
                    </button>
                    <button type="button" class="btn btn-secondary" onclick="clearForm()">
                        <i class="bi bi-eraser"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ── RIGHT COLUMN ── -->
    <div class="col-12 col-lg-7">
        <div class="discord-card p-3">

            <!-- Bulk actions bar -->
            <div id="bulk-bar" class="bulk-bar p-2 mb-3 d-flex justify-content-between align-items-center">
                <span><b id="selected-count">0</b> seleccionados</span>
                <div class="d-flex align-items-center gap-2">
                    <input type="number" id="bulk-price-input" class="form-control form-control-sm"
                        placeholder="Precio">
                    <button onclick="applyBulkPrice()" class="btn btn-sm"
                        style="background:#fff; color:var(--accent); font-weight:600;">OK</button>
                    <button onclick="applyBulkDelete()" class="btn btn-sm btn-danger-discord">
                        <i class="bi bi-trash"></i>
                    </button>
                    <button onclick="clearSelection()" class="btn btn-sm"
                        style="background: rgba(255,255,255,0.2); color:#fff;">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </div>

            <!-- Search -->
            <div class="position-relative mb-3">
                <input type="text" id="searchInput" class="form-control pe-5" onkeyup="searchTable()"
                    placeholder="Filtrar productos...">
                <button class="btn btn-link position-absolute end-0 top-50 translate-middle-y text-muted"
                    onclick="clearSearch()" id="clearSearchBtn" style="display: none; text-decoration: none;">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <!-- Table -->
            <div class="table-responsive">
                <table class="table table-borderless mb-0" id="inventoryTable">
                    <thead>
                        <tr>
                            <th style="width:36px;"><input class="form-check-input" type="checkbox" id="select-all"
                                    onclick="toggleAll(this)"></th>
                            <th class="col-barcode" onclick="sortTable(1)">Código</th>
                            <th onclick="sortTable(2)">Nombre</th>
                            <th onclick="sortTable(3)">Stock</th>
                            <th onclick="sortTable(4)">Precio</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for p in products %}
                        <tr data-barcode="{{ p[0] }}">
                            <td><input class="form-check-input product-checkbox" type="checkbox"
                                    onclick="updateBulkBar()"></td>
                            <td class="col-barcode">{{ p[0] }}</td>
                            <td class="name-cell">{{ p[1] }}</td>
                            <td>
                                {% if p[5] == 'kg' %}
                                <span class="text-muted d-inline-block text-center" style="width: 45px;">-</span>
                                {% else %}
                                {{ p[4] | int }} <small class="text-muted">Uni</small>
                                {% endif %}
                            </td>
                            <td class="price-cell" data-value="{{ p[2] }}"></td>
                            <td class="text-nowrap">
                                <button class="btn btn-accent btn-sm"
                                    onclick="editProduct('{{ p[0] }}', '{{ p[1] }}', '{{ p[2] }}', '{{ p[3] }}', '{{ p[4] }}', '{{ p[5] }}')"
                                    data-bs-toggle="modal" data-bs-target="#editModal">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-danger-discord btn-sm btn-del-sm" data-bs-toggle="modal"
                                    data-bs-target="#deleteModal" data-barcode="{{ p[0] }}" data-name="{{ p[1] }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{% call confirm_modal('editModal', 'Editar Producto', 'btn-accent', 'Editar', 'confirmEdit()') %}
<p>¿Quieres editar <strong id="editProductName"></strong>?</p>
{% endcall %}

{% call confirm_modal('deleteModal', 'Eliminar Producto', 'btn-danger-discord', 'Eliminar', 'confirmDelete()') %}
<p>¿Seguro que quieres eliminar <strong id="deleteProductName"></strong>?</p>
<p class="text-muted small">Esta acción no se puede deshacer.</p>
{% endcall %}

{% call confirm_modal('bulkConfirmModal', 'Confirmar Cambio Masivo', 'btn-accent', 'Confirmar Cambios',
'executeBulkPrice()') %}
<div class="text-center">
    <i class="bi bi-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
    <p class="mt-3">Vas a actualizar <strong id="bulk-count-text">0</strong> productos al precio de <strong
            id="bulk-price-text"></strong>.</p>
</div>
{% endcall %}

{% call confirm_modal('bulkDeleteModal', 'Confirmar Eliminación Masiva', 'btn-danger-discord', 'Eliminar
permanentemente', 'executeBulkDelete()') %}
<div class="text-center">
    <i class="bi bi-exclamation-octagon text-danger" style="font-size: 3rem;"></i>
    <p class="mt-3">Vas a eliminar <strong id="bulk-delete-count">0</strong> productos permanentemente.</p>
    <p class="text-muted small">Esta acción borrará los datos y las imágenes de la caché.</p>
</div>
{% endcall %}

{{ scanner_modal() }}
{% endblock %}

{% block scripts %}
<script>
    /* ── Socket.IO ── */
    const socket = io();
    const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });

    function formatAll() {
        document.querySelectorAll('.price-cell').forEach(td => {
            td.innerText = clp.format(td.getAttribute('data-value'));
        });
    }
    formatAll();

    // Inside socket.on('new_scan')
    socket.on('new_scan', d => {
        // Update the "Last Scanned" card
        document.getElementById('display-name').innerText = d.name;
        document.getElementById('display-price').innerText = clp.format(d.price);
        document.getElementById('display-barcode').innerText = d.barcode;
        document.getElementById('display-img').src = d.image || './static/placeholder.png';

        let title = 'Editando: ' + d.name;
        if (d.note) title += ` (${d.note})`;

        // Update the actual form
        updateForm(d.barcode, d.name, d.price, d.image, title, d.stock, d.unit_type);
    });

    socket.on('scan_error', d => {
        const prompt = document.getElementById('new-product-prompt');
        document.getElementById('new-barcode-display').innerText = d.barcode;
        prompt.classList.remove('d-none');

        // Update the "Last Scanned" card so it doesn't show old data
        document.getElementById('display-name').innerText = d.name || "Producto Nuevo";
        document.getElementById('display-price').innerText = clp.format(0);
        document.getElementById('display-barcode').innerText = d.barcode;
        document.getElementById('display-img').src = d.image || './static/placeholder.png';

        // Clear the price and set the name in the form
        updateForm(d.barcode, d.name || '', '', d.image || '', 'Crear: ' + d.barcode);
    });

    socket.on('scale_update', function (data) {
        console.log("Current Weight:", data.grams + "g");
        // If the unit type is 'kg', update the stock field automatically
        const unitType = document.getElementById('form-unit-type').value;
        if (unitType === 'kg') {
            document.getElementById('form-stock').value = data.kilograms;
        }
    });

    // Replace your existing updateForm function with this one
    function updateForm(b, n, p, i, t, stock, unit) {
        dismissPrompt();
        document.getElementById('form-barcode').value = b;
        document.getElementById('form-name').value = n;

        // Force integers here to nuke the decimals once and for all
        document.getElementById('form-price').value = p ? parseInt(p, 10) : '';
        document.getElementById('form-stock').value = stock ? parseInt(stock, 10) : 0;

        document.getElementById('form-unit-type').value = unit || 'unit';
        document.getElementById('form-image').value = i || '';
        document.getElementById('form-title').innerText = t;

        // Add a timestamp to the URL if it's a local cache image
        let displayImg = i || './static/placeholder.png';
        if (displayImg.includes('/static/cache/')) {
            displayImg += (displayImg.includes('?') ? '&' : '?') + 't=' + Date.now();
        }

        document.getElementById('form-image').value = i || '';
        document.getElementById('form-title').innerText = t;
        document.getElementById('display-img').src = displayImg;
        document.getElementById('display-name').innerText = n || 'Producto Nuevo';
        document.getElementById('display-price').innerText = clp.format(p || 0);
        document.getElementById('display-barcode').innerText = b;

        toggleStockInput(); // Show/hide stock input based on unit type
    }

    function dismissPrompt() {
        document.getElementById('new-product-prompt').classList.add('d-none');
    }

    function editProduct(b, n, p, i, stock, unit) {
        document.getElementById('editProductName').innerText = n;
        const modal = document.getElementById('editModal');
        modal.dataset.barcode = b;
        modal.dataset.name = n;
        modal.dataset.price = p;
        modal.dataset.image = i;
        modal.dataset.stock = stock;
        modal.dataset.unit = unit;
    }

    function confirmEdit() {
        const m = document.getElementById('editModal');
        updateForm(m.dataset.barcode, m.dataset.name, m.dataset.price, m.dataset.image, 'Editando: ' + m.dataset.name, m.dataset.stock, m.dataset.unit);
        window.scrollTo({ top: 0, behavior: 'smooth' });
        bootstrap.Modal.getInstance(m).hide();
    }

    function confirmDelete() {
        const modal = document.getElementById('deleteModal');
        const form = document.createElement('form');
        form.action = `/delete/${modal.dataset.barcode}`;
        form.method = 'POST';
        form.style.display = 'none';
        document.body.appendChild(form);
        form.submit();
    }

    // Delete modal setup
    document.getElementById('deleteModal').addEventListener('show.bs.modal', e => {
        const button = e.relatedTarget;
        document.getElementById('deleteProductName').innerText = button.dataset.name;
        document.getElementById('deleteModal').dataset.barcode = button.dataset.barcode;
    });

    /* ── Bulk selection ── */
    function toggleAll(src) {
        const visibleRows = document.querySelectorAll('#inventoryTable tbody tr:not([style*="display: none"])');
        visibleRows.forEach(row => {
            const cb = row.querySelector('.product-checkbox');
            if (cb) cb.checked = src.checked;
        });
        updateBulkBar();
    }

    function updateBulkBar() {
        document.getElementById('selected-count').innerText =
            document.querySelectorAll('.product-checkbox:checked').length;
    }

    function clearForm() {
        document.getElementById('product-form').reset();
        document.getElementById('form-title').innerText = 'Editar / Crear';
        // Reset preview card
        document.getElementById('display-img').src = './static/placeholder.png';
        document.getElementById('display-name').innerText = 'Esperando scan...';
        document.getElementById('display-price').innerText = '$0';
        document.getElementById('display-barcode').innerText = '';

        toggleStockInput(); // Show/hide stock input based on default unit type
    }

    async function handleFileUpload(input) {
        const barcode = document.getElementById('form-barcode').value;
        if (!barcode) {
            alert("Primero escanea o ingresa un código de barras.");
            input.value = '';
            return;
        }

        const file = input.files[0];
        if (!file) return;

        // Show a "loading" state if you feel like being fancy
        const originalBtnContent = document.querySelector('button[onclick*="camera-input"]').innerHTML;
        document.querySelector('button[onclick*="camera-input"]').innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

        try {
            const compressedBlob = await compressImage(file, 800, 0.7); // Max 800px, 70% quality

            const formData = new FormData();
            formData.append('image', compressedBlob, `photo_${barcode}.jpg`);
            formData.append('barcode', barcode);

            const res = await fetch('/upload_image', {
                method: 'POST',
                body: formData
            });
            const data = await res.json();

            if (res.ok) {
                document.getElementById('form-image').value = data.image_url;
                document.getElementById('display-img').src = data.image_url;
            } else {
                alert("Error al subir imagen: " + data.error);
            }
        } catch (err) {
            console.error(err);
            alert("Error procesando imagen.");
        } finally {
            document.querySelector('button[onclick*="camera-input"]').innerHTML = originalBtnContent;
        }
    }

    // The compression engine
    function compressImage(file, maxWidth, quality) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = event => {
                const img = new Image();
                img.src = event.target.result;
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    let width = img.width;
                    let height = img.height;

                    if (width > maxWidth) {
                        height = Math.round((height * maxWidth) / width);
                        width = maxWidth;
                    }

                    canvas.width = width;
                    canvas.height = height;

                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);

                    canvas.toBlob(blob => {
                        resolve(blob);
                    }, 'image/jpeg', quality);
                };
                img.onerror = err => reject(err);
            };
            reader.onerror = err => reject(err);
        });
    }

    function applyBulkPrice() {
        const price = document.getElementById('bulk-price-input').value;
        const checked = document.querySelectorAll('.product-checkbox:checked');

        if (!price || checked.length === 0) return;

        // Set text in the pretty modal
        document.getElementById('bulk-count-text').innerText = checked.length;
        document.getElementById('bulk-price-text').innerText = clp.format(price);

        // Show the modal
        const bulkModal = new bootstrap.Modal(document.getElementById('bulkConfirmModal'));
        bulkModal.show();
    }

    async function executeBulkPrice() {
        const price = document.getElementById('bulk-price-input').value;
        const checked = document.querySelectorAll('.product-checkbox:checked');
        const barcodes = Array.from(checked).map(cb => cb.closest('tr').getAttribute('data-barcode'));

        const res = await fetch('/bulk_price_update', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ barcodes, new_price: price })
        });

        if (res.ok) {
            checked.forEach(cb => {
                const cell = cb.closest('tr').querySelector('.price-cell');
                cell.setAttribute('data-value', price);
                cell.innerText = clp.format(price);
                cb.checked = false;
            });
            document.getElementById('bulk-price-input').value = '';
            updateBulkBar();

            // Hide modal
            const modalEl = document.getElementById('bulkConfirmModal');
            bootstrap.Modal.getInstance(modalEl).hide();
        }
    }

    function applyBulkDelete() {
        const checked = document.querySelectorAll('.product-checkbox:checked');
        if (checked.length === 0) return;

        document.getElementById('bulk-delete-count').innerText = checked.length;
        const delModal = new bootstrap.Modal(document.getElementById('bulkDeleteModal'));
        delModal.show();
    }

    async function executeBulkDelete() {
        const checked = document.querySelectorAll('.product-checkbox:checked');
        const barcodes = Array.from(checked).map(cb => cb.closest('tr').getAttribute('data-barcode'));

        const res = await fetch('/bulk_delete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ barcodes })
        });

        if (res.ok) {
            checked.forEach(cb => {
                cb.closest('tr').remove(); // Remove the row from the table immediately
            });
            updateBulkBar();

            const modalEl = document.getElementById('bulkDeleteModal');
            bootstrap.Modal.getInstance(modalEl).hide();
        } else {
            alert("Error al eliminar productos.");
        }
    }

    /* ── Search ── */
    function searchTable() {
        const input = document.getElementById('searchInput');
        const q = input.value.toUpperCase();
        const clearBtn = document.getElementById('clearSearchBtn');

        // Show/hide clear button based on input
        clearBtn.style.display = q.length > 0 ? 'block' : 'none';

        document.querySelectorAll('#inventoryTable tbody tr').forEach(tr => {
            tr.style.display = tr.innerText.toUpperCase().includes(q) ? '' : 'none';
        });

        document.getElementById('select-all').checked = false;
    }

    function clearSearch() {
        const input = document.getElementById('searchInput');
        input.value = '';
        searchTable();
        input.focus();
    }

   let sortDirections = [true, true, true, true, true]; 

    function sortTable(colIdx) {
        const table = document.getElementById("inventoryTable");
        const tbody = table.querySelector("tbody");
        const ths = table.querySelectorAll("thead th");
        const rows = Array.from(tbody.querySelectorAll("tr"));
        const isAscending = sortDirections[colIdx];

        const sortedRows = rows.sort((a, b) => {
            let valA = a.cells[colIdx].innerText.trim();
            let valB = b.cells[colIdx].innerText.trim();

            // Specific logic for numeric columns
            if (colIdx === 3 || colIdx === 4) {
                // If it's Stock (3) or Price (4), strip everything but numbers
                // This handles the "Uni" text and the currency symbols
                valA = parseFloat(valA.replace(/[^\d.-]/g, '')) || 0;
                valB = parseFloat(valB.replace(/[^\d.-]/g, '')) || 0;
            } else {
                valA = valA.toLowerCase();
                valB = valB.toLowerCase();
            }

            if (valA < valB) return isAscending ? -1 : 1;
            if (valA > valB) return isAscending ? 1 : -1;
            return 0;
        });

        ths.forEach(th => th.classList.remove('sort-asc', 'sort-desc'));
        
        ths[colIdx].classList.add(isAscending ? 'sort-asc' : 'sort-desc');

        sortDirections[colIdx] = !isAscending;
        sortedRows.forEach(row => tbody.appendChild(row));
        document.getElementById('select-all').checked = false;
    }

    let html5QrCode;
    let currentCameraId;

    async function startScanner() {
        const modal = new bootstrap.Modal(document.getElementById('scannerModal'));
        modal.show();

        if (!html5QrCode) {
            html5QrCode = new Html5Qrcode("reader");
        }

        try {
            const devices = await Html5Qrcode.getCameras();
            const select = document.getElementById('camera-select');
            select.innerHTML = '';

            if (devices && devices.length) {
                devices.forEach((device, index) => {
                    const option = document.createElement('option');
                    option.value = device.id;
                    option.dataset.index = index;
                    option.text = device.label || `Cámara ${index + 1}`;
                    select.appendChild(option);
                });

                const savedIndex = getCookie('cameraIndex');
                const targetIndex = (savedIndex !== null && savedIndex < devices.length) ? savedIndex : devices.length - 1;

                currentCameraId = devices[targetIndex].id;
                select.value = currentCameraId;

                launchCamera(currentCameraId);
            } else {
                alert("No se encontraron cámaras.");
            }
        } catch (err) {
            console.error("Error obteniendo cámaras:", err);
            alert("Error de permisos de cámara. Revisa la conexión HTTPS.");
        }
    }

    let torchEnabled = false;

    function isTorchSupported() {
        if (!html5QrCode || !html5QrCode.isScanning) return false;
        const settings = html5QrCode.getRunningTrackSettings();
        return "torch" in settings;
    }

    async function toggleTorch() {
        if (!isTorchSupported()) return;

        torchEnabled = !torchEnabled;
        try {
            await html5QrCode.applyVideoConstraints({
                advanced: [{ torch: torchEnabled }]
            });

            const btn = document.getElementById('torch-btn');
            if (torchEnabled) {
                btn.classList.replace('btn-outline-secondary', 'btn-accent');
                btn.innerHTML = '<i class="bi bi-lightbulb-fill"></i>';
            } else {
                btn.classList.replace('btn-accent', 'btn-outline-secondary');
                btn.innerHTML = '<i class="bi bi-lightbulb"></i>';
            }
        } catch (err) {
            console.error("Torch error:", err);
        }
    }

    async function launchCamera(cameraId) {
        const config = { fps: 10, qrbox: { width: 250, height: 150 } };

        if (html5QrCode.isScanning) {
            await html5QrCode.stop();
        }

        try {
            await html5QrCode.start(
                cameraId,
                config,
                (decodedText) => {
                    stopScanner();
                    bootstrap.Modal.getInstance(document.getElementById('scannerModal')).hide();
                    fetch(`/scan?content=${decodedText}`)
                        .then(res => {
                            if (res.status === 404) console.log("Nuevo producto detectado");
                        });
                }
            );

            setTimeout(() => {
                html5QrCode.applyVideoConstraints({
                    focusMode: "continuous",
                    advanced: [{ zoom: 2.0 }],
                });
                const torchBtn = document.getElementById('torch-btn');
                if (isTorchSupported()) {
                    torchBtn.style.setProperty('display', 'block', 'important'); // Use !important to override inline styles
                    torchEnabled = false;
                    torchBtn.classList.replace('btn-accent', 'btn-outline-secondary');
                    torchBtn.innerHTML = '<i class="bi bi-lightbulb"></i>';
                } else {
                    torchBtn.style.display = 'none';
                    console.log("Torch not supported on this device/browser.");
                }
            }, 250);

        } catch (err) {
            console.error("Camera start error:", err);
        }
    }

    function stopScanner() {
        if (html5QrCode && html5QrCode.isScanning) {
            document.getElementById('torch-btn').style.display = 'none';
            html5QrCode.stop().then(() => {
                html5QrCode.clear();
            }).catch(err => console.error("Stop error", err));
        }
    }

    function switchCamera(cameraId) {
        if (cameraId) {
            const select = document.getElementById('camera-select');
            const selectedOption = select.options[select.selectedIndex];

            if (selectedOption && selectedOption.dataset.index !== undefined) {
                setCookie('cameraIndex', selectedOption.dataset.index, 365);
            }

            currentCameraId = cameraId;
            launchCamera(cameraId);
        }
    }

    function toggleStockInput() {
        const unitSelect = document.getElementById('form-unit-type');
        const stockInput = document.getElementById('form-stock');

        if (unitSelect.value === 'kg') {
            stockInput.classList.add('d-none');
            stockInput.disabled = true;
            stockInput.value = '';
        } else {
            stockInput.classList.remove('d-none');
            stockInput.disabled = false;
        }
    }

    document.getElementById('form-unit-type').addEventListener('change', toggleStockInput);
</script>
{% endblock %}