{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <h3 class="mb-3">Comp Off – Pending & Processed</h3>

  <!-- Filters -->
  <form method="GET" class="card shadow-sm mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-3">
          <label class="form-label">Employee</label>
          <select name="employee_id" class="form-select">
            <option value="">All</option>
            {% for e in employees %}
              <option value="{{ e.id }}" {% if emp_id==e.id %}selected{% endif %}>{{ e.full_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">From</label>
          <input type="date" name="date_from" value="{{ date_from or '' }}" class="form-control">
        </div>
        <div class="col-md-2">
          <label class="form-label">To</label>
          <input type="date" name="date_to" value="{{ date_to or '' }}" class="form-control">
        </div>
        <div class="col-md-2">
          <label class="form-label">Status</label>
          <select name="status" class="form-select">
            <option value=""  {% if not status_q %}selected{% endif %}>Any</option>
            <option value="pending"  {% if status_q=='pending' %}selected{% endif %}>Pending</option>
            <option value="approved" {% if status_q=='approved' %}selected{% endif %}>Approved</option>
            <option value="rejected" {% if status_q=='rejected' %}selected{% endif %}>Rejected</option>
            <option value="all"      {% if status_q=='all' %}selected{% endif %}>All</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">Search</label>
          <input type="text" name="q" value="{{ q_text or '' }}" class="form-control" placeholder="Reason contains...">
        </div>
        <div class="col-md-1 text-end">
          <button class="btn btn-primary w-100">Filter</button>
        </div>
      </div>
    </div>
  </form>

  <div class="row g-3">
    <!-- Pending -->
    <div class="col-lg-6">
      <div class="card shadow-sm">
        <div class="card-header bg-warning text-dark"><strong>Pending</strong></div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
              <thead>
                <tr>
                  <th>#</th><th>Employee</th><th>Work Date</th><th>Valid Until</th><th>Reason</th><th class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% if pending_requests %}
                  {% for r in pending_requests %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>{{ r.employee.full_name if r.employee else r.employee_id }}</td>
                      <td>{{ r.work_date.strftime('%d %b %Y') }}</td>
                      <td>{{ r.valid_until.strftime('%d %b %Y') }}</td>
                      <td class="text-muted">{{ r.reason }}</td>
                      <td class="text-end">
                        <form method="POST" action="{{ url_for('leave.approve_comp_off', req_id=r.id) }}" class="d-inline">
                          <button class="btn btn-sm btn-success">Approve</button>
                        </form>
                        <form method="POST" action="{{ url_for('leave.reject_comp_off', req_id=r.id) }}" class="d-inline ms-1">
                          <button class="btn btn-sm btn-outline-danger">Reject</button>
                        </form>
                      </td>
                    </tr>
                  {% endfor %}
                {% else %}
                  <tr><td colspan="6" class="text-center text-muted py-4">No pending requests.</td></tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Processed -->
    <div class="col-lg-6">
      <div class="card shadow-sm">
        <div class="card-header bg-light"><strong>Processed (Approved / Rejected)</strong></div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-striped mb-0 align-middle">
              <thead>
                <tr>
                  <th>#</th><th>Employee</th><th>Work Date</th><th>Valid Until</th><th>Reason</th><th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% if processed_requests %}
                  {% for r in processed_requests %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>{{ r.employee.full_name if r.employee else r.employee_id }}</td>
                      <td>{{ r.work_date.strftime('%d %b %Y') }}</td>
                      <td>{{ r.valid_until.strftime('%d %b %Y') }}</td>
                      <td class="text-muted">{{ r.reason }}</td>
                      <td>
                        {% if r.status == 'approved' %}
                          <span class="badge bg-success">Approved</span>
                        {% else %}
                          <span class="badge bg-danger">Rejected</span>
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                {% else %}
                  <tr><td colspan="6" class="text-center text-muted py-4">No processed items.</td></tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}