PowderCoatingLogix/src/PowderCoating.Web/Views/Help/Jobs.cshtml

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

<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">Jobs</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>
                Jobs are the core unit of work in the shop. Every item that comes through the door for coating is
                tracked as a job. A job belongs to a customer, has a status that moves it through the shop workflow,
                a priority level, a due date, and one or more line items describing the work to be performed.
            </p>
            <p>
                You can find Jobs under <strong>Operations &rsaquo; Jobs</strong> in the left sidebar. The list is
                searchable and sortable by job number, status, priority, scheduled date, due date, and price. Jobs
                can be created manually or converted automatically from an approved quote — no need to re-enter
                information that is already in the system.
            </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 fastest way to create a job is to start with a quote. Build and approve the quote, then
                    click <strong>Convert to Job</strong> — all items, coatings, and pricing carry over automatically.
                </div>
            </div>
        </section>

        <section id="creating-a-job" 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>Creating a Job
            </h2>
            <p>To create a job manually:</p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Operations &rsaquo; Jobs</strong> and click the <strong>New Job</strong> button in the top-right corner.</li>
                <li class="mb-2">Select the <strong>Customer</strong> — this field is required. Type to search by name or company.</li>
                <li class="mb-2">Enter a <strong>Job Description</strong> summarising the work (e.g., "Powder coat motorcycle frame — gloss black").</li>
                <li class="mb-2">Set the <strong>Scheduled Date</strong> (when work is expected to begin) and the <strong>Due Date</strong> (when the customer expects pickup or delivery).</li>
                <li class="mb-2">Choose a <strong>Priority</strong> — Normal is the default; see the Job Priority section below for all levels.</li>
                <li class="mb-2">Optionally assign a <strong>Worker</strong> from your shop workers list.</li>
                <li class="mb-2">Enter the customer's <strong>PO Number</strong> if they require one for their own records.</li>
                <li class="mb-2">Add any <strong>Special Instructions</strong> your team needs to know before starting work.</li>
                <li class="mb-2">Add one or more <strong>Line Items</strong> describing each piece being coated. See the Job Items section below.</li>
                <li class="mb-2">Click <strong>Save Job</strong>.</li>
            </ol>
            <p>
                The system automatically generates a unique job number in the format <code>JOB-YYMM-####</code>
                (for example, <code>JOB-2503-0042</code>). This number appears on all documents related to the job.
            </p>
        </section>

        <section id="job-status" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-arrow-right-circle text-primary me-2"></i>Job Status
            </h2>
            <p>
                Each job moves through a defined sequence of statuses as it progresses through the shop. The status
                is displayed as a color-coded badge on the job list and details page. You can update a job's status
                at any time by opening the job and editing it.
            </p>
            <p>
                The two special statuses — <strong>On Hold</strong> and <strong>Cancelled</strong> — can be applied
                at any point in the workflow regardless of the current status. Use On Hold to pause a job temporarily
                (waiting for customer approval, missing materials, etc.) and Cancelled to formally close a job that
                will not be completed.
            </p>
            <p>
                On the Jobs list, click any status badge to open a quick-change modal. The modal includes a
                <strong>Notify customer via email</strong> toggle. If the customer has email notifications turned off,
                that toggle is automatically disabled and a warning note is shown — no email will be sent regardless.
            </p>

            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:30%">Status</th>
                            <th>What it means</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="badge bg-secondary">Pending</span></td>
                            <td>Job has been entered but work has not started. Initial state for all new jobs.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-info text-dark">Quoted</span></td>
                            <td>A formal quote has been generated and sent to the customer for this job.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">Approved</span></td>
                            <td>The customer has approved the quote and authorised the work to proceed.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">In Preparation</span></td>
                            <td>The job has been pulled from the queue and prep work has begun.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Sandblasting</span></td>
                            <td>The parts are being surface-blasted to remove rust, old coatings, or contaminants.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Masking / Taping</span></td>
                            <td>Areas that must not be coated are being masked off or taped.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Cleaning</span></td>
                            <td>Parts are being chemically cleaned and degreased before coating is applied.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">In Oven</span></td>
                            <td>Parts are in the pre-heat oven being brought to the correct application temperature.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">Coating</span></td>
                            <td>Powder coating is being applied to the parts via electrostatic spray gun.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Curing</span></td>
                            <td>Coated parts are in the curing oven at temperature to flow and bond the powder.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-info text-dark">Quality Check</span></td>
                            <td>Finished parts are being inspected for coverage, adhesion, and surface defects.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">Completed</span></td>
                            <td>Work is done and the job has passed quality inspection.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">Ready for Pickup</span></td>
                            <td>Parts are packaged and waiting for the customer to collect them.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-secondary">Delivered</span></td>
                            <td>Parts have been collected by the customer or delivered to their location.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">On Hold</span></td>
                            <td>Job is temporarily paused. Can be applied at any point in the workflow.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-danger">Cancelled</span></td>
                            <td>Job will not be completed. Can be applied at any point in the workflow.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section id="job-priority" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-flag text-primary me-2"></i>Job Priority
            </h2>
            <p>
                Every job has a priority level that tells your team how urgently a job needs to move through the shop.
                Priorities are color-coded throughout the system — in the job list, on the job details page, and on
                any dashboards. Set or change the priority in the Create or Edit form.
            </p>

            <div class="table-responsive mb-3">
                <table class="table table-sm table-bordered mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:30%">Priority</th>
                            <th>When to use it</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="badge bg-secondary">Low</span></td>
                            <td>Non-urgent work that can be scheduled when the shop has capacity. No specific deadline pressure.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">Normal</span></td>
                            <td>Standard shop priority. Used for the majority of jobs. Work is completed within the agreed timeframe.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">High</span></td>
                            <td>Customer has a firm deadline or the job is part of a larger project. Should be worked ahead of Normal jobs.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-danger">Urgent</span></td>
                            <td>Job must be completed very soon. Push to the front of the queue and notify the supervisor.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-dark">Rush</span></td>
                            <td>Same-day or next-day turnaround required. Rush jobs are highlighted prominently in the job list to ensure they are never missed. A rush surcharge may apply.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <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>
                    Rush jobs appear highlighted in the job list so they stand out at a glance. Make sure your team
                    understands that a Rush priority means the job takes precedence over everything else currently
                    on the floor.
                </div>
            </div>
        </section>

        <section id="job-items" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-list-check text-primary me-2"></i>Job Items
            </h2>
            <p>
                Each job contains one or more line items, each describing a distinct piece or group of parts being
                coated. Items are added using the item wizard when creating or editing a job.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Item Types</h3>
            <ul class="mb-3">
                <li class="mb-2">
                    <strong>Calculated Item</strong> — enter surface area, quantity, and complexity. The system
                    calculates material, labor, and equipment costs automatically. Select one or more powder
                    coatings and optional prep services (sandblasting, masking, cleaning).
                </li>
                <li class="mb-2">
                    <strong>Custom Work Item</strong> — enter a free-text description and a manual price. Use this for
                    one-off work that does not fit the standard calculation model.
                </li>
                <li class="mb-2">
                    <strong>AI Photo Quote Item</strong> — upload photos of the parts and let our AI agent estimate
                    the surface area, complexity, and labor time. Review and override any value before accepting.
                    Up to two follow-up rounds of questions are supported.
                </li>
                <li class="mb-2">
                    <strong>Labor Item</strong> — a line item representing time and labor charges only, without
                    material costs.
                </li>
            </ul>

            <h3 class="h6 fw-semibold mt-3 mb-2">Surface Area and Coatings</h3>
            <p>
                For each item you enter the <strong>surface area in square feet</strong> and the <strong>quantity</strong>
                of parts. You then select which powder coating(s) to apply. The system calculates how much powder is
                needed per coat based on the surface area, the coating's coverage rate (sq ft per lb), and the
                application efficiency factor.
            </p>
            <p>
                The <strong>Powder Needed</strong> estimate is shown live in the wizard as you enter the surface area
                and select coatings. This helps you check whether you have enough stock on hand before committing to
                the job schedule.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Prep Services</h3>
            <p>
                Each item can also include optional <strong>prep services</strong> — sandblasting, masking, or
                chemical cleaning — that will be carried out before coating. These are selected in the wizard and
                appear as sub-lines under the item on the job details page.
            </p>

            <h3 class="h6 fw-semibold mt-4 mb-2">Save to Product Catalog</h3>
            <p>
                After completing the coatings and prep services steps, <strong>Calculated</strong> and
                <strong>AI Photo Quote</strong> items include one final optional step: <strong>Save to Product Catalog</strong>.
                This lets you turn the item you just configured into a reusable catalog entry so it can be selected
                instantly on future quotes or jobs — without re-entering dimensions, coatings, or prep services.
            </p>
            <p>The wizard pre-fills the catalog form with:</p>
            <ul class="mb-3">
                <li><strong>Name</strong> — taken from the item description (or AI-generated description); you can edit it</li>
                <li><strong>Default Price</strong> — copied from the item's calculated or manually adjusted unit price</li>
                <li><strong>Description</strong> — the item description</li>
                <li><strong>Sandblasting / Masking</strong> — automatically checked if those prep services were selected</li>
                <li><strong>Category</strong> — choose from your active catalog categories</li>
            </ul>
            <p>At the bottom of the step you have two options:</p>
            <ul class="mb-3">
                <li><strong>Save to Catalog &amp; Add</strong> — saves the catalog item immediately and then adds the line item to the job.</li>
                <li><strong>Skip — Add to Job Only</strong> — skips the save and adds the item to the job without creating a catalog entry.</li>
            </ul>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
                <div>
                    The catalog save happens immediately when you click <strong>Save to Catalog &amp; Add</strong> — before the job form is submitted. The catalog item is preserved even if you later discard the job. You can view and manage all saved items at <a asp-controller="CatalogItems" asp-action="Index">Catalog Items</a>.
                </div>
            </div>

            <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>
                    Items on the job details page are grouped by type — Catalog Items, Custom Work, and Labor — to
                    make it easy to see exactly what work is being performed and which materials are required.
                </div>
            </div>
        </section>

        <section id="converting-from-quote" 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>Converting from a Quote
            </h2>
            <p>
                When a customer approves a quote, the quickest way to create the job is to convert the quote directly
                rather than re-entering all the details manually.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the approved quote from <strong>Operations &rsaquo; Quotes</strong>.</li>
                <li class="mb-2">Click the <strong>Convert to Job</strong> button on the quote details page.</li>
                <li class="mb-2">
                    The system creates a new job pre-filled with:
                    <ul class="mt-1">
                        <li>All line items, surface areas, and quantities from the quote</li>
                        <li>All coatings and prep services selected for each item</li>
                        <li>The final pricing calculated on the quote</li>
                        <li>The customer record the quote was linked to</li>
                    </ul>
                </li>
                <li class="mb-2">Review the new job, set the scheduled date and priority, assign a worker if needed, and click <strong>Save Job</strong>.</li>
            </ol>
            <p>
                The quote status changes to <strong>Converted</strong> and is linked to the new job. You can navigate
                between the quote and the job at any time using the link shown on each record's details page.
            </p>
            <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>
                    If the quote was created for a prospect (not yet a customer), you must first convert the prospect
                    to a customer before converting the quote to a job. See the
                    <a asp-controller="Help" asp-action="Quotes">Quotes help page</a> for details on prospect conversion.
                </div>
            </div>
        </section>

        <section id="creating-an-invoice" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-receipt text-primary me-2"></i>Creating an Invoice from a Job
            </h2>
            <p>
                Once a job is complete — or at any time when you are ready to bill the customer — you can create an
                invoice directly from the job's Details page. There is no need to manually re-enter pricing.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the job from <strong>Operations &rsaquo; Jobs</strong> and go to its Details page.</li>
                <li class="mb-2">
                    Scroll to the <strong>Invoice</strong> section at the bottom of the page.
                    <ul class="mt-1">
                        <li>If no invoice exists yet, you will see a <strong>Create Invoice</strong> button.</li>
                        <li>If an invoice already exists, you will see a link to open it.</li>
                    </ul>
                </li>
                <li class="mb-2">Click <strong>Create Invoice</strong>. The system generates a new invoice pre-filled with all the job's line items and the final pricing.</li>
                <li class="mb-2">Review the invoice, confirm the due date, and save it.</li>
            </ol>
            <p>
                Each job can only have one invoice. Once the invoice is created, the Create Invoice button is replaced
                with a link to view the existing invoice.
            </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>
                    Any deposits recorded against this job are automatically applied as payments when the invoice
                    is created. For full details on invoicing, see the
                    <a asp-controller="Help" asp-action="Invoices">Invoices help page</a>.
                </div>
            </div>
        </section>

        <section id="photos-notes" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-camera text-primary me-2"></i>Photos and Notes
            </h2>

            <h3 class="h6 fw-semibold mt-3 mb-2">Job Photos</h3>
            <p>
                Upload before, during, and after photos directly from the Job Details page. Photo types include
                <strong>Before</strong>, <strong>Progress</strong>, <strong>After</strong>,
                <strong>Quality Check</strong>, <strong>Issue</strong>, and <strong>Completed</strong>.
                Photos are visible to anyone who opens the job record and help document the work performed.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Job Notes</h3>
            <p>
                Add internal notes to a job from the Details page. Notes are private — they are not visible
                to the customer. Use them for team communication, special handling instructions, or to log
                anything notable that happened during production.
            </p>
        </section>

        <section id="time-and-rework" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-clock text-primary me-2"></i>Time Entries and Rework
            </h2>

            <h3 class="h6 fw-semibold mt-3 mb-2">Time Entries</h3>
            <p>
                Log labor time against a job from the Job Details page using the <strong>Time Entries</strong>
                section. Each entry records who worked on the job, how long, and when. Use this to track
                actual hours vs. estimated hours for costing and productivity analysis.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Rework</h3>
            <p>
                If finished parts fail quality inspection or need to be re-coated, create a rework record
                from the Job Details page. Rework records track the rework type, the reason (adhesion failure,
                color mismatch, damage, etc.), and the resolution. This data helps identify recurring quality
                issues over time.
            </p>
        </section>

        <section id="job-templates" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-clipboard2-check text-primary me-2"></i>Job Templates
            </h2>
            <p>
                If you do the same type of work repeatedly — for example, a standard wheel refinish package —
                you can save a job's line items as a template and reuse it for future jobs.
            </p>
            <p>Templates are managed at <strong>/JobTemplates</strong>. To use a template:</p>
            <ol class="mb-3">
                <li class="mb-2">When creating a new job, look for the <strong>Load Template</strong> option.</li>
                <li class="mb-2">Select the template you want to use.</li>
                <li class="mb-2">The line items, coatings, and prep services from the template are pre-filled into the new job.</li>
                <li class="mb-2">Adjust any fields as needed for this specific job, then save.</li>
            </ol>
        </section>

        <section id="shop-display-and-board" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-display text-primary me-2"></i>Shop Display and Priority Board
            </h2>

            <h3 class="h6 fw-semibold mt-3 mb-2">Shop Display</h3>
            <p>
                The <strong>Shop Display</strong> (<a href="/Jobs/ShopDisplay">/Jobs/ShopDisplay</a>) opens a
                full-screen view of all active jobs and their current statuses, designed for a TV or large
                monitor mounted on the shop floor. Workers can see at a glance what jobs are in their queue
                without needing to log in or use a computer.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Job Priority Board</h3>
            <p>
                The <strong>Priority Board</strong> (<a href="/JobsPriority">/JobsPriority</a>) is a
                Kanban-style view of all active jobs, sorted by priority and status. It is the best view for
                supervisors who need to triage work and decide what gets done first. Rush and Urgent jobs are
                highlighted prominently.
            </p>
        </section>

        <section id="part-intake" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-box-seam text-primary me-2"></i>Part Intake
            </h2>
            <p>
                The <strong>Part Intake</strong> workflow lets you formally check in a customer's parts at
                drop-off — before any work begins. This creates a timestamped record of how many pieces
                arrived, their condition, and who received them, which protects the shop if a customer later
                disputes pre-existing damage or a missing piece.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">How to record an intake</h3>
            <ol class="mb-3">
                <li class="mb-2">Open the <strong>Job Details</strong> page for the job.</li>
                <li class="mb-2">Click the <strong>Intake</strong> button in the top-right button group. The button is highlighted in blue when intake has not yet been recorded, and shows a checkmark (Intake ✓) once complete.</li>
                <li class="mb-2">
                    On the intake form you will see:
                    <ul class="mt-1">
                        <li>A <strong>Job Summary</strong> card showing expected part count (from line items), due date, and any special instructions.</li>
                        <li><strong>Actual Part Count</strong> — enter the number of pieces physically received. If this differs from the expected count, a warning appears prompting you to note the discrepancy.</li>
                        <li><strong>Condition Notes</strong> — describe the condition of the parts (existing scratches, rust, missing hardware, special handling requirements, etc.).</li>
                        <li><strong>Advance to In Preparation</strong> — toggle on to automatically move the job status to <em>In Preparation</em> at the same time. Leave off if the customer is dropping parts off early and work hasn't started yet.</li>
                        <li><strong>Before Photos</strong> — upload photos documenting the condition at drop-off. Photos are saved as "Before" type on the job and appear in the Photos section of Job Details.</li>
                    </ul>
                </li>
                <li class="mb-2">Click <strong>Complete Intake</strong>.</li>
            </ol>

            <h3 class="h6 fw-semibold mt-3 mb-2">Viewing intake records</h3>
            <p>
                Once an intake is recorded, the <strong>Part Intake</strong> card on the Job Details page shows
                the check-in date and time, who performed the intake, the actual part count, and any condition
                notes. You can update an existing intake at any time by clicking the <strong>Edit</strong> link
                in that card.
            </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 intake form is optimised for use on a tablet at the front desk — the layout is
                    touch-friendly and the photo upload works directly from a tablet camera.
                </div>
            </div>
        </section>

        <section id="shop-mobile" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-phone text-primary me-2"></i>Shop Mobile
            </h2>
            <p>
                <strong>Shop Mobile</strong> (<a href="/Jobs/ShopMobile">/Jobs/ShopMobile</a>) is a
                phone and tablet-optimised view of all active jobs, designed for workers on the shop floor.
                Unlike the Shop Display (which is a passive TV view) and the full desktop UI, Shop Mobile is
                built for one-handed use — large touch targets, no sidebar, and instant status advancement
                with a single tap.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">What you see</h3>
            <p>Jobs are grouped by their current status stage and ordered by due date. Each job card shows:</p>
            <ul class="mb-3">
                <li>A <strong>priority colour strip</strong> on the left edge (green = Low, blue = Normal, orange = High, red = Urgent, purple = Rush)</li>
                <li>Job number, customer name, and piece count</li>
                <li>Assigned worker, sandblasting/masking flags, and due date</li>
                <li>Line items (up to 3 shown; tap the details button for the full list)</li>
                <li>Powder colours</li>
                <li>Special instructions (amber callout — hard to miss)</li>
                <li>An <strong>intake indicator</strong> — a green box icon means parts were checked in; an amber box icon means intake is still pending (tap it to go directly to the intake form)</li>
                <li>An <strong>overdue badge</strong> when the due date has passed</li>
            </ul>

            <h3 class="h6 fw-semibold mt-3 mb-2">Advancing a job status</h3>
            <p>
                Each card has a large <strong>Advance to [Next Status]</strong> button. Tap it to move the
                job to its next stage. The button shows a spinner while saving, then the page reloads with the
                updated status. No login to a desktop required.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Filtering by worker</h3>
            <p>
                Tap any worker chip in the filter bar at the top to show only jobs assigned to that person.
                Tap <strong>All</strong> to return to the full list.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Auto-refresh</h3>
            <p>
                The page automatically refreshes every 60 seconds so workers always see the current state
                without manually reloading. The green pulsing dot in the header indicates auto-refresh is active.
            </p>

            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-phone flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Tip:</strong> Add Shop Mobile to your phone's home screen using your browser's
                    "Add to Home Screen" option for quick one-tap access every morning.
                    Navigate to <a href="/Jobs/ShopMobile">/Jobs/ShopMobile</a> in your mobile browser, then use the share menu to save it.
                </div>
            </div>
        </section>

        <section id="changing-customer" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-person-gear text-primary me-2"></i>Changing the Customer
            </h2>
            <p>
                The customer on a job can be changed at any time from the Job Details page — no need to
                delete and re-create the job. This is useful when:
            </p>
            <ul class="mb-3">
                <li class="mb-1">A job was created under the <em>Walk-In / Phone</em> placeholder and the real customer is added later.</li>
                <li class="mb-1">A job was accidentally assigned to the wrong customer.</li>
                <li class="mb-1">A job converted from a quote needs to be moved to a different customer record.</li>
            </ul>

            <h3 class="h6 fw-semibold mt-3 mb-2">How to change the customer</h3>
            <ol class="mb-3">
                <li class="mb-2">Open the job from <strong>Operations &rsaquo; Jobs</strong> and go to its Details page.</li>
                <li class="mb-2">Find the <strong>Customer</strong> field in the job header — it appears as a dropdown showing the current customer.</li>
                <li class="mb-2">Select a different customer from the dropdown.</li>
                <li class="mb-2">A confirmation banner appears: <em>"Change customer to [Name]?"</em> — click <strong>Save</strong> to confirm or <strong>Cancel</strong> to revert.</li>
            </ol>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                <div>
                    The customer can also be changed on the <strong>Edit Job</strong> page using the Customer
                    dropdown there. Any invoices or deposits already linked to the job are not automatically
                    moved — update those separately if needed.
                </div>
            </div>
        </section>

        <section id="work-order-qr-codes" 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>Work Order QR Codes
            </h2>
            <p>
                Every printed job work order includes two tiers of QR codes — one for <strong>viewing</strong>
                the job and a separate set for <strong>acting</strong> on it. This gives shop workers everything
                they need from a printed sheet without touching the desktop app.
                All QR codes require a logged-in account.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2"><i class="bi bi-eye me-1"></i>Top QR — View Job</h3>
            <p>
                Located in the work order header, next to the job number. Scan it with your phone to open the
                full <strong>Job Details</strong> page — items, catalog product images, powder specs, coatings,
                prep services, and special instructions. Use it to verify you're working the right job or to
                see catalog item images on your phone without hunting through the app.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2"><i class="bi bi-arrow-right-circle me-1"></i>Bottom QR — Update Status</h3>
            <p>
                Scan to open a mobile-friendly status bump page for this job. Tap the button to advance to the
                next stage (or put the job on hold). The status change is recorded in history with your name —
                no anonymous bumps.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2"><i class="bi bi-box-seam me-1"></i>Bottom QR &mdash; Log Powder Usage</h3>
            <p>
                One QR per unique powder on the job. Scanning opens the inventory usage log page pre-filled
                with that powder and the job number, so you can record actual lbs used in seconds without
                navigating through the app.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2"><i class="bi bi-droplet-half me-1"></i>Logging Material Usage from a PC</h3>
            <p>
                You don&rsquo;t need a phone or QR code to log material usage. On the Job Details page, expand the
                <strong>Materials Used</strong> section and click <strong>Log Material</strong>. A modal opens where you can:
            </p>
            <ul class="mb-2">
                <li>Select any inventory item from a searchable dropdown &mdash; the item&rsquo;s current stock level is shown when you pick it.</li>
                <li>Choose <strong>Amount Used</strong> (enter how much was consumed) or <strong>Amount Remaining</strong> (enter what&rsquo;s left in the bag &mdash; the system calculates the usage automatically).</li>
                <li>Pick a reason: <em>Job Usage</em> or <em>Waste / Spillage</em>.</li>
                <li>Add optional notes.</li>
            </ul>
            <p>
                Saving immediately reduces the item&rsquo;s stock on hand and creates an entry in the Inventory Activity ledger, exactly like a QR scan would. The QR scan icon is still available next to the button for mobile workers.
            </p>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lock flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Login required:</strong> All three QR codes require workers to be logged in to their
                    account. Logging in once on their phone is enough for the session. Make sure every shop
                    floor worker has an account set up before handing out printed work orders.
                </div>
            </div>
        </section>

        <section id="blank-work-order" class="mb-5">
            <h2 class="h5 fw-semibold mb-3">Blank Work Order</h2>
            <p>
                The Blank Work Order feature lets you instantly print a pre-formatted paper work order to hand to a
                customer at drop-off — before a digital job record has been created. It uses your company logo,
                address, and customizable terms so it looks professional right out of the box.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">How to print a blank work order</h3>
            <ol>
                <li>Go to <strong>Jobs</strong> in the sidebar.</li>
                <li>Click the <strong><i class="bi bi-printer"></i> Blank Work Order</strong> button in the top-right toolbar (next to the Jobs Board button).</li>
                <li>A PDF opens in a new browser tab — print it or save it to PDF.</li>
            </ol>
            <p>You can also navigate directly to <a href="/WorkOrder/Blank">/WorkOrder/Blank</a> to open the PDF at any time.</p>

            <h3 class="h6 fw-semibold mt-3 mb-2">What's on the work order</h3>
            <ul>
                <li>Your company logo and address in the header</li>
                <li>A <strong>Drop Off Date</strong> field opposite the "WORK ORDER" title</li>
                <li>Client Name, Client Phone, and Due Date fields</li>
                <li>12-row parts table with columns for Part Description, Color, and Quote</li>
                <li>A Notes box for special instructions</li>
                <li>Your customizable Terms &amp; Conditions text</li>
                <li>A Customer Signature line with Date</li>
            </ul>

            <h3 class="h6 fw-semibold mt-3 mb-2">Customizing the work order</h3>
            <p>
                Go to <strong>Company Settings → PDF Templates → Work Order</strong> to customize:
            </p>
            <ul>
                <li><strong>Accent Color</strong> — the color used for table headers, the title bar, and section labels. Defaults to dark gray.</li>
                <li><strong>Terms &amp; Conditions</strong> — up to 2,000 characters of text printed in italic below the notes box. Use this for your shop's standard policies, liability disclaimer, or payment terms.</li>
            </ul>
            <p>Click <strong>Save</strong> to apply changes, or <strong>Preview</strong> to open the PDF instantly without saving.</p>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Tip:</strong> Print a stack of blank work orders and keep them at your front counter. When a customer drops off parts, fill one out by hand and staple it to their receipt. Once you create the digital job, attach the signed copy as a photo for your records.
                </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="#creating-a-job">Creating a Job</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#job-status">Job Status</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#job-priority">Job Priority</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#job-items">Job Items</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#converting-from-quote">Converting from a Quote</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#creating-an-invoice">Creating an Invoice</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#photos-notes">Photos and Notes</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#time-and-rework">Time Entries and Rework</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#job-templates">Job Templates</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#shop-display-and-board">Shop Display &amp; Priority Board</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#part-intake">Part Intake</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#shop-mobile">Shop Mobile</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#changing-customer">Changing the Customer</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#work-order-qr-codes">Work Order QR Codes</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#blank-work-order">Blank Work Order</a>
                </nav>
            </div>
        </div>
    </div>
</div>