<?php
// pages/user_guide.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WCS Admin User Guide</title>
    <style>
        :root {
            --primary-color: #e50914;
            --bg-color: #141414;
            --text-color: #fff;
            --card-bg: #222;
        }
        body { 
            background-color: var(--bg-color); 
            color: var(--text-color); 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        .container { max-width: 1000px; margin: 0 auto; }
        h1, h2, h3 { color: var(--text-color); margin-top: 1.5em; }
        h1 { border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; }
        .section {
            background: var(--card-bg);
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        }
        .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: bold;
        }
        .toc {
            background: #1f1f1f;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .toc ul { list-style: none; padding: 0; }
        .toc li { margin-bottom: 8px; }
        .toc a { color: #bbb; text-decoration: none; }
        .toc a:hover { color: #fff; text-decoration: underline; }
        code { background: #333; padding: 2px 5px; border-radius: 4px; color: #ff9f43; }
        .note { border-left: 4px solid var(--primary-color); padding-left: 15px; background: rgba(229, 9, 20, 0.1); margin: 15px 0; }
    </style>
</head>
<body>

<div class="container">
    <a href="../index.php" class="back-link">&larr; Back to Dashboard</a>
    
    <h1>WCS Admin System - User Guide</h1>
    <p>Welcome to the Worship & Creative Services (WCS) Administration System. This guide covers the key features and how to use them efficiently.</p>

    <div class="toc">
        <h3>Table of Contents</h3>
        <ul>
            <li><a href="#setup">Initial Setup</a></li>
            <li><a href="#streaming">Streaming & Reports</a></li>
            <li><a href="#attendance">Attendance Tracking</a></li>
            <li><a href="#roster">Roster Management</a></li>
            <li><a href="#issues">Issue Tracking</a></li>
            <li><a href="#members">Member Management</a></li>
        </ul>
    </div>

    <div id="streaming" class="section">
        <h2>Streaming & Reports</h2>
        <p>This module helps track online engagement across YouTube and Web Radio.</p>
        
        <h3>Manual Entry</h3>
        <p>Go to <strong>Streaming > Manual Entry</strong> to log data manually.</p>
        <ul>
            <li><strong>YouTube:</strong> Select the channel and date. You can enter viewer counts for multiple service types (Sunday School, Devotional, Evening Service, etc.) in one go.</li>
            <li><strong>Web Radio:</strong> Enter the listener count and any optional notes.</li>
            <li><strong>Note:</strong> If you miss a day, you can always go back and select a past date to backfill data.</li>
        </ul>

        <h3>Streaming Reports</h3>
        <p>Go to <strong>Streaming > Reports</strong> for visualization.</p>
        <ul>
            <li><strong>Filtering:</strong> Use the "Service Type" dropdown to view trends for specific meetings (e.g., "Sunday School Only").</li>
            <li><strong>PDF Export:</strong> Click the "Export PDF" button to print or save a clean report.</li>
            <li><strong>Graph:</strong> Displays trends over the month. Solid lines represent automated data (if configured), and dashed lines represent manual logs.</li>
        </ul>
    </div>

    <div id="attendance" class="section">
        <h2>Attendance Tracking</h2>
        
        <h3>Kiosk Mode</h3>
        <p>Use the <strong>Kiosk Mode</strong> for members to check themselves in via specific devices/tablets at the entrance.</p>
        
        <h3>Manual Attendance</h3>
        <p>Admins can manually mark attendance via <strong>Attendance > Manual Check-In</strong>. Useful for late arrivals or correcting records.</p>
        
        <h3>Attendance Reports</h3>
        <p>View detailed stats on punctuality, absentees, and quarterly summaries under <strong>Attendance > Reports</strong>.</p>
    </div>

    <div id="roster" class="section">
        <h2>Roster Management</h2>
        <p>Manage unit schedules and assignments.</p>
        <ul>
            <li><strong>Create Roster:</strong> Select a service date and assign members to roles (e.g., Camera, Sound, Ushering).</li>
            <li><strong>Draft vs Approved:</strong> Rosters start as "Drafts". Once finalized, mark them as "Approved" to make them visible to members.</li>
            <li><strong>Availability:</strong> Check a member's status (Available/Traveled/Sick) before assigning.</li>
        </ul>
    </div>

    <div id="issues" class="section">
        <h2>Issue Tracking</h2>
        <p>Log and track facility or equipment issues.</p>
        <ul>
            <li><strong>Report Issue:</strong> Click "Log New Issue". Categorize it (Technical, Facility, etc.) and assign a priority.</li>
            <li><strong>Status Workflow:</strong> Open &rarr; In Progress &rarr; Resolved &rarr; Closed.</li>
            <li><strong>Resolution Notes:</strong> Always add notes when resolving an issue for future reference.</li>
        </ul>
    </div>

    <div id="members" class="section">
        <h2>Member Management</h2>
        <p>The central database of all unit members.</p>
        <ul>
            <li><strong>Profiles:</strong> Update contact info, unit roles, and statuses.</li>
            <li><strong>Import:</strong> You can bulk import members via CSV in the Settings area.</li>
        </ul>
    </div>

    <div id="setup" class="section">
        <h2>System Setup & Maintenance</h2>
        <p class="note">Run <code>setup.php</code> only when installing or updating the system schema.</p>
        <ul>
            <li><strong>Fresh Install:</strong> Wipes the database and installs clean tables. <strong>Use with caution</strong>.</li>
            <li><strong>Update Only:</strong> Safely upgrades your database structure without losing data. Run this if you see "Table/Column not found" errors after a code update.</li>
        </ul>
    </div>

    <div style="text-align: center; margin-top: 40px;">
        <p>&copy; <?php echo date('Y'); ?> WCS Department Operations</p>
    </div>
</div>

</body>
</html>
