{# Modal penjelasan cara kerja Modul Proyek (job costing). Di-include di
   proyek_list.html & proyek_detail.html; dipicu tombol [data-bs-target="#modalProyekHelp"]. #}
<div class="modal fade" id="modalProyekHelp" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header py-2" style="background:#7c3aed;color:#fff">
        <h6 class="modal-title"><i class="fas fa-circle-question me-2"></i>Cara Kerja Modul Proyek</h6>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body" style="font-size:.86rem;line-height:1.55">

        <p class="mb-2">
          Modul Proyek dipakai untuk melihat untung-rugi dan posisi tagihan tiap
          proyek atau pekerjaan (misalnya proyek instalasi atau borongan), tanpa
          perlu membuat pembukuan terpisah.
        </p>

        <div class="alert alert-light border d-flex gap-2 py-2 px-3 mb-3" style="font-size:.82rem">
          <i class="fas fa-lightbulb mt-1" style="color:#f59e0b"></i>
          <div>
            <strong>Proyek itu seperti label yang ditempel ke transaksi.</strong>
            Proyek tidak punya jurnal atau buku besar sendiri. Transaksi yang Anda
            tandai ke sebuah proyek tetap masuk ke pembukuan utama seperti biasa.
            Modul ini hanya menyaring dan menjumlahkan transaksi yang berlabel proyek itu.
            Karena itu angkanya selalu sama dengan Laba Rugi dan Neraca.
          </div>
        </div>

        <div class="fw-bold mb-1" style="color:#7c3aed"><i class="fas fa-list-ol me-1"></i>Cara pakai (3 langkah)</div>
        <ol class="ps-3 mb-3">
          <li class="mb-1"><strong>Buat proyek</strong> di halaman ini (kode, nama, pelanggan,
            nilai kontrak, anggaran biaya).</li>
          <li class="mb-1">Saat input <strong>Pemasukan</strong> atau <strong>Pengeluaran</strong>,
            pilih proyeknya di dropdown <em>"Proyek"</em>. Dropdown muncul kalau ada proyek yang masih aktif.</li>
          <li>Buka detail proyek. Laporan untung-rugi dan tagihannya terisi <strong>otomatis</strong>.</li>
        </ol>

        <div class="fw-bold mb-1" style="color:#7c3aed"><i class="fas fa-chart-pie me-1"></i>Angka yang ditampilkan</div>
        <div class="row g-2 mb-3">
          <div class="col-md-6">
            <div class="border rounded p-2 h-100" style="font-size:.8rem">
              <div class="fw-semibold mb-1"><i class="fas fa-scale-balanced me-1" style="color:#16a34a"></i>Laba Proyek <span class="badge bg-success ms-1" style="font-size:.6rem">ACCRUAL</span></div>
              Pendapatan dikurangi biaya (HPP dan beban) dari transaksi yang dicatat,
              bukan dari uang yang masuk atau keluar. Termasuk margin dan realisasi terhadap anggaran/kontrak.
            </div>
          </div>
          <div class="col-md-6">
            <div class="border rounded p-2 h-100" style="font-size:.8rem">
              <div class="fw-semibold mb-1"><i class="fas fa-hand-holding-dollar me-1" style="color:#0ea5e9"></i>Piutang &amp; Hutang <span class="badge bg-info ms-1" style="font-size:.6rem">POSISI KAS</span></div>
              Tagihan ke pelanggan yang belum dibayar, dan hutang vendor proyek yang
              belum Anda lunasi. Ini sisi uang atau penagihan, beda dari laba di sebelahnya.
            </div>
          </div>
        </div>
        <p class="text-muted mb-3" style="font-size:.8rem">
          <i class="fas fa-circle-info me-1"></i>Contoh: sebuah proyek bisa terlihat <strong>laba Rp10 jt</strong>
          padahal <strong>piutangnya belum tertagih Rp14 jt</strong>. Untung di atas kertas belum tentu
          uangnya sudah masuk. Itu sebabnya dua angka ini dipisah.
        </p>

        <div class="fw-bold mb-1" style="color:#7c3aed"><i class="fas fa-flag-checkered me-1"></i>Status proyek</div>
        <ul class="ps-3 mb-3" style="font-size:.82rem">
          <li><span class="badge bg-success">Aktif</span>: muncul di dropdown input transaksi.</li>
          <li><span class="badge bg-secondary">Selesai</span> atau <span class="badge bg-danger">Batal</span>:
            tidak muncul lagi di dropdown. Kalau masih ada piutang atau hutang yang belum beres,
            sistem memberi <strong>peringatan</strong>.</li>
        </ul>

        <div class="alert alert-light border py-2 px-3 mb-0" style="font-size:.8rem">
          <i class="fas fa-shield-halved me-1" style="color:#16a34a"></i>
          Kalau transaksi berproyek Anda <em>edit</em>, <em>hapus</em>, atau <em>retur</em>,
          laporan proyek ikut menyesuaikan sendiri. Anda tidak perlu mengubah angka proyek secara manual.
        </div>

      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm text-white" style="background:#7c3aed" data-bs-dismiss="modal">Mengerti</button>
      </div>
    </div>
  </div>
</div>