{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
  <h2>Employee Change Log</h2>

  <!-- Filters -->
  <form method="get" class="row g-3 mb-4">
    <div class="col-md-3">
      <input type="text" name="user" class="form-control" placeholder="Changed By" value="{{ user_filter }}">
    </div>
    <div class="col-md-3">
      <input type="text" name="field" class="form-control" placeholder="Field Name" value="{{ field_filter }}">
    </div>
    <div class="col-md-2">
      <input type="date" name="start_date" class="form-control" value="{{ start_date }}">
    </div>
    <div class="col-md-2">
      <input type="date" name="end_date" class="form-control" value="{{ end_date }}">
    </div>
    <div class="col-md-2">
      <button type="submit" class="btn btn-primary w-100">Filter</button>
    </div>
  </form>

  <!-- Table -->
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-sm">
      <thead class="table-dark">
        <tr>
          <th>Employee</th>  
          <th>Field</th>
          <th>Old Value</th>
          <th>New Value</th>
          <th>Changed By</th>
          <th>Changed On</th>
        </tr>
      </thead>
      <tbody>
       {% for log, emp_name, changer_name in logs.items %}
        <tr>
        <td>{{ emp_name or 'Unknown' }}</td>
        <td>{{ log.field_name }}</td>
        <td>{{ log.old_value }}</td>
        <td>{{ log.new_value }}</td>
        <td>{{ changer_name or 'Unknown' }}</td>
        <td>{{ log.changed_on.strftime('%Y-%m-%d %H:%M:%S') }}</td>
        </tr>

        {% else %}
        <tr>
          <td colspan="5" class="text-center">No changes found.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  <nav>
    <ul class="pagination justify-content-center">
      {% if logs.has_prev %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for('employee.view_change_log', page=logs.prev_num, user=user_filter, field=field_filter, start_date=start_date, end_date=end_date) }}">&laquo; Prev</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">&laquo; Prev</span></li>
      {% endif %}

      {% for page_num in logs.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
        {% if page_num %}
          {% if page_num == logs.page %}
            <li class="page-item active"><span class="page-link">{{ page_num }}</span></li>
          {% else %}
            <li class="page-item"><a class="page-link" href="{{ url_for('employee.view_change_log', page=page_num, user=user_filter, field=field_filter, start_date=start_date, end_date=end_date) }}">{{ page_num }}</a></li>
          {% endif %}
        {% else %}
          <li class="page-item disabled"><span class="page-link">...</span></li>
        {% endif %}
      {% endfor %}

      {% if logs.has_next %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for('employee.view_change_log', page=logs.next_num, user=user_filter, field=field_filter, start_date=start_date, end_date=end_date) }}">Next &raquo;</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">Next &raquo;</span></li>
      {% endif %}
    </ul>
  </nav>
</div>
{% endblock %}