@{
    ViewData["Title"] = "Purchase Orders";
}

<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">Purchase Orders</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>
                Purchase Orders (POs) are the formal documents you create when ordering supplies from vendors.
                Recording POs in the system lets you track exactly what you ordered, from whom, at what price,
                and whether the goods have arrived.
            </p>
            <p>
                The PO workflow is designed to eliminate double data entry. When you receive a PO, stock levels
                update automatically for any linked inventory items. When you are ready to pay, you can convert
                the received PO directly into a vendor bill in Accounts Payable &mdash; all the line items, quantities,
                and prices carry over without retyping.
            </p>
            <p>
                You can find Purchase Orders under <strong>Inventory &rsaquo; Purchase Orders</strong> in the
                left sidebar.
            </p>
        </section>

        <section id="creating-a-po" 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 Purchase Order
            </h2>
            <p>To create a new Purchase Order:</p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Inventory &rsaquo; Purchase Orders</strong> and click <strong>New PO</strong>.</li>
                <li class="mb-2">Select the <strong>Vendor</strong> you are ordering from. The vendor's contact information and default payment terms are pulled in automatically.</li>
                <li class="mb-2">Set the <strong>Order Date</strong> (defaults to today) and an optional <strong>Expected Delivery Date</strong>.</li>
                <li class="mb-2">
                    Add line items &mdash; click <strong>Add Line</strong> for each product you are ordering:
                    <ul class="mt-1">
                        <li>Start typing an item name in the search field to look up items from your inventory. If the item exists, select it to link the PO line directly to your stock record.</li>
                        <li>If the item is not in your inventory yet (a new product), enter a description manually. You can create the inventory item later after receiving the goods.</li>
                        <li>Enter the <strong>Quantity Ordered</strong> and <strong>Unit Price</strong> for each line.</li>
                    </ul>
                </li>
                <li class="mb-2">Enter a <strong>Shipping Cost</strong> if the vendor charges for delivery. This is added to the PO total.</li>
                <li class="mb-2">Add any <strong>Notes for the Vendor</strong> &mdash; these appear on the printed PO document.</li>
                <li class="mb-2">Add any internal <strong>Notes</strong> for your own team (not shown to the vendor).</li>
                <li class="mb-2">Click <strong>Save PO</strong>. The PO is saved as a Draft.</li>
            </ol>
            <p>
                A PO number is generated automatically in a sequential format. You can reference this number
                when communicating with the vendor.
            </p>
        </section>

        <section id="submitting-a-po" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-send text-primary me-2"></i>Submitting a PO
            </h2>
            <p>
                When you are ready to place the order with the vendor, open the PO and click <strong>Submit</strong>.
                This changes the status from Draft to Submitted, recording that the order has been officially placed.
            </p>
            <p>
                Submitting is an internal tracking step in the system. The system does not automatically contact
                the vendor. To send the order to your vendor, use one of the following methods:
            </p>
            <ul class="mb-3">
                <li class="mb-1">Click <strong>Download PDF</strong> on the PO Details page to generate a print-ready document, then email or fax it to your vendor.</li>
                <li class="mb-1">Phone the vendor and use the PO number as the reference for your verbal order.</li>
            </ul>
            <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>
                    A Submitted PO is locked for editing. If you need to change quantities or pricing after
                    submitting, cancel the PO and create a new one, or contact your vendor to confirm any
                    changes by phone and update your records accordingly once the goods arrive.
                </div>
            </div>
        </section>

        <section id="receiving-a-po" 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>Receiving a PO
            </h2>
            <p>
                When the ordered goods arrive, open the Submitted PO and click <strong>Receive</strong>.
                This records the receipt of goods and updates your inventory stock levels.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the submitted PO from <strong>Inventory &rsaquo; Purchase Orders</strong>.</li>
                <li class="mb-2">Click <strong>Receive</strong>.</li>
                <li class="mb-2">Review the received quantities. If all items have arrived as ordered, confirm and save. If only some items have arrived (a partial shipment), adjust the received quantities for each line accordingly.</li>
                <li class="mb-2">Click <strong>Confirm Receipt</strong>.</li>
            </ol>
            <p>
                For any PO lines that are linked to inventory items, the quantity on hand is increased
                automatically by the received amount. The PO status changes to <strong>Received</strong> if
                all items are fully received, or <strong>Partially Received</strong> if some are still
                outstanding. Partially received POs remain open until the remaining items arrive.
            </p>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    Always check the physical goods against the PO before confirming receipt. Receiving an
                    incorrect quantity will update your stock levels immediately. If there is a discrepancy,
                    contact the vendor first and adjust the received quantity to match what actually arrived.
                </div>
            </div>
        </section>

        <section id="creating-a-bill" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-file-earmark-text text-primary me-2"></i>Creating a Bill from a PO
            </h2>
            <p>
                After a PO has been received, you can convert it into a vendor bill in Accounts Payable with
                one click &mdash; no need to re-enter any of the line item details.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the received PO and click <strong>Create Bill</strong>.</li>
                <li class="mb-2">
                    The system creates a new vendor bill pre-filled with:
                    <ul class="mt-1">
                        <li>All PO line items, quantities, and unit prices</li>
                        <li>The vendor's default expense account for each line (can be overridden)</li>
                        <li>The vendor's payment terms and a calculated due date</li>
                    </ul>
                </li>
                <li class="mb-2">Review the bill &mdash; confirm the due date, check that expense accounts are correct, and add any notes.</li>
                <li class="mb-2">Click <strong>Save Bill</strong>. The bill is saved as a Draft in Accounts Payable.</li>
                <li class="mb-2">When you have verified the bill against the vendor's paper invoice, click <strong>Mark as Open</strong> to post it to your AP ledger. See the <a asp-controller="Help" asp-action="AccountsPayable">Accounts Payable help page</a> for details.</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>
                    The PO and the bill remain linked in the system. From the bill you can navigate back to
                    the originating PO, and from the PO you can see the bill status. This makes it easy to
                    match vendor invoices to your purchase records during bookkeeping.
                </div>
            </div>
        </section>

        <section id="po-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>PO Statuses
            </h2>
            <p>
                Purchase Orders move through the following statuses as they progress from planning to receipt.
            </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 PO is being prepared. It has not been sent to the vendor and can be edited freely.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-info text-dark">Submitted</span></td>
                            <td>The order has been placed with the vendor. The PO is locked and is awaiting delivery.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Partially Received</span></td>
                            <td>Some items from the order have arrived but others are still outstanding. The PO remains open.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">Received</span></td>
                            <td>All ordered items have been received and stock levels have been updated. Ready to create a bill.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-danger">Cancelled</span></td>
                            <td>The order was cancelled before receipt. No stock changes are made. The PO is kept for record-keeping.</td>
                        </tr>
                    </tbody>
                </table>
            </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-po">Creating a Purchase Order</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#submitting-a-po">Submitting a PO</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#receiving-a-po">Receiving a PO</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#creating-a-bill">Creating a Bill from a PO</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#po-statuses">PO Statuses</a>
                </nav>
            </div>
        </div>
    </div>
</div>
