@extends('public.layout')
@section('title', 'Panduan Penggunaan')
@section('content')

<div class="max-w-4xl mx-auto px-6 py-24">

    <div class="mb-12">
        <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
            <span class="w-4 h-px bg-gray-400 inline-block"></span> Panduan
        </p>
        <h1 class="text-5xl font-bold leading-tight mb-4">Panduan<br>Penggunaan</h1>
        <p class="text-gray-500">Panduan lengkap penggunaan sistem manajemen internal Persegi.</p>
    </div>

    <div class="grid md:grid-cols-4 gap-8">

        {{-- Sidebar navigasi --}}
        <aside class="md:col-span-1">
            <nav class="sticky top-8 space-y-1 text-sm">
                @foreach([
                    '#login'      => 'Login & Akses',
                    '#dashboard'  => 'Dashboard',
                    '#anggota'    => 'Anggota',
                    '#divisi'     => 'Divisi',
                    '#kegiatan'   => 'Kegiatan',
                    '#kas'        => 'Keuangan',
                    '#iuran'      => 'Iuran',
                    '#voting'     => 'Voting',
                    '#approval'   => 'Approval',
                    '#audit'      => 'Audit',
                    '#konten'     => 'Konten & Blog',
                    '#poin'       => 'Poin',
                    '#notifikasi' => 'Notifikasi',
                    '#role'       => 'Hak Akses',
                ] as $href => $label)
                    <a href="{{ $href }}" class="block text-gray-500 hover:text-gray-900 py-1 transition">{{ $label }}</a>
                @endforeach
            </nav>
        </aside>

        {{-- Konten --}}
        <main class="md:col-span-3 space-y-16 text-gray-700 leading-relaxed">

            {{-- Login --}}
            <section id="login">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">1. Login & Akses Panel</h2>
                <ol class="list-decimal list-inside space-y-2 text-sm">
                    <li>Buka <a href="{{ config('app.url') }}/admin" class="underline text-gray-900" target="_blank">{{ config('app.url') }}/admin</a></li>
                    <li>Masukkan email dan password yang diberikan pengurus</li>
                    <li>Klik <strong>Masuk</strong></li>
                </ol>
                <p class="mt-3 text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3">
                    Hanya anggota dengan status <strong>aktif</strong> yang bisa login. Jika tidak bisa masuk, hubungi pengurus.
                </p>
            </section>

            {{-- Dashboard --}}
            <section id="dashboard">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">2. Dashboard</h2>
                <p class="text-sm mb-3">Setelah login, halaman utama menampilkan:</p>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li><strong>Statistik</strong> — jumlah anggota aktif, kegiatan, kas masuk/keluar</li>
                    <li><strong>Log Aktivitas</strong> — perubahan terbaru di sistem</li>
                    <li><strong>Leaderboard Poin</strong> — 10 anggota dengan poin tertinggi</li>
                </ul>
            </section>

            {{-- Anggota --}}
            <section id="anggota">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">3. Manajemen Anggota</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Anggota</p>

                <h3 class="font-semibold text-gray-900 mb-2">Tambah Anggota Baru</h3>
                <ol class="list-decimal list-inside space-y-1 text-sm mb-6">
                    <li>Klik tombol <strong>Tambah Anggota</strong></li>
                    <li>Isi nama, email, nomor telepon, alamat, dan divisi</li>
                    <li>Atur status: <strong>Aktif</strong> atau <strong>Nonaktif</strong></li>
                    <li>Klik <strong>Simpan</strong></li>
                </ol>

                <h3 class="font-semibold text-gray-900 mb-2">Nonaktifkan Anggota</h3>
                <ol class="list-decimal list-inside space-y-1 text-sm mb-4">
                    <li>Buka halaman edit anggota</li>
                    <li>Ubah status ke <strong>Nonaktif</strong> dan isi alasan</li>
                    <li>Klik <strong>Simpan</strong></li>
                </ol>
                <p class="text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3">
                    Anggota nonaktif tidak bisa login ke panel.
                </p>
            </section>

            {{-- Divisi --}}
            <section id="divisi">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">4. Divisi</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Divisi</p>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li>Tambah, edit, atau hapus divisi</li>
                    <li>Setiap divisi bisa memiliki <strong>Penanggung Jawab</strong> — dipilih dari anggota dengan role pengurus</li>
                </ul>
            </section>

            {{-- Kegiatan --}}
            <section id="kegiatan">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">5. Kegiatan</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Kegiatan → Kegiatan</p>

                <div class="flex items-center gap-2 text-sm mb-6">
                    <span class="bg-gray-100 px-3 py-1 rounded-full">Draft</span>
                    <span class="text-gray-400">→</span>
                    <span class="bg-gray-100 px-3 py-1 rounded-full">Pending</span>
                    <span class="text-gray-400">→</span>
                    <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full">Approved</span>
                    <span class="text-gray-400">/</span>
                    <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full">Rejected</span>
                </div>

                <h3 class="font-semibold text-gray-900 mb-2">Buat Kegiatan Baru</h3>
                <ol class="list-decimal list-inside space-y-1 text-sm mb-6">
                    <li>Klik <strong>Tambah Kegiatan</strong></li>
                    <li>Isi judul, deskripsi, tanggal, dan estimasi budget (opsional)</li>
                    <li>Klik <strong>Simpan</strong> — tersimpan sebagai <strong>Draft</strong></li>
                    <li>Ubah status ke <strong>Pending</strong> untuk mengajukan ke ketua</li>
                </ol>

                <p class="text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 mb-6">
                    Budget ≥ Rp500.000 → approval ketua otomatis dibuat.<br>
                    Budget > Rp2.000.000 → voting otomatis dibuat.
                </p>

                <h3 class="font-semibold text-gray-900 mb-2">Catat Kehadiran Peserta</h3>
                <ol class="list-decimal list-inside space-y-1 text-sm">
                    <li>Buka kegiatan yang sudah <strong>Approved</strong></li>
                    <li>Buka tab <strong>Kehadiran Peserta</strong></li>
                    <li>Tambah peserta dan atur status kehadiran</li>
                    <li>Anggota yang hadir otomatis mendapat <strong>+10 poin</strong></li>
                </ol>
            </section>

            {{-- Kas --}}
            <section id="kas">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">6. Keuangan (Kas)</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Keuangan → Transaksi</p>

                <h3 class="font-semibold text-gray-900 mb-2">Catat Transaksi</h3>
                <ol class="list-decimal list-inside space-y-1 text-sm mb-6">
                    <li>Klik <strong>Tambah Transaksi</strong></li>
                    <li>Pilih kategori, isi jumlah, keterangan, dan tanggal</li>
                    <li>Pilih kegiatan terkait jika ada (opsional)</li>
                    <li>Klik <strong>Simpan</strong></li>
                </ol>

                <div class="overflow-x-auto">
                    <table class="w-full text-sm border border-gray-200 rounded-xl overflow-hidden">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="text-left px-4 py-3 font-medium text-gray-500">Jumlah</th>
                                <th class="text-left px-4 py-3 font-medium text-gray-500">Alur</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr><td class="px-4 py-3">< Rp500.000</td><td class="px-4 py-3">Langsung diverifikasi</td></tr>
                            <tr><td class="px-4 py-3">Rp500.000 – Rp2.000.000</td><td class="px-4 py-3">Perlu approval ketua</td></tr>
                            <tr><td class="px-4 py-3">> Rp2.000.000</td><td class="px-4 py-3">Perlu voting anggota</td></tr>
                        </tbody>
                    </table>
                </div>
            </section>

            {{-- Iuran --}}
            <section id="iuran">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">7. Iuran Anggota</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Iuran Anggota</p>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li>Catat iuran per anggota per periode (format: <code class="bg-gray-100 px-1 rounded">YYYY-MM</code>, contoh: <code class="bg-gray-100 px-1 rounded">2026-04</code>)</li>
                    <li>Status: <strong>Lunas</strong> atau <strong>Belum Lunas</strong></li>
                </ul>
            </section>

            {{-- Voting --}}
            <section id="voting">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">8. Voting</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Keputusan → Voting</p>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li>Voting dibuat otomatis saat transaksi atau budget kegiatan > Rp2.000.000</li>
                    <li>Anggota bisa memilih suara di halaman detail voting</li>
                    <li>Voting tertutup otomatis setelah deadline</li>
                </ul>
            </section>

            {{-- Approval --}}
            <section id="approval">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">9. Approval</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Keputusan → Approval</p>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li>Approval dibuat otomatis untuk transaksi atau budget Rp500.000–Rp2.000.000</li>
                    <li>Ketua bisa menyetujui atau menolak di halaman detail approval</li>
                </ul>
            </section>

            {{-- Audit --}}
            <section id="audit">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">10. Audit Internal</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Audit → Temuan Audit</p>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li>Auditor bisa membuat temuan audit</li>
                    <li>Pengurus terkait bisa memberikan respons terhadap temuan</li>
                </ul>
            </section>

            {{-- Konten --}}
            <section id="konten">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">11. Konten & Blog</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Konten → Post</p>
                <ol class="list-decimal list-inside space-y-1 text-sm mb-4">
                    <li>Klik <strong>Tambah Post</strong></li>
                    <li>Isi judul, konten, dan slug</li>
                    <li>Simpan sebagai <strong>Draft</strong> atau langsung <strong>Publish</strong></li>
                </ol>
                <p class="text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3">
                    Artikel yang dipublish otomatis memberikan <strong>+5 poin</strong> ke penulis.
                </p>
            </section>

            {{-- Poin --}}
            <section id="poin">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">12. Poin Anggota</h2>
                <p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Poin Anggota</p>
                <table class="w-full text-sm border border-gray-200 rounded-xl overflow-hidden">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="text-left px-4 py-3 font-medium text-gray-500">Aktivitas</th>
                            <th class="text-left px-4 py-3 font-medium text-gray-500">Poin</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <tr><td class="px-4 py-3">Hadir di kegiatan</td><td class="px-4 py-3 font-semibold text-green-600">+10</td></tr>
                        <tr><td class="px-4 py-3">Artikel dipublish</td><td class="px-4 py-3 font-semibold text-green-600">+5</td></tr>
                    </tbody>
                </table>
            </section>

            {{-- Notifikasi --}}
            <section id="notifikasi">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">13. Notifikasi</h2>
                <p class="text-sm mb-3">Ikon lonceng di pojok kanan atas menampilkan notifikasi masuk:</p>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li>Kegiatan menunggu persetujuan</li>
                    <li>Status kegiatan diubah</li>
                    <li>Transaksi butuh approval atau voting</li>
                    <li>Status keanggotaan diubah</li>
                </ul>
            </section>

            {{-- Role --}}
            <section id="role">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">14. Hak Akses per Role</h2>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm border border-gray-200 rounded-xl overflow-hidden">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="text-left px-4 py-3 font-medium text-gray-500">Role</th>
                                <th class="text-left px-4 py-3 font-medium text-gray-500">Yang Bisa Dilakukan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 text-sm">
                            <tr><td class="px-4 py-3 font-mono text-xs">ketua</td><td class="px-4 py-3">Approve kegiatan, verifikasi kas, lihat semua data</td></tr>
                            <tr><td class="px-4 py-3 font-mono text-xs">bendahara</td><td class="px-4 py-3">Input kas & iuran</td></tr>
                            <tr><td class="px-4 py-3 font-mono text-xs">pengurus</td><td class="px-4 py-3">Buat & ajukan kegiatan, lihat anggota & divisi</td></tr>
                            <tr><td class="px-4 py-3 font-mono text-xs">koordinator</td><td class="px-4 py-3">Buat & kelola kegiatan milik sendiri (sebelum disetujui)</td></tr>
                            <tr><td class="px-4 py-3 font-mono text-xs">anggota</td><td class="px-4 py-3">Lihat kegiatan, voting, poin, buat artikel</td></tr>
                            <tr><td class="px-4 py-3 font-mono text-xs">auditor</td><td class="px-4 py-3">Lihat semua data + buat temuan audit</td></tr>
                            <tr><td class="px-4 py-3 font-mono text-xs">editor</td><td class="px-4 py-3">Review & publish artikel</td></tr>
                        </tbody>
                    </table>
                </div>
            </section>

        </main>
    </div>
</div>

@endsection