{% extends "base.html" %}
{% block content %}

<div class="container mt-4" style="max-width: 1200px;">

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-shield-check me-2"></i>
      Self Punch Backup Approvals (HR / Admin)
    </h4>
    <div class="text-muted small">
      Backup approval panel – approve self punches for any employee
    </div>
  </div>

  <!-- ================= FILTERS ================= -->
  <form class="card shadow-sm mb-3" method="GET">
    <div class="card-body row g-3 align-items-end">

      <div class="col-md-3">
        <label class="form-label">Search</label>
        <input type="text" name="q" value="{{ q }}" class="form-control"
               placeholder="Name / Code / Email">
      </div>

      <div class="col-md-2">
        <label class="form-label">Status</label>
        <select name="status" class="form-select">
          <option value="pending"  {% if status=='pending' %}selected{% endif %}>Pending</option>
          <option value="approved" {% if status=='approved' %}selected{% endif %}>Approved</option>
          <option value="rejected" {% if status=='rejected' %}selected{% endif %}>Rejected</option>
          <option value="all"      {% if status=='all' %}selected{% endif %}>All</option>
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label">Direction</label>
        <select name="direction" class="form-select">
          <option value="">All</option>
          <option value="in"  {% if direction=='in' %}selected{% endif %}>IN</option>
          <option value="out" {% if direction=='out' %}selected{% endif %}>OUT</option>
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label">Manager</label>
        <select name="manager_id" class="form-select">
          <option value="">All</option>
          {% for m in managers %}
            <option value="{{ m.id }}" {% if manager_id==m.id %}selected{% endif %}>
              {{ m.full_name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label">Department</label>
        <select name="department_id" class="form-select">
          <option value="">All</option>
          {% for d in departments %}
            <option value="{{ d.id }}" {% if dept_id==d.id %}selected{% endif %}>
              {{ d.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 }}" class="form-control">
      </div>

      <div class="col-md-2">
        <label class="form-label">To</label>
        <input type="date" name="date_to" value="{{ date_to }}" class="form-control">
      </div>

      <div class="col-md-2">
        <label class="form-label">Per Page</label>
        <select name="per_page" class="form-select">
          {% for n in [10,20,50,100] %}
            <option value="{{ n }}" {% if per_page==n %}selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-3 d-flex gap-2">
        <button class="btn btn-primary w-100">
          <i class="bi bi-funnel me-1"></i> Apply
        </button>
        <a href="{{ url_for('employee.self_punch_approvals_admin') }}"
           class="btn btn-outline-secondary w-100">
          Reset
        </a>
      </div>
    </div>
  </form>

  <!-- ================= BULK + TABLE ================= -->
  <form method="POST"
        action="{{ url_for('employee.self_punch_approvals_admin_bulk') }}"
        class="card shadow-sm">

    <div class="card-body">

      <!-- Preserve filters -->
      <input type="hidden" name="q" value="{{ q }}">
      <input type="hidden" name="status" value="{{ status }}">
      <input type="hidden" name="direction" value="{{ direction }}">
      <input type="hidden" name="manager_id" value="{{ manager_id or '' }}">
      <input type="hidden" name="department_id" value="{{ dept_id or '' }}">
      <input type="hidden" name="date_from" value="{{ date_from }}">
      <input type="hidden" name="date_to" value="{{ date_to }}">
      <input type="hidden" id="approve_all_filtered" name="approve_all_filtered" value="0">

      <!-- Bulk buttons -->
      <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">

        <div class="text-muted small">
          Showing <b>{{ punches|length }}</b> record(s)
        </div>

        <div class="d-flex gap-2 flex-wrap align-items-center">
          <input type="text" name="reason"
                 class="form-control form-control-sm"
                 placeholder="Reject reason (optional)"
                 style="max-width:260px;">

          <button class="btn btn-success btn-sm"
                  name="action" value="approve">
            <i class="bi bi-check-circle me-1"></i> Approve Selected
          </button>

          <button class="btn btn-outline-success btn-sm"
                  name="action" value="approve"
                  onclick="document.getElementById('approve_all_filtered').value='1';
                           return confirm('Approve ALL pending punches matching filters?');">
            <i class="bi bi-check2-all me-1"></i> Approve All (Filtered)
          </button>

          <button class="btn btn-danger btn-sm"
                  name="action" value="reject"
                  onclick="return confirm('Reject selected punches?');">
            <i class="bi bi-x-circle me-1"></i> Reject Selected
          </button>

          <button class="btn btn-outline-danger btn-sm"
                  name="action" value="reject"
                  onclick="document.getElementById('approve_all_filtered').value='1';
                           return confirm('Reject ALL pending punches matching filters?');">
            <i class="bi bi-x-octagon me-1"></i> Reject All (Filtered)
          </button>
        </div>
      </div>

      <!-- ================= TABLE ================= -->
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th><input type="checkbox" id="checkAll"></th>
              <th>Date / Time</th>
              <th>Employee</th>
              <th>Manager</th>
              <th>Dir</th>
              <th>Location</th>
              <th>Photo</th>
              <th>Status</th>
              <th>Quick</th>
            </tr>
          </thead>

          <tbody>
          {% for p in punches %}
            {% set st = (p.approval_status or '').lower() %}
            <tr>
              <td>
                <input type="checkbox" class="row-check"
                       name="punch_ids" value="{{ p.id }}">
              </td>

              <td>
                <div class="fw-semibold">{{ p.punch_time.strftime('%d %b %Y') }}</div>
                <div class="text-muted small">{{ p.punch_time.strftime('%I:%M %p') }}</div>
              </td>

              <td>
                <div class="fw-semibold">{{ p.employee.full_name }}</div>
                <div class="text-muted small">
                  {{ p.employee.employee_code }} · {{ p.employee.email }}
                </div>
              </td>

              <td class="small text-muted">
                {{ p.employee.reporting_manager.full_name if p.employee.reporting_manager else '-' }}
              </td>

              <td>
                <span class="badge {{ 'bg-success' if p.direction=='in' else 'bg-primary' }}">
                  {{ p.direction|upper }}
                </span>
              </td>

              <td class="small">
                {% if p.latitude and p.longitude %}
                  <div class="d-flex flex-column">
                    <a class="text-decoration-none"
                      target="_blank"
                      href="https://www.google.com/maps?q={{ p.latitude }},{{ p.longitude }}">
                      <i class="bi bi-geo-alt"></i>
                      {{ "%.6f"|format(p.latitude) }}, {{ "%.6f"|format(p.longitude) }}
                    </a>

                    <a class="small text-muted"
                      target="_blank"
                      href="https://www.openstreetmap.org/?mlat={{ p.latitude }}&mlon={{ p.longitude }}#map=18/{{ p.latitude }}/{{ p.longitude }}">
                      Open in OSM
                    </a>

                    {% if p.location_note %}
                      <span class="badge bg-info text-dark mt-1">
                        {{ p.location_note }}
                      </span>
                    {% endif %}
                  </div>
                {% elif p.location_note %}
                  <span class="badge bg-secondary">{{ p.location_note }}</span>
                {% else %}
                  <span class="text-muted">-</span>
                {% endif %}
              </td>

              <td>
                {% if p.photo_path %}
                  <a href="{{ url_for('uploaded_document', filename=p.photo_path) }}" target="_blank">
                    <img src="{{ url_for('uploaded_document', filename=p.photo_path) }}"
                         class="img-thumbnail" style="max-height:70px;">
                  </a>
                {% else %}
                  <span class="text-muted small">No photo</span>
                {% endif %}
              </td>

              <td>
                {% if st=='pending' %}
                  <span class="badge bg-warning text-dark">Pending</span>
                {% elif st=='approved' %}
                  <span class="badge bg-success">Approved</span>
                {% else %}
                  <span class="badge bg-danger">Rejected</span>
                {% endif %}
              </td>

              <!-- QUICK ACTIONS (NO NESTED FORMS) -->
              <td>
                <button type="submit"
                        class="btn btn-success btn-sm"
                        formaction="{{ url_for('employee.approve_self_punch', punch_id=p.id) }}"
                        formmethod="post"
                        {% if st!='pending' %}disabled{% endif %}>
                  Approve
                </button>

                <button type="submit"
                        class="btn btn-outline-danger btn-sm"
                        formaction="{{ url_for('employee.reject_self_punch', punch_id=p.id) }}"
                        formmethod="post"
                        onclick="return confirm('Reject this punch?');"
                        {% if st!='pending' %}disabled{% endif %}>
                  Reject
                </button>

              </td>
            </tr>
          {% endfor %}

          {% if punches|length == 0 %}
            <tr>
              <td colspan="9" class="text-center text-muted py-4">
                No punches found for selected filters.
              </td>
            </tr>
          {% endif %}
          </tbody>
        </table>
      </div>

      <!-- PAGINATION -->
      {% if pagination.pages > 1 %}
      <nav class="mt-3">
        <ul class="pagination pagination-sm">
          {% for pno in page_numbers %}
            <li class="page-item {% if pno==pagination.page %}active{% endif %}">
              <a class="page-link"
                 href="{{ url_for('employee.self_punch_approvals_admin',
                   page=pno, per_page=per_page,
                   q=q, status=status, direction=direction,
                   manager_id=manager_id, department_id=dept_id,
                   date_from=date_from, date_to=date_to) }}">
                {{ pno }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </nav>
      {% endif %}

    </div>
  </form>
</div>

<script>
  const checkAll = document.getElementById("checkAll");
  const rowChecks = document.querySelectorAll(".row-check");
  if (checkAll) {
    checkAll.addEventListener("change", () => {
      rowChecks.forEach(cb => cb.checked = checkAll.checked);
    });
  }
</script>

{% endblock %}