@{
    ViewData["Title"] = "Customer Intake Kiosk";
}

<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">Customer Intake Kiosk</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>
                The Customer Intake Kiosk lets walk-in customers fill out their own intake form on a front-desk tablet
                &mdash; no staff assistance required. When they're done, a <strong>customer record</strong> is automatically
                created (or matched to an existing one), a <strong>Draft Quote or Pending Job</strong> is created
                depending on your setting, and your team receives an in-app notification.
            </p>
            <p>
                The kiosk runs as a browser page (optimised for iPad and Android tablets) and can also send a
                <strong>remote link</strong> so customers fill out the form on their own phone before they arrive.
            </p>
        </section>

        <section id="setup" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-gear text-primary me-2"></i>Setting Up the Kiosk
            </h2>
            <ol>
                <li class="mb-2">
                    Go to <strong>Settings → Kiosk Setup</strong> (or <a href="/Kiosk/Activate">/Kiosk/Activate</a>).
                </li>
                <li class="mb-2">
                    Click <strong>Activate Kiosk</strong>. This generates a unique activation token for your company
                    and sets a secure cookie on the current device.
                </li>
                <li class="mb-2">
                    On the tablet, open a browser and navigate to <code>/Kiosk/Welcome</code>. You'll see your
                    company logo and a "Ready" indicator &mdash; the tablet is now in kiosk mode.
                </li>
                <li class="mb-2">
                    <strong>Add to Home Screen</strong> on iOS/Android for a full-screen, app-like experience that
                    also preserves camera permissions between sessions.
                </li>
            </ol>
            <div class="alert alert-info alert-permanent">
                <i class="bi bi-info-circle me-2"></i>
                The kiosk cookie is device-specific and lasts 365 days. If you swap tablets or clear the browser,
                go back to Kiosk Setup and activate again.
            </div>
        </section>

        <section id="starting" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-play-circle text-primary me-2"></i>Starting an Intake Session
            </h2>
            <p>There are two ways to start an intake:</p>

            <h3 class="h6 fw-semibold mt-3 mb-2">In-Person (tablet at front desk)</h3>
            <ol>
                <li class="mb-1">The tablet sits on the Welcome screen &mdash; the customer sees your logo and a "Ready" status dot.</li>
                <li class="mb-1">A staff member clicks <strong>Start Intake</strong> on the Dashboard (in the Kiosk card).</li>
                <li class="mb-1">The tablet detects the new session within 3 seconds and automatically navigates to the intake form.</li>
                <li class="mb-1">The customer fills out <strong>3 steps</strong>: Contact info → Job description → Terms &amp; signature.</li>
                <li class="mb-1">On Submit, the kiosk shows a thank-you screen and returns to Welcome after 30 seconds.</li>
            </ol>
            <div class="alert alert-warning alert-permanent mt-2">
                <i class="bi bi-clock me-2"></i>
                If the customer leaves the form untouched for <strong>45 seconds</strong>, it automatically
                resets to the Welcome screen.
            </div>

            <h3 class="h6 fw-semibold mt-4 mb-2">Remote Link (customer fills out on their phone)</h3>
            <ol>
                <li class="mb-1">Go to <a href="/Kiosk/Intakes">Kiosk → Customer Intakes</a> and click <strong>Send Intake Link</strong>.</li>
                <li class="mb-1">Or use the <strong>Send Intake Link</strong> button on the Dashboard Kiosk card.</li>
                <li class="mb-1">Enter the customer's email address and send.</li>
                <li class="mb-1">The customer receives an email with a secure link and completes the same 3-step form on their own device.</li>
                <li class="mb-1">Remote sessions don't require a drawn signature &mdash; a checkbox agreement is used instead.</li>
            </ol>
        </section>

        <section id="output-setting" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-sliders text-primary me-2"></i>Kiosk Output Setting
            </h2>
            <p>
                You can control what gets created when a customer submits the intake form.
                Go to <a href="/CompanySettings?tab=kiosk">Company Settings → Kiosk</a> and choose:
            </p>
            <ul>
                <li>
                    <strong>Create a Quote</strong> (default) &mdash; a Draft quote is created for staff to review and price
                    before work begins. The terms shown to the customer will say "subject to a formal quote." Use this
                    if you price after seeing the parts.
                </li>
                <li>
                    <strong>Create a Job</strong> &mdash; a Pending job is created immediately. The terms will say "a team
                    member will reach out about pricing." Use this if you price on the spot and want the work order
                    ready right away.
                </li>
            </ul>
        </section>

        <section id="what-happens" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-arrow-right-circle text-primary me-2"></i>What Happens on Submission
            </h2>
            <p>When a customer submits their intake form, the system automatically:</p>
            <ul>
                <li><strong>Matches or creates a Customer</strong> &mdash; searches by email first, then phone. If no match, a new non-commercial customer record is created.</li>
                <li>
                    <strong>Creates a Draft Quote or Pending Job</strong> &mdash; depending on your
                    <a href="/CompanySettings?tab=kiosk">Kiosk Output Setting</a>. Quote mode creates a Draft quote
                    (Normal priority); Job mode creates a Pending job with the customer's description and intake source
                    in Special Instructions.
                </li>
                <li><strong>Applies SMS consent</strong> &mdash; if the customer opted in, their customer record is updated with <code>NotifyBySms = true</code> and the consent timestamp (TCPA-compliant).</li>
                <li>
                    <strong>Fires an in-app notification</strong> &mdash; your team's notification bell shows
                    "Walk-in Intake Submitted" (or "Remote Intake Submitted" for remote sessions) with a link to
                    the Intakes page.
                </li>
            </ul>
        </section>

        <section id="reviewing" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-clipboard-check text-primary me-2"></i>Reviewing Submissions (Staff)
            </h2>
            <p>
                Go to <a href="/Kiosk/Intakes">Operations → Intake Sessions</a> to see all sessions.
                Filter by <strong>Submitted</strong>, <strong>Pending</strong>, or <strong>Expired</strong>.
            </p>
            <p>Each row shows:</p>
            <ul>
                <li>Customer name, phone, and email</li>
                <li>Job description snippet</li>
                <li>Session type (In-Person or Remote) and status badge</li>
                <li>SMS opt-in indicator</li>
                <li><strong>View Quote</strong> button &mdash; appears when the kiosk is set to Quote mode; opens the auto-created draft quote</li>
                <li><strong>View Job</strong> button &mdash; appears when the kiosk is set to Job mode; opens the auto-created job</li>
                <li><strong>Customer</strong> button &mdash; opens the matched or created customer record</li>
            </ul>
            <div class="alert alert-info alert-permanent">
                <i class="bi bi-info-circle me-2"></i>
                If submission failed (e.g. a configuration issue), the session is still marked Submitted but the
                action buttons won't appear. The raw intake data (name, phone, description) is still
                visible so staff can create the record manually.
            </div>
        </section>

        <section id="troubleshooting" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-exclamation-triangle text-primary me-2"></i>Troubleshooting
            </h2>
            <dl>
                <dt>Kiosk Welcome screen shows "Connection issue &mdash; retrying&hellip;"</dt>
                <dd class="mb-3">The tablet can't reach the server. Check the tablet's Wi-Fi connection. Once connectivity is restored the status dot automatically turns green &mdash; no refresh needed.</dd>

                <dt>Kiosk doesn't respond when staff clicks Start Intake</dt>
                <dd class="mb-3">The tablet polls every 3 seconds. Wait up to 3 seconds after clicking Start Intake. If it still doesn't respond, reload the Welcome page on the tablet. Make sure the tablet is on the same domain as the server (use HTTPS).</dd>

                <dt>The tablet shows the wrong company logo or no logo</dt>
                <dd class="mb-3">Upload your company logo at Settings → Company Settings → Logo. The kiosk reads your logo directly &mdash; no separate kiosk logo setting is needed.</dd>

                <dt>Signature pad doesn't work on the tablet</dt>
                <dd class="mb-3">Use a capacitive stylus or fingertip &mdash; the signature pad requires touch input. Make sure the browser isn't in desktop mode (check "Request Desktop Site" is off). The signature is only required for In-Person sessions.</dd>

                <dt>Submission fails &mdash; no job or customer created</dt>
                <dd class="mb-3">This usually means Seed Data hasn't been run for your company. Ask your administrator to go to Platform Management → Seed Data and run the seed. This creates the required job status and priority lookup rows.</dd>

                <dt>AI quote on the quote wizard times out on mobile</dt>
                <dd class="mb-3">Photos are automatically compressed before upload. If it still times out, your connection may be slow &mdash; the spinner will say "Still analyzing&hellip;" if it's taking longer than 30 seconds. Try again on a stronger connection.</dd>
            </dl>
        </section>

    </div>

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

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent fw-semibold small text-muted text-uppercase">
                On This Page
            </div>
            <div class="card-body p-0">
                <nav class="nav flex-column small">
                    <a class="nav-link py-1 px-3" href="#overview">Overview</a>
                    <a class="nav-link py-1 px-3" href="#setup">Setting Up the Kiosk</a>
                    <a class="nav-link py-1 px-3" href="#starting">Starting an Intake</a>
                    <a class="nav-link py-1 px-3" href="#output-setting">Kiosk Output Setting</a>
                    <a class="nav-link py-1 px-3" href="#what-happens">What Happens on Submission</a>
                    <a class="nav-link py-1 px-3" href="#reviewing">Reviewing Submissions</a>
                    <a class="nav-link py-1 px-3" href="#troubleshooting">Troubleshooting</a>
                </nav>
            </div>
        </div>
    </div>
</div>
