{% extends "base.html" %}
{% block content %}
<h1>Activity Logs</h1>

<form method="get" class="mb-3">
  <div class="row g-2">
    <div class="col-md-3">
      <label for="category" class="form-label">Category:</label>
      <select name="category" id="category" class="form-select">
        <option value="">All</option>
        {% for cat in categories %}
        <option value="{{ cat }}" {% if category==cat %}selected{% endif %}>{{ cat }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="col-md-3">
      <label for="start_date" class="form-label">Start Date:</label>
      <input type="date" name="start_date" id="start_date" value="{{ start_date }}" class="form-control">
    </div>

    <div class="col-md-3">
      <label for="end_date" class="form-label">End Date:</label>
      <input type="date" name="end_date" id="end_date" value="{{ end_date }}" class="form-control">
    </div>

    <div class="col-md-3">
      <label for="search_term" class="form-label">Search:</label>
      <input type="text" name="search_term" id="search_term" value="{{ search_term }}" class="form-control">
    </div>
  </div>

  <div class="mt-3">
    <button type="submit" class="btn btn-primary">Filter</button>
    <a href="{{ url_for('logger.download_logs', category=category, start_date=start_date, end_date=end_date, search_term=search_term) }}"
      class="btn btn-secondary">Download CSV</a>
  </div>
</form>

<ul class="list-group">
  {% for log in logs %}
  <li class="list-group-item log-item" data-log-id="{{ log.id }}">
    <div class="d-flex justify-content-between align-items-center">
      <div class="ms-2 me-auto">
        <div class="fw-bold">{{ log.timestamp }}</div>
        {{ log.action }} - {{ log.description }}
      </div>
      <span class="badge bg-primary rounded-pill">{{ log.category }}</span>
    </div>
  </li>
  {% endfor %}
</ul>

{% if pagination %}
<nav aria-label="Page navigation" class="mt-4">
  <ul class="pagination justify-content-center">
    {% if pagination.has_prev %}
    <li class="page-item">
      <a class="page-link"
        href="{{ url_for('logger.list_logs', page=pagination.prev_num, category=category, start_date=start_date, end_date=end_date, search_term=search_term) }}">Previous</a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    {% endif %}

    <li class="page-item disabled">
      <span class="page-link">Page {{ pagination.page }} of {{ pagination.pages }}</span>
    </li>

    {% if pagination.has_next %}
    <li class="page-item">
      <a class="page-link"
        href="{{ url_for('logger.list_logs', page=pagination.next_num, category=category, start_date=start_date, end_date=end_date, search_term=search_term) }}">Next</a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <span class="page-link">Next</span>
    </li>
    {% endif %}
  </ul>
</nav>
{% endif %}

<!-- Modal for log details -->
<div class="modal fade" id="logDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content" id="log-detail-content">
      <!-- Log details will be loaded here via AJAX -->
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const modal = new bootstrap.Modal(document.getElementById('logDetailModal'));
    const content = document.getElementById('log-detail-content');

    document.querySelectorAll('.log-item').forEach(item => {
      item.addEventListener('click', function () {
        const logId = this.getAttribute('data-log-id');
        fetch(`/logs/${logId}/detail`)
          .then(response => response.text())
          .then(html => {
            content.innerHTML = html;
            modal.show();
          })
          .catch(err => {
            content.innerHTML = '<div class="modal-body text-danger">Error loading log details.</div>';
            modal.show();
          });
      });
    });
  });
</script>
{% endblock content %}