@{
    ViewData["Title"] = "Help Center";
}

<div class="d-flex align-items-center gap-2 mb-3">
    <h1 class="h3 mb-0"><i class="bi bi-question-circle text-primary me-2"></i>Help Center</h1>
</div>

<div class="card border-0 shadow-sm mb-4 bg-primary text-white">
    <div class="card-body py-4">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="h4 mb-1 text-white">Welcome to the Help Center</h2>
                <p class="mb-0 opacity-75">
                    Find step-by-step guides for every part of the powder coating shop management system.
                    Whether you are setting up the shop for the first time or need a quick refresher,
                    the articles below have you covered.
                </p>
            </div>
            <div class="col-auto d-none d-md-block">
                <i class="bi bi-book-half" style="font-size:4rem; opacity:0.3;"></i>
            </div>
        </div>
    </div>
</div>

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

        <!-- Getting Started -->
        <h2 class="h6 fw-semibold mb-2 text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">Getting Started</h2>
        <div class="row g-3 mb-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-primary bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-rocket-takeoff text-primary fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Getting Started</h5>
                                <p class="card-text text-muted small mb-2">Log in, navigate the system, understand user roles, and take your first steps setting up the shop.</p>
                                <a asp-controller="Help" asp-action="GettingStarted" class="btn btn-sm btn-outline-primary">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Operations -->
        <h2 class="h6 fw-semibold mb-2 text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">Operations</h2>
        <div class="row g-3 mb-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-primary bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-briefcase text-primary fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Jobs</h5>
                                <p class="card-text text-muted small mb-2">Create and manage jobs, track status through the shop workflow, assign workers, and manage line items.</p>
                                <a asp-controller="Help" asp-action="Jobs" class="btn btn-sm btn-outline-primary">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-success bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-file-earmark-text text-success fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Quotes</h5>
                                <p class="card-text text-muted small mb-2">Build quotes for customers and prospects, use the pricing engine, and convert approved quotes into jobs.</p>
                                <a asp-controller="Help" asp-action="Quotes" class="btn btn-sm btn-outline-success">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-warning bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-receipt text-warning fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Invoices</h5>
                                <p class="card-text text-muted small mb-2">Create invoices from completed jobs, send them to customers, record payments, and track outstanding balances.</p>
                                <a asp-controller="Help" asp-action="Invoices" class="btn btn-sm btn-outline-warning">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-info bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-people text-info fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Customers</h5>
                                <p class="card-text text-muted small mb-2">Add and manage commercial and non-commercial customers, set credit limits, and view their job and invoice history.</p>
                                <a asp-controller="Help" asp-action="Customers" class="btn btn-sm btn-outline-info">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inventory & Purchasing -->
        <h2 class="h6 fw-semibold mb-2 text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">Inventory &amp; Purchasing</h2>
        <div class="row g-3 mb-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-primary bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-box-seam text-primary fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Inventory</h5>
                                <p class="card-text text-muted small mb-2">Track powders and supplies, monitor stock levels, set reorder points, and record stock transactions.</p>
                                <a asp-controller="Help" asp-action="Inventory" class="btn btn-sm btn-outline-primary">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-success bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-truck text-success fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Vendors</h5>
                                <p class="card-text text-muted small mb-2">Manage suppliers, set payment terms, link vendors to inventory items, and track purchase history.</p>
                                <a asp-controller="Help" asp-action="Vendors" class="btn btn-sm btn-outline-success">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-warning bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-cart3 text-warning fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Purchase Orders</h5>
                                <p class="card-text text-muted small mb-2">Create POs for vendors, track submission and receipt, and convert received POs into vendor bills.</p>
                                <a asp-controller="Help" asp-action="PurchaseOrders" class="btn btn-sm btn-outline-warning">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-danger bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-bank text-danger fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Accounts Payable</h5>
                                <p class="card-text text-muted small mb-2">Record vendor bills, track what you owe, mark bills as paid, and manage your AP ledger.</p>
                                <a asp-controller="Help" asp-action="AccountsPayable" class="btn btn-sm btn-outline-danger">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Shop Management -->
        <h2 class="h6 fw-semibold mb-2 text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">Shop Management</h2>
        <div class="row g-3 mb-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-secondary bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-tools text-secondary fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Equipment &amp; Maintenance</h5>
                                <p class="card-text text-muted small mb-2">Track your oven, sandblaster, and coating booth. Log maintenance records and schedule upcoming service.</p>
                                <a asp-controller="Help" asp-action="Equipment" class="btn btn-sm btn-outline-secondary">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-success bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-clock-history text-success fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Timeclock</h5>
                                <p class="card-text text-muted small mb-2">Track employee attendance with daily clock-in/clock-out. Multi-segment days, tablet kiosk mode with PIN, and attendance reports.</p>
                                <a asp-controller="Help" asp-action="Timeclock" class="btn btn-sm btn-outline-success">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reports & Admin -->
        <h2 class="h6 fw-semibold mb-2 text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">Reports &amp; Admin</h2>
        <div class="row g-3 mb-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-primary bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-bar-chart text-primary fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Reports</h5>
                                <p class="card-text text-muted small mb-2">Financial summaries, AR aging, job throughput, inventory levels, and equipment status &mdash; all in one place.</p>
                                <a asp-controller="Help" asp-action="Reports" class="btn btn-sm btn-outline-primary">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-success bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-gear text-success fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Settings</h5>
                                <p class="card-text text-muted small mb-2">Configure company info, pricing rates, operating costs, pricing tiers, and chart of accounts.</p>
                                <a asp-controller="Help" asp-action="Settings" class="btn btn-sm btn-outline-success">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-secondary bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-person-circle text-secondary fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Your Profile</h5>
                                <p class="card-text text-muted small mb-2">Update your contact details, change your password, upload a profile photo, and choose your display theme.</p>
                                <a asp-controller="Help" asp-action="UserProfile" class="btn btn-sm btn-outline-secondary">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded-3 bg-info bg-opacity-10 p-2 flex-shrink-0">
                                <i class="bi bi-calculator text-info fs-4"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1">Custom Formula Item Templates</h5>
                                <p class="card-text text-muted small mb-2">Build reusable NCalc pricing formulas for complex fabricated items like roof curbs, enclosures, and frames.</p>
                                <a asp-controller="Help" asp-action="CustomFormulaTemplates" class="btn btn-sm btn-outline-info">Read more <i class="bi bi-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 d-none d-lg-block">
        @await Html.PartialAsync("_HelpNav")
    </div>
</div>
