@extends('layouts.app')
@section('title', 'Dokumentasi Sistem')
@section('content')

<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-header border-bottom">
        <h4 class="mb-0 text-primary"><i class="bx bx-book-content me-2"></i> Dokumentasi & Panduan Penggunaan Sistem SSE</h4>
      </div>
      <div class="card-body mt-4">
        
        <!-- Accordion for Documentation -->
        <div class="accordion" id="docAccordion">

          <!-- 1. Alur Kerja Utama -->
          <div class="accordion-item card mb-2 border">
            <h2 class="accordion-header" id="headingWorkflow">
              <button class="accordion-button bg-light text-dark fw-bold" type="button" data-bs-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#collapseWorkflow" aria-expanded="true" aria-controls="collapseWorkflow">
                1. Alur Kerja Utama (Workflow)
              </button>
            </h2>
            <div id="collapseWorkflow" class="accordion-collapse collapse show" aria-labelledby="headingWorkflow" data-bs-parent="#docAccordion">
              <div class="accordion-body">
                <p>Sistem <strong>Sumber Sentuhan Emas (SSE)</strong> dirancang untuk mengontrol proyek konstruksi/pembangunan rumah, mulai dari pembuatan anggaran (RAB) hingga pemantauan stok material di lapangan secara real-time. Alur kerja utamanya adalah:</p>
                <ol class="mb-0">
                  <li><strong>Setup Master Data:</strong> Admin memasukkan data referensi awal seperti Vendor, Material, Kategori, dan data Proyek.</li>
                  <li><strong>Penyusunan Anggaran (RAB):</strong> Admin menetapkan batas anggaran RAB Upah dan RAB Material untuk setiap proyek yang berjalan.</li>
                  <li><strong>Pembelian (Barang Masuk):</strong> Bagian Purchasing/Pembelian mencatat barang yang dibeli dari Vendor. <em>*Sistem akan otomatis memblokir pembelian yang melebihi batas RAB Material.</em></li>
                  <li><strong>Pemakaian (Barang Keluar):</strong> Bagian Lapangan mencatat material yang digunakan setiap harinya. <em>*Sistem akan memvalidasi agar jumlah yang dikeluarkan tidak melebihi sisa stok fisik.</em></li>
                  <li><strong>Monitoring & Rekap Stok:</strong> Pimpinan/Manajer dapat memantau keluar-masuknya barang per material dalam bentuk Kartu Stok (Buku Besar).</li>
                </ol>
              </div>
            </div>
          </div>

          <!-- 2. Master Data -->
          <div class="accordion-item card mb-2 border">
            <h2 class="accordion-header" id="headingMaster">
              <button class="accordion-button collapsed bg-light text-dark fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMaster" aria-expanded="false" aria-controls="collapseMaster">
                2. Kelola Data Master
              </button>
            </h2>
            <div id="collapseMaster" class="accordion-collapse collapse" aria-labelledby="headingMaster" data-bs-parent="#docAccordion">
              <div class="accordion-body">
                Data master terletak pada menu sidebar <strong>"Master Data"</strong>. Menu ini adalah fondasi aplikasi.
                <ul class="mt-2 mb-0">
                  <li><strong>Vendor:</strong> Daftar penyuplai barang/toko bangunan tempat perusahaan berbelanja. Diperlukan saat input Barang Masuk.</li>
                  <li><strong>Kategori RAB:</strong> Pengelompokan struktur pekerjaan (contoh: <em>I. Pekerjaan Persiapan</em>, <em>II. Pekerjaan Pondasi</em>). Digunakan untuk membuat struktur RAB berjenjang.</li>
                  <li><strong>Kategori Material:</strong> Pengelompokan jenis barang (contoh: Semen, Besi, Pasir, dll).</li>
                  <li><strong>Data Material:</strong> Katalog utama seluruh barang/material yang digunakan di perusahaan. Harus dibuat sebelum bisa dianggarkan di RAB atau dibeli di Barang Masuk.</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 3. Proyek & RAB -->
          <div class="accordion-item card mb-2 border">
            <h2 class="accordion-header" id="headingProyek">
              <button class="accordion-button collapsed bg-light text-dark fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProyek" aria-expanded="false" aria-controls="collapseProyek">
                3. Daftar Proyek & Rencana Anggaran Biaya (RAB)
              </button>
            </h2>
            <div id="collapseProyek" class="accordion-collapse collapse" aria-labelledby="headingProyek" data-bs-parent="#docAccordion">
              <div class="accordion-body">
                <p><strong>Daftar Proyek</strong> (Menu Dashboard -> Proyek) adalah pusat kendali operasi. Untuk mengelola proyek, Anda harus masuk melalui menu Daftar Proyek, lalu mengklik salah satu tombol pintasan di kolom "Aksi" atau "RAB".</p>
                <ul>
                  <li><strong>RAB Upah & Material:</strong> Dikategorikan secara terpisah. Anda perlu memilih Proyek -> Klik tombol RAB Upah/Material.</li>
                  <li>Di dalam halaman RAB, Anda menambahkan item berdasarkan <em>Kategori Pekerjaan</em>.</li>
                  <li>Isikan Nama Material/Pekerjaan, Qty, Satuan, dan Harga Satuan. Subtotal akan dikalkulasikan secara otomatis.</li>
                  <li>Total seluruh RAB Material sebuah proyek akan menjadi <strong>Batas Maksimal (Limit)</strong> untuk transaksi Barang Masuk.</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 4. Barang Masuk -->
          <div class="accordion-item card mb-2 border">
            <h2 class="accordion-header" id="headingMasuk">
              <button class="accordion-button collapsed bg-light text-dark fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMasuk" aria-expanded="false" aria-controls="collapseMasuk">
                4. Transaksi Barang Masuk (Purchasing)
              </button>
            </h2>
            <div id="collapseMasuk" class="accordion-collapse collapse" aria-labelledby="headingMasuk" data-bs-parent="#docAccordion">
              <div class="accordion-body">
                <p>Digunakan untuk mencatat nota pembelian material dari Vendor.</p>
                <div class="alert alert-info">
                  <strong>Penting: Validasi Anggaran!</strong> Sistem ini menerapkan fitur proteksi <em>budgeting</em>. 
                  Jika total nilai "Barang Masuk" (yang sudah ada + yang sedang diinput) melebihi total "RAB Material" yang telah dianggarkan untuk proyek tersebut, sistem akan menolak transaksi dan menampilkan pesan error sisa budget.
                </div>
                <ul class="mb-0">
                  <li><strong>Cara Akses:</strong> Menu Daftar Proyek -> Klik tombol <strong>Masuk</strong> (Warna Biru) di proyek yang dipilih.</li>
                  <li><strong>Input:</strong> Pilih Vendor, tanggal nota, lalu tambahkan baris item barang yang dibeli (bisa banyak item sekaligus dalam 1 nota).</li>
                  <li>Formulir akan menghitung <em>Grand Total</em> secara real-time dan menampilkan indikator sisa budget RAB.</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 5. Barang Keluar -->
          <div class="accordion-item card mb-2 border">
            <h2 class="accordion-header" id="headingKeluar">
              <button class="accordion-button collapsed bg-light text-dark fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKeluar" aria-expanded="false" aria-controls="collapseKeluar">
                5. Transaksi Barang Keluar (Usage)
              </button>
            </h2>
            <div id="collapseKeluar" class="accordion-collapse collapse" aria-labelledby="headingKeluar" data-bs-parent="#docAccordion">
              <div class="accordion-body">
                <p>Digunakan untuk mencatat material yang dipakai/dikeluarkan ke lapangan proyek setiap harinya.</p>
                <div class="alert alert-warning">
                  <strong>Penting: Validasi Fisik Stok!</strong> Sistem akan mencegah Anda mengeluarkan barang jika kuantitas yang diminta melebihi sisa stok yang ada di lokasi (Total Masuk - Total Keluar sebelumnya).
                </div>
                <ul class="mb-0">
                  <li><strong>Cara Akses:</strong> Menu Daftar Proyek -> Klik tombol <strong>Keluar</strong> (Warna Kuning) di proyek yang dipilih.</li>
                  <li><strong>Input:</strong> Isi tanggal pemakaian dan keterangan (misal: "Dipakai untuk ngecor lantai 2"). Tambahkan item barang dan jumlah kuantitas yang diambil.</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 6. Kartu Stok -->
          <div class="accordion-item card mb-2 border">
            <h2 class="accordion-header" id="headingStok">
              <button class="accordion-button collapsed bg-light text-dark fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStok" aria-expanded="false" aria-controls="collapseStok">
                6. Rekap & Kartu Stok Material
              </button>
            </h2>
            <div id="collapseStok" class="accordion-collapse collapse" aria-labelledby="headingStok" data-bs-parent="#docAccordion">
              <div class="accordion-body">
                <p>Fitur untuk memantau pergerakan fisik barang (Inventory).</p>
                <ul class="mb-0">
                  <li><strong>Rekap Stok Keseluruhan:</strong> Menampilkan daftar seluruh material yang pernah dimutasi (masuk/keluar) pada proyek tertentu, lengkap dengan Total In, Total Out, dan Saldo Akhir.</li>
                  <li><strong>Kartu Stok (Ledger Detail):</strong> Dengan mengklik salah satu nama barang di Rekap Stok, Anda dapat melihat rincian kronologis setiap transaksi (per tanggal) untuk barang tersebut, beserta nilai rupiah dan *running balance* (sisa stok tiap barisnya).</li>
                </ul>
              </div>
            </div>
          </div>

        </div> <!-- End Accordion -->

      </div>
    </div>
  </div>
</div>
@endsection