{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 900px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-calendar3 me-2"></i>
      Self Punch History – {{ '%02d'|format(month) }}/{{ year }}
    </h4>
    <form class="d-flex" method="get">
      <select name="month" class="form-select form-select-sm me-2" style="width:auto;">
        {% for m in range(1,13) %}
          <option value="{{ m }}" {% if m == month %}selected{% endif %}>{{ m }}</option>
        {% endfor %}
      </select>
      <input type="number" name="year" value="{{ year }}" class="form-control form-control-sm me-2" style="width:90px;">
      <button class="btn btn-sm btn-primary">Go</button>
    </form>
  </div>

  <div class="card shadow-sm">
    <div class="card-body p-0">
      <table class="table table-sm mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th style="width: 10%;">Date</th>
            <th style="width: 15%;">First IN</th>
            <th style="width: 15%;">Last OUT</th>
            <th style="width: 10%;">Hours</th>
            <th>All punches</th>
          </tr>
        </thead>
        <tbody>
        {% for row in history_rows %}
          <tr>
            <td>{{ row.date.strftime('%d-%m-%Y') }}</td>
            <td>{% if row.check_in %}{{ row.check_in.strftime('%H:%M') }}{% else %}-{% endif %}</td>
            <td>{% if row.check_out %}{{ row.check_out.strftime('%H:%M') }}{% else %}-{% endif %}</td>
            <td>
              {% if row.total_hours is not none %}
                {{ "%.2f"|format(row.total_hours) }}
              {% else %}-{% endif %}
            </td>
            <td class="small">
              {% if row.punches %}
                {% for p in row.punches %}
                  {% set is_self = (p.source_name == 'self') %}
                  {% set st = (p.approval_status or 'pending') if is_self else 'device' %}

                  <span class="badge rounded-pill {% if p.direction=='in' %}bg-success{% else %}bg-danger{% endif %} me-1 mb-1">
                    {{ p.direction|upper }} {{ p.punch_time.strftime('%H:%M') }}

                    {% if is_self %}
                      {% if st == 'approved' %}
                        <span class="ms-1 badge bg-light text-success">A</span>
                      {% elif st == 'rejected' %}
                        <span class="ms-1 badge bg-light text-danger">R</span>
                      {% else %}
                        <span class="ms-1 badge bg-light text-dark">P</span>
                      {% endif %}
                    {% endif %}
                  </span>
                {% endfor %}
              {% else %}
                <span class="text-muted">No punches</span>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="mt-3">
    <a href="{{ url_for('employee.self_punch') }}" class="btn btn-outline-secondary btn-sm">
      ← Back to punch page
    </a>
  </div>
</div>
{% endblock %}