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

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

<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">Quotes</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>
                Quotes let you provide customers and prospects with a formal price estimate before work begins.
                The quoting engine calculates material costs, labor, equipment time, overhead, and profit margin
                automatically based on the surface area and complexity you enter &mdash; no spreadsheet required.
            </p>
            <p>
                Quotes can be created for existing customers or for <strong>prospects</strong> &mdash; people or
                businesses who have not yet become customers. Prospect quotes let you capture all contact details
                and pricing in one place so nothing is lost while you are waiting for a decision. If the prospect
                accepts, you can convert them to a customer and the quote to a job in just a few clicks.
            </p>
            <p>
                You can find Quotes under <strong>Operations &rsaquo; Quotes</strong> in the left sidebar.
                The list is searchable by quote number or customer name, and filterable by status.
            </p>
        </section>

        <section id="creating-a-quote" 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 Quote
            </h2>

            <h3 class="h6 fw-semibold mt-0 mb-2"><i class="bi bi-lightning me-1 text-primary"></i>Quick Quote vs Full Quote</h3>
            <p>
                The quote form offers two modes, selectable via the <strong>Quick Quote / Full Quote</strong> toggle at the
                top of the page. Your selection is remembered automatically for next time.
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Quick Quote</strong> &mdash; shows only the essentials: customer picker (or walk-in info) and
                the item wizard. Dates, notes, tags, oven settings, discounts, and photos are hidden. Use this for
                fast phone or counter estimates where you just need a price.</li>
                <li class="mb-1"><strong>Full Quote</strong> &mdash; shows the complete form with all fields. Use this for formal
                quotes where you want to capture notes, set an expiry date, apply a discount, or add photos.</li>
            </ul>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    Switching to Quick Quote does not change how the quote saves &mdash; all pricing calculations and the item
                    wizard work exactly the same. Hidden fields use their default values (no rush fee, no discount, company
                    default tax rate).
                </div>
            </div>

            <p>To create a new quote:</p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Operations &rsaquo; Quotes</strong> and click <strong>New Quote</strong>.</li>
                <li class="mb-2">
                    Choose whether this quote is for an existing <strong>Customer</strong> or a <strong>Prospect</strong>:
                    <ul class="mt-1">
                        <li><strong>Customer</strong> &mdash; select from your existing customer list. The customer's pricing tier discount is applied automatically.</li>
                        <li><strong>Prospect</strong> &mdash; enter their first name, last name, company name (optional), email, and phone. These details are stored on the quote and can be used to create a customer record later.</li>
                    </ul>
                </li>
                <li class="mb-2">Set the <strong>Quote Date</strong> (defaults to today) and the <strong>Expiry Date</strong> (defaults to the system's configured validity period).</li>
                <li class="mb-2">Add a <strong>Subject</strong> or description to identify the work being quoted.</li>
                <li class="mb-2">Optionally enter a <strong>Project Name</strong> &mdash; a short label that groups related work (e.g., &ldquo;Fleet Refresh Q2&rdquo;). It appears on the quote PDF and carries over to the job and invoice when converted.</li>
                <li class="mb-2">Add one or more <strong>Line Items</strong> &mdash; see the Quote Items section below for item types.</li>
                <li class="mb-2">Add any <strong>Notes</strong> for the customer (these appear on the printed quote).</li>
                <li class="mb-2">Add any internal <strong>Notes</strong> that are for your team only.</li>
                <li class="mb-2">Click <strong>Save Quote</strong>. The quote is saved as a Draft.</li>
            </ol>
            <p>
                The system automatically generates a unique quote number in the format <code>QT-YYMM-####</code>
                (for example, <code>QT-2503-0015</code>).
            </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>
                    You can save a quote as a Draft and come back to it later. Drafts are not visible to customers
                    and do not count as sent until you explicitly click <strong>Send Quote</strong>.
                </div>
            </div>
        </section>

        <section id="quote-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>Quote Items
            </h2>
            <p>
                Each line item on a quote describes a distinct piece or group of parts to be coated. Items are
                added using the item wizard, which walks you through selecting the type, entering details, and
                choosing coatings and prep services. The total price updates in real time as you enter information.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Item Types</h3>
            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <div class="card border-primary border-opacity-25 h-100">
                        <div class="card-header bg-primary bg-opacity-10 fw-semibold small">
                            <i class="bi bi-bag-check me-1"></i> Product from Catalog
                        </div>
                        <div class="card-body small">
                            Pick a pre-priced item from your catalog. Price is fixed &mdash; no surface-area
                            calculation. Best for recurring services or parts with a known flat price.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-success border-opacity-25 h-100">
                        <div class="card-header bg-success bg-opacity-10 fw-semibold small">
                            <i class="bi bi-rulers me-1"></i> Calculated
                        </div>
                        <div class="card-body small">
                            Enter the surface area in square feet, quantity, and complexity. The system calculates
                            material cost, labor, and equipment time automatically. Choose one or more coatings
                            and optional prep services. Best for standard powder coating work where you know the dimensions.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-warning border-opacity-25 h-100">
                        <div class="card-header bg-warning bg-opacity-10 fw-semibold small">
                            <i class="bi bi-tag me-1"></i> Flat-Rate Charge
                        </div>
                        <div class="card-body small">
                            Enter a description and set a fixed price manually. Use for setup charges, handling
                            fees, or custom work that doesn&rsquo;t fit the surface-area model. Optionally enable
                            <strong>Specify powder coating</strong> to record the color and track powder ordering
                            &mdash; price stays flat regardless.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-info border-opacity-25 h-100">
                        <div class="card-header bg-info bg-opacity-10 fw-semibold small">
                            <i class="bi bi-person-gear me-1"></i> Labor Only
                        </div>
                        <div class="card-body small">
                            Bill by the hour at your standard labor rate. Enter billable hours (minimum
                            0.25&nbsp;hr). No surface area, no coating step. Use for prep work, assembly,
                            or any time-based charge.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-secondary border-opacity-25 h-100">
                        <div class="card-header bg-secondary bg-opacity-10 fw-semibold small">
                            <i class="bi bi-robot me-1"></i> AI Photo Quote
                        </div>
                        <div class="card-body small">
                            Upload photos of the parts and let the AI estimate the surface area and complexity.
                            Returns a suggested surface area, complexity rating, estimated minutes, and confidence
                            score. You can review and override any value before accepting. Up to two follow-up
                            rounds supported.
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-secondary border-opacity-25 h-100">
                        <div class="card-header bg-secondary bg-opacity-10 fw-semibold small">
                            <i class="bi bi-calculator me-1 text-purple"></i> Custom Formula
                        </div>
                        <div class="card-body small">
                            Use a reusable formula template (set up in Company Settings) to calculate price from
                            exact measurements &mdash; e.g. a 6-sided box by length, width, and height. Staff
                            enter the measurements; the formula does the math.
                        </div>
                    </div>
                </div>
            </div>

            <h3 class="h6 fw-semibold mt-3 mb-2">Selecting a Product from Catalog</h3>
            <p>
                When you choose the <strong>Product from Catalog</strong> item type, the wizard shows a scrollable
                list of all your active catalog items with a search box at the top. Start typing any part of the
                item name, SKU, or category to filter the list instantly.
            </p>
            <p>
                If an image has been uploaded for a catalog item, a small thumbnail appears to the left of its
                name in the list. <strong>Hover over the thumbnail</strong> to see a larger preview near your
                cursor &mdash; useful for quickly confirming you have the right part without opening the full item record.
            </p>
            <p>
                Images are managed on the <a href="/CatalogItems">Catalog Items</a> page &mdash; open any item, click
                <strong>Edit</strong>, and use the <strong>Item Image</strong> section to upload a photo
                (jpg, jpeg, png, gif, or webp; max 10 MB). A 200&times;200 thumbnail is generated automatically.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Coatings and Prep Services</h3>
            <p>
                For <strong>Calculated</strong> and <strong>AI Photo</strong> items, after entering the surface area
                you proceed to the coatings step. Select one or more powder coatings from your inventory. The wizard
                shows how much powder will be needed per coat based on the coverage rate and your surface area.
                You then choose any prep services &mdash; sandblasting, masking, and/or cleaning &mdash; that will
                be performed before coating.
            </p>
            <p>
                <strong>Flat-Rate Charge</strong> items can also optionally specify powder coating: enable the
                <strong>Specify powder coating</strong> toggle on step 2 of the wizard. This opens the same
                coating layer step so you can record the color, order quantity, and cost per lb for powder
                tracking and ordering purposes &mdash; the item&rsquo;s flat price is not affected. Enter the
                <strong>Color Name</strong> field so the color appears on the quote and in the Custom Powder
                Order description.
            </p>

            <h3 class="h6 fw-semibold mt-4 mb-2"><i class="bi bi-truck me-1 text-warning"></i>Custom Powder Order</h3>
            <p>
                When a coat uses a <strong>custom powder</strong> (you enter a cost per lb manually without selecting
                an inventory item) or an <strong>incoming powder</strong> (a color you need to order that is not yet
                in stock), the powder material cost is <strong>not</strong> added to the individual item price.
                Instead, the system auto-generates a separate <strong>Custom Powder Order</strong> line item that
                collects all ordering costs in one place &mdash; so you can include shipping and freight before
                presenting the quote to the customer.
            </p>
            <ul class="mb-3">
                <li class="mb-2">
                    While building the quote, a dashed yellow <strong>Powder Order</strong> preview card appears
                    below the item cards showing the calculated material cost. The price field is editable &mdash;
                    type the total you want to charge (material&nbsp;+&nbsp;any shipping) before saving.
                </li>
                <li class="mb-2">
                    On the saved quote, the Custom Powder Order appears as its own line item with the color
                    name(s) in the description (e.g. <em>Custom Powder Order (Gloss Black, Satin Silver)</em>).
                </li>
                <li class="mb-2">
                    A yellow banner on the Quote Details page reminds you when a Custom Powder Order is present
                    so you don&rsquo;t forget to confirm the shipping amount.
                </li>
                <li>
                    The Custom Powder Order is created <strong>once</strong> on first save. After that the price
                    is yours &mdash; the system will not overwrite it on subsequent saves.
                </li>
                <li>
                    <strong>Always fill in the Color Name</strong> field in the coating layer. The color name
                    appears in the Custom Powder Order description (e.g. <em>Custom Powder Order (Gloss Black)</em>)
                    and in the quote details. If you typed the color name into the catalog search box and did not
                    select a result, the wizard automatically copies it to the Color Name field when you tab away.
                </li>
            </ul>

            <h3 class="h6 fw-semibold mt-3 mb-2">Save to Product Catalog</h3>
            <p>
                After completing the prep services step, Calculated and AI Photo items display one final step:
                <strong>Save to Product Catalog?</strong> This lets you add the item directly to your catalog
                so it can be reused on future quotes and jobs without re-entering all the details.
            </p>
            <ul>
                <li>The item <strong>Name</strong> is pre-filled from your description (or the AI-generated description for AI Photo items).</li>
                <li>The <strong>Default Price</strong> is pre-filled with the accepted price for AI Photo items. For Calculated items, enter a fixed catalog price (the system-calculated price varies by dimensions, so a flat catalog price is set by you).</li>
                <li>Choose a <strong>Category</strong> from your existing catalog categories.</li>
                <li>Optionally add or edit a <strong>Description</strong> and flag whether the item typically requires sandblasting or masking.</li>
                <li>Click <strong>Save to Catalog &amp; Add</strong> to save the item to the catalog and add it to the quote simultaneously.</li>
                <li>Click <strong>Skip &mdash; Add to Quote Only</strong> to add the item to this quote without saving it to the catalog.</li>
            </ul>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Catalog item prices are final.</strong> When a catalog item is added to a quote or job,
                    the price you entered is used exactly as-is &mdash; no markup, no prep service charges, and no
                    complexity adjustments are added on top. Make sure the price you save already includes your
                    labor, materials, and margin.
                </div>
            </div>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-bookmark-star-fill flex-shrink-0 mt-1"></i>
                <div>
                    The catalog save happens <strong>immediately</strong> &mdash; the item is added to your catalog even
                    if you later abandon the quote. This is intentional: once you take the time to describe and
                    price a part, it's worth keeping for next time. Manage saved items at
                    <a href="/CatalogItems">Catalog Items</a>.
                </div>
            </div>

            <div class="alert alert-permanent alert-warning d-flex gap-2 mt-3 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    The live pricing calculator at the bottom of the quote form updates the subtotal, discounts,
                    tax, and grand total every time you add or change a line item. There is no need to manually
                    recalculate &mdash; the total shown when you save is the total the customer will see.
                </div>
            </div>
        </section>

        <section id="inline-price-editing" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-pencil-square text-primary me-2"></i>Inline Price Editing
            </h2>
            <p>
                On the Quote Details page you can edit any item&rsquo;s unit price, quantity, or
                description directly in the table without opening the full Edit form.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Click a <strong>unit price</strong>, <strong>quantity</strong>, or <strong>description</strong> cell in the Items table. The cell turns into an input field.</li>
                <li class="mb-2">Type the new value.</li>
                <li class="mb-2">Press <kbd>Enter</kbd> or click outside the field to save. Press <kbd>Esc</kbd> to cancel without saving.</li>
            </ol>
            <p>
                The pricing summary (subtotal, discount, tax, and grand total) updates immediately
                &mdash; no page reload required.
            </p>
        </section>

        <section id="quote-statuses" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-tag text-primary me-2"></i>Quote Statuses
            </h2>
            <p>
                Quotes move through a series of statuses that reflect where they are in the approval process.
                Each status is shown as a color-coded badge on the quote list and details page.
            </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">Draft</span></td>
                            <td>The quote is being prepared. It has not been sent to the customer and can be edited freely.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-info text-dark">Sent</span></td>
                            <td>The quote has been delivered to the customer and is awaiting their response.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">Approved</span></td>
                            <td>The customer has accepted the quote and authorised the work. Ready to convert to a job.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-danger">Rejected</span></td>
                            <td>The customer has declined the quote. Useful to track win/loss rates over time.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Expired</span></td>
                            <td>The quote's validity period has passed without a customer decision. Pricing may need to be revised before resubmitting.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">Converted</span></td>
                            <td>The quote was approved and converted into a job. The quote is now linked to the resulting job record.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section id="sending-a-quote" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-send text-primary me-2"></i>Sending a Quote
            </h2>
            <p>
                Once a quote is saved as a Draft and you are happy with the pricing and details, you can send it
                to the customer via email or SMS, or both.
            </p>
            <h3 class="h6 fw-semibold mt-3 mb-2">Send via Email</h3>
            <ol class="mb-3">
                <li class="mb-2">Open the quote from the Quotes list and go to its Details page.</li>
                <li class="mb-2">Click <strong>Send Quote via Email</strong>. The status changes from Draft to Sent and a PDF is emailed to the customer with an approval link.</li>
                <li class="mb-2">If email notifications are configured for your company, the customer will automatically receive an email with the quote details.</li>
            </ol>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-bell-slash flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Customer notifications off:</strong> If a customer has email notifications turned off, the
                    <strong>Send quote via email</strong> checkbox on the Create page is automatically disabled and marked
                    with a <em>Notifications off</em> badge. The Send button on the Details page is also disabled.
                    To re-enable emails for this customer, open their record and turn on <strong>Notify by Email</strong>
                    under their contact settings.
                </div>
            </div>
            <h3 class="h6 fw-semibold mt-3 mb-2">Send via SMS</h3>
            <p>
                Click <strong>Send Quote via SMS</strong> on the Details page to text the customer a short message
                containing their quote total and a link to the self-service approval portal. The customer can open the
                link on their phone and approve or decline without logging in.
            </p>
            <ul class="mb-3">
                <li class="mb-1">The customer must have <strong>SMS Opt-In</strong> enabled and a <strong>Mobile Phone</strong> number on their record.</li>
                <li class="mb-1">If you already sent the quote via email, the same approval link is reused &mdash; both the email link and SMS link remain valid simultaneously.</li>
                <li class="mb-1">For prospect quotes, the SMS goes to the <strong>Prospect Phone</strong> field on the quote.</li>
            </ul>
            <p>
                You can also manually mark a quote as <strong>Approved</strong> or <strong>Rejected</strong> when
                you hear back from the customer verbally or by phone, without going through a formal email or SMS send.
                Use the status buttons on the quote Details page to do this.
            </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>
                    You can download a PDF of any quote to print or send via your own email client. Click the
                    <strong>Download PDF</strong> button on the quote Details page.
                </div>
            </div>
        </section>

        <section id="converting-to-job" 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>Converting to a Job
            </h2>
            <p>
                When a quote is in the <strong>Approved</strong> status, you can convert it to a job in one click.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the approved quote and go to its Details page.</li>
                <li class="mb-2">Click <strong>Convert to Job</strong>.</li>
                <li class="mb-2">
                    A new job is created automatically, pre-filled with:
                    <ul class="mt-1">
                        <li>All line items from the quote (surface areas, quantities, coatings, prep services)</li>
                        <li>The final pricing calculated on the quote</li>
                        <li>The customer the quote was linked to</li>
                    </ul>
                </li>
                <li class="mb-2">Set the job's scheduled date, priority, and assigned worker, then save.</li>
            </ol>
            <p>
                The quote status changes to <strong>Converted</strong> and a link to the new job appears on the
                quote Details page. The job record also shows which quote it originated from.
            </p>
        </section>

        <section id="prospect-conversion" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-person-check text-primary me-2"></i>Converting a Prospect to a Customer
            </h2>
            <p>
                If a quote was created for a prospect (not yet in your customer list) and they decide to go ahead,
                you can convert the prospect to a full customer record before converting the quote to a job.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the approved prospect quote.</li>
                <li class="mb-2">Click <strong>Convert Prospect to Customer</strong>.</li>
                <li class="mb-2">
                    The system opens a pre-filled customer creation form using the prospect's details from the
                    quote (name, company, email, phone). Review and complete any missing fields such as address,
                    customer type, or pricing tier.
                </li>
                <li class="mb-2">Save the new customer record.</li>
                <li class="mb-2">The quote is now linked to the new customer. You can then click <strong>Convert to Job</strong> as normal.</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>
                    Only <strong>Approved</strong> prospect quotes show the Convert Prospect to Customer button.
                    If the quote is still in Draft or Sent status, approve it first before converting.
                </div>
            </div>
        </section>

        <section id="customer-approval-portal" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-person-check text-primary me-2"></i>Customer Approval Portal
            </h2>
            <p>
                When you send a quote by email, the customer receives a link to a self-service approval portal
                at <strong>/QuoteApproval</strong>. No login is required &mdash; the link is unique to that quote.
            </p>
            <p>From the approval portal the customer can:</p>
            <ul class="mb-3">
                <li class="mb-1">View the full quote with pricing breakdown.</li>
                <li class="mb-1">Click <strong>Approve</strong> to accept the quote (status changes to Approved automatically).</li>
                <li class="mb-1">Click <strong>Reject</strong> with an optional reason.</li>
                <li class="mb-1">Pay a deposit online (if Stripe Connect is configured).</li>
            </ul>
            <p>
                When a customer approves or rejects via the portal, you receive a notification and the quote
                status updates in real time. You can then convert an approved quote to a job without needing
                to contact the customer.
            </p>
            <p>
                Approval links expire after the number of days configured in
                <strong>Settings &rsaquo; App Settings &rsaquo; Quote Approval Token Days</strong> (default: 30 days).
            </p>
        </section>

        <section id="deposits" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-piggy-bank text-primary me-2"></i>Deposits on Quotes
            </h2>
            <p>
                You can record a deposit against an approved quote from the Quote Details page using the
                <strong>Record Deposit</strong> button in the Deposits card. This is useful when a customer
                pays a deposit before you start work and before a job or invoice has been created.
            </p>
            <p>
                Deposits recorded on a quote carry over to the linked job automatically when you convert
                the quote. They are then applied as payments when an invoice is created from that job.
            </p>
        </section>

        <section id="ai-quick-quote" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-lightning-fill text-primary me-2"></i>AI Quick Quote
            </h2>
            <p>
                The <strong>AI Quick Quote</strong> widget lets you get an instant rough estimate from a verbal
                description &mdash; perfect for phone calls and walk-in customers when you don't have time to open the
                full quoting wizard. Look for the dark-blue floating button in the bottom-right corner of any page,
                just above the AI Help button.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">How to use it</h3>
            <ol class="mb-3">
                <li class="mb-2">Click the <strong>AI Quick Quote</strong> floating button (bottom-right, dark blue with a lightning bolt icon).</li>
                <li class="mb-2">
                    Type a description of the work &mdash; for example:<br>
                    <em>"4 motorcycle wheels in Alien Silver with a black base coat, need sandblasting"</em>
                </li>
                <li class="mb-2">Set the <strong>Quantity</strong> and <strong>Number of Coats</strong>.</li>
                <li class="mb-2">Click <strong>Get Estimate</strong>. The AI analyses your description and returns a price estimate, estimated minutes, surface area, complexity rating, and a confidence score in just a few seconds.</li>
                <li class="mb-2">
                    The panel also shows <strong>powder stock status</strong> for any color names detected in your description &mdash; a green check means you have it in stock, red means you don't, and a grey question mark means the system couldn't match it.
                </li>
                <li class="mb-2">If the estimate looks right, enter an optional <strong>Customer Reference</strong> (e.g., the caller's name) and click <strong>Save as Draft Quote</strong>. You land directly on the new quote's Details page where you can adjust anything and assign the real customer.</li>
            </ol>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    Quick quotes are saved under a <strong>"Walk-In / Phone"</strong> customer so nothing blocks you from saving immediately. Once you have the customer's information, reassign the quote using the Customer dropdown on the Quote Details page &mdash; see <em>Changing the Customer</em> below.
                </div>
            </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>
                    The Quick Quote gives a rough estimate only &mdash; it uses your shop's operating costs and the AI's
                    interpretation of your description. For formal quotes that will be sent to a customer, always
                    open the quote and verify the details using the full item wizard before sending.
                </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 quote can be changed at any time from the Quote Details page &mdash; no need to
                delete and re-create the quote. This is particularly useful when:
            </p>
            <ul class="mb-3">
                <li class="mb-1">A quote was saved under the <em>Walk-In / Phone</em> placeholder and the real customer record is created later.</li>
                <li class="mb-1">A quote was accidentally assigned to the wrong customer.</li>
                <li class="mb-1">A prospect quote needs to be reassigned after the prospect becomes a customer.</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 quote from <strong>Operations &rsaquo; Quotes</strong> and go to its Details page.</li>
                <li class="mb-2">Find the <strong>Customer</strong> field in the quote header &mdash; 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> &mdash; click <strong>Save</strong> to confirm or <strong>Cancel</strong> to revert to the original.</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 Quote</strong> page using the Customer
                    dropdown there. If the quote was originally for a prospect, switching to a customer record
                    automatically clears the prospect fields.
                </div>
            </div>
        </section>

        <section id="pricing-breakdown" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-bar-chart text-primary me-2"></i>Understanding the Pricing Breakdown
            </h2>
            <p>
                On the Quote Details page, a full pricing breakdown section shows exactly how the grand total was
                calculated. This transparency is useful when explaining pricing to customers and when reviewing
                whether your rates are covering costs. The breakdown includes:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Material Costs</strong> &mdash; powder and consumables cost based on surface area and the configured cost-per-sq-ft rate.</li>
                <li class="mb-1"><strong>Shop Supplies</strong> &mdash; a small percentage of material and labor costs covering miscellaneous shop consumables (tape, abrasives, etc.).</li>
                <li class="mb-1"><strong>Labor Costs</strong> &mdash; base labor calculated from estimated job minutes. Sandblasting prep is charged at 1.5× the standard labor rate; masking at 0.5×. Additional coats beyond the first are charged at the configured additional coat labor percentage.</li>
                <li class="mb-1"><strong>Equipment Costs</strong> &mdash; hourly rates for the curing oven, sandblaster, and coating booth, applied for the estimated time each piece of equipment is in use.</li>
                <li class="mb-1"><strong>Complexity Adjustment</strong> &mdash; a percentage added based on the item's complexity rating (Simple, Moderate, Complex, or Extreme). Simple items have no adjustment; Extreme items can add 25% or more.</li>
                <li class="mb-1"><strong>General Markup</strong> &mdash; your configured profit percentage applied to the cost subtotal. The exact formula depends on the <em>Pricing Mode</em> set in Company Settings: <em>Markup on Materials</em> adds the percentage on top of costs; <em>Target Margin on Total Cost</em> back-calculates price from a gross-margin target.</li>
                <li class="mb-1"><strong>Rush Charge</strong> &mdash; applied automatically to jobs with Rush or Urgent priority, either as a percentage or a fixed amount depending on your settings.</li>
                <li class="mb-1"><strong>Pricing Tier Discount</strong> &mdash; if the customer has a pricing tier assigned (e.g., Preferred Shop &mdash; 10% off), the discount is shown as a line item reduction. See <em>Hide Discount from Customer</em> below to control whether this line appears on the customer-facing PDF.</li>
                <li class="mb-1"><strong>Tax</strong> &mdash; the configured tax rate applied to the final subtotal. Zero for tax-exempt customers.</li>
                <li class="mb-1"><strong>Grand Total</strong> &mdash; the amount the customer will be invoiced.</li>
            </ul>

            <h3 class="h6 fw-semibold mt-4 mb-2">Per-Item Cost Breakdown</h3>
            <p>
                Each line item on the Quote Details page can be expanded to show a cost breakdown for that
                individual item &mdash; click the row to open it. The per-item breakdown shows how material, labor,
                equipment, complexity, and markup were calculated for that specific piece. This is useful for
                spotting underpriced items or understanding where costs are concentrated across a multi-item quote.
            </p>

            <h3 class="h6 fw-semibold mt-4 mb-2">Hide Discount from Customer</h3>
            <p>
                When creating or editing a quote, you can check <strong>Hide Discount from Customer</strong>.
                When this option is enabled:
            </p>
            <ul class="mb-3">
                <li class="mb-1">The pricing tier discount line is <strong>not shown</strong> on the customer-facing quote PDF or on the online approval portal.</li>
                <li class="mb-1">The discount is <strong>still applied</strong> to the total &mdash; the customer pays the discounted price, they just don&rsquo;t see the discount as a separate line item.</li>
                <li class="mb-1">The full breakdown (including the discount) remains visible to your staff on the internal Quote Details page.</li>
            </ul>
            <p>
                Use this when you want to honor a negotiated rate or volume discount without advertising
                your tier structure to the customer.
            </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>
                    All rates used in the breakdown &mdash; labor, equipment, markup, shop supplies, complexity multipliers,
                    rush charge, and tax &mdash; are configured in <strong>Settings &rsaquo; Company Settings &rsaquo; Operating Costs</strong>.
                    See the <a asp-controller="Help" asp-action="Settings">Settings help page</a> for details on Pricing Mode and all rate settings.
                </div>
            </div>
        </section>

        <section id="revision-history" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-clock-history text-primary me-2"></i>Revision History
            </h2>
            <p>
                Every change made to a quote after it is created is recorded in a <strong>Revision History</strong> timeline
                at the bottom of the Quote Details page. The timeline groups changes from the same save into a single
                entry so you can scan what changed in each revision at a glance.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">What is tracked</h3>
            <ul class="mb-3">
                <li class="mb-1"><strong>Total price changes</strong> &mdash; whenever a save changes the grand total, the old and new amounts appear as a badge on the revision entry.</li>
                <li class="mb-1"><strong>Status changes</strong> &mdash; every status transition (Draft &rarr; Sent, Sent &rarr; Approved, etc.) is recorded with the old and new status names.</li>
                <li class="mb-1"><strong>Sent events</strong> &mdash; each time a quote email is sent or resent to a customer, a &ldquo;Sent to customer&rdquo; entry is added showing the recipient email address.</li>
                <li class="mb-1"><strong>Approval</strong> &mdash; when a quote is approved (by staff or by the customer via the approval portal), the approver&rsquo;s name is recorded.</li>
                <li class="mb-1"><strong>Line item changes</strong> &mdash; items added, removed, or modified (description, quantity, unit price, surface area) are each logged.</li>
                <li class="mb-1"><strong>Field edits</strong> &mdash; changes to quote date, expiration date, terms, notes, tax percent, and discount are tracked individually.</li>
            </ul>

            <h3 class="h6 fw-semibold mt-3 mb-2">Reading the timeline</h3>
            <p>
                Each timeline entry shows an icon indicating the type of event:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><i class="bi bi-envelope-check-fill text-primary me-1"></i><strong>Blue envelope</strong> &mdash; quote was emailed to the customer.</li>
                <li class="mb-1"><i class="bi bi-check-circle-fill text-success me-1"></i><strong>Green check</strong> &mdash; quote was approved.</li>
                <li class="mb-1"><i class="bi bi-x-circle-fill text-danger me-1"></i><strong>Red X</strong> &mdash; quote was rejected or declined.</li>
                <li class="mb-1"><i class="bi bi-arrow-right-circle-fill text-purple me-1"></i><strong>Purple arrow</strong> &mdash; quote was converted to a job.</li>
                <li class="mb-1"><i class="bi bi-pencil-fill text-secondary me-1"></i><strong>Grey pencil</strong> &mdash; general edit (field or line item changes).</li>
            </ul>
            <p>
                If the total price changed in a revision, a badge showing <em>old &rarr; new</em> appears inline in the
                revision header so pricing history is visible without expanding the detail lines.
            </p>
        </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-quote">Creating a Quote</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#quote-items">Quote Items</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#quote-statuses">Quote Statuses</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#sending-a-quote">Sending a Quote</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#converting-to-job">Converting to a Job</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#prospect-conversion">Converting a Prospect</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#customer-approval-portal">Approval Portal</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#deposits">Deposits</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#ai-quick-quote">AI Quick Quote</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="#pricing-breakdown">Pricing Breakdown</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#revision-history">Revision History</a>
                </nav>
            </div>
        </div>
    </div>
</div>