<?php
/* ====================================================
SAFETY TALK SYSTEM - PT CITRA LAMPIA MANDIRI
File        : help.php
Versi       : 1.0 (Help & FAQ Page)
Deskripsi   : Panduan penggunaan aplikasi dan Frequently Asked Questions
====================================================
*/

// ===== AUTH CHECK (Tambahkan di baris 1 setelah <?php) =====
date_default_timezone_set('Asia/Jakarta');
if(session_status() === PHP_SESSION_NONE) session_start();

// Cek login & session timeout (30 menit inactivity)
if(!isset($_SESSION['user_logged_in']) || $_SESSION['user_logged_in'] !== true) {
    header('Location: login.php');
    exit;
}

// Session timeout: 30 minutes inactivity
if(isset($_SESSION['last_activity']) && (time() - $_SESSION['last_activity'] > 1800)) {
    session_unset();
    session_destroy();
    header('Location: login.php?timeout=1');
    exit;
}
$_SESSION['last_activity'] = time(); // Update last activity

// Role-based access (opsional, contoh untuk admin-only pages)
// if($_SESSION['user_role'] !== 'admin' && basename($_SERVER['PHP_SELF']) === 'admin_panel.php') {
//     header('Location: index.php?access_denied=1');
//     exit;
// }

date_default_timezone_set('Asia/Jakarta');
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bantuan & Panduan | Safety Talk - PT CLM</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="assets/img/clm_logo3.png">
    <style>
        :root {
            --primary: #0f172a; --primary-dark: #1e3a8a; --accent: #2563eb;
            --success: #059669; --warning: #f59e0b; --danger: #dc2626;
            --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0;
            --gray-300: #cbd5e1; --gray-500: #64748b; --gray-700: #334155; --gray-900: #0f172a;
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --radius: 8px; --radius-lg: 12px;
            --transition: all 0.2s ease;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', system-ui, sans-serif; background: var(--gray-50); color: var(--gray-900); line-height: 1.6; padding: 24px; }
        .container { max-width: 900px; margin: auto; }
        
        /* Header */
        .page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--primary); }
        .back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: white; color: var(--primary); text-decoration: none; border-radius: var(--radius); font-weight: 600; font-size: 13px; box-shadow: var(--shadow-md); transition: var(--transition); border: 1px solid var(--gray-200); }
        .back-btn:hover { background: var(--primary); color: white; transform: translateX(-2px); }
        .page-title h1 { font-size: 20px; font-weight: 700; color: var(--gray-900); }
        .page-title p { font-size: 12px; color: var(--gray-500); }

        /* Search Box */
        .search-box { background: white; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); margin-bottom: 20px; display: flex; gap: 10px; }
        .search-box input { flex: 1; padding: 12px 16px; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; }
        .search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
        .search-box button { padding: 12px 20px; background: var(--primary); color: white; border: none; border-radius: var(--radius); font-weight: 600; cursor: pointer; }

        /* Cards */
        .card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); margin-bottom: 20px; overflow: hidden; }
        .card-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; padding: 16px 20px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .card-header i { font-size: 18px; opacity: 0.9; }
        .card-header h2 { font-size: 16px; font-weight: 600; flex: 1; }
        .card-header .toggle-icon { transition: transform 0.2s; }
        .card-header.active .toggle-icon { transform: rotate(180deg); }
        .card-body { padding: 20px; display: none; }
        .card-body.active { display: block; animation: slideDown 0.2s ease; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Steps */
        .steps { counter-reset: step; list-style: none; }
        .steps li { position: relative; padding-left: 40px; margin-bottom: 20px; font-size: 14px; }
        .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
        .steps li strong { display: block; color: var(--gray-900); margin-bottom: 4px; }

        /* FAQ Accordion */
        .faq-item { border-bottom: 1px solid var(--gray-200); padding: 16px 0; }
        .faq-item:last-child { border-bottom: none; }
        .faq-question { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--gray-900); gap: 12px; }
        .faq-question:hover { color: var(--accent); }
        .faq-answer { margin-top: 10px; font-size: 13px; color: var(--gray-700); display: none; padding-left: 24px; border-left: 3px solid var(--gray-200); }
        .faq-answer.active { display: block; animation: fadeIn 0.2s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Tips Box */
        .tip-box { background: #ecfdf5; border: 1px solid #10b981; border-radius: var(--radius); padding: 14px; margin: 12px 0; font-size: 13px; color: #065f46; display: flex; gap: 10px; }
        .tip-box i { color: var(--success); margin-top: 2px; }

        /* Footer Actions */
        .footer-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; font-size: 13px; text-decoration: none; border: none; cursor: pointer; transition: var(--transition); }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
        .btn-outline { background: white; color: var(--primary); border: 1px solid var(--gray-300); }
        .btn-outline:hover { background: var(--gray-100); }

        @media (max-width: 768px) {
            .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
            .footer-actions { flex-direction: column; }
            .btn { width: 100%; justify-content: center; }
        }
        @media print { .no-print { display: none !important; } body { background: white; padding: 0; } }
    </style>
</head>
<body>
<div class="container">
    <!-- Page Header -->
    <div class="page-header no-print">
        <a href="index.php" class="back-btn"><i class="fas fa-chevron-left"></i> Kembali</a>
        <div class="page-title">
            <h1><i class="fas fa-circle-question"></i> Bantuan & Panduan</h1>
            <p>Panduan penggunaan aplikasi dan jawaban pertanyaan umum</p>
        </div>
    </div>

    <!-- Search Box -->
    <div class="search-box no-print">
        <input type="text" id="helpSearch" placeholder="Cari panduan atau FAQ..." onkeyup="filterHelp()">
        <button type="button"><i class="fas fa-search"></i> Cari</button>
    </div>

    <!-- Panduan Penggunaan -->
    <div class="card help-section" data-keywords="panduan cara input upload foto export cetak">
        <div class="card-header" onclick="toggleCard(this)">
            <i class="fas fa-book-open"></i><h2>📚 Panduan Penggunaan Aplikasi</h2>
            <i class="fas fa-chevron-down toggle-icon"></i>
        </div>
        <div class="card-body">
            <h3 style="font-size:14px;font-weight:600;margin-bottom:16px;color:var(--primary)">🔹 Input Safety Talk Baru</h3>
            <ol class="steps">
                <li><strong>Klik tombol "INPUT SAFETY TALK BARU"</strong> di dashboard atau menu navigasi.</li>
                <li><strong>Isi formulir dengan lengkap:</strong> Tanggal, Divisi, Nama PIC, Jabatan, Topik, Jumlah Peserta.</li>
                <li><strong>Upload foto bukti:</strong> Klik area upload atau drag file gambar (JPG/PNG, maks 5MB).</li>
                <li><strong>Pratinjau foto</strong> akan muncul otomatis. Pastikan foto jelas dan relevan.</li>
                <li><strong>Klik "Simpan Data"</strong> → Data tersimpan dan Anda diarahkan ke halaman rekap.</li>
            </ol>
            <div class="tip-box"><i class="fas fa-lightbulb"></i><div><strong>Tip:</strong> Gunakan nama file foto yang deskriptif, contoh: "ST_20260220_Pond_A.jpg" untuk memudahkan pencarian.</div></div>

            <h3 style="font-size:14px;font-weight:600;margin:24px 0 16px;color:var(--primary)">🔹 Melihat & Filter Data Rekap</h3>
            <ol class="steps">
                <li><strong>Buka halaman "REKAP DATA"</strong> dari dashboard atau menu.</li>
                <li><strong>Gunakan filter:</strong> Pilih rentang tanggal, divisi, atau ketik kata kunci pencarian.</li>
                <li><strong>Klik "Filter"</strong> → tabel akan menampilkan data sesuai kriteria.</li>
                <li><strong>Klik ikon foto</strong> di tabel untuk memperbesar (lightbox).</li>
                <li><strong>Klik tombol Edit (✏️)</strong> untuk mengubah data yang sudah tersimpan.</li>
            </ol>

            <h3 style="font-size:14px;font-weight:600;margin:24px 0 16px;color:var(--primary)">🔹 Export & Cetak Laporan</h3>
            <ol class="steps">
                <li><strong>Export CSV:</strong> Klik tombol "Export CSV" di halaman rekap → file .csv akan diunduh.</li>
                <li><strong>Cetak/PDF:</strong> Klik "Cetak / PDF" → gunakan dialog print browser untuk simpan sebagai PDF.</li>
                <li><strong>Format cetak</strong> sudah dioptimalkan: header perusahaan, tabel rapi, tanpa tombol navigasi.</li>
            </ol>
            <div class="tip-box"><i class="fas fa-info-circle"></i><div><strong>Catatan:</strong> Saat export, semua data terfilter akan diunduh (bukan hanya halaman saat ini jika menggunakan pagination).</div></div>
        </div>
    </div>

    <!-- FAQ Section -->
    <div class="card help-section" data-keywords="faq pertanyaan masalah error foto tidak upload csv">
        <div class="card-header" onclick="toggleCard(this)">
            <i class="fas fa-comments"></i><h2>❓ Frequently Asked Questions (FAQ)</h2>
            <i class="fas fa-chevron-down toggle-icon"></i>
        </div>
        <div class="card-body">
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>📁 Mengapa foto tidak muncul setelah upload?</span>
                    <i class="fas fa-plus"></i>
                </div>
                <div class="faq-answer">
                    Pastikan: (1) Format file JPG/PNG/WEBP, (2) Ukuran < 5MB, (3) Folder <code>uploads/</code> memiliki izin tulis (chmod 755). Jika masih gagal, coba refresh halaman atau hubungi IT Support.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>🔄 Bagaimana cara mengedit data yang sudah tersimpan?</span>
                    <i class="fas fa-plus"></i>
                </div>
                <div class="faq-answer">
                    Buka halaman <strong>Rekap Data</strong> → cari baris yang ingin diedit → klik tombol <strong>Edit (✏️)</strong> → perbaiki data → klik "Simpan Perubahan". Foto lama akan diganti jika Anda upload baru.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>💾 Apakah data bisa hilang jika server restart?</span>
                    <i class="fas fa-plus"></i>
                </div>
                <div class="faq-answer">
                    Tidak. Data disimpan dalam file CSV di folder <code>data/</code> dan foto di <code>uploads/</code>. Pastikan kedua folder ini ikut dalam backup rutin server.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>🔐 Siapa saja yang bisa mengakses sistem ini?</span>
                    <i class="fas fa-plus"></i>
                </div>
                <div class="faq-answer">
                    Sistem menggunakan autentikasi berbasis role: <strong>Admin</strong> (akses penuh) dan <strong>Petugas</strong> (input & view saja). Login diperlukan untuk mengakses fitur edit/hapus.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>📊 Bagaimana cara membaca chart di dashboard?</span>
                    <i class="fas fa-plus"></i>
                </div>
                <div class="faq-answer">
                    <strong>Grafik garis/batang:</strong> Tren 7 hari terakhir. <strong>Donut chart:</strong> Distribusi laporan per divisi (angka di tengah segmen). Arahkan kursor untuk lihat tooltip detail.
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>🌐 Apakah aplikasi bisa diakses via mobile?</span>
                    <i class="fas fa-plus"></i>
                </div>
                <div class="faq-answer">
                    Ya! Desain responsif memungkinkan akses optimal via smartphone/tablet. Untuk upload foto, pastikan koneksi stabil dan izin kamera/file di browser diaktifkan.
                </div>
            </div>
        </div>
    </div>

    <!-- Troubleshooting -->
    <div class="card help-section" data-keywords="troubleshooting error masalah solusi">
        <div class="card-header" onclick="toggleCard(this)">
            <i class="fas fa-wrench"></i><h2>🔧 Troubleshooting Cepat</h2>
            <i class="fas fa-chevron-down toggle-icon"></i>
        </div>
        <div class="card-body">
            <table style="width:100%;font-size:13px;border-collapse:collapse">
                <tr style="border-bottom:1px solid var(--gray-200)"><th style="text-align:left;padding:10px;background:var(--gray-50)">Masalah</th><th style="text-align:left;padding:10px;background:var(--gray-50)">Solusi</th></tr>
                <tr><td style="padding:10px;border-bottom:1px solid var(--gray-100)">Halaman putih / error 500</td><td style="padding:10px;border-bottom:1px solid var(--gray-100)">Cek file <code>.htaccess</code> dan pastikan PHP 7.4+ aktif. Lihat log error server.</td></tr>
                <tr><td style="padding:10px;border-bottom:1px solid var(--gray-100)">Gagal simpan data CSV</td><td style="padding:10px;border-bottom:1px solid var(--gray-100)">Pastikan folder <code>data/</code> writable (chmod 644/755). Cek disk space server.</td></tr>
                <tr><td style="padding:10px;border-bottom:1px solid var(--gray-100)">Foto tidak terupload</td><td style="padding:10px;border-bottom:1px solid var(--gray-100)">Cek <code>upload_max_filesize</code> & <code>post_max_size</code> di php.ini. Pastikan folder <code>uploads/</code> writable.</td></tr>
                <tr><td style="padding:10px">Tampilan berantakan di mobile</td><td style="padding:10px">Clear cache browser. Pastikan viewport meta tag aktif. Update browser ke versi terbaru.</td></tr>
            </table>
            <div style="margin-top:16px;padding:12px;background:#fef3c7;border:1px solid #f59e0b;border-radius:var(--radius);font-size:13px;color:#92400e">
                <i class="fas fa-exclamation-triangle"></i> <strong>Butuh bantuan lebih lanjut?</strong> Hubungi IT Support internal atau kirim email ke <strong>aulizar@citralampiamandiri.biz</strong> dengan lampiran screenshot error.
            </div>
        </div>
    </div>

    <!-- Footer Actions -->
    <div class="footer-actions no-print">
        <a href="index.php" class="btn btn-primary"><i class="fas fa-home"></i> Kembali ke Dashboard</a>
        <a href="about.php" class="btn btn-outline"><i class="fas fa-info-circle"></i> Tentang Sistem</a>
    </div>
</div>

<?php include __DIR__ . '/footer.php'; ?>

<script>
// Toggle Card (Panduan/FAQ Sections)
function toggleCard(header) {
    const body = header.nextElementSibling;
    const isActive = body.classList.contains('active');
    
    // Close all first (accordion style)
    document.querySelectorAll('.card-body').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.card-header').forEach(h => h.classList.remove('active'));
    
    // Toggle current
    if(!isActive) {
        body.classList.add('active');
        header.classList.add('active');
    }
}

// Toggle FAQ Item
function toggleFaq(question) {
    const answer = question.nextElementSibling;
    const icon = question.querySelector('i');
    const isActive = answer.classList.contains('active');
    
    // Close all FAQ answers
    document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('active'));
    document.querySelectorAll('.faq-question i').forEach(i => i.className = 'fas fa-plus');
    
    // Toggle current
    if(!isActive) {
        answer.classList.add('active');
        icon.className = 'fas fa-minus';
    }
}

// Search Filter
function filterHelp() {
    const query = document.getElementById('helpSearch').value.toLowerCase();
    document.querySelectorAll('.help-section').forEach(section => {
        const keywords = section.dataset.keywords || '';
        const text = section.textContent.toLowerCase();
        const match = text.includes(query) || keywords.includes(query);
        section.style.display = match ? 'block' : 'none';
    });
}

// Open first section by default
document.addEventListener('DOMContentLoaded', function() {
    const firstCard = document.querySelector('.card-header');
    if(firstCard) toggleCard(firstCard);
});

// Keyboard shortcut: Ctrl+H to focus search
document.addEventListener('keydown', function(e) {
    if((e.ctrlKey || e.metaKey) && e.key === 'h') {
        e.preventDefault();
        document.getElementById('helpSearch')?.focus();
    }
});
</script>
</body>
</html>