{% extends "base.html" %}
{% block title %}Setup Saldo Awal - FinansialApp{% endblock %}
{% block page_title %}Setup Saldo Awal Akun{% endblock %}
{% block content %}

<style>
  .sa-section { background:var(--card); border:1px solid var(--bdr); border-radius:12px; padding:1rem 1.15rem; margin-bottom:1rem; }
  .sa-section-title { font-size:.95rem; font-weight:800; color:var(--tx); margin-bottom:.65rem; display:flex; align-items:center; gap:.5rem; letter-spacing:-.01em; }
  .sa-section-title .sa-ico { width:32px; height:32px; border-radius:9px; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
  .sa-row { display:grid; grid-template-columns: 90px 1fr 200px 150px; gap:.5rem; align-items:center; padding:.35rem 0; border-bottom:1px dashed var(--bdr); }
  .sa-row:last-child { border-bottom:none; }
  .sa-row .sa-kode { font-family:monospace; color:var(--tx3); font-size:.78rem; }
  .sa-row .sa-now  { font-size:.72rem; color:var(--tx3); text-align:right; }
  @media (max-width:768px){ .sa-row { grid-template-columns: 70px 1fr 130px; } .sa-row .sa-now { display:none; } }
</style>

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <span class="text-muted" style="font-size:.85rem;max-width:680px;line-height:1.55">
    Wizard ini untuk meng-input <strong>saldo migrasi</strong> dari pencatatan lama (akuntan/Excel/buku tulis) ke aplikasi.
    Sistem otomatis menyusun jurnal pembukaan: <em>Dr Aset / Cr Liabilitas, Modal Pemilik</em> ke akun
    <strong>3100 Modal Pemilik</strong> sebagai <strong>auto-balance</strong>.
  </span>
</div>

{% if sudah_ada %}
<div class="alert alert-warning py-2 px-3 mb-3" style="font-size:.83rem">
  <i class="fas fa-triangle-exclamation me-1"></i>
  Sudah ada <strong>{{ sudah_ada }} jurnal saldo awal akun</strong> sebelumnya.
  Mengisi form ini akan <strong>menambah</strong> entri saldo awal baru (bukan mengganti).
  Lebih baik cek <a href="/transaksi?tipe_tx=SALDO_AWAL_AKUN" class="alert-link">Daftar Jurnal</a> dulu untuk menghindari double-input.
</div>
{% endif %}

<form method="POST" action="{{ url_for('saldo_awal_simpan') }}" onsubmit="return confirmSimpan()">
  <div class="row g-2 mb-3">
    <div class="col-md-4">
      <label class="form-label small fw-semibold">Tanggal Pembukuan Saldo Awal</label>
      <input type="date" name="tanggal" value="{{ default_tgl }}" class="form-control form-control-sm" required>
      <div class="form-text" style="font-size:.7rem">
        Idealnya = <strong>1 hari sebelum</strong> tanggal transaksi pertama Anda di app ini.
      </div>
    </div>
    <div class="col-md-8 d-flex align-items-end">
      <div class="rounded-3 px-3 py-2 w-100" style="background:var(--card-h);border:1px dashed var(--bdr-md);font-size:.78rem;color:var(--tx2)">
        <i class="fas fa-lightbulb me-1 text-warning"></i>
        Yang TIDAK perlu diisi di sini: <strong>Persediaan/Stok</strong> (input via Inventory → Tambah Produk dengan Stok Awal),
        dan akun <strong>Persediaan Non-SKU</strong> (input via Stok → tombol Non-SKU).
      </div>
    </div>
  </div>

  <!-- ── ASET LANCAR (Kas/Bank/Piutang/dsb) ── -->
  <div class="sa-section">
    <div class="sa-section-title">
      <span class="sa-ico" style="background:linear-gradient(135deg,#22c55e,#16a34a)"><i class="fas fa-wallet"></i></span>
      Aset Lancar (Kas, Bank, Piutang, dst.)
    </div>
    <div style="font-size:.78rem;color:var(--tx2);margin-bottom:.5rem;line-height:1.5">
      Isi <strong>saldo Debit</strong> per akun pada tanggal pembukuan. Yang tidak ada saldo, biarkan kosong.
    </div>
    {% for r in aset_rows %}
    <div class="sa-row">
      <div class="sa-kode">{{ r.kode }}</div>
      <div>
        <input type="hidden" name="aset_kode[]" value="{{ r.kode }}">
        <strong>{{ r.nama }}</strong>
        <div class="text-muted" style="font-size:.7rem">{{ r.subtipe or '' }}</div>
      </div>
      <div>
        <div class="input-group input-group-sm">
          <span class="input-group-text">Rp</span>
          <input type="number" name="aset_nilai[]" class="form-control sa-num" min="0" step="1" placeholder="0">
        </div>
      </div>
      <div class="sa-now">
        Saldo sekarang:<br><strong>{{ saldo_now.get(r.kode, 0)|rp }}</strong>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- ── ASET TETAP ── -->
  <div class="sa-section">
    <div class="sa-section-title">
      <span class="sa-ico" style="background:linear-gradient(135deg,#3b82f6,#2563eb)"><i class="fas fa-building"></i></span>
      Aset Tetap (Peralatan, Kendaraan, Gedung)
    </div>
    <div style="font-size:.78rem;color:var(--tx2);margin-bottom:.5rem;line-height:1.5">
      Tambahkan aset tetap yang sudah dimiliki. Isi <strong>harga perolehan</strong> dan
      <strong>akumulasi penyusutan</strong> sampai tanggal pembukuan.
      Penyusutan bulan berikutnya akan otomatis dijalankan app.
    </div>
    <div class="table-responsive">
      <table class="table table-sm align-middle mb-2" style="font-size:.82rem">
        <thead class="table-light">
          <tr>
            <th style="min-width:160px">Nama Aset</th>
            <th style="width:130px">Kategori</th>
            <th style="width:140px">Harga Perolehan</th>
            <th style="width:135px">Tanggal Beli</th>
            <th style="width:95px">Masa Pakai (bln)</th>
            <th style="width:140px">Akumulasi Peny.</th>
            <th style="width:38px"></th>
          </tr>
        </thead>
        <tbody id="atBody"></tbody>
      </table>
    </div>
    <button type="button" class="btn btn-outline-primary btn-sm" onclick="addAt()">
      <i class="fas fa-plus me-1"></i>Tambah Aset Tetap</button>
  </div>

  <!-- ── LIABILITAS ── -->
  <div class="sa-section">
    <div class="sa-section-title">
      <span class="sa-ico" style="background:linear-gradient(135deg,#ef4444,#dc2626)"><i class="fas fa-file-invoice-dollar"></i></span>
      Liabilitas / Hutang
    </div>
    <div style="font-size:.78rem;color:var(--tx2);margin-bottom:.5rem;line-height:1.5">
      Isi <strong>saldo Kredit</strong> per akun pada tanggal pembukuan.
    </div>
    {% for r in liab_rows %}
    <div class="sa-row">
      <div class="sa-kode">{{ r.kode }}</div>
      <div>
        <input type="hidden" name="liab_kode[]" value="{{ r.kode }}">
        <strong>{{ r.nama }}</strong>
        <div class="text-muted" style="font-size:.7rem">{{ r.subtipe or '' }}</div>
      </div>
      <div>
        <div class="input-group input-group-sm">
          <span class="input-group-text">Rp</span>
          <input type="number" name="liab_nilai[]" class="form-control sa-num" min="0" step="1" placeholder="0">
        </div>
      </div>
      <div class="sa-now">
        Saldo sekarang:<br><strong>{{ saldo_now.get(r.kode, 0)|rp }}</strong>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- ── PREVIEW ── -->
  <div class="card mb-3" style="background:linear-gradient(135deg,#fef3c7,#fde68a);border:0;color:#78350f">
    <div class="card-body py-3 px-3">
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
          <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em">
            Auto-balance ke 3100 Modal Pemilik
          </div>
          <div style="font-size:1.4rem;font-weight:800" id="previewModal">Rp 0</div>
          <div style="font-size:.72rem" id="previewKet">Total Aset − Total Liabilitas</div>
        </div>
        <div class="text-end">
          <div style="font-size:.72rem;font-weight:600">Total Aset (Debit): <strong id="previewAset">Rp 0</strong></div>
          <div style="font-size:.72rem;font-weight:600">Total Liabilitas (Kredit): <strong id="previewLiab">Rp 0</strong></div>
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex gap-2 justify-content-end mb-4">
    <a href="{{ url_for('neraca') }}" class="btn btn-outline-secondary">Batal</a>
    <button type="submit" class="btn btn-primary">
      <i class="fas fa-save me-1"></i>Simpan Saldo Awal</button>
  </div>
</form>

<script>
const KATEGORI_AT = {{ ['Peralatan','Kendaraan','Gedung']|tojson }};
const DEFAULT_TGL = {{ default_tgl|tojson }};

function addAt(){
  const body = document.getElementById('atBody');
  const tr = document.createElement('tr');
  const katOpts = KATEGORI_AT.map(k => `<option value="${k}">${k}</option>`).join('');
  tr.innerHTML = `
    <td><input type="text" name="at_nama[]" class="form-control form-control-sm" placeholder="Mis: Laptop Acer"></td>
    <td><select name="at_kat[]" class="form-select form-select-sm">${katOpts}</select></td>
    <td><div class="input-group input-group-sm"><span class="input-group-text px-1">Rp</span>
        <input type="number" name="at_harga[]" class="form-control sa-num" min="0" step="1" placeholder="0"></div></td>
    <td><input type="date" name="at_tgl[]" class="form-control form-control-sm" value="${DEFAULT_TGL}"></td>
    <td><input type="number" name="at_masa[]" class="form-control form-control-sm text-center" min="1" step="1" value="48"></td>
    <td><div class="input-group input-group-sm"><span class="input-group-text px-1">Rp</span>
        <input type="number" name="at_akum[]" class="form-control sa-num" min="0" step="1" placeholder="0"></div></td>
    <td class="text-center"><button type="button" class="btn btn-xs btn-outline-danger del-at"><i class="fas fa-times"></i></button></td>`;
  body.appendChild(tr);
  if (window.numFmtInitAll) window.numFmtInitAll();
  tr.querySelectorAll('input').forEach(i => i.addEventListener('input', refreshPreview));
}

document.getElementById('atBody').addEventListener('click', function(e){
  const btn = e.target.closest('.del-at');
  if (!btn) return;
  btn.closest('tr').remove();
  refreshPreview();
});

function rp(n){ return window.rpFmt ? window.rpFmt(n) : 'Rp ' + Math.round(n||0).toLocaleString('id-ID'); }
function readNum(el){ return window.numVal ? window.numVal(el) : (parseFloat(el.value)||0); }

function refreshPreview(){
  let totAset = 0, totLiab = 0;
  document.querySelectorAll('input[name="aset_nilai[]"]').forEach(el => totAset += readNum(el));
  document.querySelectorAll('input[name="liab_nilai[]"]').forEach(el => totLiab += readNum(el));
  // Aset tetap (harga - akumulasi → net masuk Aset, akumulasi sebenarnya kontra Aset)
  document.querySelectorAll('input[name="at_harga[]"]').forEach(el => totAset += readNum(el));
  document.querySelectorAll('input[name="at_akum[]"]').forEach(el => totLiab += readNum(el)); // kontra-aset = kredit
  const modal = totAset - totLiab;
  document.getElementById('previewAset').textContent = rp(totAset);
  document.getElementById('previewLiab').textContent = rp(totLiab);
  document.getElementById('previewModal').textContent = rp(Math.abs(modal));
  document.getElementById('previewKet').textContent =
    modal >= 0 ? 'Modal Pemilik akan dikredit ' + rp(modal)
               : 'PERHATIAN: Liabilitas > Aset → defisit modal ' + rp(-modal);
}

document.querySelectorAll('input[name="aset_nilai[]"], input[name="liab_nilai[]"]').forEach(el => {
  el.addEventListener('input', refreshPreview);
});

function confirmSimpan(){
  const totalEntri = document.querySelectorAll('input.sa-num').length;
  return confirm('Simpan saldo awal? Sistem akan membuat 1 jurnal pembukaan dan ' +
                 'meng-isi sisanya otomatis ke akun 3100 Modal Pemilik.');
}

document.addEventListener('DOMContentLoaded', refreshPreview);
</script>
{% endblock %}