@{
    ViewData["Title"] = "Inventory";
}

<div class="d-flex align-items-center gap-2 mb-3">
    <a asp-controller="Help" asp-action="Index" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a asp-controller="Help" asp-action="Index">Help</a></li>
            <li class="breadcrumb-item active">Inventory</li>
        </ol>
    </nav>
</div>

<div class="row g-4">
    <div class="col-lg-9">

        <section id="overview" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-info-circle text-primary me-2"></i>Overview
            </h2>
            <p>
                The Inventory module tracks every powder, primer, consumable, and supply item your shop uses.
                Each item has a current stock level, a unit cost that feeds into job pricing calculations, and
                a reorder point that triggers a low-stock alert when stock drops to or below it.
            </p>
            <p>
                Keeping inventory accurate matters for two reasons. First, your job and quote pricing is only
                as accurate as the unit costs stored in inventory &mdash; outdated costs lead to under-pricing.
                Second, knowing how much powder you have on hand before a job starts prevents the frustrating
                situation of running out of material mid-job.
            </p>
            <p>
                You can find Inventory under <strong>Inventory &rsaquo; Items</strong> in the left sidebar.
            </p>
        </section>

        <section id="adding-items" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-plus-circle text-primary me-2"></i>Adding Inventory Items
            </h2>
            <p>To add a new item to your inventory:</p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Inventory &rsaquo; Items</strong> and click <strong>New Item</strong>.</li>
                <li class="mb-2">
                    Fill in the item details:
                    <ul class="mt-1">
                        <li><strong>Item Name</strong> &mdash; a clear, descriptive name (e.g., "Gloss Black Powder &mdash; Tiger Drylac 49/90005").</li>
                        <li><strong>SKU / Part Number</strong> &mdash; the manufacturer's part number or your internal SKU.</li>
                        <li><strong>Category</strong> &mdash; Powder, Primer, Consumable, Shop Supply, or other category as appropriate.</li>
                        <li><strong>Unit of Measure</strong> &mdash; lbs, kg, each, litre, etc.</li>
                        <li><strong>Unit Cost</strong> &mdash; your purchase cost per unit. Used in quote and job pricing calculations.</li>
                        <li><strong>Current Quantity on Hand</strong> &mdash; the number of units you have right now. This becomes the opening stock level.</li>
                        <li><strong>Reorder Point</strong> &mdash; the quantity at which you want to be alerted to reorder. See the Reorder Points section below.</li>
                        <li><strong>Vendor / Supplier</strong> &mdash; the vendor you purchase this item from. Linking a vendor lets you quickly see who to call when stock runs low.</li>
                    </ul>
                </li>
                <li class="mb-2">
                    For powder coatings, the <strong>Coverage Rate</strong> (sq ft per lb) and <strong>Transfer Efficiency %</strong>
                    default to <strong>30 sq ft/lb</strong> and <strong>65%</strong> respectively &mdash; typical starting values for most powder
                    and application setups. Adjust these to match your specific powder and equipment. Both values are used when
                    calculating powder needed on quotes and jobs.
                </li>
                <li class="mb-2">Click <strong>Save Item</strong>.</li>
            </ol>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    When you save a new item with an opening stock quantity greater than zero, the system automatically
                    records an <strong>Initial</strong> transaction for that quantity. This gives you a clean audit trail
                    from day one without any manual entry.
                </div>
            </div>
        </section>

        <section id="bin-filter" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-geo-alt text-primary me-2"></i>Filtering by Location &amp; Printing a Bin List
            </h2>
            <p>
                Every inventory item has an optional <strong>Location</strong> field (for example "Shelf A",
                "Bin 3", or "Back Wall") that you can set when creating or editing an item. Once locations
                are filled in, the Inventory list gives you two shortcuts for physical counts and
                stocktaking:
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Filtering by location</h3>
            <p>
                When at least one item has a location set, a <strong>Location</strong> dropdown appears in
                the filter bar at the top of the Inventory list, next to the Category filter. Select a
                location from the dropdown to instantly narrow the list to only the items stored there.
                You can combine the location filter with a keyword search or category filter at the same time.
            </p>
            <p>
                Each location badge shown in the Location column of the table is also a direct link &mdash;
                clicking it immediately filters to that bin without using the dropdown.
            </p>

            <h3 class="h6 fw-semibold mt-4 mb-2">Printing a bin list</h3>
            <p>
                With a location filter active, a <strong>Print Bin</strong> button appears next to the
                Clear Filters button. Click it to open a printer-ready page (in a new tab) listing every
                item in that bin with its item number, name, color, and SKU. Click <strong>Print</strong>
                on that page or use your browser&rsquo;s print shortcut to send it to a printer or save
                as PDF. The page has no site chrome &mdash; just the table &mdash; so it prints cleanly on a
                standard sheet.
            </p>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    The Location dropdown only appears once at least one inventory item has a location set.
                    If you don&rsquo;t see it, open any item, fill in the <strong>Location</strong> field on the
                    edit form, and save &mdash; the dropdown will appear on your next visit to the Inventory list.
                </div>
            </div>
        </section>

        <section id="catalog-lookup" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-search text-primary me-2"></i>Catalog Lookup &amp; Label Scanner
            </h2>
            <p>
                When adding or editing an inventory item, you don't have to type every field manually.
                Two shortcuts let you auto-fill product details in seconds:
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2"><i class="bi bi-upc-scan me-1"></i>Smart Catalog Lookup</h3>
            <p>
                Click the <strong>Lookup</strong> button next to the SKU/Part Number field. Type a color name,
                SKU, or part number and the system searches a built-in catalog of thousands of Prismatic Powders
                and other manufacturer SKUs. Select a match and the form fills in automatically &mdash; item name,
                manufacturer, color code, finish, coverage rate, SDS/TDS links, and cure specifications.
            </p>
            <ul class="mb-3">
                <li class="mb-1">The catalog only shows products <strong>not already in your inventory</strong>, preventing duplicates. When editing an existing item, its own catalog entry is always shown.</li>
                <li class="mb-1">If no catalog match is found, the lookup falls back to <strong>AI Lookup</strong> &mdash; Claude searches the web for product specs and fills in whatever it can find.</li>
                <li class="mb-1">If a vendor name is selected in the Vendor field before searching, results are scoped to that vendor first, then broadened automatically if nothing matches.</li>
            </ul>

            <div class="alert alert-permanent alert-success d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-cloud-check me-1 flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Columbia Coatings integration:</strong> the catalog is connected directly to the Columbia Coatings
                    product catalog and refreshes regularly (near real-time). Columbia powders auto-fill their full specs, cure
                    schedule, and SDS/TDS links, and their prices stay current &mdash; quotes use the latest catalog price even
                    when your stored cost is older. An item&rsquo;s detail page shows the current catalog price and flags when it
                    has changed since you last bought it. Discontinued powders are flagged &ldquo;cannot reorder&rdquo; but stay
                    usable for stock you already have.
                </div>
            </div>

            <h3 class="h6 fw-semibold mt-4 mb-2"><i class="bi bi-camera me-1"></i>Label Scanner (Camera)</h3>
            <p>
                Click the <strong>camera icon</strong> next to the Lookup button to open the label scanner.
                Point your phone or webcam at the QR code printed on a powder bag or manufacturer label.
                The scanner reads the code and attempts to identify the product:
            </p>
            <ol class="mb-3">
                <li class="mb-1">If the QR code matches a product in the platform catalog, the form fills in automatically &mdash; same as a manual catalog lookup.</li>
                <li class="mb-1">If no catalog match is found, the AI analyzes the label image and fills in whatever details it can extract (color name, SKU, manufacturer, finish).</li>
                <li class="mb-1">
                    If the scanned product is <strong>already in your inventory</strong>, a prompt appears to
                    <strong>Add Stock</strong> to the existing item instead &mdash; enter the quantity received and an
                    optional updated unit cost, then save. No duplicate item is created.
                </li>
            </ol>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-phone me-1 flex-shrink-0 mt-1"></i>
                <div>
                    The label scanner works best on a phone. If you're on iOS, open the page in
                    <strong>Safari</strong> for reliable camera access. For persistent camera permission
                    (no prompt each session), <a asp-controller="Help" asp-action="GettingStarted" class="alert-link"
                    fragment="mobile-install">add the app to your home screen</a>.
                </div>
            </div>
        </section>

        <section id="stock-levels" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-boxes text-primary me-2"></i>Stock Levels and Reorder Points
            </h2>
            <p>
                The <strong>quantity on hand</strong> for each item is updated automatically whenever a transaction
                is recorded &mdash; a purchase receipt increases stock, a job consumption decreases it, and a manual
                adjustment sets it to the corrected count.
            </p>
            <p>
                The <strong>reorder point</strong> is the safety threshold below which you do not want your stock
                to fall. When the quantity on hand reaches or drops below the reorder point, the item appears in
                the low-stock alerts section on your Dashboard and is flagged in the Inventory list. Think of it
                as the signal to place a new order with your vendor.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Setting a good reorder point</h3>
            <p>
                A good reorder point accounts for two factors:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Lead time</strong> &mdash; how many days it typically takes for your vendor to deliver after you place an order. If lead time is 5 days, your reorder point should cover at least 5 days of usage.</li>
                <li class="mb-1"><strong>Daily usage rate</strong> &mdash; how much of the item you typically consume per day based on your job volume.</li>
            </ul>
            <p>
                For example, if you use 3 lbs of a powder per day and your vendor takes 5 days to deliver, a
                reorder point of 20 lbs (3 &times; 5 + a small safety buffer) ensures you never run out while
                waiting for the delivery.
            </p>
        </section>

        <section id="stock-adjustment" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-plus-slash-minus text-primary me-2"></i>Stock Adjustment
            </h2>
            <p>
                Use the <strong>Stock Adjustment</strong> button on any item's Details page to quickly correct the
                quantity on hand without going through the full edit form. This is the fastest way to record a
                physical count correction, log a waste event, or add stock received outside of a formal Purchase Order.
            </p>
            <p>Click <strong>Stock Adjustment</strong> in the Actions panel and choose one of three modes:</p>
            <ul class="mb-3">
                <li class="mb-2"><strong>Add Stock</strong> &mdash; increases the current quantity by the amount you enter. Use for received goods, returns, or found stock.</li>
                <li class="mb-2"><strong>Remove Stock</strong> &mdash; decreases the current quantity by the amount you enter. Use for waste, spillage, or damage write-offs.</li>
                <li class="mb-2"><strong>Set Exact</strong> &mdash; sets the quantity on hand to the exact number you enter, regardless of the current value. Use after a physical inventory count to correct the balance.</li>
            </ul>
            <p>
                A <strong>reason</strong> is required for every adjustment. Common reasons are listed in the dropdown
                (received from PO, physical count correction, waste, etc.). Add optional notes for additional detail.
                The modal shows your current stock and a live preview of the new balance as you type.
            </p>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-journal-check flex-shrink-0 mt-1"></i>
                <div>
                    Every stock adjustment is automatically recorded as an <strong>Adjustment</strong> transaction in the
                    item's activity history, including the reason and notes you entered. You can review all past
                    adjustments on the <strong>Inventory Activity</strong> page.
                </div>
            </div>
        </section>

        <section id="transactions" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-arrow-left-right text-primary me-2"></i>Transaction Types
            </h2>
            <p>
                Every stock movement is recorded as a transaction with a date, quantity, and running balance,
                giving you a complete audit trail. Transactions are created automatically by the system
                (when you create an item, edit a quantity, receive a PO, or record powder usage on a job)
                and manually through the Stock Adjustment modal.
            </p>

            <div class="table-responsive mb-3">
                <table class="table table-sm table-bordered mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:25%">Transaction Type</th>
                            <th>When it is recorded</th>
                            <th style="width:15%">Effect on stock</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Initial</strong></td>
                            <td>Opening balance when an item is first created with stock on hand.</td>
                            <td class="text-success fw-semibold">+ Increases</td>
                        </tr>
                        <tr>
                            <td><strong>Purchase</strong></td>
                            <td>Stock received from a vendor via a Purchase Order receipt.</td>
                            <td class="text-success fw-semibold">+ Increases</td>
                        </tr>
                        <tr>
                            <td><strong>Return</strong></td>
                            <td>Stock returned to inventory from a job or returned from a vendor.</td>
                            <td class="text-success fw-semibold">+ Increases</td>
                        </tr>
                        <tr>
                            <td><strong>Adjustment</strong></td>
                            <td>Manual correction via the Stock Adjustment modal, or any direct change to Quantity on Hand through the edit form.</td>
                            <td class="text-muted">+/&minus;</td>
                        </tr>
                        <tr>
                            <td><strong>Transfer</strong></td>
                            <td>Stock moved between locations or storage areas.</td>
                            <td class="text-muted">+/&minus;</td>
                        </tr>
                        <tr>
                            <td><strong>Job Usage</strong></td>
                            <td>Powder consumed during a job &mdash; recorded automatically when actual usage is entered on a job coat.</td>
                            <td class="text-danger fw-semibold">&minus; Decreases</td>
                        </tr>
                        <tr>
                            <td><strong>Sale</strong></td>
                            <td>Stock consumed or sold outside of a job.</td>
                            <td class="text-danger fw-semibold">&minus; Decreases</td>
                        </tr>
                        <tr>
                            <td><strong>Waste</strong></td>
                            <td>Material scrapped, spilled, or otherwise lost and cannot be used.</td>
                            <td class="text-danger fw-semibold">&minus; Decreases</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="alert alert-permanent alert-secondary d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                <div>
                    Always add a <strong>note</strong> when recording a Waste or Adjustment. Notes make it much
                    easier to understand your stock history during audits or when investigating discrepancies
                    between physical counts and the system.
                </div>
            </div>
        </section>

        <section id="activity-ledger" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-journal-text text-primary me-2"></i>Inventory Activity
            </h2>
            <p>
                The <strong>Inventory Activity</strong> page (<strong>Inventory &rsaquo; Inventory Activity</strong> in the
                sidebar, or click <strong>View Activity History</strong> on any item's Details page) gives you a
                complete view of all stock movements and powder usage across your shop.
            </p>
            <p>It has two tabs:</p>
            <ul class="mb-3">
                <li class="mb-2">
                    <strong>Stock Transactions</strong> &mdash; every transaction recorded against your inventory items,
                    showing date, type, quantity (green for additions, red for deductions), unit cost, total cost,
                    running balance after the transaction, and a link to the source Purchase Order if applicable.
                </li>
                <li class="mb-2">
                    <strong>Powder Usage by Job</strong> &mdash; every instance of powder being consumed on a job coat,
                    showing the job number (linked to the job), customer, color applied, estimated vs actual pounds
                    used, and the variance. A totals row at the bottom summarises the full filtered selection.
                </li>
            </ul>
            <p>
                Use the filter bar at the top to narrow results by <strong>item</strong>, <strong>date range</strong>,
                and <strong>transaction type</strong>. Summary pills above the tabs show total lbs received, total
                lbs used, and net adjustments for the current filter.
            </p>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    To see the history for a single powder, open its Details page and click
                    <strong>View Activity History</strong> &mdash; the Inventory Activity page will open pre-filtered
                    to that item.
                </div>
            </div>
        </section>

        <section id="qr-labels" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-qr-code text-primary me-2"></i>QR Code Labels &amp; Mobile Usage Logging
            </h2>
            <p>
                Every inventory item has a printable <strong>QR code label</strong>. Stick it on the bag, bin,
                or shelf and shop floor workers can scan it with their phone to log how much they used &mdash;
                without ever touching a desktop.
            </p>

            <h3 class="h6 fw-semibold mt-4 mb-2">Printing a label</h3>
            <p>You can print from two places &mdash; the item's Details page, or directly from the list without opening the item.</p>
            <ol class="mb-3">
                <li class="mb-1">
                    <strong>From the list:</strong> click the <i class="bi bi-qr-code"></i> QR icon (first button in the Actions column) next to any row.
                    <br /><strong>From Details:</strong> click <strong>Print QR Label</strong> in the Actions panel.
                </li>
                <li class="mb-1">A preview modal opens showing the label &mdash; item name, SKU, colour, finish, and QR code.</li>
                <li class="mb-1">Click <strong>Print Label</strong> inside the modal to send it to your printer. No new tab is opened; printing happens directly in the modal. The label is sized for a standard 3.5&Prime; label.</li>
            </ol>

            <h3 class="h6 fw-semibold mt-4 mb-2">Scanning and logging usage</h3>
            <ol class="mb-3">
                <li class="mb-1">Point your phone camera at the QR code on the label. Your browser opens the <strong>Log Usage</strong> page for that item.</li>
                <li class="mb-1">
                    <strong>Select a job</strong> (optional but recommended):
                    <ul class="mt-1">
                        <li><em>My Jobs</em> &mdash; active jobs assigned to your account appear first.</li>
                        <li><em>Other Jobs</em> &mdash; any other open job in the system.</li>
                        <li><em>No Job</em> &mdash; log usage without a job reference (e.g. a waste event).</li>
                    </ul>
                </li>
                <li class="mb-1">Enter the <strong>quantity</strong> used. A live preview shows what the new stock balance will be.</li>
                <li class="mb-1">Choose a <strong>reason</strong>: Job Usage, Waste / Spillage, Correction, or Transfer Out.</li>
                <li class="mb-1">Add optional notes, then tap <strong>Save Usage Log</strong>.</li>
            </ol>

            <h3 class="h6 fw-semibold mt-4 mb-2">After saving</h3>
            <p class="mb-3">
                The success screen gives you two options:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Log Another Item for This Job</strong> &mdash; returns to the scan page with the same job pre-selected, so you can quickly log the next powder without re-picking the job.</li>
                <li class="mb-1"><strong>Back to Inventory</strong> or <strong>View Item Details</strong> &mdash; returns to a neutral state.</li>
            </ul>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    Every scan-based usage log is recorded as a <strong>JobUsage</strong> or <strong>Adjustment</strong>
                    transaction and immediately reduces the item's quantity on hand. You can review it on the
                    <a href="/Inventory/Ledger" class="alert-link">Inventory Activity</a> page.
                    The first time a worker scans on a new device they will be asked to log in &mdash; after that the
                    browser keeps them signed in.
                </div>
            </div>
        </section>

        <section id="low-stock-alerts" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-exclamation-triangle text-primary me-2"></i>Stock Status and Alerts
            </h2>
            <p>Every inventory item displays one of three stock statuses:</p>
            <ul class="mb-3">
                <li class="mb-2">
                    <span class="badge bg-success me-1">In Stock</span>
                    Quantity on hand is above the reorder point. No action needed.
                </li>
                <li class="mb-2">
                    <span class="badge bg-danger me-1">Low Stock</span>
                    Quantity on hand is greater than zero but at or below the reorder point.
                    This is your signal to place a reorder with your vendor.
                </li>
                <li class="mb-2">
                    <span class="badge bg-dark me-1">Out of Stock</span>
                    Quantity on hand is zero. Jobs using this powder cannot proceed until stock is replenished.
                    An alert banner is shown on the item's Details page prompting you to use Stock Adjustment to add inventory.
                </li>
            </ul>
            <p>
                Low Stock and Out of Stock items appear in the Inventory Alerts section on the Dashboard and in the Operations Report.
                The <strong>Low Stock</strong> stat card at the top of the Inventory page is clickable &mdash; click it to instantly
                filter the list to only items needing attention. Click it again (or clear the filter) to return to the full list.
            </p>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    An item continues to show as Low Stock or Out of Stock even after you have placed a Purchase
                    Order, until the goods are physically received and the PO is marked as Received in the system.
                    This is intentional &mdash; it reminds you that stock has not yet arrived.
                </div>
            </div>
        </section>

        <section id="powder-insights" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-graph-up-arrow text-primary me-2"></i>Powder Insights
            </h2>
            <p>
                <strong>Powder Insights</strong> (<a href="/PowderInsights">/PowderInsights</a>) is an
                AI-powered analysis of your powder usage patterns, efficiency trends, and cost optimization
                opportunities. It is accessible from the Equipment section of the sidebar.
            </p>
            <ul class="mb-3">
                <li class="mb-1">Requires at least <strong>10 jobs</strong> with powder data to generate basic insights.</li>
                <li class="mb-1">Predictive and cost-optimization features unlock at <strong>150 jobs</strong>.</li>
                <li class="mb-1">Shows usage trends by powder color/type, efficiency benchmarks, and suggestions for reducing waste.</li>
            </ul>
            <p>
                The more accurately you record powder usage and efficiency on your inventory items, the more
                useful Powder Insights becomes over time.
            </p>
        </section>

        <section id="inventory-categories" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-tags text-primary me-2"></i>Inventory Categories &amp; the "Is Coating" Flag
            </h2>
            <p>
                Every inventory item belongs to a <strong>category</strong> (e.g. "Powder Coatings", "Primers",
                "Shop Supplies"). Categories help you organize items in your list, but one setting on a category
                has a direct effect on what appears in your quote and job workflows: the <strong>Is Coating</strong> flag.
            </p>
            <p>
                <strong>Only items whose category has "Is Coating" enabled will appear in the powder color
                dropdown</strong> when building a quote or job item. If a category does not have this flag set,
                all items in that category are treated as general supplies and are excluded from the color picker.
            </p>

            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-4" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Blank powder color dropdown?</strong> This is almost always caused by the inventory
                    category for your powder coatings not having <strong>Is Coating</strong> checked. Follow
                    the steps below to fix it.
                </div>
            </div>

            <h3 class="h6 fw-semibold mt-3 mb-2">How to enable "Is Coating" on a category</h3>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong><a asp-controller="CompanySettings" asp-action="Index">Company Settings</a> &rsaquo; Data Lookups &rsaquo; Inventory Categories</strong>.</li>
                <li class="mb-2">Find the category that contains your powder coating colors (e.g. "Powder Coatings").</li>
                <li class="mb-2">Click the edit icon and check the <strong>Is Coating</strong> checkbox.</li>
                <li class="mb-2">Save. Items in that category will immediately appear in the powder color dropdown on all quotes and jobs &mdash; no restart required.</li>
            </ol>

            <h3 class="h6 fw-semibold mt-3 mb-2">Which categories should have "Is Coating" enabled?</h3>
            <p>
                Only categories that contain actual powder coating colors &mdash; the materials that go into the oven
                and bond to the part. Do <strong>not</strong> enable this on categories for primers, masking
                supplies, consumables, or equipment. Enabling it on non-coating categories will pollute the
                color dropdown with irrelevant items and make it harder to find the right powder.
            </p>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    The "Is Coating" flag also controls where the <strong>sample panel toggle</strong> appears
                    on an item's Details page. The toggle &mdash; "I have a swatch/sample of this color" &mdash; only
                    shows up for items in a coating category, and those items are the ones tracked on the
                    <strong>Sample Panels</strong> page.
                </div>
            </div>
        </section>

        <section id="powder-usage" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-droplet text-primary me-2"></i>Powder Usage on Jobs
            </h2>
            <p>
                When a job item uses a powder coating from your inventory, the system calculates how much powder
                will be needed before the job begins. This estimate is based on three values:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Surface area</strong> &mdash; the total square footage to be coated (entered per item in the job or quote wizard).</li>
                <li class="mb-1"><strong>Coverage rate</strong> &mdash; how many square feet one pound of the selected powder covers (set on the inventory item).</li>
                <li class="mb-1"><strong>Number of coats</strong> &mdash; selected when you add the coating to the item.</li>
            </ul>
            <p>
                The <strong>Powder Needed</strong> figure appears in the item wizard as you build the quote or job,
                and is shown in the Coatings column on the Job Details page. Use it to quickly verify that you
                have sufficient stock on hand before scheduling the job for production.
            </p>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    Coverage rates vary by powder type, application equipment, and operator technique. Use a
                    conservative (lower) coverage rate in your inventory settings to build in a safety margin.
                    It is better to order slightly more than to run short mid-job.
                </div>
            </div>
        </section>

        <section id="ai-price-check" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-robot text-primary me-2"></i>AI Catalog Price Check
            </h2>
            <p>
                The AI Price Check reviews every active, priced item in your
                <a asp-controller="CatalogItems" asp-action="Index">Catalog Items</a> list against your
                shop's actual operating costs. It estimates a realistic surface area and processing time
                for each item, calculates a cost floor, and compares that to your current price &mdash; flagging
                anything that may be losing money, leaving margin on the table, or priced above market rates.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Verdicts</h3>
            <ul class="mb-3">
                <li class="mb-2"><strong>Below Cost</strong> &mdash; price is at or below the estimated cost floor. The shop loses money on every sale of this item.</li>
                <li class="mb-2"><strong>Thin Margin</strong> &mdash; price covers costs but falls below your target margin percentage.</li>
                <li class="mb-2"><strong>High</strong> &mdash; price appears significantly above typical market rates, which may cost you work.</li>
                <li class="mb-2"><strong>OK</strong> &mdash; price is within a reasonable range given your costs and market context.</li>
            </ul>

            <h3 class="h6 fw-semibold mt-3 mb-2">How to run it</h3>
            <ol class="mb-3">
                <li class="mb-2">Make sure your <a asp-controller="CompanySettings" asp-action="Index">operating costs</a> are up to date &mdash; stale rates produce inaccurate verdicts.</li>
                <li class="mb-2">Go to <a asp-controller="CatalogItems" asp-action="Index">Catalog Items</a> and click <strong>AI Price Check</strong> in the top-right.</li>
                <li class="mb-2">Click <strong>Analyze Catalog with AI</strong>. A progress overlay appears while the analysis runs (allow 7&ndash;10 minutes for large catalogs).</li>
                <li class="mb-2">Review results sorted by severity &mdash; Below Cost items appear first. Click <strong>Edit Price</strong> on any item to update it directly from the results page.</li>
            </ol>

            <h3 class="h6 fw-semibold mt-3 mb-2">Things to know</h3>
            <ul class="mb-3">
                <li class="mb-2"><strong>Run limit:</strong> Analysis can be run once per quarter (90 days). The button shows the next available date when a recent run exists.</li>
                <li class="mb-2"><strong>Confidence levels:</strong> Each result shows High, Medium, or Low confidence. Vague item names like "Custom Part" will be Low &mdash; verify those manually.</li>
                <li class="mb-2"><strong>Category paths matter:</strong> The AI uses the full category path (e.g. "Cerakote &rsaquo; Firearms") to determine the coating type. Make sure specialty items are in the correct category.</li>
                <li class="mb-2"><strong>$0 items skipped:</strong> Placeholder items and category headers with no price are automatically excluded from analysis.</li>
            </ul>

            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    Results are estimates based on industry knowledge and your shop's rates. Always apply
                    your own judgment before changing prices &mdash; especially for items flagged as Low confidence.
                </div>
            </div>
        </section>

    </div>

    <div class="col-lg-3 d-none d-lg-block">
        @{ await Html.RenderPartialAsync("_HelpNav"); }
        <div class="card border-0 shadow-sm sticky-top" style="top:80px">
            <div class="card-header bg-transparent fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">On this page</div>
            <div class="card-body p-0">
                <nav class="nav flex-column">
                    <a class="nav-link py-1 px-3 small text-body" href="#overview">Overview</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#adding-items">Adding Inventory Items</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#bin-filter">Location Filtering &amp; Bin Print</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#catalog-lookup">Catalog Lookup &amp; Label Scanner</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#stock-levels">Stock Levels and Reorder Points</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#stock-adjustment">Stock Adjustment</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#transactions">Transaction Types</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#activity-ledger">Inventory Activity</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#qr-labels">QR Labels &amp; Mobile Logging</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#low-stock-alerts">Stock Status and Alerts</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#powder-insights">Powder Insights</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#inventory-categories">Inventory Categories &amp; Is Coating</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#powder-usage">Powder Usage on Jobs</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#ai-price-check">AI Catalog Price Check</a>
                </nav>
            </div>
        </div>
    </div>
</div>
