<div class="card">
  <div style="display:flex; justify-content:space-between; align-items:center;
              margin-bottom:16px; flex-wrap:wrap; gap:8px;">
    <span style="font-weight:600; color:#555;">
      Total: <strong><?= count($users) ?></strong> akun
    </span>
    <a href="<?= site_url('user/create') ?>" class="btn btn-primary">+ Tambah Akun</a>
  </div>

  <table id="tblUser" class="display nowrap" style="width:100%">
    <thead>
      <tr>
        <th>#</th>
        <th class="all">Nama</th>
        <th class="all">Username</th>
        <th>Role</th>
        <th>Status</th>
        <th>Login Terakhir</th>
        <th class="all">Aksi</th>
      </tr>
    </thead>
    <tbody>
      <?php if (empty($users)): ?>
        <tr>
          <td colspan="7" style="text-align:center; color:#999; padding:40px;">
            Belum ada akun.
          </td>
        </tr>
      <?php else: ?>
        <?php $my_id = isset($auth_user) ? (int)$auth_user->id : 0; ?>
        <?php foreach ($users as $i => $u): ?>
          <?php $is_self = ((int)$u->id === $my_id); ?>
          <tr>
            <td><?= $i + 1 ?></td>

            <td>
              <strong><?= htmlspecialchars($u->name) ?></strong>
              <?php if ($is_self): ?>
                <span class="badge badge-primary"
                      style="font-size:10px; margin-left:4px;">Anda</span>
              <?php endif; ?>
            </td>

            <td>
              <code style="background:#F5F5F5; padding:2px 7px;
                           border-radius:4px; font-size:12px;">
                <?= htmlspecialchars($u->username) ?>
              </code>
            </td>

            <td>
              <?php if ($u->role === 'admin'): ?>
                <span class="badge" style="background:#FFF8E1; color:#E65100;">
                  👑 Admin
                </span>
              <?php else: ?>
                <span class="badge badge-primary">👤 User</span>
              <?php endif; ?>
            </td>

            <td>
              <?php if ($u->is_active): ?>
                <span class="badge badge-success">● Aktif</span>
              <?php else: ?>
                <span class="badge" style="background:#FFEBEE; color:#C62828;">
                  ● Nonaktif
                </span>
              <?php endif; ?>
            </td>

            <td data-order="<?= $u->last_login ?? '0000-00-00 00:00:00' ?>"
                style="color:#888; font-size:12px; white-space:nowrap;">
              <?= $u->last_login ? date('d/m/Y H:i', strtotime($u->last_login)) : '—' ?>
            </td>

            <td>
              <div style="display:flex; gap:4px; justify-content:center;">
                <a href="<?= site_url('user/edit/' . $u->id) ?>"
                   class="btn btn-warning btn-sm">✏️ Edit</a>
                <a href="<?= site_url('user/reset_password/' . $u->id) ?>"
                   class="btn btn-secondary btn-sm" title="Reset password ke &quot;password&quot;"
                   onclick="return confirm('Reset password <?= htmlspecialchars(addslashes($u->name)) ?> ke &quot;password&quot;?')">
                  🔑
                </a>
                <?php if (!$is_self): ?>
                  <a href="<?= site_url('user/delete/' . $u->id) ?>"
                     class="btn btn-danger btn-sm"
                     onclick="return confirm('Hapus akun <?= htmlspecialchars(addslashes($u->name)) ?>?')">
                    🗑
                  </a>
                <?php endif; ?>
              </div>
            </td>
          </tr>
        <?php endforeach; ?>
      <?php endif; ?>
    </tbody>
  </table>
</div>

<script>
$(document).ready(function () {
  $('#tblUser').DataTable({
    responsive: true,
    language: {
      search:            '',
      searchPlaceholder: 'Cari akun...',
      lengthMenu:        'Tampilkan _MENU_ baris',
      info:              'Menampilkan _START_–_END_ dari _TOTAL_ data',
      infoEmpty:         'Tidak ada data',
      infoFiltered:      '(dari _MAX_ total)',
      zeroRecords:       'Akun tidak ditemukan',
      emptyTable:        'Belum ada akun',
      paginate: { first:'«', last:'»', next:'›', previous:'‹' },
    },
    order:      [[3, 'asc']],
    pageLength: 10,
    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'Semua']],
    columnDefs: [
      { orderable: false, targets: 6 },
      { responsivePriority: 1, targets: 1 },
      { responsivePriority: 2, targets: 2 },
      { responsivePriority: 3, targets: 6 },
    ],
    dom: '<"dt-top"lf>rt<"dt-bottom"ip>',
  });
});
</script>
