<div class="row g-3">
  <div class="col-lg-8">
    <div class="card mb-3">
      <div class="card-header"><i class="bi bi-hdd me-1"></i>Berkas Pencadangan (<?= count($files) ?>)
        <div class="card-actions"><?php if (can('backup','create')): ?>
          <form method="post" action="<?= url('/pencadangan/buat') ?>" data-loading><?= csrf() ?>
            <button class="btn btn-sm btn-primary"><i class="bi bi-plus-lg me-1"></i>Buat Pencadangan Sekarang</button></form><?php endif; ?></div></div>
      <div class="table-wrap"><table class="table table-hover mb-0">
        <thead><tr><th>Nama Berkas</th><th class="ctr">Waktu</th><th class="num">Ukuran</th><th class="ctr">Aksi</th></tr></thead>
        <tbody>
        <?php if (!$files): ?><tr><td colspan="4"><div class="empty-state"><i class="bi bi-hdd"></i>Belum ada berkas pencadangan.</div></td></tr><?php endif; ?>
        <?php foreach ($files as $f): ?>
          <tr>
            <td class="font-monospace small"><?= e($f['nama']) ?></td>
            <td class="ctr small"><?= tglWaktu($f['waktu']) ?></td>
            <td class="num"><?= ukuranBerkas($f['ukuran']) ?></td>
            <td class="ctr nowrap">
              <a class="btn btn-sm btn-light py-0 px-1" href="<?= url('/pencadangan/unduh',['berkas'=>$f['nama']]) ?>" title="Unduh"><i class="bi bi-download"></i></a>
              <?php if (can('backup','create') && userName()): ?>
                <button class="btn btn-sm btn-light py-0 px-1 text-warning" title="Pulihkan"
                        onclick="siapkanPulihkan('<?= attr($f['nama']) ?>')"><i class="bi bi-arrow-counterclockwise"></i></button>
              <?php endif; ?>
              <?php if (can('backup','delete')): ?>
                <form method="post" action="<?= url('/pencadangan/hapus') ?>" class="d-inline"><?= csrf() ?>
                  <input type="hidden" name="berkas" value="<?= attr($f['nama']) ?>">
                  <button class="btn btn-sm btn-light py-0 px-1 text-danger" data-konfirmasi="Hapus berkas pencadangan ini?"><i class="bi bi-trash"></i></button></form>
              <?php endif; ?>
            </td>
          </tr>
        <?php endforeach; ?>
        </tbody></table></div>
    </div>

    <div class="card"><div class="card-header"><i class="bi bi-clock-history me-1"></i>Riwayat Pencadangan</div>
      <div class="table-wrap" style="max-height:300px"><table class="table table-sm table-sticky mb-0">
        <thead><tr><th class="ctr">Waktu</th><th>Berkas</th><th class="num">Ukuran</th><th>Jenis</th><th class="ctr">Status</th><th>Oleh</th><th>Keterangan</th></tr></thead>
        <tbody><?php foreach ($logs as $l): ?>
          <tr><td class="ctr small"><?= tglWaktu($l['created_at']) ?></td>
            <td class="small font-monospace"><?= e(truncate($l['file_name'],32)) ?></td>
            <td class="num"><?= ukuranBerkas($l['file_size']) ?></td>
            <td><?= e(ucfirst($l['type'])) ?></td>
            <td class="ctr"><?= badge(ucfirst($l['status']), $l['status']==='sukses'?'success':'danger') ?></td>
            <td class="small"><?= e($l['created_by_name'] ?: 'Sistem') ?></td>
            <td class="small text-body-secondary"><?= e(truncate($l['message'],36)) ?></td></tr>
        <?php endforeach; ?>
        <?php if (!$logs): ?><tr><td colspan="7" class="text-center text-body-secondary py-3">Belum ada riwayat.</td></tr><?php endif; ?>
        </tbody></table></div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card mb-3 border-danger">
      <div class="card-header bg-danger-subtle text-danger-emphasis"><i class="bi bi-exclamation-triangle me-1"></i>Pemulihan Basis Data</div>
      <form method="post" action="<?= url('/pencadangan/pulihkan') ?>" class="card-body" data-loading>
        <?= csrf() ?>
        <div class="alert alert-danger small">
          <strong>Peringatan.</strong> Pemulihan akan <strong>menimpa seluruh data saat ini</strong> dengan isi berkas pencadangan.
          Buat pencadangan terbaru sebelum melanjutkan. Hanya Super Administrator yang dapat menjalankan pemulihan.
        </div>
        <div class="mb-2"><label class="form-label required" for="berkasPulih">Berkas Pencadangan</label>
          <select class="form-select form-select-sm" id="berkasPulih" name="berkas" required>
            <option value="">— Pilih berkas —</option>
            <?php foreach ($files as $f): ?><option value="<?= attr($f['nama']) ?>"><?= e($f['nama']) ?> (<?= ukuranBerkas($f['ukuran']) ?>)</option><?php endforeach; ?>
          </select></div>
        <div class="mb-3"><label class="form-label required" for="konfirmasi">Ketik <code>PULIHKAN</code> untuk konfirmasi</label>
          <input type="text" class="form-control form-control-sm" id="konfirmasi" name="konfirmasi" required placeholder="PULIHKAN"></div>
        <button class="btn btn-danger w-100" type="submit"
                data-konfirmasi="Pemulihan akan menimpa SELURUH data saat ini. Lanjutkan?">
          <i class="bi bi-arrow-counterclockwise me-1"></i>Pulihkan Basis Data</button>
      </form>
    </div>

    <div class="card"><div class="card-header"><i class="bi bi-info-circle me-1"></i>Panduan Pencadangan</div>
      <div class="card-body small">
        <p class="mb-2"><strong>Lokasi penyimpanan:</strong><br><code style="font-size:11px"><?= e($dir) ?></code></p>
        <p class="mb-2">Sistem menyimpan maksimal <strong><?= (int)$maksBerkas ?></strong> berkas terbaru; berkas lama dihapus otomatis
          (dapat diubah di Pengaturan → Pencadangan).</p>
        <p class="mb-2"><strong>Pencadangan otomatis harian</strong> dapat dijadwalkan lewat <em>Cron Job</em> cPanel:</p>
        <pre class="bg-light p-2 rounded" style="font-size:10.5px;white-space:pre-wrap">0 2 * * * /usr/local/bin/php <?= e(SIPIUTANG_ROOT) ?>/database/backup.php</pre>
        <p class="mb-0">Simpan juga salinan berkas pencadangan di luar server (mis. unduh berkala atau sinkronisasi ke penyimpanan cloud).</p>
      </div></div>
  </div>
</div>
<?php viewStart('scripts'); ?>
<script>
function siapkanPulihkan(nama) {
  document.getElementById('berkasPulih').value = nama;
  document.getElementById('konfirmasi').focus();
  document.getElementById('berkasPulih').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
<?php viewStop(); ?>
