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

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

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-person-check me-2"></i> Self Punch Approvals
    </h4>
    <div class="text-muted small">
      Approve or reject employee self-punch requests (photo + location).
    </div>
  </div>

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

      <!-- Date -->
      <div class="col-md-3">
        <label class="form-label">Date</label>
        <input type="date" name="date" value="{{ filter_date.strftime('%Y-%m-%d') }}"
               class="form-control">
      </div>

      {% if is_hr_admin %}
      <!-- Manager selector -->
      <div class="col-md-4">
        <label class="form-label">Manager</label>
        <select name="manager_id" class="form-select">
          <option value="">-- Select Manager --</option>
          {% for m in managers %}
            <option value="{{ m.id }}"
              {% if m.id == selected_manager_id %}selected{% endif %}>
              {{ m.full_name }} ({{ m.employee_code }})
            </option>
          {% endfor %}
        </select>
      </div>
      {% endif %}

      <div class="col-md-3">
        <button class="btn btn-primary w-100">
          <i class="bi bi-filter me-1"></i> Apply Filters
        </button>
      </div>

    </div>
  </form>

  <!-- Punch List -->
  <div class="card shadow-sm">
    <div class="card-header bg-light fw-semibold">
      Pending Punches
    </div>

    <div class="table-responsive">
      <table class="table table-sm align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th style="width: 16%;">Employee</th>
            <th style="width: 14%;">Date & Time</th>
            <th style="width: 10%;">Direction</th>
            <th style="width: 25%;">Location</th>
            <th style="width: 18%;">Photo</th>
            <th style="width: 17%;">Actions</th>
          </tr>
        </thead>
        <tbody>

        {% if punches %}
          {% for p in punches %}
            <tr>
              <td>
                <strong>{{ p.employee.full_name }}</strong><br>
                <span class="text-muted small">{{ p.employee.employee_code }}</span>
              </td>

              <!-- ✅ show date + time (important when previous-day punching is enabled) -->
              <td>
                <div>{{ p.punch_time.strftime('%d-%m-%Y') }}</div>
                <div class="text-muted small">{{ p.punch_time.strftime('%H:%M:%S') }}</div>
              </td>

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

              <td class="small">
                {% if p.location_note %}
                  {{ p.location_note }}
                {% elif p.latitude and p.longitude %}
                  <div class="d-flex flex-column">
                    <a class="text-decoration-none"
                      target="_blank" rel="noopener"
                      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" rel="noopener"
                      href="https://www.openstreetmap.org/?mlat={{ p.latitude }}&mlon={{ p.longitude }}#map=18/{{ p.latitude }}/{{ p.longitude }}">
                      Open in OSM
                    </a>
                  </div>
                {% 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" rel="noopener">
                    <img src="{{ url_for('uploaded_document', filename=p.photo_path) }}"
                        class="img-thumbnail"
                        style="max-height: 70px;">
                  </a>
                  <div class="small mt-1">
                    {% if p.photo_is_fresh is true %}
                      <span class="badge bg-success">Fresh Photo</span>
                    {% elif p.photo_is_fresh is false %}
                      <span class="badge bg-danger">Old Photo (EXIF)</span>
                    {% else %}
                      <span class="badge bg-secondary">No EXIF</span>
                    {% endif %}
                  </div>
                {% else %}
                  <span class="text-muted small">No photo</span>
                {% endif %}
              </td>

              <td>
                <form method="POST"
                      action="{{ url_for('employee.approve_self_punch', punch_id=p.id) }}"
                      class="d-inline">
                  {{ csrf_token() if csrf_token is defined }}
                  <button class="btn btn-success btn-sm">
                    <i class="bi bi-check-circle me-1"></i> Approve
                  </button>
                </form>

                <button class="btn btn-danger btn-sm"
                        data-bs-toggle="modal"
                        data-bs-target="#rejectModal"
                        data-punch-id="{{ p.id }}">
                  <i class="bi bi-x-circle me-1"></i> Reject
                </button>
              </td>
            </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="6" class="text-center py-4 text-muted">
              No pending punches for this date.
            </td>
          </tr>
        {% endif %}

        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel">
  <div class="modal-dialog">
    <!-- ✅ safer action building using url_for template -->
    <form method="POST" id="rejectForm" data-action-template="{{ url_for('employee.reject_self_punch', punch_id=0) }}">
      {{ csrf_token() if csrf_token is defined }}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Reject Punch</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <input type="hidden" name="reason" id="rejectReasonInput">
          <label class="form-label">Reason for rejection</label>
          <textarea class="form-control" id="rejectReasonText" rows="3"
                    placeholder="Optional reason…"></textarea>
        </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-danger">
            <i class="bi bi-x-circle me-1"></i> Reject Punch
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const rejectModal = document.getElementById("rejectModal");
  const rejectForm  = document.getElementById("rejectForm");

  rejectModal.addEventListener("show.bs.modal", function (event) {
    const button = event.relatedTarget;
    const punchId = button.getAttribute("data-punch-id");

    // Build action via url_for template
    const template = rejectForm.getAttribute("data-action-template"); // .../0/reject
    rejectForm.action = template.replace(/0$/, punchId);

    // Clear previous reason
    document.getElementById("rejectReasonText").value = "";
  });

  // Copy textarea value into hidden input before submit
  rejectForm.addEventListener("submit", function () {
    document.getElementById("rejectReasonInput").value =
      document.getElementById("rejectReasonText").value;
  });
});
</script>

{% endblock %}