{% extends 'base.html' %}
{% block content %}
<div class="container-fluid mt-3" style="max-width: 1200px;">
  <div class="card shadow-sm border-0">
    <div class="card-header d-flex justify-content-between align-items-center bg-white">
      <div>
        <h5 class="mb-0">
          <i class="bi bi-person-badge me-2"></i>
          Desktime Details – {{ employee.full_name }} ({{ employee.employee_code }})
        </h5>
        <small class="text-muted">
          Dept: {{ employee.department.name if employee.department else '-' }},
          Desktime ID: {{ employee.desktime_id or '-' }}
        </small>
      </div>

      <form class="d-flex align-items-center" method="get">
        <label class="me-2 mb-0 small text-muted">Month</label>
        <input type="month"
               name="month"
               class="form-control form-control-sm me-2"
               value="{{ selected_month }}">
        <button class="btn btn-sm btn-primary" type="submit">
          <i class="bi bi-arrow-repeat me-1"></i> Go
        </button>
      </form>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width: 40px;">#</th>
              <th>Date</th>
              <th>First Activity</th>
              <th>Last Activity</th>
              <th>Productive Hours</th>
              <th>Attendance Source</th>
              <th>Working Hours (Attendance)</th>
              <th>Attendance Remark</th>
              <th>Raw Data</th>
            </tr>
          </thead>
          <tbody>
            {% if rows %}
              {% for log, att in rows %}
                <tr>
                  <td>{{ loop.index }}</td>
                  <td>{{ log.date.strftime('%d-%m-%Y') }}</td>

                  <td>
                    {% if log.first_activity %}
                      {{ log.first_activity.strftime('%H:%M') }}
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>

                  <td>
                    {% if log.last_activity %}
                      {{ log.last_activity.strftime('%H:%M') }}
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>

                  <td>
                    {% if log.productive_hours is not none %}
                      {{ '%.2f'|format(log.productive_hours) }}
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>

                  <td>
                    {% if att %}
                      {{ att.source or 'Attendance' }}
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>

                  <td>
                    {% if att and att.working_hours is not none %}
                      {{ '%.2f'|format(att.working_hours) }}
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>

                  <td>
                    {% if att and att.remarks %}
                      {{ att.remarks }}
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>

                  <td>
                    {% if log.raw_data %}
                      <button class="btn btn-sm btn-outline-secondary"
                              type="button"
                              data-bs-toggle="collapse"
                              data-bs-target="#raw-{{ loop.index }}"
                              aria-expanded="false"
                              aria-controls="raw-{{ loop.index }}">
                        View
                      </button>
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>
                </tr>
                {% if log.raw_data %}
                <tr class="collapse" id="raw-{{ loop.index }}">
                  <td></td>
                  <td colspan="8">
                    <pre class="small bg-light p-2 mb-0" style="white-space: pre-wrap;">{{ log.raw_data }}</pre>
                  </td>
                </tr>
                {% endif %}
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="9" class="text-center py-4 text-muted">
                  No Desktime data for this month.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="card-footer bg-white">
      <a href="{{ url_for('desktime_logs.desktime_overview') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back to Overview
      </a>
    </div>
  </div>
</div>
{% endblock %}