<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1><?php echo $page_title; ?></h1>
        <p class="text-muted mb-0"><?php echo $page_subtitle; ?></p>
      </div>
      <div class="col-sm-6 text-right">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="<?php echo site_url('dashboard'); ?>">Dashboard</a></li>
          <li class="breadcrumb-item active">Mapping Gaji</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <div class="card card-danger card-outline">
      <div class="card-header d-flex align-items-center flex-wrap gap-2">
        <h3 class="card-title mr-auto"><i class="fa fa-sliders mr-1"></i> Daftar Pegawai — Mapping Gaji</h3>

        <div class="d-flex align-items-center mr-2">
          <select id="filter_divisi" class="form-control form-control-sm mr-2" style="min-width:160px;">
            <option value="">Semua Divisi</option>
            <?php foreach ($divisi_list as $d): ?>
              <option
                value="<?php echo html_escape($d->nama_divisi); ?>"
                <?php echo ((int)$f_divisi === (int)$d->id_divisi) ? 'selected' : ''; ?>
              >
                <?php echo html_escape($d->nama_divisi); ?>
              </option>
            <?php endforeach; ?>
          </select>
          <a href="<?php echo site_url('master/mapping_komponen'); ?>" class="btn btn-default btn-sm">Reset</a>
        </div>
      </div>
      <div class="card-body">
        <?php if (!empty($list)): ?>
        <div class="table-responsive">
          <table id="tbl-mapping" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead>
              <tr>
                <th style="width:40px;">#</th>
                <th>NIP</th>
                <th>Nama Pegawai</th>
                <th>Divisi</th>
                <th>Jabatan</th>
                <th class="text-right">Gaji Pokok</th>
                <th class="text-center">Komponen Aktif</th>
                <th class="text-center" style="width:100px;">Aksi</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ($list as $i => $row): ?>
              <tr>
                <td><?php echo $i + 1; ?></td>
                <td><code><?php echo html_escape($row->nip); ?></code></td>
                <td><strong><?php echo html_escape($row->nama_lengkap); ?></strong></td>
                <td><?php echo html_escape($row->nama_divisi); ?></td>
                <td><?php echo html_escape($row->nama_jabatan); ?></td>
                <td class="text-right">
                  <?php if ((float)$row->gaji_pokok > 0): ?>
                    Rp <?php echo rupiah($row->gaji_pokok); ?>
                  <?php else: ?>
                    <span class="text-danger"><i class="fa fa-warning"></i> Belum diset</span>
                  <?php endif; ?>
                </td>
                <td class="text-center">
                  <?php if ((int)$row->total_komponen_aktif > 0): ?>
                    <span class="badge badge-success"><?php echo $row->total_komponen_aktif; ?> komponen</span>
                  <?php else: ?>
                    <span class="badge badge-warning">Belum ada</span>
                  <?php endif; ?>
                </td>
                <td class="text-center">
                  <a href="<?php echo site_url('master/mapping_komponen/pegawai/' . $row->id_pegawai); ?>"
                     class="btn btn-xs btn-danger" title="Atur Komponen">
                    <i class="fa fa-sliders"></i> Atur
                  </a>
                </td>
              </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
        <?php else: ?>
        <div class="alert alert-info m-3"><i class="fa fa-info-circle mr-1"></i> Tidak ada pegawai aktif.</div>
        <?php endif; ?>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
  function initMappingTable() {
    if (!window.jQuery || !jQuery.fn || !jQuery.fn.DataTable) {
      return false;
    }

    <?php if (!empty($list)): ?>
    var $ = window.jQuery;
    $.fn.dataTable.ext.errMode = 'none';

    var table = $('#tbl-mapping').DataTable({
      language: {
        processing: 'Memuat... ',
        search: 'Cari:',
        lengthMenu: 'Tampilkan _MENU_ data',
        info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
        infoEmpty: 'Tidak ada data',
        infoFiltered: '(difilter dari _MAX_ data)',
        zeroRecords: 'Data tidak ditemukan',
        paginate: {
          first: 'Awal',
          last: 'Akhir',
          next: 'Berikutnya',
          previous: 'Sebelumnya'
        }
      },
      pageLength: 25,
      order: [[2, 'asc']],
      columnDefs: [
        { targets: [0, 6, 7], orderable: false }
      ]
    });

    $('#tbl-mapping').on('error.dt', function (e, settings, techNote, message) {
      console.error('DataTables error:', techNote, message);
    });

    $('#filter_divisi').on('change', function () {
      var selected = this.value || '';
      table.column(3).search(selected ? '^' + $.fn.dataTable.util.escapeRegex(selected) + '$' : '', true, false).draw();
    });

    $('#filter_divisi').trigger('change');
    <?php endif; ?>

    return true;
  }

  if (!initMappingTable()) {
    window.addEventListener('load', initMappingTable, { once: true });
  }
});
</script>
