{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}POS Sales{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/barcode/barcode.css">
<link rel="stylesheet" href="/static/pos-accelerator.css?v=dark-speed-strip-20260519">
<link rel="stylesheet" href="/static/hil-pages/sales.css">
{% endblock %}
{% block content %}
<header>
<h2>🛒 {{ _('Sales') }}</h2>
    <div class="header-actions">
        <form class="currency-form" method="POST" action="/set-currency">
            <input type="hidden" name="return_to" value="/sales">
<label for="currency_code">{{ _('Currency') }}</label>
            <select id="currency_code" name="currency_code" onchange="this.form.submit()">
                {% for code, label in currency_options %}
                    <option value="{{ code }}" {% if code == currency_code %}selected{% endif %}>{{ code }}</option>
                {% endfor %}
            </select>
        </form>
        <a href="/transactions">Past Transactions</a>
        <a href="/return-goods">Return Goods</a>
        {% if is_admin_view %}
        <a href="/organizational-governance">Governance</a>
        <a href="/operational-memory">Memory</a>
        <a href="/enterprise-experience">Search & Trust</a>
        <a href="/pos-acceleration">Speed Center</a>
        {% endif %}
        <a href="/release-notes">Release Notes</a>
        <a href="/change-password">Change Password</a>
        <a href="/logout">Logout</a>
    </div>
</header>

<div class="container">

<div class="grid">

<!-- LEFT -->
<div class="card">

<h3>{{ _('Products') }}</h3>

<div class="pos-speed-strip">
    <div>
        <strong>POS Speed Mode</strong>
        <span id="pos-speed-status" class="pos-speed-status">Preloading products, barcode cache, and checkout shortcuts.</span>
    </div>
    <div class="pos-speed-actions">
        <button type="button" id="pos-speed-preload">Refresh Speed Cache</button>
        {% if is_admin_view %}
        {{ ui.button('Speed Center', '/pos-acceleration') }}
        {% endif %}
    </div>
</div>

<div class="product-search-block">
    <input type="text" id="search" placeholder="Start typing product name, SKU, or barcode" autocomplete="off" aria-controls="results" aria-describedby="search-status">
    <div id="search-status" class="search-status" aria-live="polite"></div>
    <div id="results" class="search-results pos-search-results" aria-live="polite"></div>
</div>

<div class="scanner-actions">
    {{ ui.button('Scanner Center', '/scanner-center?return_to=/sales&target=/sales') }}
    {{ ui.button('Connect Phone Scanner', '/connect-phone-scanner?return_to=/sales&target=/sales') }}
    {{ ui.button('Use Real Barcode Scanner', '/scan?return_to=/sales&target=/sales') }}
    {% if is_admin_view %}
    {{ ui.button('Barcode Hub', '/barcode') }}
    {{ ui.button('Governance', '/organizational-governance') }}
    {{ ui.button('Memory', '/operational-memory') }}
    {{ ui.button('Search & Trust', '/enterprise-experience') }}
    {{ ui.button('Speed Center', '/pos-acceleration') }}
    {% endif %}
    <button type="button" onclick="searchServices()">Sell Services</button>
</div>

<div class="barcode-console">
    <div class="barcode-console-row">
        <input type="text" id="barcode-fast-input" placeholder="Scan barcode or QR here" autocomplete="off">
        <button type="button" id="barcode-cache-refresh">Refresh Cache</button>
        <button type="button" id="barcode-focus">Focus Scanner</button>
    </div>
    <div id="barcode-scan-status" class="barcode-status">Scanner ready. USB, Bluetooth, keyboard, and offline cache are active.</div>
</div>

<div class="scan-intelligence-panel">
    <div id="scan-confirmation" class="scan-confirmation">
        <div id="scan-product-image" class="scan-product-image">--</div>
        <div>
            <strong id="scan-product-name">Product</strong>
            <div class="scan-product-meta">
                <span id="scan-product-price"></span>
                <span id="scan-product-stock"></span>
                <span id="scan-product-type"></span>
            </div>
        </div>
    </div>
    <div id="scan-guidance-list" class="scan-guidance-list"></div>
    <div id="scan-recovery" class="scan-recovery"></div>
</div>

{% if scanned_product %}
{% set scanned_stock = scanned_product.stock|default(0, true)|int %}
<div class="scanned-product-card">
    <h4>Scanned Product Ready</h4>
    <p>{{ scanned_product.name }} | Barcode {{ scanned_product.barcode }}</p>
    <p>Catalog price: {{ currency_symbol }}{{ "%.2f"|format(scanned_product.price) }} | Stock: {{ scanned_product.stock }}</p>
    <div class="product-add-row">
        <label>Qty
            <input type="number" id="qty-{{ scanned_product.id }}" value="1" min="1">
        </label>
        <label>Selling price
            <input type="number" id="bargain-price-{{ scanned_product.id }}" value="{{ '%.2f'|format(scanned_product.price) }}" min="0" step="0.01">
        </label>
        <button type="button" {% if scanned_product.item_type != 'service' and scanned_stock < 1 %}disabled{% else %}onclick="addToCart({{ scanned_product.id }})"{% endif %}>
            Add Scanned Product
        </button>
    </div>
    {% if scanned_product.item_type != 'service' and scanned_stock < 1 %}
        <p class="hil-inline-cc5827f393">This product is out of stock and cannot be sold until restocked.</p>
    {% endif %}
</div>
{% elif scanned_error %}
<div class="scanned-product-card scan-missing-card">
    <h4>Barcode Not Found</h4>
    <p>{{ scanned_error }}</p>
    {% if session.get('role') == 'admin' %}
        <a href="/add-product-scan?barcode={{ scanned_barcode|urlencode }}" class="btn">Add This Scanned Product</a>
    {% else %}
        <p>Ask an admin to add this barcode to inventory before selling it.</p>
    {% endif %}
</div>
{% endif %}

<div class="service-quick-panel">
    <div class="service-quick-head">
        <div>
            <strong>Quick Services</strong>
            <div class="service-quick-note">Tap once to add a service to the cart.</div>
        </div>
        <button type="button" onclick="showAllServices()">Show All</button>
    </div>
    <div class="service-search-row">
        <input id="service-filter" type="text" placeholder="Filter services by name">
        <button type="button" onclick="clearServiceFilter()">Clear</button>
    </div>
    <div id="quick-services" class="service-grid"></div>
    <p id="service-empty" class="service-empty hil-inline-6b99de8b69">
        No services found.
        {% if session.get('role') == 'admin' %}
        <a href="/add-service">Add a service</a>
        {% else %}
        Ask an admin to add services.
        {% endif %}
    </p>
</div>

<hr>

<h3>Quick Add</h3>

<form method="POST" action="/sales">
    <label for="quick-product-id">Product ID or SKU</label>
    <input id="quick-product-id" name="product_id" type="number" inputmode="numeric" placeholder="Product ID or Shop Product ID" required />
    <label for="quick-product-qty">Qty</label>
    <input id="quick-product-qty" name="qty" type="number" inputmode="numeric" value="1" min="1" required />
    <label for="quick-selling-price">Bargain selling price</label>
    <input id="quick-selling-price" name="selling_price" type="number" inputmode="decimal" step="0.01" min="0" placeholder="Optional" />
    <button type="submit">Add</button>
</form>
{% if is_admin_view %}
    <div class="bottom-left-nav">
        {{ ui.button('Sell Service / Stock From Inventory', '/inventory') }}
    </div>
{% endif %}

</div>

<!-- RIGHT -->
<div class="side-stack">
<div class="card">

<h3>{{ _('Cart') }} <span id="cart-count" class="hil-inline-47fdf66752">(0 items)</span></h3>
<div id="cart-container">
    <p id="cart-empty">No items in cart</p>
    <div id="cart-items"></div>
    <div id="cart-total" class="total hil-inline-6b99de8b69">Total: 0.00</div>
    <div id="cart-actions" class="hil-inline-b6d6023c3a">
        <button class="clear-cart-btn" onclick="clearCart()">Clear Cart</button>
        <a href="/checkout?fast=1" class="btn checkout" data-instant="off" data-operational-route="checkout" aria-label="Checkout">Checkout</a>
    </div>
</div>


</div>

<div class="card cartoon-card">

<h3>Updates / Entertainment</h3>
<div class="announcement-box">
    <strong>App Notes:</strong> See what changed after the latest updates.
    <div class="hil-inline-8a77e5a311">
        {{ ui.button('Open Release Notes', '/release-notes') }}
    </div>
</div>
{% if latest_announcement %}
<div class="announcement-box">
    <strong>Admin Update:</strong> {{ latest_announcement[0] }}
    <div class="hil-inline-a7e7b1aea0">{{ latest_announcement[1] }}</div>
</div>
{% endif %}
{% if cashier_tutorial_videos %}
<div class="announcement-box">
    <strong>Server Tutorials:</strong> {{ cashier_tutorial_videos|length }} update video(s) available for cashiers.
    <div class="hil-inline-8a77e5a311">
        <button type="button" id="play-server-tutorial">Watch Update Tutorials</button>
    </div>
</div>
{% endif %}
<iframe
    id="cartoon-frame"
    class="cartoon-frame"
    src="https://www.youtube-nocookie.com/embed/wAg1r6zw7Bg?start=0&end=60&autoplay=1&mute=1&controls=1&rel=0"
    title="Updates and Entertainment"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>
<div class="cartoon-controls">
    <label for="cartoon-picker">Choose preset video</label>
    <select id="cartoon-picker"></select>
    <label for="cartoon-search">Search or paste any YouTube video</label>
    <div class="cartoon-search-row">
        <input id="cartoon-search" placeholder="Paste YouTube link, video ID, or search words">
        <button type="button" id="cartoon-load">Load</button>
    </div>
    <div class="cartoon-button-row">
        <button type="button" id="cartoon-prev">Previous</button>
        <button type="button" id="cartoon-random">Random</button>
        <button type="button" id="cartoon-next">Next</button>
    </div>
<p class="cartoon-note" id="cartoon-note">A small entertainment window for light updates while keeping the sales tools clear and usable.</p>
<p class="cartoon-note hil-inline-881d02da72" id="focus-note"></p>

</div>

</div>

<script id="server-tutorial-videos" type="application/json">
{{ cashier_tutorial_videos | tojson | safe }}
</script>
<script id="quick-services-data" type="application/json">
{{ quick_services | tojson | safe }}
</script>
<script id="hot-products-data" type="application/json">
{{ hot_products | tojson | safe }}
</script>
<div
    id="pos-page-data"
    hidden
    data-shop-id="{{ pos_page_data.shop_id or '' }}"
    data-branch-id="{{ pos_page_data.branch_id or '' }}"
    data-currency-symbol="{{ pos_page_data.currency_symbol|e }}"
></div>
<script src="/static/pos-accelerator.js?v=core-operational-20260520"></script>
<script>
var timeout;
var posPageDataNode = document.getElementById("pos-page-data");
window.__gveloPOSContext = {
    shop_id: posPageDataNode ? posPageDataNode.dataset.shopId || null : null,
    branch_id: posPageDataNode ? posPageDataNode.dataset.branchId || null : null
};
window.__gveloCurrencySymbol = posPageDataNode ? posPageDataNode.dataset.currencySymbol || "" : "";

var searchBox = document.getElementById("search");
var resultsBox = document.getElementById("results");
var searchStatus = document.getElementById("search-status");
var serviceFilter = document.getElementById("service-filter");
var quickServicesBox = document.getElementById("quick-services");
var serviceEmpty = document.getElementById("service-empty");
var cartoonPicker = document.getElementById("cartoon-picker");
var cartoonFrame = document.getElementById("cartoon-frame");
var cartoonNote = document.getElementById("cartoon-note");
var cartoonPrev = document.getElementById("cartoon-prev");
var cartoonNext = document.getElementById("cartoon-next");
var cartoonRandom = document.getElementById("cartoon-random");
var cartoonSearch = document.getElementById("cartoon-search");
var cartoonLoad = document.getElementById("cartoon-load");
var searchSequence = 0;
var cartoonVideos = [
    {
        label: "Cartoon 1A",
        note: "Cartoon playlist 1, segment 1 of 4.",
        url: "https://www.youtube-nocookie.com/embed/wAg1r6zw7Bg?start=0&end=60&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 1B",
        note: "Cartoon playlist 1, segment 2 of 4.",
        url: "https://www.youtube-nocookie.com/embed/wAg1r6zw7Bg?start=60&end=120&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 1C",
        note: "Cartoon playlist 1, segment 3 of 4.",
        url: "https://www.youtube-nocookie.com/embed/wAg1r6zw7Bg?start=120&end=180&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 1D",
        note: "Cartoon playlist 1, segment 4 of 4.",
        url: "https://www.youtube-nocookie.com/embed/wAg1r6zw7Bg?start=180&end=240&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 2A",
        note: "Cartoon playlist 2, segment 1 of 4.",
        url: "https://www.youtube-nocookie.com/embed/CBKxQWa42KM?start=0&end=60&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 2B",
        note: "Cartoon playlist 2, segment 2 of 4.",
        url: "https://www.youtube-nocookie.com/embed/CBKxQWa42KM?start=60&end=120&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 2C",
        note: "Cartoon playlist 2, segment 3 of 4.",
        url: "https://www.youtube-nocookie.com/embed/CBKxQWa42KM?start=120&end=180&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 2D",
        note: "Cartoon playlist 2, segment 4 of 4.",
        url: "https://www.youtube-nocookie.com/embed/CBKxQWa42KM?start=180&end=240&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 3A",
        note: "Cartoon playlist 3, segment 1 of 4.",
        url: "https://www.youtube-nocookie.com/embed/tgbNymZ7vqY?start=0&end=60&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 3B",
        note: "Cartoon playlist 3, segment 2 of 4.",
        url: "https://www.youtube-nocookie.com/embed/tgbNymZ7vqY?start=60&end=120&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 3C",
        note: "Cartoon playlist 3, segment 3 of 4.",
        url: "https://www.youtube-nocookie.com/embed/tgbNymZ7vqY?start=120&end=180&autoplay=1&mute=1&controls=1&rel=0"
    },
    {
        label: "Cartoon 3D",
        note: "Cartoon playlist 3, segment 4 of 4.",
        url: "https://www.youtube-nocookie.com/embed/tgbNymZ7vqY?start=180&end=240&autoplay=1&mute=1&controls=1&rel=0"
    }
];
var serverTutorialVideos = JSON.parse(document.getElementById("server-tutorial-videos").textContent || "[]");
var quickServices = JSON.parse(document.getElementById("quick-services-data").textContent || "[]");
var hotProducts = JSON.parse(document.getElementById("hot-products-data").textContent || "[]");
var currentCartoonIndex = 0;
var watchedVideoIds = new Set();
var focusLockUntil = 0;
var focusTimerHandle = null;

searchBox.focus();
if (window.GveloOperationalRuntime) {
    window.GveloOperationalRuntime.ingestProducts(hotProducts);
}
if (window.GveloPOSAcceleration) {
    window.GveloPOSAcceleration.prime(hotProducts);
}

cartoonVideos.forEach((video, index) => {
    const option = document.createElement("option");
    option.value = String(index);
    option.textContent = video.label;
    cartoonPicker.appendChild(option);
});

function loadCartoon(index) {
    if (Date.now() < focusLockUntil) {
        return;
    }
    currentCartoonIndex = (index + cartoonVideos.length) % cartoonVideos.length;
    const selected = cartoonVideos[currentCartoonIndex];
    cartoonPicker.value = String(currentCartoonIndex);
    cartoonFrame.src = selected.url;
    cartoonNote.innerText = selected.note + " Rotate anytime without affecting sales work.";
    watchedVideoIds.add(selected.label);
    enforceFocusTimerIfNeeded();
}

function renderFocusStatus(secondsLeft) {
    const note = document.getElementById("focus-note");
    if (secondsLeft > 0) {
        note.innerText = "Focus mode: video controls locked for " + secondsLeft + "s to keep cashier attention on sales.";
    } else {
        note.innerText = "";
    }
}

function disableVideoControls(disabled) {
    cartoonPrev.disabled = disabled;
    cartoonNext.disabled = disabled;
    cartoonRandom.disabled = disabled;
    cartoonPicker.disabled = disabled;
    cartoonSearch.disabled = disabled;
    cartoonLoad.disabled = disabled;
}

function startFocusCountdown(seconds) {
    focusLockUntil = Date.now() + (seconds * 1000);
    disableVideoControls(true);
    if (focusTimerHandle) {
        clearInterval(focusTimerHandle);
    }
    focusTimerHandle = setInterval(function () {
        const left = Math.max(0, Math.ceil((focusLockUntil - Date.now()) / 1000));
        renderFocusStatus(left);
        if (left <= 0) {
            clearInterval(focusTimerHandle);
            focusTimerHandle = null;
            disableVideoControls(false);
            focusLockUntil = 0;
            renderFocusStatus(0);
            watchedVideoIds.clear();
            cartoonNote.innerText = "Focus mode completed. Video controls unlocked.";
        }
    }, 250);
}

function enforceFocusTimerIfNeeded() {
    if (watchedVideoIds.size > 2 && Date.now() >= focusLockUntil) {
        startFocusCountdown(120);
    }
}

function extractYouTubeId(value) {
    const trimmed = value.trim();
    if (!trimmed) return "";

    if (/^[a-zA-Z0-9_-]{11}$/.test(trimmed)) return trimmed;

    const watchMatch = trimmed.match(/[?&]v=([a-zA-Z0-9_-]{11})/);
    if (watchMatch) return watchMatch[1];

    const shortMatch = trimmed.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
    if (shortMatch) return shortMatch[1];

    const embedMatch = trimmed.match(/embed\/([a-zA-Z0-9_-]{11})/);
    if (embedMatch) return embedMatch[1];

    return "";
}

function loadCustomVideo() {
    if (Date.now() < focusLockUntil) {
        renderFocusStatus(Math.max(0, Math.ceil((focusLockUntil - Date.now()) / 1000)));
        return;
    }
    const rawValue = cartoonSearch.value.trim();
    if (!rawValue) {
        cartoonNote.innerText = "Type a YouTube link, video ID, or search words to load a custom video.";
        return;
    }

    const videoId = extractYouTubeId(rawValue);
    if (videoId) {
        const ok = confirm("Load this video into the Updates / Entertainment player?");
        if (!ok) {
            cartoonNote.innerText = "Load cancelled. Player remains unchanged.";
            return;
        }
        cartoonFrame.src = "https://www.youtube-nocookie.com/embed/" + videoId + "?autoplay=1&mute=1&controls=1&rel=0";
        cartoonNote.innerText = "Custom YouTube video loaded. You can still return to the preset playlist anytime.";
        watchedVideoIds.add("custom:" + videoId);
        enforceFocusTimerIfNeeded();
        return;
    }

    const searchUrl = "https://www.youtube.com/results?search_query=" + encodeURIComponent(rawValue);
    window.open(searchUrl, "_blank", "noopener");
    cartoonNote.innerText = "Search opened in a new tab. The player was not changed. Paste a YouTube link or video ID here and click Load to play it.";
}

cartoonPicker.addEventListener("change", function () {
    loadCartoon(Number(this.value));
});

cartoonPrev.addEventListener("click", function () {
    loadCartoon(currentCartoonIndex - 1);
});

cartoonNext.addEventListener("click", function () {
    loadCartoon(currentCartoonIndex + 1);
});

cartoonRandom.addEventListener("click", function () {
    let nextIndex = Math.floor(Math.random() * cartoonVideos.length);
    if (cartoonVideos.length > 1 && nextIndex === currentCartoonIndex) {
        nextIndex = (nextIndex + 1) % cartoonVideos.length;
    }
    loadCartoon(nextIndex);
});

cartoonLoad.addEventListener("click", loadCustomVideo);

cartoonSearch.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
        event.preventDefault();
        loadCustomVideo();
    }
});

loadCartoon(0);
var serverTutorialBtn = document.getElementById("play-server-tutorial");
if (serverTutorialBtn) {
    serverTutorialBtn.addEventListener("click", function () {
        if (!serverTutorialVideos.length) return;
        const first = serverTutorialVideos[0];
        cartoonFrame.src = first.url;
        cartoonNote.innerText = first.note + " (from server admin)";
        watchedVideoIds.add("server:" + first.label);
        enforceFocusTimerIfNeeded();
    });
}

var currencySymbol = window.__gveloCurrencySymbol || "";

function formatMoney(value) {
    return currencySymbol + Number(value || 0).toFixed(2);
}

function renderCart(summary) {
    summary = summary || {cart: [], count: 0, total: 0};
    const runtime = window.GveloOperationalRuntime;
    if (runtime && runtime.scheduleRender && !summary.__scheduled) {
        const scheduled = Object.assign({}, summary, {__scheduled: true});
        runtime.scheduleRender(() => renderCart(scheduled), 1);
        runtime.setCart(summary.cart || []);
        return;
    }
    const renderStarted = performance.now();
    const cartItems = document.getElementById("cart-items");
    const cartEmpty = document.getElementById("cart-empty");
    const cartTotal = document.getElementById("cart-total");
    const cartActions = document.getElementById("cart-actions");
    const cartCount = document.getElementById("cart-count");
    const cart = summary.cart || [];
    window.__gveloLatestCart = cart;

    cartItems.innerHTML = "";
    cartCount.innerText = "(" + (summary.count || cart.length) + " items)";

    if (!cart.length) {
        cartEmpty.style.display = "block";
        cartTotal.style.display = "none";
        cartActions.style.display = "none";
        return;
    }

    cartEmpty.style.display = "none";
    cartTotal.style.display = "block";
    cartActions.style.display = "block";
    cartTotal.innerText = "Total: " + formatMoney(summary.total);

    cart.forEach(item => {
        const row = document.createElement("div");
        row.className = "cart-item-row";
        row.innerHTML =
            '<div class="cart-item-info">' +
                '<div class="cart-item-name"></div>' +
                '<div class="cart-item-price"></div>' +
                '<div class="cart-price-edit">' +
                    '<input type="number" class="price-input" min="0" step="0.01">' +
                    '<button type="button" class="save-price-btn">Save price</button>' +
                '</div>' +
                '<div class="cart-price-note"></div>' +
            '</div>' +
            '<div class="cart-item-actions">' +
                '<button type="button" class="qty-btn minus">-</button>' +
                '<span class="qty-display"></span>' +
                '<button type="button" class="qty-btn plus">+</button>' +
                '<button type="button" class="remove-btn">Remove</button>' +
            '</div>';

        row.querySelector(".cart-item-name").innerText = item.name;
        const originalPrice = Number(item.original_price || item.price || 0);
        const sellingPrice = Number(item.price || 0);
        const cutAmount = originalPrice - sellingPrice;
        row.querySelector(".cart-item-price").innerText = "Original: " + formatMoney(originalPrice) + " | Selling: " + formatMoney(sellingPrice) + " each";
        const priceInput = row.querySelector(".price-input");
        priceInput.value = sellingPrice.toFixed(2);
        row.querySelector(".save-price-btn").addEventListener("click", () => updateCartPrice(item.id, priceInput.value));
        priceInput.addEventListener("keydown", function (event) {
            if (event.key === "Enter") {
                event.preventDefault();
                updateCartPrice(item.id, priceInput.value);
            }
        });
        if (cutAmount > 0) {
            row.querySelector(".cart-price-note").innerText = "Bargain cut: " + formatMoney(cutAmount) + (cutAmount > 50 ? " - fraud alert at checkout" : "");
        }
        row.querySelector(".qty-display").innerText = item.qty;
        row.querySelector(".minus").addEventListener("click", () => updateCartQty(item.id, item.qty - 1));
        row.querySelector(".plus").addEventListener("click", () => updateCartQty(item.id, item.qty + 1));
        row.querySelector(".remove-btn").addEventListener("click", () => removeCartItem(item.id));
        cartItems.appendChild(row);
    });
    if (cartItems.lastElementChild) {
        cartItems.lastElementChild.classList.add("gvelo-cart-pulse");
    }
    if (runtime) {
        runtime.microFeedback("cart_rendered");
    }
}

function searchServices() {
    if (serviceFilter) {
        serviceFilter.focus();
        renderQuickServices(serviceFilter.value);
    }
    searchBox.value = "service";
    searchBox.dispatchEvent(new Event("input"));
}

function addServiceToCart(serviceId) {
    return addToCart(serviceId, 1);
}

function renderQuickServices(filter) {
    if (!quickServicesBox) {
        return;
    }
    const term = (filter || "").trim().toLowerCase();
    const matches = quickServices.filter(service => {
        const name = String(service.name || "").toLowerCase();
        const description = String(service.description || "").toLowerCase();
        const duration = String(service.duration || "").toLowerCase();
        return !term || name.includes(term) || description.includes(term) || duration.includes(term);
    });
    const visible = term ? matches : matches.slice(0, 12);
    quickServicesBox.innerHTML = "";
    if (serviceEmpty) {
        serviceEmpty.style.display = visible.length ? "none" : "block";
    }
    visible.forEach(service => {
        const button = document.createElement("button");
        const name = document.createElement("strong");
        const meta = document.createElement("small");
        button.type = "button";
        button.className = "service-chip";
        name.textContent = service.name || "Service";
        meta.textContent = formatMoney(Number(service.price || 0)) + (service.duration ? " | " + service.duration : "");
        button.appendChild(name);
        button.appendChild(meta);
        button.addEventListener("click", () => addServiceToCart(service.id));
        quickServicesBox.appendChild(button);
    });
}

function showAllServices() {
    searchServices();
}

function clearServiceFilter() {
    if (!serviceFilter) {
        return;
    }
    serviceFilter.value = "";
    renderQuickServices("");
    serviceFilter.focus();
}

function refreshCart() {
    return directFastFetch("/api/cart", {method: "GET"}, 20000)
        .then(res => res.json())
        .then(data => {
            if ((!data || !Array.isArray(data.cart) || !data.cart.length) && restoreCheckoutSnapshot()) {
                checkoutTrace("POS-CHECKOUT-RESTORE", {source: "refresh_cart_empty"});
                return {cart: window.__gveloLatestCart || [], restored: true};
            }
            if (window.GveloOperationalRuntime) window.GveloOperationalRuntime.setCart(data.cart || []);
            renderCart(data);
            return data;
        });
}

function csrfHeaders(extra) {
    const token = document.querySelector('meta[name="csrf-token"]')?.content || "";
    const headers = Object.assign({}, extra || {});
    if (token) {
        headers["X-CSRF-Token"] = token;
    }
    return headers;
}

function requestId(prefix) {
    const random = window.crypto && crypto.randomUUID ? crypto.randomUUID() : String(Date.now()) + "-" + Math.random().toString(16).slice(2);
    return (prefix || "POS-CART") + "-" + random.toString().replace(/[^a-zA-Z0-9]/g, "").slice(0, 16).toUpperCase();
}

function checkoutMessage(data, fallback) {
    const ref = data && (data.reference_id || data.request_id);
    const base = (data && (data.cashier_message || data.message || data.error)) || fallback || "Checkout operation could not be completed.";
    const recovery = data && data.recovery && data.recovery.cart_preserved ? "\nCart is preserved. Retry from Sales." : "";
    return base + recovery + (ref ? "\nReference ID: " + ref : "");
}

function parseJsonResponse(res) {
    return res.json()
        .catch(() => ({}))
        .then(data => ({ok: res.ok, status: res.status, requestId: res.headers.get("X-Gvelo-Request-Id"), data}));
}

function operationalToast(message, kind) {
    const runtime = window.GveloOperationalRuntime;
    if (runtime && runtime.microFeedback) {
        runtime.microFeedback(kind || "cart_rendered", {label: message});
        return;
    }
    let toast = document.getElementById("gvelo-operational-toast");
    if (!toast) {
        toast = document.createElement("div");
        toast.id = "gvelo-operational-toast";
        toast.style.cssText = "position:fixed;right:18px;bottom:88px;z-index:9999;max-width:320px;padding:10px 14px;border-radius:8px;background:#07172d;color:#fff;border:1px solid rgba(21,205,255,.45);box-shadow:0 10px 24px rgba(0,0,0,.28);font:700 13px/1.35 system-ui,sans-serif;opacity:0;transform:translateY(8px);transition:opacity .14s ease,transform .14s ease;pointer-events:none;";
        document.body.appendChild(toast);
    }
    toast.textContent = message;
    toast.style.opacity = "1";
    toast.style.transform = "translateY(0)";
    clearTimeout(toast._timer);
    toast._timer = setTimeout(() => {
        toast.style.opacity = "0";
        toast.style.transform = "translateY(8px)";
    }, 2600);
}

function preserveLocalCart(productId, qty, price, meta) {
    if (!window.GveloIndexedDBOperationalEngine || !meta || !meta.product) {
        return Promise.resolve();
    }
    return window.GveloIndexedDBOperationalEngine.addToCart(productId, qty || 1, price, {product: meta.product}).catch(() => {});
}

const PENDING_CART_SYNC_KEY = "gvelo_pending_cart_sync_v1";
const CHECKOUT_RECOVERY_KEY = "gvelo_checkout_recovery_snapshot_v1";

function checkoutTrace(eventName, detail) {
    try {
        const rows = JSON.parse(localStorage.getItem("gvelo_checkout_trace_v1") || "[]");
        rows.push(Object.assign({
            event: eventName,
            at: new Date().toISOString(),
            route: location.pathname,
            cart_size: (window.__gveloLatestCart || []).length
        }, detail || {}));
        localStorage.setItem("gvelo_checkout_trace_v1", JSON.stringify(rows.slice(-60)));
    } catch (_) {}
}

function directFastFetch(url, options, timeoutMs) {
    const fetcher = window.GveloOperationalRuntime && window.GveloOperationalRuntime.directFetch
        ? window.GveloOperationalRuntime.directFetch
        : (window.__gveloNativeFetch || window.fetch.bind(window));
    const controller = "AbortController" in window ? new AbortController() : null;
    const timer = controller ? setTimeout(() => controller.abort("checkout_sync_timeout"), timeoutMs || 45000) : null;
    const init = Object.assign({credentials: "same-origin", cache: "no-store"}, options || {});
    const headers = new Headers(init.headers || {});
    headers.set("X-Gvelo-Direct-Checkout", "1");
    headers.set("Cache-Control", "no-store");
    init.headers = headers;
    if (controller) init.signal = controller.signal;
    return fetcher(url, init).finally(() => {
        if (timer) clearTimeout(timer);
    });
}

function localCartSummary(productId, qty, price, meta) {
    const product = meta && meta.product ? meta.product : ((window.GveloOperationalRuntime && window.GveloOperationalRuntime.productLookup(productId)) || {});
    const productKey = String(product.product_id || product.id || productId).replace("barcode:", "");
    const current = (window.__gveloLatestCart || []).map(item => Object.assign({}, item));
    const amount = Math.max(1, Number(qty || 1));
    const sellingPrice = Number(price !== undefined && price !== "" ? price : (product.calculated_price !== undefined ? product.calculated_price : product.price || 0));
    const existing = current.find(item => String(item.id) === productKey || String(item.id) === String(productId));
    if (existing) {
        const previousQty = Number(existing.qty || 0);
        const previousTotal = Number(existing.price || 0) * previousQty;
        existing.qty = previousQty + amount;
        existing.price = Number(((previousTotal + sellingPrice * amount) / existing.qty).toFixed(2));
        existing.original_price = Number(existing.original_price || product.price || sellingPrice || 0);
    } else {
        current.push({
            id: Number(productKey) || productKey,
            name: product.name || "Product " + productKey,
            qty: amount,
            price: sellingPrice,
            original_price: Number(product.price || sellingPrice || 0),
            item_type: product.item_type || "product"
        });
    }
    const total = current.reduce((sum, item) => sum + Number(item.price || 0) * Number(item.qty || 1), 0);
    return {cart: current, total: total, count: current.length, currency_symbol: currencySymbol, local_first: true};
}

function checkoutRecoverySnapshot(reason) {
    const snapshot = {
        version: 1,
        reason: reason || "manual",
        created_at: new Date().toISOString(),
        expires_at: Date.now() + 2 * 60 * 60 * 1000,
        cart: (window.__gveloLatestCart || []).map(item => Object.assign({}, item)),
        pending_syncs: pendingCartSyncs()
    };
    try {
        localStorage.setItem(CHECKOUT_RECOVERY_KEY, JSON.stringify(snapshot));
    } catch (_) {}
    checkoutTrace("POS-CHECKOUT-SNAPSHOT", {reason: snapshot.reason, pending_syncs: snapshot.pending_syncs.length});
    return snapshot;
}

function preloadPaymentRoute() {
    try {
        if (window.__gveloPaymentPreloadStarted) return;
        window.__gveloPaymentPreloadStarted = true;
        const link = document.createElement("link");
        link.rel = "prefetch";
        link.href = "/checkout?fast=1";
        link.as = "document";
        document.head.appendChild(link);
    } catch (_) {}
}

function restoreCheckoutSnapshot() {
    try {
        const raw = localStorage.getItem(CHECKOUT_RECOVERY_KEY);
        if (!raw) return false;
        const snapshot = JSON.parse(raw);
        if (!snapshot.expires_at || snapshot.expires_at < Date.now() || !Array.isArray(snapshot.cart) || !snapshot.cart.length) return false;
        const total = snapshot.cart.reduce((sum, item) => sum + Number(item.price || 0) * Number(item.qty || 1), 0);
        renderCart({cart: snapshot.cart, total: total, count: snapshot.cart.length, currency_symbol: currencySymbol, restored: true});
        savePendingCartSyncs(snapshot.pending_syncs || pendingCartSyncs());
        checkoutTrace("POS-CHECKOUT-RESTORE", {restored: true});
        return true;
    } catch (_) {
        return false;
    }
}

function pendingCartSyncs() {
    try {
        return JSON.parse(localStorage.getItem(PENDING_CART_SYNC_KEY) || "[]");
    } catch (_) {
        return [];
    }
}

function savePendingCartSyncs(rows) {
    try {
        localStorage.setItem(PENDING_CART_SYNC_KEY, JSON.stringify((rows || []).slice(-80)));
    } catch (_) {}
}

function queuePendingCartSync(record) {
    const rows = pendingCartSyncs();
    if (record.correlationId && rows.some(row => row.correlationId === record.correlationId)) return;
    rows.push(Object.assign({attempts: 0, created_at: new Date().toISOString()}, record));
    savePendingCartSyncs(rows);
}

function removePendingCartSync(correlationId) {
    if (!correlationId) return;
    savePendingCartSyncs(pendingCartSyncs().filter(row => row.correlationId !== correlationId));
}

function refreshCsrfToken() {
    return directFastFetch("/sales", {method: "GET"}, 45000)
        .then(res => res.text())
        .then(html => {
            const match = html.match(new RegExp("<" + "meta name=\"csrf-token\" content=\"([^\"]+)\""));
            const tag = document.querySelector('meta[name="csrf-token"]');
            if (match && tag) {
                tag.setAttribute("content", match[1]);
                return true;
            }
            return false;
        })
        .catch(() => false);
}

function syncCartAdd(payload, correlationId, attempt) {
    return directFastFetch("/api/cart/add", {
        method: "POST",
        headers: csrfHeaders({"Content-Type": "application/json", "X-Gvelo-Request-Id": correlationId}),
        body: JSON.stringify(payload)
    }, 45000)
    .then(parseJsonResponse)
    .then(result => {
        if ((result.status === 401 || result.status === 403) && !attempt) {
            return refreshCsrfToken().then(() => syncCartAdd(payload, correlationId, 1));
        }
        if (!result.ok || result.status === 202 || result.data.offline_queued) {
            throw Object.assign(new Error((result.data && (result.data.error || result.data.message)) || "cart_sync_deferred"), {result});
        }
        return result;
    });
}

function flushPendingCartSyncs() {
    if (!navigator.onLine) return Promise.resolve();
    const rows = pendingCartSyncs();
    if (!rows.length) return Promise.resolve();
    const [next, ...rest] = rows;
    savePendingCartSyncs(rest);
    return syncCartAdd(next.payload, next.correlationId || requestId("POS-CART-REPLAY"), Number(next.attempts || 0))
        .then(result => {
            removePendingCartSync(next.correlationId);
            if (result && result.data) renderCart(result.data);
            return flushPendingCartSyncs();
        })
        .catch(() => {
            next.attempts = Number(next.attempts || 0) + 1;
            savePendingCartSyncs(rest.concat(next));
        });
}

function addToCart(productId, qty, price, meta) {
    const runtime = window.GveloOperationalRuntime;
    const qtyInput = document.getElementById("qty-" + productId);
    const priceInput = document.getElementById("bargain-price-" + productId);
    const amount = qty || Number(qtyInput ? qtyInput.value : 1);
    const sellingPrice = price !== undefined ? price : (priceInput ? priceInput.value : undefined);
    const payload = {product_id: productId, qty: amount};
    if (meta && meta.product) {
        payload.product_identity = meta.product;
    }
    if (sellingPrice !== undefined && sellingPrice !== "") {
        payload.price = sellingPrice;
    }
    if (meta) {
        payload.scan_context = meta;
    }
    if (window.GveloPOSAcceleration) {
        window.GveloPOSAcceleration.setStatus("Cart protected locally. Syncing in background.", "ok");
    }
    if (runtime) runtime.microFeedback("cart_pending");
    const correlationId = requestId("POS-CART");
    const localSummary = localCartSummary(productId, amount, sellingPrice, meta);
    renderCart(localSummary);
    queuePendingCartSync({payload, correlationId, reason: "POS-CART-SYNC-PENDING"});
    checkoutRecoverySnapshot("cart_add");
    preloadPaymentRoute();
    preserveLocalCart(productId, amount, sellingPrice, meta).catch(() => {
        queuePendingCartSync({payload, correlationId, reason: "POS-CART-IDB-CONTENTION"});
    });
    if (window.GveloPOSAcceleration) {
        window.GveloPOSAcceleration.feedback("Cart protected locally", "ok");
    }
    syncCartAdd(payload, correlationId, 0)
        .then(result => {
            removePendingCartSync(correlationId);
            if (result.data.fraud_warning) operationalToast(result.data.fraud_warning, "cart_rendered");
            renderCart(result.data);
            if (window.GveloPOSAcceleration) window.GveloPOSAcceleration.setStatus("Cart synced with server.", "ok");
        })
        .catch(error => {
            queuePendingCartSync({payload, correlationId, reason: String(error && error.message || "POS-CART-SYNC-DEFERRED")});
            if (window.GveloPOSAcceleration) {
                window.GveloPOSAcceleration.setStatus("Cart protected locally. Syncing in background.", "warn");
            }
            operationalToast("Cart protected locally. Syncing in background.", "cart_rendered");
        });
    return Promise.resolve(localSummary);
}

window.addEventListener("online", () => {
    flushPendingCartSyncs().catch(() => {});
});
if (!window.__gveloLatestCart || !window.__gveloLatestCart.length) {
    restoreCheckoutSnapshot();
}
preloadPaymentRoute();
setTimeout(() => flushPendingCartSyncs().catch(() => {}), 2500);
function checkoutFastRoute(event, link) {
    const cart = window.__gveloLatestCart || [];

    if (!cart.length && !restoreCheckoutSnapshot()) {
        checkoutTrace("POS-CHECKOUT-ROUTE-BLOCK", {reason: "empty_local_cart"});
        operationalToast("Add products before checkout.", "cart_rendered");
        event.preventDefault();
        return;
    }

    if (!link) return;

    // Let the browser navigate natively for the fastest possible checkout handoff.
    // Any transition metadata is prepared ahead of time on pointerdown/focus.
}

function warmCheckoutTransition(link) {
    const cart = window.__gveloLatestCart || [];
    if (!cart.length) return;

    const href = (link && (link.getAttribute("href") || link.href)) || "/checkout?fast=1";

    try {
        sessionStorage.setItem("gvelo_checkout_transition_v1", JSON.stringify({
            id: requestId("POS-CHECKOUT"),
            href: href,
            created_at: new Date().toISOString(),
            cart_count: cart.length
        }));
    } catch (_) {}

    if (document.documentElement) {
        document.documentElement.classList.add("gvelo-route-loading");
    }
}

document.addEventListener("pointerdown", function (event) {
    const link = event.target && event.target.closest ? event.target.closest("a.checkout[data-operational-route='checkout']") : null;
    if (!link) return;
    warmCheckoutTransition(link);
}, true);

document.addEventListener("focusin", function (event) {
    const link = event.target && event.target.closest ? event.target.closest("a.checkout[data-operational-route='checkout']") : null;
    if (!link) return;
    warmCheckoutTransition(link);
}, true);

document.addEventListener("click", function (event) {
    const link = event.target && event.target.closest ? event.target.closest("a.checkout[data-operational-route='checkout']") : null;
    if (!link) return;
    checkoutFastRoute(event, link);
}, true);

function updateCartQty(productId, qty) {
    if (qty < 1) {
        return removeCartItem(productId);
    }
    return directFastFetch("/api/cart/update", {
        method: "POST",
        headers: csrfHeaders({"Content-Type": "application/json", "X-Gvelo-Request-Id": requestId("POS-CART")}),
        body: JSON.stringify({product_id: productId, qty: qty})
    })
    .then(parseJsonResponse)
    .then(result => {
        if (!result.ok) {
            operationalToast(checkoutMessage(result.data, "Could not update cart"), "cart_rendered");
            return;
        }
        if (window.GveloPOSAcceleration) {
            window.GveloPOSAcceleration.feedback("Quantity updated", "ok");
        }
        renderCart(result.data);
    });
}

function updateCartPrice(productId, price) {
    return directFastFetch("/api/cart/price", {
        method: "POST",
        headers: csrfHeaders({"Content-Type": "application/json", "X-Gvelo-Request-Id": requestId("POS-CART")}),
        body: JSON.stringify({product_id: productId, price: price})
    })
    .then(parseJsonResponse)
    .then(result => {
        if (!result.ok) {
            operationalToast(checkoutMessage(result.data, "Could not update price"), "cart_rendered");
            return;
        }
        if (result.data.fraud_warning) {
            operationalToast(result.data.fraud_warning, "cart_rendered");
        }
        if (window.GveloPOSAcceleration) window.GveloPOSAcceleration.feedback("Price updated", "ok");
        renderCart(result.data);
    });
}

function removeCartItem(productId) {
    return directFastFetch("/api/cart/remove/" + encodeURIComponent(productId), {method: "POST", headers: csrfHeaders({"X-Gvelo-Request-Id": requestId("POS-CART")})})
        .then(parseJsonResponse)
        .then(data => {
            if (!data.ok) {
                operationalToast(checkoutMessage(data.data, "Could not remove cart item"), "cart_rendered");
                return;
            }
            if (window.GveloPOSAcceleration) window.GveloPOSAcceleration.feedback("Item removed", "ok");
            renderCart(data.data);
        });
}

function clearCart() {
    return directFastFetch("/api/cart/clear", {method: "POST", headers: csrfHeaders({"X-Gvelo-Request-Id": requestId("POS-CART")})})
        .then(parseJsonResponse)
        .then(data => {
            if (!data.ok) {
                operationalToast(checkoutMessage(data.data, "Could not clear cart"), "cart_rendered");
                return;
            }
            if (window.GveloPOSAcceleration) window.GveloPOSAcceleration.feedback("Cart cleared", "ok");
            renderCart(data.data);
        });
}

function voiceAddToCart(product, qty) {
    return fetch("/voice-add-to-cart", {
        method: "POST",
        headers: csrfHeaders({"Content-Type": "application/json"}),
        body: JSON.stringify({product: product, qty: qty || 1})
    })
    .then(res => res.json().then(data => ({ok: res.ok, data})))
    .then(result => {
        if (!result.ok) {
            const message = result.data.error || "Voice command could not add product";
            if (window.VoiceCommands && typeof VoiceCommands.showFeedback === "function") {
                VoiceCommands.showFeedback(message, true);
            } else {
                alert(message);
            }
            return;
        }
        renderCart(result.data);
        if (window.VoiceCommands && typeof VoiceCommands.showFeedback === "function" && result.data.matched_product) {
            VoiceCommands.showFeedback("Added " + result.data.matched_product.qty + " " + result.data.matched_product.name);
        }
    });
}

refreshCart();
if (serviceFilter) {
    serviceFilter.addEventListener("input", () => renderQuickServices(serviceFilter.value));
}
renderQuickServices("");

function setSearchStatus(message) {
    if (searchStatus) searchStatus.textContent = message || "";
}

function normalizeSearchResults(payload) {
    if (Array.isArray(payload)) return payload;
    if (payload && Array.isArray(payload.results)) return payload.results;
    return [];
}

function renderProductResults(products, query) {
    const runtime = window.GveloOperationalRuntime;
    resultsBox.innerHTML = "";

    if (!products.length) {
        setSearchStatus("No product matches \"" + query + "\".");
        return;
    }

    setSearchStatus(products.length + " match" + (products.length === 1 ? "" : "es") + " found.");

    const maxInitial = products.length > 80 ? 40 : products.length;
    const visibleProducts = products.slice(0, maxInitial);
    const fragment = document.createDocumentFragment();
    visibleProducts.forEach(product => {
        let div = document.createElement("div");
        div.className = "product product-instant";
        const isService = (product.item_type || "product") === "service";
        const stockLabel = isService ? "Service" : "Stock: " + product.stock;
        const buttonLabel = isService ? "Add Service" : "Add to Cart";
        const title = document.createElement("b");
        title.textContent = String(product.name || "Product");
        const summary = document.createTextNode(" - " + formatMoney(product.price) + " (" + stockLabel + ")");
        const meta = document.createElement("div");
        meta.className = "product-meta";
        const identity = product.shop_product_id ? "SKU: " + product.shop_product_id + " | " : "";
        meta.textContent = identity + "Type: " + (product.item_type || "product");
        const row = document.createElement("div");
        row.className = "product-add-row";
        const qtyLabel = document.createElement("label");
        qtyLabel.textContent = "Qty";
        const qtyInput = document.createElement("input");
        qtyInput.type = "number";
        qtyInput.id = "qty-" + product.id;
        qtyInput.value = "1";
        qtyInput.min = "1";
        qtyLabel.appendChild(qtyInput);
        const priceLabel = document.createElement("label");
        priceLabel.textContent = "Bargain price";
        const bargainInput = document.createElement("input");
        bargainInput.type = "number";
        bargainInput.id = "bargain-price-" + product.id;
        bargainInput.value = Number(product.price || 0).toFixed(2);
        bargainInput.min = "0";
        bargainInput.step = "0.01";
        priceLabel.appendChild(bargainInput);
        const addButton = document.createElement("button");
        addButton.type = "button";
        addButton.textContent = buttonLabel;
        addButton.addEventListener("click", () => addToCart(product.id, undefined, undefined, {product: product}));
        row.appendChild(qtyLabel);
        row.appendChild(priceLabel);
        row.appendChild(addButton);
        div.appendChild(title);
        div.appendChild(summary);
        div.appendChild(meta);
        div.appendChild(row);
        fragment.appendChild(div);
    });
    resultsBox.appendChild(fragment);
    if (products.length > maxInitial) {
        const more = document.createElement("button");
        more.type = "button";
        more.className = "btn";
        more.textContent = "Show more matches";
        let shown = maxInitial;
        more.addEventListener("click", function () {
            const next = products.slice(shown, shown + 40);
            shown += next.length;
            const before = more;
            next.forEach(product => {
                const card = document.createElement("div");
                card.className = "product product-instant";
                card.innerHTML = "<b></b><span></span>";
                card.querySelector("b").textContent = product.name || "Product";
                card.querySelector("span").textContent = " - " + formatMoney(product.price) + " (Stock: " + product.stock + ")";
                card.addEventListener("click", () => addToCart(product.id, 1, undefined, {product: product}));
                resultsBox.insertBefore(card, before);
            });
            if (shown >= products.length) more.remove();
        });
        resultsBox.appendChild(more);
    }
}

searchBox.addEventListener("input", function () {
    clearTimeout(timeout);

    const query = this.value.trim();
    const sequence = ++searchSequence;
    const runtime = window.GveloOperationalRuntime;

    if (query.length < 1) {
        resultsBox.innerHTML = "";
        setSearchStatus("");
        return;
    }

    setSearchStatus("Searching...");

    timeout = setTimeout(() => {
        const hot = runtime ? runtime.search(query, 24) : [];
        if (sequence !== searchSequence) return;
        renderProductResults(hot, query);
        if (runtime && hot.length) runtime.microFeedback("search_ready");
    }, 20);
});
if (window.GveloPOSAcceleration) {
    window.GveloPOSAcceleration.install();
}
</script>

<script src="/static/voice-commands.js"></script>
<script src="/static/barcode/scanner.js"></script>
<script>
var barcodeScanner = window.GveloBarcodeScanner ? window.GveloBarcodeScanner.install({
    input: "#barcode-fast-input",
    status: "#barcode-scan-status",
    onOnlineProduct: addToCart,
    getCart: function () {
        return window.__gveloLatestCart || [];
    },
    onOfflineProduct: function () {
        refreshCart().catch(function () {});
    },
    onProductConfirmed: function (product) {
        const box = document.getElementById("scan-confirmation");
        const image = document.getElementById("scan-product-image");
        const name = document.getElementById("scan-product-name");
        const price = document.getElementById("scan-product-price");
        const stock = document.getElementById("scan-product-stock");
        const type = document.getElementById("scan-product-type");
        const label = String(product.name || "Product").trim();
        image.textContent = label.split(/\s+/).slice(0, 2).map(part => part[0]).join("").toUpperCase();
        name.textContent = label;
        price.textContent = "Price: " + formatMoney(product.calculated_price !== undefined ? product.calculated_price : product.price);
        stock.textContent = product.item_type === "service" ? "Service" : "Stock: " + product.stock;
        type.textContent = "Type: " + (product.item_type || "product");
        box.style.display = "grid";
        loadProductRelationships(product.id);
    },
    onRecoverySuggestions: function (suggestions, barcode) {
        const recovery = document.getElementById("scan-recovery");
        recovery.innerHTML = "";
        if (!suggestions.length) {
            recovery.style.display = "flex";
            const message = document.createElement("span");
            message.className = "barcode-status error";
            message.textContent = "No quick match for " + barcode + ". Use search or ask admin to assign the barcode.";
            recovery.appendChild(message);
            return;
        }
        suggestions.forEach(product => {
            const button = document.createElement("button");
            button.type = "button";
            button.textContent = product.name + " | " + formatMoney(product.price || 0);
            button.addEventListener("click", () => addToCart(product.id, 1));
            recovery.appendChild(button);
        });
        recovery.style.display = "flex";
    },
    onAnomaly: function (data) {
        const guidance = document.getElementById("scan-guidance-list");
        guidance.textContent = data.guidance.join(" ");
        guidance.style.display = "block";
    }
}) : null;
var barcodeFocusBtn = document.getElementById("barcode-focus");
var barcodeCacheBtn = document.getElementById("barcode-cache-refresh");
if (barcodeFocusBtn) {
    barcodeFocusBtn.addEventListener("click", function () {
        document.getElementById("barcode-fast-input").focus();
    });
}

function loadProductRelationships(productId) {
    fetch("/api/barcode/product-relationships?product_id=" + encodeURIComponent(productId))
        .then(res => res.json())
        .then(data => {
            const guidance = document.getElementById("scan-guidance-list");
            const relationships = data.relationships || [];
            if (!relationships.length || guidance.style.display === "block") return;
            guidance.textContent = "Often sold with: " + relationships.slice(0, 3).map(item => item.name || ("Product " + item.product_id)).join(", ");
            guidance.style.display = "block";
        })
        .catch(() => {});
}
if (barcodeCacheBtn && barcodeScanner) {
    barcodeCacheBtn.addEventListener("click", function () {
        barcodeScanner.refreshBarcodeCache()
            .then(function (ok) {
                document.getElementById("barcode-scan-status").textContent = ok ? "Barcode cache refreshed." : "Cache refresh skipped while offline.";
            });
    });
}
if (window.VoiceCommands && typeof VoiceCommands.init === "function") {
VoiceCommands.init({
    page: "sales",
    onCommand: function(cmd) {
        if (cmd.action === "search") {
            searchBox.value = cmd.product;
            searchBox.dispatchEvent(new Event("input"));
            searchBox.focus();
        } else if (cmd.action === "add_to_cart") {
            return voiceAddToCart(cmd.product, cmd.qty);
        } else if (cmd.action === "add_service") {
            return voiceAddToCart(cmd.product, cmd.qty || 1);
        } else if (cmd.action === "clear_cart") {
            return clearCart();
        } else if (cmd.action === "checkout") {
            window.location.href = "/checkout";
        } else if (cmd.action === "voice_unavailable") {
            cartoonNote.innerText = "Voice command is unavailable in this browser. Use Chrome or Edge for full microphone control.";
        }
    }
});
}
</script>
{% endblock %}