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

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

<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">Vendors</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>
                Vendors are the companies you buy from &mdash; powder suppliers, primer manufacturers, consumables
                distributors, equipment service providers, and anyone else who sends you a bill. Maintaining
                accurate vendor records lets you track what you owe, reorder stock quickly, and keep purchase
                history organized.
            </p>
            <p>
                You can find Vendors under <strong>Inventory &rsaquo; Vendors</strong> in the left sidebar.
                Each vendor can be linked to the specific inventory items they supply, so when stock runs low
                you always know exactly who to call.
            </p>
        </section>

        <section id="adding-a-vendor" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-plus-circle text-primary me-2"></i>Adding a Vendor
            </h2>
            <p>To add a new vendor:</p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Inventory &rsaquo; Vendors</strong> and click <strong>New Vendor</strong>.</li>
                <li class="mb-2">
                    Fill in the vendor details:
                    <ul class="mt-1">
                        <li><strong>Vendor Name</strong> &mdash; the company name as it appears on their invoices.</li>
                        <li><strong>Contact Name</strong> &mdash; your sales rep or accounts contact.</li>
                        <li><strong>Email &amp; Phone</strong> &mdash; for placing orders and following up on deliveries.</li>
                        <li><strong>Address</strong> &mdash; the vendor's billing address.</li>
                        <li><strong>Website</strong> &mdash; optional, handy for quick product lookups.</li>
                        <li><strong>Account Number</strong> &mdash; your account number with this vendor, if applicable.</li>
                    </ul>
                </li>
                <li class="mb-2">Set the <strong>Payment Terms</strong> (see below).</li>
                <li class="mb-2">Optionally fill in the <strong>Default Expense Account</strong> (see below).</li>
                <li class="mb-2">Check <strong>Preferred Vendor</strong> if this is your primary supplier for any category.</li>
                <li class="mb-2">Add any internal <strong>Notes</strong> your team should know.</li>
                <li class="mb-2">Click <strong>Save Vendor</strong>.</li>
            </ol>
        </section>

        <section id="default-expense-account" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-receipt text-primary me-2"></i>Default Expense Account
            </h2>
            <p>
                The <strong>Default Expense Account</strong> field records which accounting category purchases from
                this vendor typically fall under &mdash; for example, <em>Cost of Goods Sold</em>, <em>Shop Supplies</em>,
                or <em>Equipment Maintenance</em>.
            </p>
            <p>
                When a purchase order is created for this vendor, the system pre-fills the expense account with this
                default value, saving your team from having to look it up each time. This is especially useful if
                you export financial data or sync with an accounting package.
            </p>
            <p>
                If your shop does not use account codes, you can leave this field blank. Ask your bookkeeper or
                accountant for the right code to use if you are unsure.
            </p>
        </section>

        <section id="payment-terms" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-calendar-check text-primary me-2"></i>Payment Terms
            </h2>
            <p>
                Payment terms describe how long you have to pay a vendor invoice after you receive it. Common
                examples include:
            </p>
            <ul class="mb-3">
                <li><strong>Net 15</strong> &mdash; payment due within 15 days of the invoice date.</li>
                <li><strong>Net 30</strong> &mdash; payment due within 30 days (the most common).</li>
                <li><strong>Net 60</strong> &mdash; payment due within 60 days.</li>
                <li><strong>Due on Receipt</strong> &mdash; pay immediately on delivery.</li>
                <li><strong>2/10 Net 30</strong> &mdash; 2% discount if paid within 10 days, otherwise full amount due in 30.</li>
            </ul>
            <p>
                When you enter terms here, they are automatically used as the default on any bills generated from
                purchase orders for this vendor. This gives Accounts Payable a clear, consistent due date without
                manual entry each time.
            </p>
        </section>

        <section id="preferred-vendor" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-star text-primary me-2"></i>Preferred Vendor
            </h2>
            <p>
                Marking a vendor as <strong>Preferred</strong> flags them as your go-to supplier in a given category.
                On the vendor list, preferred vendors are highlighted with a star badge so they stand out at a glance.
            </p>
            <p>
                When multiple vendors supply the same type of inventory item (e.g., you have two powder suppliers),
                the preferred vendor appears first in dropdown lists when you are creating a purchase order or
                restocking an inventory item.
            </p>
            <p>
                You can mark more than one vendor as preferred &mdash; it is a flag, not an exclusive designation. Use
                it however makes sense for your workflow.
            </p>
        </section>

        <section id="vendor-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>Vendor Details Page
            </h2>
            <p>
                Open a vendor's Details page by clicking their name in the vendor list. Here you will find:
            </p>
            <ul>
                <li><strong>Contact information</strong> &mdash; all the details you entered, in one place.</li>
                <li>
                    <strong>Inventory Items tab</strong> &mdash; a list of every inventory item linked to this vendor.
                    This tells you at a glance what you buy from them. Click any item to open it.
                </li>
                <li>
                    <strong>Purchase History tab</strong> &mdash; a log of all purchase orders and transactions recorded
                    against this vendor, with dates and amounts.
                </li>
                <li>
                    <strong>Notes</strong> &mdash; any notes you or your colleagues have saved.
                </li>
            </ul>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    To link an inventory item to a vendor, open the <strong>Inventory Item</strong> record and set the
                    <em>Vendor</em> field there. The link then appears automatically on the Vendor Details page.
                </div>
            </div>
        </section>

        <section id="supply-categories" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-tags text-primary me-2"></i>Supply Categories
            </h2>
            <p>
                Each vendor can be tagged with one or more <strong>Supply Categories</strong> &mdash; for example,
                <em>Powder</em>, <em>Chemical</em>, or <em>Consumables</em>. These tags tell the system what types of
                inventory items this vendor supplies.
            </p>
            <p>
                When you add or edit an inventory item and choose a <strong>Category</strong>, the vendor dropdown
                automatically filters to show only vendors tagged for that category. This prevents accidentally
                selecting an unrelated supplier.
            </p>
            <ul class="mb-3">
                <li>A vendor can belong to <strong>multiple categories</strong> &mdash; check as many boxes as apply.</li>
                <li>If <strong>no vendor</strong> in your list is tagged for the selected category, the dropdown falls back to
                    showing all active vendors so you are never blocked.</li>
                <li>A <em>&ldquo;Showing vendors for this category&rdquo;</em> note appears below the dropdown when the filter is
                    active. Click <strong>Show all</strong> in that note to temporarily override the filter.</li>
            </ul>
            <p>To tag a vendor with supply categories:</p>
            <ol class="mb-3">
                <li class="mb-1">Open the vendor's Edit page (click the vendor name in the list, then <strong>Edit</strong>).</li>
                <li class="mb-1">In the <strong>Supply Categories</strong> section, check the boxes that apply.</li>
                <li class="mb-1">Click <strong>Save Vendor</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>
                    Supply categories are the same categories used on your inventory items. If you add a new category
                    under <strong>Settings &rsaquo; Inventory Categories</strong>, it will appear automatically in the vendor
                    checkboxes.
                </div>
            </div>
        </section>

        <section id="deactivating-a-vendor" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-truck text-primary me-2" style="text-decoration:line-through"></i>Deactivating a Vendor
            </h2>
            <p>
                If you stop working with a vendor, deactivate their record instead of deleting it. This keeps all
                linked purchase history and inventory records intact while removing the vendor from active dropdown
                lists and search results.
            </p>
            <p>To deactivate a vendor:</p>
            <ol class="mb-3">
                <li class="mb-1">Open the vendor'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.</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>
                    Like customers, vendor deactivation is a soft delete. All historical data is preserved.
                    Administrators can see and restore deactivated vendors if needed.
                </div>
            </div>
        </section>

    </div>

    <div class="col-lg-3 d-none d-lg-block">
        @{ await Html.RenderPartialAsync("_HelpNav"); }
        <div class="card border-0 shadow-sm sticky-top" style="top:80px">
            <div class="card-header bg-transparent fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">On this page</div>
            <div class="card-body p-0">
                <nav class="nav flex-column">
                    <a class="nav-link py-1 px-3 small text-body" href="#overview">Overview</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#adding-a-vendor">Adding a Vendor</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#default-expense-account">Default Expense Account</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#payment-terms">Payment Terms</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#preferred-vendor">Preferred Vendor</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#supply-categories">Supply Categories</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#vendor-details">Vendor Details Page</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#deactivating-a-vendor">Deactivating a Vendor</a>
                </nav>
            </div>
        </div>
    </div>
</div>