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

<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">Invoices</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>
                Invoices are the formal request for payment you send to customers after their work is complete.
                Each job can have one invoice. The system tracks payment status in real time &mdash; you can see at a
                glance which customers owe money, how much, and how long the balance has been outstanding.
            </p>
            <p>
                Invoices can be emailed to customers directly from the system (when email is configured) and
                downloaded as PDFs to print or send manually. Payments &mdash; whether in full or in partial
                installments &mdash; are logged against the invoice, and the customer's outstanding balance on their
                account is updated automatically with every transaction.
            </p>
            <p>
                You can find Invoices under <strong>Operations &rsaquo; Invoices</strong> in the left sidebar.
            </p>
        </section>

        <section id="creating-an-invoice" 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 an Invoice
            </h2>
            <p>
                The easiest way to create an invoice is directly from the job it belongs to. This pre-fills
                all line items and pricing automatically.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">From a Job (recommended)</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">Scroll to the <strong>Invoice</strong> section near the bottom of the page.</li>
                <li class="mb-2">Click <strong>Create Invoice</strong>. The system pre-fills all line items, the discount, tax rate, payment terms, and due date from the job and customer automatically.</li>
                <li class="mb-2">Review the <strong>Totals</strong> panel on the right &mdash; if a discount was applied to the job it shows as a red <em>Discount Applied</em> line below the subtotal. Negative line items are allowed if you need to apply a manual credit or price adjustment.</li>
                <li class="mb-2">Adjust anything you need, then click <strong>Save Invoice</strong>.</li>
            </ol>

            <h3 class="h6 fw-semibold mt-3 mb-2">From the Invoices list (manual)</h3>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Operations &rsaquo; Invoices</strong> and click <strong>New Invoice</strong>.</li>
                <li class="mb-2">Select the customer and then select the job this invoice is for.</li>
                <li class="mb-2">Add or adjust line items as needed.</li>
                <li class="mb-2">Set the invoice date, due date, and any notes.</li>
                <li class="mb-2">Optionally enter a <strong>Project Name</strong>. When creating from a job, this pre-fills from the job's project name automatically.</li>
                <li class="mb-2">Click <strong>Save Invoice</strong>.</li>
            </ol>

            <p>
                Invoice numbers are generated in the format <code>INV-YYMM-####</code>
                (for example, <code>INV-2503-0007</code>). Each job can only have one invoice &mdash; if an invoice
                already exists for a job, the Create Invoice button on the Job Details page is replaced with a
                link to 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>
                    You can create an invoice for a job at any time &mdash; you do not need to wait until the job
                    reaches a Completed or Delivered status. Some shops invoice on deposit when a job is
                    approved; others invoice on pickup. The system is flexible.
                </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>
                While an invoice is in <strong>Draft</strong> status, you can edit line item prices,
                quantities, and descriptions directly on the Invoice Details page &mdash; 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. 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 anywhere outside the field to save. Press <kbd>Esc</kbd> to cancel.</li>
            </ol>
            <p>
                The line total and the invoice grand total update immediately without reloading the 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>
                    Once an invoice is marked <strong>Sent</strong>, line items are locked and inline
                    editing is disabled. To correct a sent invoice, void it and create a new one.
                </div>
            </div>
        </section>

        <section id="invoice-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>Invoice Statuses
            </h2>
            <p>
                Invoices move through statuses that reflect their current payment state. Each status is shown
                as a color-coded badge throughout the system.
            </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 invoice has been created but not yet sent to the customer. It can still be edited freely. It does not yet affect the customer's balance.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-info text-dark">Sent</span></td>
                            <td>The invoice has been delivered to the customer and a due date is set. The balance is now reflected in the customer's outstanding account.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Partially Paid</span></td>
                            <td>At least one payment has been received but the full balance has not yet been settled.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">Paid</span></td>
                            <td>The full invoice amount has been received. The customer's balance is reduced to zero for this invoice.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-danger">Overdue</span></td>
                            <td>The due date has passed and there is still an outstanding balance. Overdue invoices are flagged prominently in the AR Aging report.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-secondary">Voided</span></td>
                            <td>The invoice was cancelled. The balance is reversed on the customer's account. See the Voiding section below for restrictions.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-dark">Written Off</span></td>
                            <td>The balance has been written off as bad debt. The outstanding amount is removed from the customer's account but is recorded for reporting purposes.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section id="sending-an-invoice" 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 an Invoice
            </h2>
            <p>
                Once you have saved an invoice as a Draft and reviewed it, you are ready to send it to the customer.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the invoice from <strong>Operations &rsaquo; Invoices</strong> or from the job's Details page.</li>
                <li class="mb-2">Click <strong>Send Invoice</strong>. The status changes from Draft to Sent.</li>
                <li class="mb-2">If email notifications are configured, the customer receives an email with the invoice details and total due.</li>
                <li class="mb-2">The due date and payment terms are pre-filled from the source quote (if the job came from a quote) or the customer&rsquo;s payment terms &mdash; you can always override them before saving.</li>
            </ol>
            <p>
                You can also click <strong>Download PDF</strong> on any invoice to generate a print-ready PDF
                that you can email manually, attach to an existing email thread, or hand to the customer in person.
            </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>
                    Once an invoice is sent, the line items and total are locked for editing. If you need to make
                    a correction after sending, void the invoice and create a new one. This ensures a clean audit
                    trail.
                </div>
            </div>
        </section>

        <section id="recording-payments" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-cash-coin text-primary me-2"></i>Recording a Payment
            </h2>
            <p>
                When a customer pays &mdash; whether in full or as a partial payment &mdash; you record it against the invoice.
                The system supports multiple partial payments on a single invoice.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the invoice and click <strong>Record Payment</strong>.</li>
                <li class="mb-2">
                    Fill in the payment details:
                    <ul class="mt-1">
                        <li><strong>Amount</strong> &mdash; how much was received this time. Can be less than the full balance for partial payments.</li>
                        <li><strong>Payment Method</strong> &mdash; Cash, Check, Credit/Debit Card, Bank Transfer / ACH, or Digital Payment.</li>
                        <li><strong>Payment Date</strong> &mdash; defaults to today.</li>
                        <li><strong>Reference Number</strong> &mdash; optional. Use for check numbers, transaction IDs, or wire reference numbers.</li>
                        <li><strong>Notes</strong> &mdash; any additional notes about this payment.</li>
                    </ul>
                </li>
                <li class="mb-2">Click <strong>Save Payment</strong>.</li>
            </ol>
            <p>
                The invoice status updates automatically &mdash; to <strong>Partially Paid</strong> if there is still
                a remaining balance, or <strong>Paid</strong> if the full amount has been received. The customer's
                outstanding balance on their account is reduced by the payment amount. All payments are shown in
                a payment log on the invoice Details page.
            </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 delete an individual payment from the payment log on the invoice Details page if it
                    was recorded in error. Deleting a payment reverses its effect on the invoice status and the
                    customer balance.
                </div>
            </div>
        </section>

        <section id="voiding-an-invoice" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-x-circle text-primary me-2"></i>Voiding an Invoice
            </h2>
            <p>
                If an invoice was created in error &mdash; for example, against the wrong job or with incorrect line
                items that cannot be corrected &mdash; you can void it to remove it from the customer's outstanding
                balance.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the invoice and click <strong>Void Invoice</strong>.</li>
                <li class="mb-2">Confirm the action in the dialog that appears.</li>
                <li class="mb-2">The invoice status changes to Voided and the balance is reversed on the customer's account.</li>
            </ol>

            <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>
                    <strong>Restrictions:</strong> Only invoices in <strong>Draft</strong> or <strong>Sent</strong>
                    status can be voided. If an invoice has payments recorded against it, you must delete those
                    payments first before you can void the invoice. Invoices that are Partially Paid or Paid
                    cannot be voided directly &mdash; consider writing off the remaining balance instead if needed.
                </div>
            </div>
        </section>

        <section id="customer-balance" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-wallet2 text-primary me-2"></i>Customer Balance
            </h2>
            <p>
                Every customer in the system has a running <strong>current balance</strong> that represents
                their total outstanding amount across all unpaid invoices. The balance is updated automatically
                whenever an invoice is sent, a payment is recorded, or an invoice is voided.
            </p>
            <p>You can see the current balance on the Customer Details page, shown alongside the customer's credit limit.</p>
            <ul class="mb-3">
                <li class="mb-1">When an invoice is <strong>sent</strong>, the balance increases by the invoice total.</li>
                <li class="mb-1">When a <strong>payment is recorded</strong>, the balance decreases by the payment amount.</li>
                <li class="mb-1">When an invoice is <strong>voided</strong>, the balance decreases by the invoice total.</li>
            </ul>
            <p>
                If a customer's outstanding balance is approaching or has exceeded their credit limit, a warning
                flag is shown on their customer record, on new jobs you try to create for them, and on new invoices.
                This is a visual warning only &mdash; the system does not automatically block new work &mdash; but it provides
                a clear signal to follow up on payment.
            </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>
                    Use the <strong>AR Aging</strong> table in <a asp-controller="Help" asp-action="Reports">Reports &rsaquo; Financial</a>
                    to see all outstanding balances broken down by how many days past due they are. This is the
                    quickest way to identify which customers need a payment follow-up call.
                </div>
            </div>
        </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
            </h2>
            <p>
                If a customer pays a deposit before work starts, record it from the <strong>Job Details</strong>
                or <strong>Quote Details</strong> page using the <strong>Record Deposit</strong> button in the
                Deposits card.
            </p>
            <p>
                When you create an invoice from a job, <strong>all unapplied deposits are automatically applied
                as payments</strong> on the new invoice. The invoice's Amount Paid and status update accordingly
                &mdash; you may find the invoice is already partially or fully paid at creation time.
            </p>
            <p>
                Each deposit generates a receipt (receipt number format: <code>DEP-YYMM-####</code>) that can
                be downloaded as a PDF immediately after recording.
            </p>
        </section>

        <section id="gift-certificates" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-gift text-primary me-2"></i>Gift Certificates
            </h2>
            <p>
                Gift certificates are issued and managed at <a href="/GiftCertificates">Gift Certificates</a>
                in the Operations section of the sidebar.
            </p>
            <p>
                To apply a gift certificate to an invoice, open the Invoice Details page and click
                <strong>Apply Gift Certificate</strong>. Enter the certificate code &mdash; the system looks up
                the remaining balance and applies it as a payment up to the invoice amount.
            </p>
        </section>

        <section id="online-payments" 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>Online Payments
            </h2>
            <p>
                Customers can pay invoices online without logging in. The
                <strong>Online Payments</strong> page (<a href="/Invoices/OnlinePayments">/Invoices/OnlinePayments</a>)
                lists all open invoices with a shareable payment link. Clicking the link takes the customer to
                a Stripe-hosted checkout page where they can pay by credit or debit card. Payment is recorded
                automatically and the invoice status updates to <em>Paid</em> or <em>Partially Paid</em>.
                Your team receives a bell notification when payment is received.
            </p>

            <h3 class="h6 fw-semibold mt-4 mb-2">One-Time Setup: Connecting Stripe</h3>
            <p>
                Online payments require a Stripe Connect account linked to your company. A <strong>Company Admin</strong>
                completes this once:
            </p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Settings &rsaquo; Billing</strong> (<a href="/Billing">/Billing</a>).</li>
                <li class="mb-2">Click <strong>Connect with Stripe</strong> (or <em>Set Up Online Payments</em>).</li>
                <li class="mb-2">You are redirected to Stripe &mdash; create a new Stripe account or connect an existing one.</li>
                <li class="mb-2">Complete Stripe&rsquo;s onboarding: enter your business details, add a bank account for payouts, and verify your identity as required by Stripe.</li>
                <li class="mb-2">Once Stripe approves the account, you are returned to the app and Stripe Connect status shows <strong>Active</strong>.</li>
                <li class="mb-2">Payment links now appear on Invoice Details and on the Online Payments page.</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>
                    If you don&rsquo;t see a <strong>Connect with Stripe</strong> button, online payments may not be
                    included in your current subscription plan. Check <a href="/Billing">Settings &rsaquo; Billing</a>
                    for your plan details or contact Powder Coating Logix support.
                </div>
            </div>

            <h3 class="h6 fw-semibold mt-4 mb-2">Sharing a Payment Link</h3>
            <p>
                Once Stripe Connect is active, open any Invoice Details page and use one of these options:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Copy Payment Link</strong> &mdash; copies the URL to your clipboard so you can paste it into an email, text, or any other message.</li>
                <li class="mb-1"><strong>Send Payment Link</strong> &mdash; emails the payment link directly to the customer&rsquo;s email address on file, with a brief message and the invoice amount.</li>
            </ul>
            <p>
                The link is unique to each invoice and does not expire as long as the invoice remains unpaid.
                Voided invoices do not generate payment links.
            </p>
        </section>

        <section id="payment-reminders" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-bell text-primary me-2"></i>Automated Payment Reminders
            </h2>
            <p>
                The system can automatically email customers when their invoices become overdue &mdash; without you
                having to remember to follow up manually. This feature is controlled from
                <strong>Settings &rsaquo; Notifications &rsaquo; Automated Payment Reminders</strong>.
            </p>
            <ul class="mb-3">
                <li class="mb-2">
                    <strong>Enable Payment Reminders</strong> &mdash; turn the feature on or off for your company at any time.
                    When off, no automated emails are sent.
                </li>
                <li class="mb-2">
                    <strong>Reminder Days</strong> &mdash; a comma-separated list of day milestones past the due date at which
                    reminders are sent. The default is <code>7,14,30</code> (one reminder at 7 days overdue, another at
                    14, and a final one at 30).
                </li>
            </ul>
            <p>
                Each morning the system checks for overdue invoices in <strong>Sent</strong>,
                <strong>Partially Paid</strong>, or <strong>Overdue</strong> status and sends a reminder email
                if the invoice has reached one of your configured day thresholds for the first time that day.
                Customers who have opted out of email notifications are never contacted.
            </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>
                    See <a asp-controller="Help" asp-action="Settings" fragment="notifications">Settings &rsaquo; Notification Settings</a>
                    for full details on configuring reminder thresholds and the email sender identity.
                </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-an-invoice">Creating an Invoice</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#invoice-statuses">Invoice Statuses</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#sending-an-invoice">Sending an Invoice</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#recording-payments">Recording a Payment</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#voiding-an-invoice">Voiding an Invoice</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#customer-balance">Customer Balance</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="#gift-certificates">Gift Certificates</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#online-payments">Online Payments</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#payment-reminders">Payment Reminders</a>
                </nav>
            </div>
        </div>
    </div>
</div>
