{% extends "payroll/base.html" %}
{% block content %}
<style>
.jabatan-page{padding:1.2rem 1.2rem 2rem}.jabatan-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.jabatan-toolbar h1{font-size:2.4rem;margin:0}.jabatan-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.jabatan-table-wrap{overflow-x:auto}.jabatan-table{width:100%;border-collapse:collapse}.jabatan-table th{background:#505b63;color:#fff;padding:.65rem .5rem;white-space:nowrap}
.jabatan-table td{padding:.55rem .5rem;border-bottom:1px solid #dce0e3}.jabatan-table tbody tr:nth-child(odd){background:#f1f1f1}.jabatan-table tbody tr:nth-child(even){background:#fff}
.jabatan-table .action-cell{white-space:nowrap}.jabatan-modal .modal-dialog{max-width:650px}.jabatan-modal label{font-size:.88rem;font-weight:600;margin-bottom:.3rem}
.jabatan-modal .form-control{border-radius:0}.jabatan-pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:.9rem 0}
</style>
<div class="jabatan-page">
  <div class="jabatan-toolbar">
    <h1>Jabatan</h1>
    <div class="jabatan-actions">
      <form method="get" class="d-flex gap-2">
        <input class="form-control" type="search" name="q" value="{{ q }}" placeholder="Search code or position..." style="min-width:260px">
        <button class="btn btn-secondary" type="submit">Search</button>
      </form>
      <button class="btn btn-secondary" type="button" onclick="openJabatanModal()">Add Jabatan</button>
    </div>
  </div>
  {% if messages %}{% for message in messages %}
    <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
      {{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}{% endif %}
  <div class="jabatan-table-wrap">
    <table class="jabatan-table">
      <thead><tr><th>No</th><th>Kode Jabatan</th><th>Nama Jabatan</th><th>Actions</th></tr></thead>
      <tbody>
      {% for row in page_obj %}
        <tr><td>{{ page_obj.start_index|add:forloop.counter0 }}</td><td>{{ row.kdjabatan }}</td><td>{{ row.jabatan }}</td>
          <td class="action-cell">
            <button class="btn btn-sm btn-secondary" type="button" title="Edit"
              onclick="editJabatan('{{ row.id }}', '{{ row.kdjabatan|escapejs }}', '{{ row.jabatan|escapejs }}')"><i class="bi bi-pencil-square"></i></button>
            <form method="post" class="d-inline" onsubmit="return confirm('Delete jabatan {{ row.kdjabatan|escapejs }}?')">
              {% csrf_token %}<input type="hidden" name="action" value="delete"><input type="hidden" name="record_id" value="{{ row.id }}">
              <button class="btn btn-sm btn-danger" type="submit" title="Delete"><i class="bi bi-trash"></i></button>
            </form>
          </td>
        </tr>
      {% empty %}<tr><td colspan="4" class="text-center py-4">No jabatan data found.</td></tr>{% endfor %}
      </tbody>
    </table>
  </div>
  <div class="jabatan-pagination">
    <span>Showing {{ page_obj.start_index|default:0 }}–{{ page_obj.end_index|default:0 }} of {{ total_records }}</span>
    <nav><ul class="pagination pagination-sm mb-0">
      {% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page=1">First</a></li><li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page={{ page_obj.previous_page_number }}">Prev</a></li>
      {% else %}<li class="page-item disabled"><span class="page-link">First</span></li><li class="page-item disabled"><span class="page-link">Prev</span></li>{% endif %}
      <li class="page-item active"><span class="page-link">{{ page_obj.number|default:1 }}</span></li>
      {% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page={{ page_obj.next_page_number }}">Next</a></li><li class="page-item"><a class="page-link" href="?q={{ q|urlencode }}&page={{ page_obj.paginator.num_pages }}">Last</a></li>
      {% else %}<li class="page-item disabled"><span class="page-link">Next</span></li><li class="page-item disabled"><span class="page-link">Last</span></li>{% endif %}
    </ul></nav>
  </div>
</div>
<div class="modal fade jabatan-modal" id="jabatanModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
  <form method="post" action="{% url 'payroll:payroll_jabatan' %}" id="jabatanForm">{% csrf_token %}
    <input type="hidden" name="record_id" id="jabatan_record_id"><input type="hidden" name="action" value="save">
    <div class="modal-header"><h5 class="modal-title" id="jabatanModalTitle">Add Jabatan</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
      <div class="mb-3"><label for="kdjabatan">Kode Jabatan *</label><input class="form-control" id="kdjabatan" name="kdjabatan" maxlength="10" required></div>
      <div class="mb-3"><label for="jabatan">Nama Jabatan *</label><input class="form-control" id="jabatan" name="jabatan" maxlength="20" required></div>
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Save</button></div>
  </form>
</div></div></div>
<script>
function getJabatanModal(){return bootstrap.Modal.getOrCreateInstance(document.getElementById('jabatanModal'));}
function openJabatanModal(){
  document.getElementById('jabatanForm').reset();
  document.getElementById('jabatan_record_id').value='';
  document.getElementById('jabatanModalTitle').textContent='Add Jabatan';
  getJabatanModal().show();
}
function editJabatan(id,code,name){
  document.getElementById('jabatanForm').reset();
  document.getElementById('jabatan_record_id').value=id;
  document.getElementById('kdjabatan').value=code;
  document.getElementById('jabatan').value=name;
  document.getElementById('jabatanModalTitle').textContent='Edit Jabatan';
  getJabatanModal().show();
}
</script>
{% endblock %}