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

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

<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">Customers</li>
        </ol>
    </nav>
</div>

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

        <section id="overview" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-info-circle text-primary me-2"></i>Overview
            </h2>
            <p>
                The Customers section is the starting point for all work in the shop. Every quote, job, and invoice
                belongs to a customer record. Keeping your customer list accurate and up to date ensures you can
                quickly pull up a customer's full history — all their past jobs, outstanding quotes, and unpaid
                invoices in one place.
            </p>
            <p>
                You can find Customers under <strong>Operations &rsaquo; Customers</strong> in the left sidebar.
                The list is searchable and sortable. Use the search box at the top of the list to find a customer
                by name, email, or phone number.
            </p>
        </section>

        <section id="customer-types" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-diagram-2 text-primary me-2"></i>Customer Types
            </h2>
            <p>
                When creating a customer you must choose one of two types. This affects how the customer appears
                in reports and how pricing tiers are applied.
            </p>

            <div class="row g-3">
                <div class="col-md-6">
                    <div class="card border-primary border-opacity-25 h-100">
                        <div class="card-header bg-primary bg-opacity-10 fw-semibold">
                            <i class="bi bi-building me-1"></i> Commercial
                        </div>
                        <div class="card-body">
                            <p class="card-text small mb-0">
                                Use this for businesses — auto body shops, fabricators, manufacturers, or any company
                                that sends you work regularly. Commercial customers can have a <strong>pricing tier</strong>
                                applied (e.g., volume discounts) and a <strong>credit limit</strong> set. They typically
                                have a company name in addition to a contact person.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-secondary border-opacity-25 h-100">
                        <div class="card-header bg-secondary bg-opacity-10 fw-semibold">
                            <i class="bi bi-person me-1"></i> Non-Commercial
                        </div>
                        <div class="card-body">
                            <p class="card-text small mb-0">
                                Use this for individuals — homeowners who bring in patio furniture, hobbyists with
                                motorcycle parts, or anyone who is not representing a business. Non-commercial customers
                                typically do not have a company name and are priced at standard retail rates.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="adding-a-customer" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-person-plus text-primary me-2"></i>Adding a Customer
            </h2>
            <p>Follow these steps to add a new customer:</p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Operations &rsaquo; Customers</strong> and click the <strong>New Customer</strong> button in the top-right corner.</li>
                <li class="mb-2">Choose the <strong>Customer Type</strong> — Commercial or Non-Commercial.</li>
                <li class="mb-2">
                    Fill in the customer details:
                    <ul class="mt-1">
                        <li><strong>Company Name</strong> — required for Commercial customers.</li>
                        <li><strong>Contact Name</strong> — the person you deal with day to day.</li>
                        <li><strong>Email</strong> — used for quote and invoice notifications.</li>
                        <li><strong>Phone</strong> — primary contact number.</li>
                        <li><strong>Mobile Phone</strong> — used for SMS notifications. Required if you want to text this customer.</li>
                        <li><strong>SMS Opt-In</strong> — check this only after you have obtained the customer's consent to receive text messages. Visible only when SMS is enabled for your company.</li>
                        <li><strong>Address</strong> — billing and shipping address fields.</li>
                    </ul>
                </li>
                <li class="mb-2">For Commercial customers, optionally set a <strong>Pricing Tier</strong> and <strong>Credit Limit</strong>.</li>
                <li class="mb-2">Add any <strong>Notes</strong> that your team should know about this customer (e.g., "Requires 48-hour advance notice before pickup").</li>
                <li class="mb-2">Click <strong>Save Customer</strong>.</li>
            </ol>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    You can also create a customer automatically when converting an approved prospect quote. The
                    system pre-fills the customer form with the prospect's details from the quote.
                </div>
            </div>
        </section>

        <section id="editing-a-customer" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-pencil text-primary me-2"></i>Editing a Customer
            </h2>
            <p>
                To update a customer's details, find the customer in the list and click their name to open the
                Details page. Then click the <strong>Edit</strong> button (pencil icon) in the top-right corner
                of the details page.
            </p>
            <p>
                You can also click the <i class="bi bi-pencil"></i> icon directly in the customer list to jump
                straight to the edit form.
            </p>
            <p>
                All fields can be updated at any time. Changes take effect immediately and are reflected on all
                linked jobs, quotes, and invoices.
            </p>
        </section>

        <section id="customer-details" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-card-text text-primary me-2"></i>Customer Details Page
            </h2>
            <p>
                The Customer Details page is your hub for everything related to a single customer. Open it by
                clicking a customer's name anywhere in the system.
            </p>
            <p>The details page shows:</p>
            <ul>
                <li><strong>Contact information</strong> — name, email, phone, and address.</li>
                <li><strong>Account summary</strong> — current balance, credit limit, and pricing tier.</li>
                <li>
                    <strong>Jobs tab</strong> — every job created for this customer, with status and date. Click
                    a job number to open it.
                </li>
                <li>
                    <strong>Quotes tab</strong> — all quotes sent to this customer, including pending and
                    historical quotes. Click a quote number to open it.
                </li>
                <li>
                    <strong>Invoices tab</strong> — all invoices with payment status. Quickly see who owes money
                    and how much.
                </li>
                <li>
                    <strong>Deposits tab</strong> — all deposits recorded for this customer across any job or quote.
                </li>
                <li><strong>Notes</strong> — any notes saved against the customer record.</li>
            </ul>
        </section>

        <section id="credit-limit" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-credit-card text-primary me-2"></i>Credit Limit
            </h2>
            <p>
                The credit limit is the maximum amount of unpaid invoices a commercial customer is allowed to carry
                at one time. It is set on the customer record and displayed on the Customer Details page alongside
                their current outstanding balance.
            </p>
            <p>
                When a customer's outstanding balance approaches or exceeds their credit limit, the system displays
                a warning flag on their record and on any new jobs or invoices you try to create for them. This is
                a visual warning only — the system does not automatically block new work — but it gives your team
                a clear signal to follow up on payment before starting more jobs.
            </p>
            <p>
                If you do not want to set a credit limit, leave the field at <strong>0</strong> (the default), which
                means no limit is enforced.
            </p>
        </section>

        <section id="tax-exempt" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-patch-check text-primary me-2"></i>Tax Exempt Customers
            </h2>
            <p>
                If a customer is tax exempt (e.g., a non-profit or a reseller with a valid exemption certificate),
                check the <strong>Tax Exempt</strong> box on their customer record. You can also upload their
                exemption certificate as an attachment for your records.
            </p>
            <p>
                When a tax-exempt customer is selected on a new quote or invoice, the tax rate automatically
                defaults to <strong>0%</strong> — no manual adjustment needed. Tax-exempt customers are marked
                with a ★ in the customer dropdown when creating quotes and invoices so your team can spot them
                at a glance.
            </p>
        </section>

        <section id="deactivating-a-customer" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-person-dash text-primary me-2"></i>Deactivating a Customer
            </h2>
            <p>
                If a customer no longer does business with you, you can deactivate them rather than deleting them
                outright. Deactivating keeps all their historical jobs, quotes, and invoices intact for your records,
                but removes them from the active customer list so they do not clutter your search results.
            </p>
            <p>To deactivate a customer:</p>
            <ol class="mb-3">
                <li class="mb-1">Open the customer's Details page.</li>
                <li class="mb-1">Click the <strong>Delete</strong> (or Deactivate) button.</li>
                <li class="mb-1">Confirm the action in the dialog that appears.</li>
            </ol>
            <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>
                    <strong>Note:</strong> Deactivation is a "soft delete." The customer's record and all linked data
                    are preserved in the database and visible to Administrators. The customer simply no longer appears
                    in standard searches and lists. Contact your administrator if you need a record fully restored.
                </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="#customer-types">Customer Types</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#adding-a-customer">Adding a Customer</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#editing-a-customer">Editing a Customer</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#customer-details">Customer Details Page</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#credit-limit">Credit Limit</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#tax-exempt">Tax Exempt</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#deactivating-a-customer">Deactivating a Customer</a>
                </nav>
            </div>
        </div>
    </div>
</div>