{% extends "base_authenticated.html" %}
{% block title %}Legacy Attendance Records - {{ COMPANY_NAME }}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/time_attendance.css') }}">
{% endblock %}

{% block content %}
<div class="time-attendance-page">
  <!-- Page Header -->
  <div class="time-attendance-header">
    <div class="header-content">
      <h1>
        <i class="fas fa-history"></i>
        Legacy Attendance Records
      </h1>
      <p class="header-description">Live results from the legacy database</p>
    </div>

    <div class="header-actions">
      <a href="{{ url_for('legacy_attendance.export_legacy_attendance', **filters) }}" class="btn btn-secondary">
        <i class="fas fa-file-excel"></i>
        Export to Excel
      </a>
    </div>
  </div>

  <!-- Filters -->
  <div class="filter-section">
    <div class="filter-header">
      <h3><i class="fas fa-filter"></i> Filters</h3>
    </div>
    <div class="filter-body">
      <form method="GET" class="filter-form">
        <div class="form-group">
          <label for="employee_search">
            <i class="fas fa-user-search"></i>
            Employee (ID or Name)
          </label>
          <input type="text"
                 id="employee_search"
                 name="employee_search"
                 class="form-input"
                 placeholder="Search by ID or name..."
                 value="{{ filters.employee_search }}">
        </div>

        <div class="form-group">
          <label for="location">
            <i class="fas fa-map-marker-alt"></i>
            Location
          </label>
          <select id="location" name="location" class="form-select">
            <option value="">All Locations</option>
            {% for loc in unique_locations %}
            <option value="{{ loc }}" {% if filters.location == loc %}selected{% endif %}>{{ loc }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group">
          <label for="record_type">
            <i class="fas fa-tag"></i>
            Type
          </label>
          <select id="record_type" name="record_type" class="form-select">
            <option value="">All Types</option>
            {% for rt in record_types %}
            <option value="{{ rt }}" {% if filters.record_type == rt %}selected{% endif %}>{{ rt }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group">
          <label for="start_date">
            <i class="fas fa-calendar-alt"></i>
            Start Date
          </label>
          <input type="date" id="start_date" name="start_date" class="form-input" value="{{ filters.start_date }}">
        </div>

        <div class="form-group">
          <label for="end_date">
            <i class="fas fa-calendar-alt"></i>
            End Date
          </label>
          <input type="date" id="end_date" name="end_date" class="form-input" value="{{ filters.end_date }}">
        </div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-search"></i>
            Apply Filters
          </button>
          <a href="{{ url_for('legacy_attendance.legacy_attendance_records') }}" class="btn btn-outline">
            <i class="fas fa-times"></i>
            Clear
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Records Table -->
  <div class="records-section">
    <div class="records-header">
      <h2><i class="fas fa-table"></i> Attendance Records</h2>
      <div class="records-meta">
        {% if records and records.items %}
          Showing {{ records.per_page * (records.page - 1) + 1 }} -
          {{ records.per_page * (records.page - 1) + records.items|length }}
          of {{ records.total }} records
        {% else %}
          No records found
        {% endif %}
      </div>
    </div>

    {% if records and records.items %}
    <div class="records-table-container">
      <table class="records-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Platform</th>
            <th>Date</th>
            <th>Time</th>
            <th>Location Name</th>
            <th>Action Description</th>
            <th>Event Description</th>
            <th>Recorded Address</th>
          </tr>
        </thead>
        <tbody>
          {% for record in records.items %}
          <tr>
            <!-- 1. ID (Employee ID) -->
            <td>
              <div class="employee-id-cell">
                <span class="employee-id">{{ record.employee_id }}</span>
              </div>
            </td>

            <!-- 2. Name -->
            <td>
              <div class="employee-name-cell">
                <span>{{ record.resolved_employee_name }}</span>
              </div>
            </td>

            <!-- 3. Platform -->
            <td class="platform-cell">
              {{ 'Manual' if record.is_manual else '—' }}
            </td>

            <!-- 4. Date -->
            <td class="date-cell">
              {{ record.record_time.strftime('%Y-%m-%d') if record.record_time else '' }}
            </td>

            <!-- 5. Time -->
            <td class="time-cell">
              {{ record.record_time.strftime('%H:%M:%S') if record.record_time else '' }}
            </td>

            <!-- 6. Location Name -->
            <td class="location-cell">
              <div class="location-info">
                <i class="fas fa-map-marker-alt"></i>
                {{ record.location_name if record.location_name else '-' }}
              </div>
            </td>

            <!-- 7. Action Description -->
            <td>
              <span class="action-badge {{ record.record_type.lower().replace(' ', '-') }}">
                {% if record.record_type.lower() == 'check in' %}
                <i class="fas fa-sign-in-alt"></i>
                {% elif record.record_type.lower() == 'check out' %}
                <i class="fas fa-sign-out-alt"></i>
                {% else %}
                <i class="fas fa-clock"></i>
                {% endif %}
                {{ record.record_type }}
              </span>
            </td>

            <!-- 8. Event Description -->
            <td class="event-cell">
              {{ record.location_address if record.location_address else '-' }}
            </td>

            <!-- 9. Recorded Address -->
            <td class="address-cell">
              {% if record.recorded_address %}
              <span title="{{ record.recorded_address }}">
                {{ record.recorded_address[:40] }}{% if record.recorded_address|length > 40 %}...{% endif %}
              </span>
              {% else %}
              <span class="text-muted">No address</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if records.pages > 1 %}
    <div class="pagination">
      <div class="pagination-info">
        Page {{ records.page }} of {{ records.pages }}
      </div>
      <div class="pagination-controls">
        {% if records.has_prev %}
        <a href="{{ url_for('legacy_attendance.legacy_attendance_records', page=records.prev_num, **filters) }}"
           class="pagination-btn">
          <i class="fas fa-chevron-left"></i>
          Previous
        </a>
        {% endif %}

        {% for page_num in records.iter_pages() %}
          {% if page_num %}
            {% if page_num != records.page %}
            <a href="{{ url_for('legacy_attendance.legacy_attendance_records', page=page_num, **filters) }}"
               class="pagination-btn">
              {{ page_num }}
            </a>
            {% else %}
            <span class="pagination-btn active">{{ page_num }}</span>
            {% endif %}
          {% else %}
            <span class="pagination-ellipsis">...</span>
          {% endif %}
        {% endfor %}

        {% if records.has_next %}
        <a href="{{ url_for('legacy_attendance.legacy_attendance_records', page=records.next_num, **filters) }}"
           class="pagination-btn">
          Next
          <i class="fas fa-chevron-right"></i>
        </a>
        {% endif %}
      </div>
    </div>
    {% endif %}

    {% else %}
    <div class="empty-state">
      <div class="empty-icon">
        <i class="fas fa-folder-open"></i>
      </div>
      <h3>No legacy attendance records found</h3>
      <p>Try adjusting your filters.</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}