<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"><a href="<?php echo site_url('master/pegawai'); ?>">Data Pegawai</a></li>
          <li class="breadcrumb-item"><a href="<?php echo site_url('master/pegawai/detail/' . $row->id_pegawai); ?>">Detail</a></li>
          <li class="breadcrumb-item active">Mapping Komponen</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <div class="card card-danger card-outline">
      <div class="card-header">
        <h3 class="card-title"><i class="fa fa-sliders mr-1"></i> Atur Komponen Per Pegawai</h3>
      </div>
      <div class="card-body">
        <div class="alert alert-light border">
          <strong>Petunjuk cepat:</strong> centang komponen yang aktif untuk pegawai ini. Isi <em>override nilai</em> bila nilainya berbeda dari default.
        </div>

        <?php echo form_open(site_url('master/pegawai/komponen/' . $row->id_pegawai), ['id' => 'form-mapping-komponen']); ?>
        <div class="table-responsive">
          <table class="table table-bordered table-striped table-sm">
            <thead>
              <tr>
                <th style="width: 70px;">Aktif</th>
                <th>Kode</th>
                <th>Komponen</th>
                <th style="width: 120px;">Jenis</th>
                <th style="width: 120px;">Tipe</th>
                <th style="width: 170px;">Nilai Default</th>
                <th style="width: 170px;">Override Nilai</th>
                <th>Catatan</th>
              </tr>
            </thead>
            <tbody>
              <?php if (!empty($list_komponen)): ?>
                <?php foreach ($list_komponen as $k): ?>
                  <?php
                    $checked = ((int) ($k->map_active ?? 1) === 1);
                    $override = $k->nilai_override !== null ? (float) $k->nilai_override : null;
                    $default_display = $k->tipe_nilai === 'PERSEN'
                      ? rtrim(rtrim(number_format((float) $k->nilai_default, 2, '.', ''), '0'), '.') . ' %'
                      : 'Rp ' . rupiah($k->nilai_default);
                  ?>
                  <tr>
                    <td class="text-center align-middle">
                      <input type="checkbox"
                             class="chk-komponen"
                             name="aktif[<?php echo (int) $k->id_komponen; ?>]"
                             value="1"
                             <?php echo $checked ? 'checked' : ''; ?>>
                    </td>
                    <td class="align-middle"><code><?php echo html_escape($k->kode_komponen); ?></code></td>
                    <td class="align-middle"><?php echo html_escape($k->nama_komponen); ?></td>
                    <td class="align-middle">
                      <span class="badge <?php echo $k->jenis === 'TUNJANGAN' ? 'badge-success' : 'badge-danger'; ?>">
                        <?php echo html_escape($k->jenis); ?>
                      </span>
                    </td>
                    <td class="align-middle"><?php echo html_escape($k->tipe_nilai); ?></td>
                    <td class="align-middle"><?php echo $default_display; ?></td>
                    <td>
                      <input type="text"
                             class="form-control form-control-sm inp-override"
                             data-komponen="<?php echo (int) $k->id_komponen; ?>"
                             name="override[<?php echo (int) $k->id_komponen; ?>]"
                             value="<?php echo $override !== null ? $override : ''; ?>"
                             placeholder="Kosong = default">
                      <small class="text-muted"><?php echo $k->tipe_nilai === 'PERSEN' ? 'Isi angka persen, contoh 2.5' : 'Isi nominal angka'; ?></small>
                    </td>
                    <td>
                      <input type="text"
                             class="form-control form-control-sm"
                             name="catatan[<?php echo (int) $k->id_komponen; ?>]"
                             value="<?php echo html_escape($k->catatan ?? ''); ?>"
                             placeholder="Opsional">
                    </td>
                  </tr>
                <?php endforeach; ?>
              <?php else: ?>
                <tr>
                  <td colspan="8" class="text-center text-muted">Belum ada komponen aktif untuk dimapping.</td>
                </tr>
              <?php endif; ?>
            </tbody>
          </table>
        </div>

        <div class="mt-3 d-flex justify-content-between">
          <a href="<?php echo site_url('master/pegawai/detail/' . $row->id_pegawai); ?>" class="btn btn-secondary">
            <i class="fa fa-arrow-left mr-1"></i> Kembali
          </a>
          <button type="submit" class="btn btn-danger">
            <i class="fa fa-save mr-1"></i> Simpan Mapping
          </button>
        </div>
        <?php echo form_close(); ?>
      </div>
    </div>
  </div>
</section>

<script>
$(function () {
  function syncOverrideState() {
    $('.chk-komponen').each(function () {
      var $chk = $(this);
      var id = $chk.closest('tr').find('.inp-override').data('komponen');
      var $input = $('.inp-override[data-komponen="' + id + '"]');
      $input.prop('disabled', !$chk.is(':checked'));
    });
  }

  $(document).on('change', '.chk-komponen', syncOverrideState);
  syncOverrideState();
});
</script>
