{% extends "base.html" %}
{% block title %}Team Attendance{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0">Team Attendance — {{ month }}</h4>
    <form class="d-flex gap-2" method="get">
      <input type="month" class="form-control" name="month" value="{{ month }}">
      <input type="text" class="form-control" name="q" placeholder="Search employee" value="{{ query or '' }}">
      {% if is_hr_admin %}
        <select name="manager_id" class="form-select">
          <option value="">— Manager —</option>
          {% for m in managers %}
            <option value="{{ m.id }}" {{ 'selected' if m.id==selected_manager_id else '' }}>
              {{ m.full_name }} ({{ m.employee_code }})
            </option>
          {% endfor %}
        </select>
      {% endif %}
      <button class="btn btn-primary">Apply</button>
    </form>
  </div>

  <div class="alert alert-light border d-flex align-items-center gap-3">
    <span class="bi bi-check-circle-fill text-success"></span> Present
    <span class="bi bi-circle-half text-primary ms-3"></span> Half Day
    <span class="bi bi-airplane-fill text-warning ms-3"></span> Leave
    <span class="bi bi-flag-fill text-info ms-3"></span> Holiday
    <span class="bi bi-calendar-week-fill text-secondary ms-3"></span> Weekend
    <span class="bi bi-x-circle-fill text-danger ms-3"></span> LWP
    <span class="bi bi-dash-lg text-muted ms-3"></span> Not Joined
  </div>

  <div class="accordion" id="teamAccordion">
    {% for block in results %}
      {% set e = block.employee %}
      <div class="accordion-item mb-2 shadow-sm rounded-3">
        <h2 class="accordion-header" id="head-{{ e.id }}">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#col-{{ e.id }}" aria-expanded="false" aria-controls="col-{{ e.id }}">
            <div class="w-100 d-flex justify-content-between align-items-center">
              <div>
                <strong>{{ e.full_name }}</strong>
                <small class="text-muted ms-2">({{ e.employee_code }}) · {{ e.designation.title if e.designation else '-' }} · {{ e.department.name if e.department else '-' }}</small>
              </div>
              <div class="small text-nowrap">
                Paid: <strong>{{ '%.1f'|format(block.counts.total_paid) }}</strong> ·
                P: <strong>{{ '%.1f'|format(block.counts.present) }}</strong> |
                L: {{ block.counts.leave }} |
                H: {{ block.counts.holiday }} |
                W: {{ block.counts.weekend }} |
                HD: {{ block.counts.half }} |
                LWP: <span class="text-danger">{{ block.counts.lwp }}</span>
              </div>
            </div>
          </button>
        </h2>
        <div id="col-{{ e.id }}" class="accordion-collapse collapse" aria-labelledby="head-{{ e.id }}" data-bs-parent="#teamAccordion">
          <div class="accordion-body">
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th style="width: 120px;">Date</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {% for d in block.days %}
                    <tr>
                      <td>{{ d.date.strftime('%d %b, %Y') }}</td>
                      <td>
                        <span class="bi {{ d.icon }}" data-bs-toggle="tooltip" title="{{ d.tooltip }}"></span>
                        <span class="ms-2">{{ d.label }}</span>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    {% else %}
      <div class="alert alert-info">No team members found for the selected filters.</div>
    {% endfor %}
  </div>
</div>

<script>
  // Enable Bootstrap tooltips
  document.addEventListener('DOMContentLoaded', function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.map(function (el) { return new bootstrap.Tooltip(el) })
  });
</script>
{% endblock %}