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

<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">Timeclock</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 Timeclock module tracks facility-level employee attendance &mdash; when workers arrive and
                leave the shop each day. It is separate from <em>Job Time Entries</em> (which log hours billed
                against a specific job). Timeclock is about payroll and attendance; Job Time Entries are about job costing.
            </p>
            <p>
                Each punch creates a <strong>segment</strong> with a type: <strong>Work</strong>, <strong>Break</strong>,
                or <strong>Lunch</strong>. Only Work segments count toward paid-hours totals &mdash; break and lunch
                time appears in the attendance history for reference but is excluded from day totals, weekly totals,
                and the payroll CSV export.
            </p>
            <p>
                Find Timeclock under <strong>Shop Floor &rsaquo; Timeclock</strong> in the left sidebar.
            </p>
        </section>

        <section id="clocking-in-out" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-box-arrow-in-right text-success me-2"></i>Clocking In, Out, and Breaks
            </h2>
            <p>
                Your <strong>My Clock Status</strong> card on the Timeclock dashboard shows your current state
                and the available actions. The buttons change depending on what you are currently doing.
            </p>

            <h5 class="fw-semibold mt-3">Starting and ending your day</h5>
            <ul>
                <li><strong>Clock In</strong> &mdash; click the green &ldquo;Clock In&rdquo; button when you arrive. Your start time is recorded immediately as a Work segment.</li>
                <li><strong>Clock Out</strong> &mdash; click the red &ldquo;Clock Out&rdquo; button when you leave for the day. Hours worked for that segment are calculated and saved.</li>
            </ul>

            <h5 class="fw-semibold mt-3">Taking a break or lunch <span class="badge bg-secondary fw-normal small">requires multiple-punches setting</span></h5>
            <p>
                When you are clocked in and working, two additional buttons appear (if your company has
                <em>Allow Multiple Punches Per Day</em> enabled in Timeclock Settings):
            </p>
            <ul>
                <li>
                    <strong><i class="bi bi-cup-hot"></i> Break</strong> &mdash; closes your current Work segment
                    and opens a Break segment. Your status changes to <span class="badge bg-warning text-dark">On Break</span>.
                </li>
                <li>
                    <strong><i class="bi bi-cup-straw"></i> Lunch</strong> &mdash; same as Break but marks the
                    segment as Lunch. Your status changes to <span class="badge bg-info text-dark">At Lunch</span>.
                </li>
            </ul>
            <p>
                While on a break or at lunch, a single <strong>Return to Work</strong> button is shown.
                Clicking it closes the break/lunch segment and immediately opens a new Work segment &mdash;
                you are working again without any extra steps.
            </p>
            <div class="alert alert-info alert-permanent">
                <i class="bi bi-info-circle me-2"></i>
                You cannot have two open segments at the same time. The Break/Lunch buttons automatically
                close your current Work segment before opening the break segment, so there is never a gap
                or overlap in your record.
            </div>
        </section>

        <section id="whos-in" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-people-fill text-primary me-2"></i>Who&rsquo;s In
            </h2>
            <p>
                The <strong>Who&rsquo;s In</strong> card shows everyone with an open segment right now, along
                with their current status:
            </p>
            <ul>
                <li><span class="badge bg-success">Working</span> &mdash; actively on the clock</li>
                <li><span class="badge bg-warning text-dark">Break</span> &mdash; on a short break</li>
                <li><span class="badge bg-info text-dark">Lunch</span> &mdash; at lunch</li>
            </ul>
            <p>
                Elapsed time for break and lunch segments is displayed in muted text to distinguish it from
                productive work time. The card refreshes automatically every 60&nbsp;seconds.
            </p>
        </section>

        <section id="kiosk" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-tablet me-2"></i>Shop Floor Kiosk
            </h2>
            <p>
                The Timeclock Kiosk is a tablet-friendly page designed to live on a shared device in the shop.
                Employees do not need to log in &mdash; they tap their name tile and enter a 4-digit PIN.
                The system automatically clocks them in (if currently out) or out (if currently in).
                A confirmation screen shows the time, segment duration, and today&rsquo;s running total,
                then returns to the employee grid after 4&nbsp;seconds.
            </p>
            <div class="alert alert-warning alert-permanent">
                <i class="bi bi-exclamation-triangle me-2"></i>
                The kiosk performs a simple toggle &mdash; it does not have dedicated Break/Lunch buttons.
                Use the main Timeclock dashboard for break and lunch tracking.
            </div>
            <h5 class="fw-semibold mt-3">Activating the kiosk</h5>
            <ol>
                <li>On the tablet, log in as a Manager or Company Admin.</li>
                <li>Navigate to <strong>Timeclock &rsaquo; Activate Kiosk</strong> (or go to <code>/Timeclock/Kiosk/Activate</code>).</li>
                <li>The system generates a device token and writes a secure cookie to that browser.</li>
                <li>From now on, <code>/Timeclock/Kiosk</code> works without login on that device.</li>
            </ol>
            <p>
                Multiple tablets per company are supported &mdash; each tablet gets its own token.
                To deactivate a tablet, go to <strong>Settings &rsaquo; Company &rsaquo; Timeclock</strong>
                and click <strong>Deactivate</strong> next to the device.
            </p>
            <h5 class="fw-semibold mt-3">Setting employee PINs</h5>
            <ol>
                <li>Go to <strong>Settings &rsaquo; Users</strong> and open the employee&rsquo;s Edit page.</li>
                <li>Scroll to the <strong>Timeclock Kiosk PIN</strong> section.</li>
                <li>Enter a 4-digit PIN and click <strong>Set PIN</strong>.</li>
                <li>To disable an employee on the kiosk, click <strong>Clear</strong>.</li>
            </ol>
            <p>
                Only employees with a PIN set will appear on the kiosk employee grid.
            </p>
        </section>

        <section id="manager-tools" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-shield-check text-warning me-2"></i>Manager Tools
            </h2>
            <p>
                Managers and Company Admins have additional controls on the Timeclock dashboard.
                Workers cannot edit or delete their own entries &mdash; all corrections must go through a Manager or Company Admin.
            </p>

            <h5 class="fw-semibold mt-3">Edit an entry</h5>
            <p>
                Click the <i class="bi bi-pencil"></i> pencil icon next to any entry in <strong>My Recent History</strong>
                or the <strong>Team History</strong> table. Adjust the clock-in time, clock-out time, or notes.
                Hours worked are recalculated automatically on save.
            </p>

            <h5 class="fw-semibold mt-3">Delete an entry</h5>
            <p>
                Click the <i class="bi bi-trash"></i> trash icon. The entry is soft-deleted and excluded from
                all totals and reports immediately.
            </p>

            <h5 class="fw-semibold mt-3">Add a manual time entry</h5>
            <p>
                Forgot to clock in? Paper timesheet to enter? Click <strong><i class="bi bi-plus-circle"></i> Manual Entry</strong>
                in the Team History card header to open the manual entry modal. Select the employee, enter
                the clock-in time, an optional clock-out time, and optional notes, then click <strong>Save Entry</strong>.
            </p>
            <ul>
                <li>You can create an <em>open</em> entry (no clock-out) if the employee is still on the clock.</li>
                <li>Manual entries are always created as Work segments.</li>
                <li>Only employees in your company appear in the employee dropdown.</li>
            </ul>

            <h5 class="fw-semibold mt-3">Team History</h5>
            <p>
                The manager section at the bottom of the dashboard lets you load any date range for all
                employees, with full punch detail including segment type (Work / Break / Lunch) and
                edit/delete controls on every row.
            </p>
        </section>

        <section id="reports" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-bar-chart-line text-info me-2"></i>Attendance Report &amp; CSV Export
            </h2>
            <p>
                Go to <strong>Reports &rsaquo; Attendance</strong> for a structured attendance summary.
                Managers see all employees; workers see only their own history.
            </p>

            <h5 class="fw-semibold mt-3">Choosing a period</h5>
            <p>
                The report defaults to the <strong>current week</strong>. Use the toggle and dropdown at
                the top to switch between views:
            </p>
            <ul>
                <li>
                    <strong>Week</strong> &mdash; choose any of the last 12 weeks from the dropdown.
                    &ldquo;This Week&rdquo; and &ldquo;Last Week&rdquo; are pre-labelled for quick access.
                    Weekly subtotal rows are hidden in week view (they would just repeat the total).
                </li>
                <li>
                    <strong>Month</strong> &mdash; choose any of the last 12 months. Weekly subtotal rows
                    appear inside each employee card so you can see how hours are distributed across weeks.
                </li>
            </ul>
            <p>
                The dropdown auto-applies on change &mdash; no separate &ldquo;Filter&rdquo; button needed.
            </p>

            <h5 class="fw-semibold mt-3">Hours totals and break exclusion</h5>
            <p>
                Day totals, weekly subtotals, and the employee total badge count <strong>Work segments only</strong>.
                Break and Lunch segments appear in the table (labelled with a badge) but their hours are
                shown in muted text and do not roll up into any total. This ensures the report is
                payroll-ready without manual adjustments.
            </p>

            <h5 class="fw-semibold mt-3">Payroll CSV export</h5>
            <p>
                Click <strong>Export CSV (Payroll)</strong> to download a flat file for the current period.
                Each row is one clock segment. Columns:
            </p>
            <ul>
                <li>Employee Name, Date, Day of Week</li>
                <li><strong>Type</strong> &mdash; Work, Break, or Lunch</li>
                <li>Clock In, Clock Out, Segment Hours</li>
                <li>Day Total Hours, Week Total Hours &mdash; populated on Work rows only; blank on Break/Lunch rows</li>
                <li>Notes</li>
            </ul>
            <p>
                The CSV is self-contained (one row per segment, no merged cells) and imports directly into
                Excel, Google Sheets, and most payroll software. The filename includes the period label
                (e.g. <code>Acme_Attendance_Week_of_May_26-Jun_1_2026.csv</code>).
            </p>
        </section>

    </div>

    <div class="col-lg-3 d-none d-lg-block">
        <div class="card shadow-sm sticky-top" style="top:80px;">
            <div class="card-body">
                <h6 class="fw-bold mb-3">On This Page</h6>
                <ul class="list-unstyled small">
                    <li><a href="#overview" class="text-decoration-none">Overview</a></li>
                    <li><a href="#clocking-in-out" class="text-decoration-none">Clocking In, Out &amp; Breaks</a></li>
                    <li><a href="#whos-in" class="text-decoration-none">Who&rsquo;s In</a></li>
                    <li><a href="#kiosk" class="text-decoration-none">Shop Floor Kiosk</a></li>
                    <li><a href="#manager-tools" class="text-decoration-none">Manager Tools</a></li>
                    <li><a href="#reports" class="text-decoration-none">Attendance Report &amp; CSV</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
