@{
    ViewData["Title"] = "Getting Started";
}

<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">Getting Started</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>
                This system is purpose-built to run a powder coating shop from end to end. At its core it helps you
                track every job that comes through the door &mdash; from the first quote all the way through coating,
                curing, quality check, and final delivery. Along the way it manages your customers, vendors,
                inventory of powders and supplies, shop equipment, and the workers on your floor.
            </p>
            <p>
                Everything is connected. When you create a quote for a customer and they approve it, you can convert
                that quote into a job with a single click. When a job is invoiced, the customer's account balance
                updates automatically. When powder is consumed on a job, the inventory count goes down. You always
                have a clear picture of where work stands and what materials you have on hand.
            </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>
                    <strong>Tip:</strong> Use the navigation sidebar on the left to jump between modules. The system
                    remembers where you left off in most list views, including any search filters you applied.
                </div>
            </div>
        </section>

        <section id="logging-in" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-box-arrow-in-right text-primary me-2"></i>Logging In
            </h2>
            <p>
                Open the app in your browser and you will be taken to the login page. Enter your email address and
                password, then click <strong>Sign In</strong>.
            </p>
            <ol class="mb-3">
                <li class="mb-1">Enter the email address your administrator set up for you.</li>
                <li class="mb-1">Enter your password. Passwords are case-sensitive.</li>
                <li class="mb-1">Click <strong>Sign In</strong>. You will land on the Dashboard.</li>
            </ol>

            <h5 class="fw-semibold">First login &mdash; set your permanent password</h5>
            <p>
                When a new company account is created, the system generates a secure temporary password and emails
                it to the address used during signup. The first time you log in with that temporary password, you
                will be redirected to a <strong>Set Your Password</strong> page automatically.
            </p>
            <ol class="mb-3">
                <li class="mb-1">Enter the temporary password from your welcome email.</li>
                <li class="mb-1">Enter and confirm your new permanent password.</li>
                <li class="mb-1">Click <strong>Set Password &amp; Continue</strong>.</li>
            </ol>
            <p>
                You cannot access any other part of the application until this step is complete. Once done, the
                temporary password is invalidated and you land directly on the Dashboard.
            </p>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-envelope-check-fill flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Didn't receive the welcome email?</strong> Check your spam or junk folder first.
                    If it's still not there, contact your company administrator &mdash; they can reset your password
                    from the User Management section.
                </div>
            </div>

            <h5 class="fw-semibold">Forgot your password?</h5>
            <p>
                On the login page, click the <strong>Forgot your password?</strong> link. Enter your email address
                and the system will send you a reset link. Check your inbox (and spam folder) and follow the
                instructions in the email. Reset links expire after a short time, so use them promptly.
            </p>
            <p>
                If you do not receive an email or cannot log in, contact your company administrator &mdash; they can reset
                your password from the User Management section.
            </p>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-shield-lock flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Keep your password safe.</strong> Do not share your login details with anyone, even
                    co-workers. Every action in the system is logged with your account name.
                </div>
            </div>
        </section>

        <section id="navigating" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-compass text-primary me-2"></i>Navigating the System
            </h2>
            <p>
                The left sidebar is your main navigation. It is divided into sections so related features are grouped
                together. Click any item to go to that section. On smaller screens the sidebar collapses &mdash; tap the
                menu icon at the top to open it.
            </p>

            <div class="table-responsive">
                <table class="table table-bordered table-sm align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width:30%">Section</th>
                            <th>What you will find there</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><i class="bi bi-speedometer2 me-1 text-primary"></i><strong>Dashboard</strong></td>
                            <td>A live summary of today's jobs, outstanding quotes, low-stock alerts, equipment needing attention, and a daily tip.</td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-briefcase me-1 text-primary"></i><strong>Operations</strong></td>
                            <td>Customers, Quotes, Jobs, Invoices, Appointments/Calendar, Job Priority Board, Gift Certificates, and Shop Workers &mdash; the day-to-day work of the shop.</td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-box-seam me-1 text-primary"></i><strong>Inventory</strong></td>
                            <td>Catalog Items, Inventory Items, Vendors, and Purchase Orders.</td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-bank me-1 text-primary"></i><strong>Accounting</strong></td>
                            <td>Bills (Accounts Payable), Chart of Accounts, and Accounting Export.</td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-tools me-1 text-primary"></i><strong>Equipment</strong></td>
                            <td>Equipment records, Maintenance, Oven Scheduler, and Powder Insights.</td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-bar-chart me-1 text-primary"></i><strong>Reports</strong></td>
                            <td>Financial summaries, AR aging, job performance, AI-powered analysis, cash flow forecasting, and more.</td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-gear me-1 text-primary"></i><strong>Settings</strong></td>
                            <td>Company info, pricing rates, operating costs, Named Ovens, AI Profile, Pricing Tiers, User Management, and Billing. Visible to Admins and Managers.</td>
                        </tr>

                    </tbody>
                </table>
            </div>

            <p class="mt-3">
                The top bar shows your profile avatar, a <strong>notification bell</strong>, and a quick-search box.
                Use the search box to find customers, jobs, or quotes by name or number without navigating through menus.
            </p>
            <p>
                The <strong>notification bell</strong> (<i class="bi bi-bell-fill"></i>) alerts you to customer
                actions in real time &mdash; a quote approved or declined online, an invoice or deposit paid online,
                and any platform announcements from the Powder Coating Logix team. A red badge shows the count of
                unread items. Click the bell to see recent notifications and navigate directly to the related record.
                Notifications are stored persistently so you will not miss one if you were not logged in when it
                arrived.
            </p>
        </section>

        <section id="roles-and-permissions" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-shield-check text-primary me-2"></i>Roles and Permissions
            </h2>
            <p>
                Every user is assigned a role that controls what they can see and do. Your administrator assigns
                your role when they create your account. If you cannot access something you expect to, ask your
                administrator &mdash; they may need to update your role.
            </p>

            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width:18%">Role</th>
                            <th>What they can do</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <span class="badge bg-danger">Admin</span>
                            </td>
                            <td>
                                Full access to all features including user management, company settings, pricing
                                configuration, and all reports. Can create, edit, and delete any record. Should
                                be limited to the company owner or office manager.
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="badge bg-warning text-dark">Manager</span>
                            </td>
                            <td>
                                Can manage all operational data &mdash; customers, jobs, quotes, invoices, inventory,
                                equipment, and workers. Can view reports and adjust settings, but cannot manage
                                user accounts or change platform-level configuration.
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="badge bg-primary">Employee</span>
                            </td>
                            <td>
                                Can create and edit jobs and quotes, manage customers, and update inventory.
                                Cannot delete records, manage users, or access financial reports. Suited to
                                office staff who handle quoting and customer communication.
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="badge bg-info text-dark">Shop Floor</span>
                            </td>
                            <td>
                                Can view jobs assigned to them and update job status as work progresses (e.g.,
                                move a job from <em>Sandblasting</em> to <em>Cleaning</em>). Cannot create or
                                edit quotes, invoices, or customer records. Designed for workers on the floor
                                who only need to update what they are working on.
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="badge bg-secondary">Read Only</span>
                            </td>
                            <td>
                                View-only access to most parts of the system. Cannot create, edit, or delete
                                any records. Useful for accountants or auditors who need visibility but should
                                not make changes.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section id="your-first-steps" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-list-check text-primary me-2"></i>Your First Steps
            </h2>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-3" role="alert">
                <i class="bi bi-magic flex-shrink-0 mt-1"></i>
                <div>
                    <strong>New to the system?</strong> Use the <a href="/SetupWizard">Setup Wizard</a> to
                    configure your company profile, operating costs, named ovens, and notifications in a guided
                    5-step walkthrough &mdash; takes about 5&ndash;10 minutes. After the wizard, the Dashboard will show
                    a progress checklist to guide you through your first live workflow.
                </div>
            </div>
            <p>
                If you prefer to configure things manually, or if you are returning to complete partial setup,
                work through these steps in order. Each step builds on the last &mdash; for example, inventory items
                need vendors before you can record purchases, and jobs need customers before you can create them.
            </p>

            <div class="list-group shadow-sm">
                <div class="list-group-item list-group-item-action d-flex gap-3 align-items-start py-3">
                    <span class="badge bg-primary rounded-pill mt-1 flex-shrink-0">1</span>
                    <div>
                        <h6 class="mb-1 fw-semibold"><i class="bi bi-truck me-1"></i>Set up your vendors</h6>
                        <p class="mb-0 text-muted small">
                            Go to <strong>Inventory &rsaquo; Vendors</strong> and add the companies you buy powder and
                            other supplies from. Include their payment terms and a contact name. Vendors are linked to
                            inventory items so you always know where to reorder.
                        </p>
                    </div>
                </div>
                <div class="list-group-item list-group-item-action d-flex gap-3 align-items-start py-3">
                    <span class="badge bg-primary rounded-pill mt-1 flex-shrink-0">2</span>
                    <div>
                        <h6 class="mb-1 fw-semibold"><i class="bi bi-box-seam me-1"></i>Add your inventory items</h6>
                        <p class="mb-0 text-muted small">
                            Go to <strong>Inventory &rsaquo; Items</strong> and enter the powders, primers, and
                            consumables you stock. Set each item's unit cost, reorder point, and link it to the vendor
                            you buy it from. This feeds into job costing and low-stock alerts.
                        </p>
                    </div>
                </div>
                <div class="list-group-item list-group-item-action d-flex gap-3 align-items-start py-3">
                    <span class="badge bg-primary rounded-pill mt-1 flex-shrink-0">3</span>
                    <div>
                        <h6 class="mb-1 fw-semibold"><i class="bi bi-tools me-1"></i>Add your equipment</h6>
                        <p class="mb-0 text-muted small">
                            Go to <strong>Equipment</strong> and add your oven, sandblaster, coating booth, and any
                            other machinery. Recording equipment lets you log maintenance and feeds into the operating
                            cost calculations used in job pricing.
                        </p>
                    </div>
                </div>
                <div class="list-group-item list-group-item-action d-flex gap-3 align-items-start py-3">
                    <span class="badge bg-primary rounded-pill mt-1 flex-shrink-0">4</span>
                    <div>
                        <h6 class="mb-1 fw-semibold"><i class="bi bi-person-badge me-1"></i>Add your shop workers</h6>
                        <p class="mb-0 text-muted small">
                            Go to <strong>Operations &rsaquo; Shop Workers</strong> and add the people who work in your
                            shop. Assign each worker a role (Coater, Sandblaster, etc.). Workers can then be assigned
                            to jobs and maintenance tasks.
                        </p>
                    </div>
                </div>
                <div class="list-group-item list-group-item-action d-flex gap-3 align-items-start py-3">
                    <span class="badge bg-primary rounded-pill mt-1 flex-shrink-0">5</span>
                    <div>
                        <h6 class="mb-1 fw-semibold"><i class="bi bi-people me-1"></i>Create your first customer</h6>
                        <p class="mb-0 text-muted small">
                            Go to <strong>Operations &rsaquo; Customers</strong> and add a customer. Choose Commercial
                            for businesses or Non-Commercial for individuals. You will need a customer record before
                            you can create a job or a quote for them.
                        </p>
                    </div>
                </div>
                <div class="list-group-item list-group-item-action d-flex gap-3 align-items-start py-3">
                    <span class="badge bg-success rounded-pill mt-1 flex-shrink-0">6</span>
                    <div>
                        <h6 class="mb-1 fw-semibold"><i class="bi bi-briefcase me-1"></i>Create your first job</h6>
                        <p class="mb-0 text-muted small">
                            Go to <strong>Operations &rsaquo; Jobs</strong> and click <strong>New Job</strong>. Select
                            the customer, describe the work, add line items, set a due date, and assign a worker.
                            Then update the job status as it moves through the shop.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section id="after-the-wizard" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-rocket-takeoff text-primary me-2"></i>After the Wizard &mdash; Your First Workflow
            </h2>
            <p>
                Once the Setup Wizard is complete, two things appear on your Dashboard to guide you through your
                first live workflow:
            </p>

            <h5 class="fw-semibold">Guided Activation</h5>
            <p>
                A banner prompts you to run a short first-workflow walkthrough. Choose a starting path &mdash; either
                <strong>Quote First</strong> (create a quote, get it approved, convert it to a job) or
                <strong>Job First</strong> (create a job directly). The system creates a sample customer
                record for you to use during the walkthrough.
            </p>
            <p>
                After the job is created you are taken to the <strong>Daily Board</strong> &mdash; your shop in real
                time. Every active job appears on the board by stage. The new job is highlighted so you can
                find it easily. Drag it to its next stage to see how your workflow updates live. Once you have
                moved the job, the board prompts you to create the invoice when the work is done.
            </p>

            <h5 class="fw-semibold">Progress Widget</h5>
            <p>
                Below the guided activation banner you will see a <strong>"Get the most out of your shop"</strong>
                widget. It tracks six steps that unlock the full day-to-day workflow:
            </p>
            <ol>
                <li>Create your first job or quote</li>
                <li>Move a job through your workflow</li>
                <li>Send your first invoice</li>
                <li>Bring your crew in (invite team members)</li>
                <li>Customize your workflow labels (job stages, priorities, prep services)</li>
                <li>Set how you get paid (payment terms and quote defaults)</li>
            </ol>
            <p>
                Each incomplete step shows a description and a button that takes you directly to the right place.
                The next recommended step is highlighted. The widget disappears once all six steps are done.
                You can collapse it using the chevron button &mdash; the collapsed state is saved in your browser.
            </p>

            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
                <div>
                    The progress widget and guided activation banner are visible to <strong>Company Admins only</strong>.
                    Other roles land directly on the standard Dashboard.
                </div>
            </div>
        </section>

        <section id="mobile-install" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-phone text-primary me-2"></i>Using on Mobile &mdash; Add to Home Screen
            </h2>
            <p>
                Powder Coating Logix works in any phone browser, but installing it as a <strong>home screen app</strong>
                gives your shop floor workers a much better experience:
            </p>
            <ul class="mb-3">
                <li class="mb-1">Opens full-screen with no browser chrome &mdash; feels like a native app.</li>
                <li class="mb-1">The camera (used by the inventory label scanner) only asks for permission <strong>once</strong> after installation, instead of every browser session.</li>
                <li class="mb-1">Faster to launch &mdash; one tap from the home screen.</li>
            </ul>

            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-4" role="alert">
                <i class="bi bi-apple flex-shrink-0 mt-1"></i>
                <div>
                    <strong>iPhone / iPad users must use Safari.</strong> Adding to the home screen from Chrome,
                    Firefox, or other iOS browsers creates a regular bookmark that opens in that browser &mdash; not
                    a standalone app. Only Safari on iOS supports the full home screen install.
                </div>
            </div>

            <h3 class="h6 fw-semibold mt-3 mb-2"><i class="bi bi-apple me-1"></i>iOS (iPhone / iPad) &mdash; Safari only</h3>
            <ol class="mb-4">
                <li class="mb-1">Open the app in <strong>Safari</strong>.</li>
                <li class="mb-1">Tap the <strong>Share</strong> button <i class="bi bi-box-arrow-up"></i> at the bottom of the screen.</li>
                <li class="mb-1">Scroll down and tap <strong>Add to Home Screen</strong>.</li>
                <li class="mb-1">Confirm the name and tap <strong>Add</strong>.</li>
                <li class="mb-1">The app icon appears on your home screen. Tap it to open in full-screen mode.</li>
            </ol>

            <h3 class="h6 fw-semibold mt-3 mb-2"><i class="bi bi-android2 me-1"></i>Android &mdash; Chrome</h3>
            <ol class="mb-4">
                <li class="mb-1">Open the app in <strong>Chrome</strong>.</li>
                <li class="mb-1">Chrome may show an <strong>Install App</strong> banner at the bottom automatically &mdash; tap it to install.</li>
                <li class="mb-1">If no banner appears, tap the <strong>menu (&#8942;)</strong> in the top-right corner and choose <strong>Add to Home Screen</strong> or <strong>Install App</strong>.</li>
                <li class="mb-1">Confirm and the icon is added to your home screen.</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>
                    When you open the Dashboard on a mobile browser (before installing), a banner at the top
                    of the page guides you through the install steps for your specific device. Once the app is
                    installed as a home screen app, the banner disappears automatically.
                </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="#logging-in">Logging In</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#navigating">Navigating the System</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#roles-and-permissions">Roles and Permissions</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#your-first-steps">Your First Steps</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#after-the-wizard">After the Wizard</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#mobile-install">Using on Mobile</a>
                </nav>
            </div>
        </div>
    </div>
</div>
