@extends('docs.layout')

@section('title', 'Beranda Dokumentasi')

@section('page_header')
  <span class="doc-page-badge fase-1"><i class="bi bi-info-circle me-1"></i> Dokumentasi Resmi</span>
  <h1 class="doc-page-title">Sistem Manajemen Proyek SSE</h1>
  <p class="doc-page-description">Pusat dokumentasi komprehensif yang mengupas tuntas arsitektur sistem, struktur direktori kode, alur database, serta panduan operasional seluruh fitur sistem <strong>PT. Sumber Sentuhan Emas</strong>.</p>
@endsection

@section('content')
  <section id="pengenalan-sistem">
    <h2>1. Pengenalan Sistem</h2>
    <p>Sistem Informasi Manajemen Proyek <strong>PT. Sumber Sentuhan Emas (SSE)</strong> adalah aplikasi ERP mini berbasis web yang dibangun khusus untuk menangani proses bisnis konstruksi mulai dari tahap perencanaan anggaran (RAB), pengadaan material (Purchasing / Barang Masuk), pemakaian material di lapangan (Usage / Barang Keluar), monitoring kartu stok, hingga realisasi pembayaran upah tenaga kerja.</p>
    
    <div class="row g-4 my-2">
      <div class="col-md-6 col-lg-3">
        <div class="card h-100 border-0 shadow-sm p-3 bg-light">
          <div class="d-flex align-items-center mb-2">
            <div class="badge bg-primary p-2 me-2"><i class="bi bi-cash-coin fs-6"></i></div>
            <h6 class="mb-0 fw-bold">Kontrol Anggaran</h6>
          </div>
          <p class="small text-muted mb-0">Validasi otomatis mencegah pembelian material melebihi alokasi anggaran RAB Material proyek.</p>
        </div>
      </div>
      <div class="col-md-6 col-lg-3">
        <div class="card h-100 border-0 shadow-sm p-3 bg-light">
          <div class="d-flex align-items-center mb-2">
            <div class="badge bg-success p-2 me-2"><i class="bi bi-boxes fs-6"></i></div>
            <h6 class="mb-0 fw-bold">Kontrol Stok Fisik</h6>
          </div>
          <p class="small text-muted mb-0">Validasi stok fisik secara real-time mencegah pengeluaran material melebihi saldo ketersediaan gudang.</p>
        </div>
      </div>
      <div class="col-md-6 col-lg-3">
        <div class="card h-100 border-0 shadow-sm p-3 bg-light">
          <div class="d-flex align-items-center mb-2">
            <div class="badge bg-warning text-dark p-2 me-2"><i class="bi bi-file-earmark-excel fs-6"></i></div>
            <h6 class="mb-0 fw-bold">Impor RAP Excel</h6>
          </div>
          <p class="small text-muted mb-0">Integrasi cerdas pembacaan file Excel RAP resmi perusahaan dengan hierarki pekerjaan multi-level.</p>
        </div>
      </div>
      <div class="col-md-6 col-lg-3">
        <div class="card h-100 border-0 shadow-sm p-3 bg-light">
          <div class="d-flex align-items-center mb-2">
            <div class="badge bg-info p-2 me-2"><i class="bi bi-paperclip fs-6"></i></div>
            <h6 class="mb-0 fw-bold">Multi-Level Attachments</h6>
          </div>
          <p class="small text-muted mb-0">Lampiran bukti fisik (nota, faktur, surat jalan, gambar kerja) pada level proyek, transaksi, dan baris RAB.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="alur-kerja-utama">
    <h2>2. Alur Kerja Utama (Workflow)</h2>
    <p>Siklus operasional sistem SSE mengikuti 5 fase utama yang saling terintegrasi secara ketat:</p>
    
    <div class="table-responsive">
      <table class="table table-bordered table-hover">
        <thead class="table-light">
          <tr>
            <th style="width: 80px;">Fase</th>
            <th style="width: 200px;">Tahapan</th>
            <th>Aktor / Role</th>
            <th>Aktivitas Utama & Logika Sistem</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-center fw-bold">1</td>
            <td><strong>Setup Master Data</strong></td>
            <td><span class="badge bg-danger">Admin</span></td>
            <td>Membuat data proyek, master vendor, master material, satuan, dan kategori RAB. Tersedia juga fitur <em>On-The-Fly Tagging</em> untuk penambahan langsung dari form transaksi.</td>
          </tr>
          <tr>
            <td class="text-center fw-bold">2</td>
            <td><strong>Penyusunan RAB (Budgeting)</strong></td>
            <td><span class="badge bg-primary">Staf RAB</span>, <span class="badge bg-danger">Admin</span></td>
            <td>Menyusun alokasi <strong>RAB Upah</strong> dan <strong>RAB Material</strong> secara terpadu (Unified RAP), mengimpor template Excel RAP, atau mengisi via form multi-baris dinamis dengan auto-suggest.</td>
          </tr>
          <tr>
            <td class="text-center fw-bold">3</td>
            <td><strong>Pengadaan (Purchasing / Inbound)</strong></td>
            <td><span class="badge bg-success">Staf Purchasing</span>, <span class="badge bg-danger">Admin</span></td>
            <td>Mencatat pembelian material masuk dari vendor. <strong>Sistem memvalidasi:</strong> Transaksi diblokir jika <code>Total Pembelian > Sisa RAB Material</code>.</td>
          </tr>
          <tr>
            <td class="text-center fw-bold">4</td>
            <td><strong>Pemakaian (Usage / Outbound)</strong></td>
            <td><span class="badge bg-success">Staf Purchasing</span>, <span class="badge bg-danger">Admin</span></td>
            <td>Mencatat material yang keluar ke lapangan. <strong>Sistem memvalidasi:</strong> Pengeluaran diblokir jika <code>Qty Diminta > Stok Tersedia (Masuk - Keluar)</code>.</td>
          </tr>
          <tr>
            <td class="text-center fw-bold">5</td>
            <td><strong>Monitoring & Pelaporan</strong></td>
            <td><span class="badge bg-secondary">Manajer</span>, <span class="badge bg-danger">Admin</span></td>
            <td>Memantau saldo kartu stok, buku besar (ledger) kronologis per barang, realisasi upah terbayar terhadap alokasi RAB Upah, dan mencetak laporan resmi format PDF.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <section id="matriks-hak-akses">
    <h2>3. Matriks Hak Akses (RBAC)</h2>
    <p>Sistem menerapkan pengamanan berbasis peran (Role-Based Access Control) yang ditegakkan melalui <code>RoleMiddleware</code>:</p>
    
    <div class="table-responsive">
      <table class="table table-bordered table-striped text-center align-middle">
        <thead class="table-dark">
          <tr>
            <th class="text-start">Modul / Fitur</th>
            <th>Admin</th>
            <th>Staf RAB</th>
            <th>Staf Purchasing</th>
            <th>Manajer</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-start">Dashboard Statistik</td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
          </tr>
          <tr>
            <td class="text-start">Master Data (Proyek, Vendor, Material, Satuan)</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> CRUD</td>
            <td><i class="bi bi-eye-fill text-info"></i> View & Tags</td>
            <td><i class="bi bi-eye-fill text-info"></i> View & Tags</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
          </tr>
          <tr>
            <td class="text-start">Modul RAB (Penyusunan & Impor Excel RAP)</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
          </tr>
          <tr>
            <td class="text-start">Barang Masuk (Purchasing)</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
          </tr>
          <tr>
            <td class="text-start">Barang Keluar (Usage)</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
          </tr>
          <tr>
            <td class="text-start">Rekap Stok & Buku Besar Ledger</td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
            <td><i class="bi bi-check-circle-fill text-success"></i></td>
          </tr>
          <tr>
            <td class="text-start">Catatan Upah Terbayar</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
            <td><i class="bi bi-eye-fill text-info"></i> View Only</td>
          </tr>
          <tr>
            <td class="text-start">User Management & Hak Akses</td>
            <td><i class="bi bi-check-circle-fill text-success"></i> Full</td>
            <td><i class="bi bi-x-circle-fill text-danger"></i></td>
            <td><i class="bi bi-x-circle-fill text-danger"></i></td>
            <td><i class="bi bi-x-circle-fill text-danger"></i></td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <section id="daftar-panduan">
    <h2>4. Struktur Modul Dokumentasi</h2>
    <p>Silakan navigasikan ke bab dokumentasi yang ingin dipelajari secara mendalam:</p>
    
    <div class="row g-3">
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-diagram-3 me-2"></i> Arsitektur & Database</h5>
            <p class="card-text small text-muted">Penjelasan struktur direktori MVC Laravel, pemetaan 11 Controller, 11 Model Eloquent, dan skema relasi database (ERD) dari 15 tabel.</p>
            <a href="{{ route('docs.architecture') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-shield-lock me-2"></i> Autentikasi & Hak Akses</h5>
            <p class="card-text small text-muted">Mekanisme login username-based, rate limiter lockout 5x percobaan, pelacakan last_login_at, dan RoleMiddleware.</p>
            <a href="{{ route('docs.authentication') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-database me-2"></i> Master Data & On-the-Fly Entry</h5>
            <p class="card-text small text-muted">Pengelolaan Proyek, Vendor, Kategori RAB, Satuan, dan Material beserta fitur pembuatan master on-the-fly dari form transaksi.</p>
            <a href="{{ route('docs.master-data') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-cash-coin me-2"></i> RAB & Impor Excel RAP</h5>
            <p class="card-text small text-muted">RAB Terpadu (Upah & Material), algoritma parser impor Excel RAP, auto-suggest per kategori, dan lampiran file per baris.</p>
            <a href="{{ route('docs.rab') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-box-arrow-in-right me-2"></i> Barang Masuk (Purchasing)</h5>
            <p class="card-text small text-muted">Pencatatan pembelian material dan bedah algoritma validasi batas sisa anggaran RAB Material.</p>
            <a href="{{ route('docs.purchasing') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-box-arrow-up-right me-2"></i> Barang Keluar (Usage)</h5>
            <p class="card-text small text-muted">Pencatatan pemakaian material lapangan dan algoritma validasi ketersediaan saldo stok fisik.</p>
            <a href="{{ route('docs.usage') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-file-earmark-bar-graph me-2"></i> Stok & Upah Terbayar</h5>
            <p class="card-text small text-muted">Kartu stok proyek, buku besar (ledger) running balance kronologis, monitoring realisasi upah, dan fitur cetak PDF.</p>
            <a href="{{ route('docs.reports') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <h5 class="card-title text-success"><i class="bi bi-paperclip me-2"></i> Manajemen Lampiran File</h5>
            <p class="card-text small text-muted">Arsitektur relasi Polymorphic, 3 level lampiran, modal preview in-page (PDF/Gambar), dan z-index multi-modal handling.</p>
            <a href="{{ route('docs.attachments') }}" class="btn btn-sm btn-outline-success">Buka Panduan</a>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection