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

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

{% block page_title %}Time Attendance Records{% endblock %}

{% block content %}
<div class="time-attendance-page">
  <!-- Page Header -->
  <div class="time-attendance-header">
    <div class="header-navigation">
      <a href="{{ url_for('time_attendance_dashboard') }}" class="back-button">
        <i class="fas fa-arrow-left"></i>
        Back to Dashboard
      </a>
    </div>
    
    <div class="header-content">
      <h1>
        <i class="fas fa-list"></i>
        Time Attendance Records
      </h1>
      <p class="header-description">
        View and manage imported time attendance data
      </p>
    </div>
    
    <div class="header-actions">
      {% if session.role == 'admin' %}
      <a href="{{ url_for('import_time_attendance') }}" class="btn btn-primary">
        <i class="fas fa-upload"></i>
        Import Data
      </a>
      {% endif %}
      <button class="btn btn-secondary" onclick="exportRecords()">
        <i class="fas fa-download"></i>
        Export
      </button>
    </div>
  </div>

  <!-- Filters Section -->
  <div class="filter-section">
    <div class="filter-header">
      <h3>
        <i class="fas fa-filter"></i>
        Filter Records
      </h3>
      <button class="filter-toggle" onclick="toggleFilters()">
        <i class="fas fa-chevron-down" id="filterIcon"></i>
      </button>
    </div>
    <div class="filter-body" id="filterBody">
      <form method="GET" action="{{ url_for('time_attendance_records') }}" class="filter-form">
        <div class="form-group">
          <label for="employee_id" class="form-label">Employee</label>
          <select id="employee_id" name="employee_id" class="form-select">
            <option value="">All Employees</option>
            {% for employee in unique_employees %}
            <option value="{{ employee.employee_id }}" {% if request.args.get('employee_id') == employee.employee_id %}selected{% endif %}>
              {{ employee.employee_name }} ({{ employee.employee_id }})
            </option>
            {% endfor %}
          </select>
        </div>
        
        <div class="form-group">
          <label for="location_name" class="form-label">Location</label>
          <select id="location_name" name="location_name" class="form-select">
            <option value="">All Locations</option>
            {% for location in unique_locations %}
            <option value="{{ location[0] }}" {% if request.args.get('location_name') == location[0] %}selected{% endif %}>
              {{ location[0] }}
            </option>
            {% endfor %}
          </select>
        </div>
        
        <div class="form-group">
          <label for="start_date" class="form-label">Start Date</label>
          <input type="date" id="start_date" name="start_date" class="form-input" 
                 value="{{ request.args.get('start_date', '') }}">
        </div>
        
        <div class="form-group">
          <label for="end_date" class="form-label">End Date</label>
          <input type="date" id="end_date" name="end_date" class="form-input" 
                 value="{{ request.args.get('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('time_attendance_records') }}" class="btn btn-secondary">
            <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.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.items %}
    <div class="records-table-container">
      <table class="records-table">
        <thead>
          <tr>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Date & Time</th>
            <th>Action</th>
            <th>Location</th>
            <th>Platform</th>
            <th>QR Address</th>
            <th>Check-in Address</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for record in records.items %}
          <tr>
            <td>
              <div class="employee-id-cell">
                <span class="employee-id">{{ record.employee_id }}</span>
              </div>
            </td>
            <td>
              <div class="employee-name-cell">
                <i class="fas fa-user"></i>
                <span>{{ record.employee_name }}</span>
              </div>
            </td>
            <td class="datetime-cell">
              <div class="datetime-info">
                <div class="date">{{ record.attendance_date.strftime('%Y-%m-%d') }}</div>
                <div class="time">{{ record.attendance_time.strftime('%H:%M:%S') }}</div>
              </div>
            </td>
            <td>
              <span class="action-badge {{ record.action_description.lower().replace(' ', '-') }}">
                {% if record.action_description.lower() == 'check in' %}
                <i class="fas fa-sign-in-alt"></i>
                {% elif record.action_description.lower() == 'check out' %}
                <i class="fas fa-sign-out-alt"></i>
                {% else %}
                <i class="fas fa-clock"></i>
                {% endif %}
                {{ record.action_description }}
              </span>
            </td>
            <td class="location-cell">
              <div class="location-info">
                <i class="fas fa-map-marker-alt"></i>
                {{ record.location_name }}
              </div>
            </td>
            <td class="platform-cell">
              {{ record.platform or 'Unknown' }}
            </td>
            <td class="address-cell qr-address-cell">
              {% if record.qr_address %}
              <span title="{{ record.qr_address }}">
                <i class="fas fa-qrcode" style="color: #6366f1;"></i>
                {{ record.qr_address[:40] }}{% if record.qr_address|length > 40 %}...{% endif %}
              </span>
              {% else %}
              <span class="text-muted">No QR address</span>
              {% endif %}
            </td>
            <td class="address-cell checkin-address-cell">
              {% if record.location_accuracy is not none and record.location_accuracy <= 0.3 %}
                {# Within 0.3 mile threshold - show QR address #}
                {% if record.qr_address %}
                <span title="QR Address (High Accuracy ≤ 0.3 mi): {{ record.qr_address }}">
                  <i class="fas fa-check-circle" style="color: #059669;"></i>
                  {{ record.qr_address[:40] }}{% if record.qr_address|length > 40 %}...{% endif %}
                </span>
                {% else %}
                <span class="text-muted">No address</span>
                {% endif %}
              {% else %}
                {# Beyond 0.3 mile threshold or no accuracy - show actual check-in address #}
                {% if record.recorded_address %}
                <span title="Check-in Address: {{ record.recorded_address }}">
                  <i class="fas fa-location-arrow" style="color: #f59e0b;"></i>
                  {{ record.recorded_address[:40] }}{% if record.recorded_address|length > 40 %}...{% endif %}
                </span>
                {% else %}
                <span class="text-muted">No address</span>
                {% endif %}
              {% endif %}
            </td>
            <td class="actions-cell">
              <div class="action-buttons">
                <a href="{{ url_for('time_attendance_record_detail', record_id=record.id) }}" 
                   class="action-btn view">
                  <i class="fas fa-eye"></i>
                  View
                </a>
                {% if session.role == 'admin' %}
                <button class="action-btn delete" 
                        onclick="confirmDelete({{ record.id }}, '{{ record.employee_name }}', '{{ record.attendance_date }}')">
                  <i class="fas fa-trash"></i>
                  Delete
                </button>
                {% endif %}
              </div>
            </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('time_attendance_records', page=records.prev_num, 
                   employee_id=request.args.get('employee_id', ''),
                   location_name=request.args.get('location_name', ''),
                   start_date=request.args.get('start_date', ''),
                   end_date=request.args.get('end_date', '')) }}" 
           class="pagination-btn">
          <i class="fas fa-chevron-left"></i>
          Previous
        </a>
        {% endif %}
        
        {% for page_num in records.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
          {% if page_num %}
            {% if page_num != records.page %}
            <a href="{{ url_for('time_attendance_records', page=page_num,
                       employee_id=request.args.get('employee_id', ''),
                       location_name=request.args.get('location_name', ''),
                       start_date=request.args.get('start_date', ''),
                       end_date=request.args.get('end_date', '')) }}" 
               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('time_attendance_records', page=records.next_num,
                   employee_id=request.args.get('employee_id', ''),
                   location_name=request.args.get('location_name', ''),
                   start_date=request.args.get('start_date', ''),
                   end_date=request.args.get('end_date', '')) }}" 
           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-inbox"></i>
      </div>
      <h3>No Records Found</h3>
      <p>No time attendance records match your current filters.</p>
      <a href="{{ url_for('time_attendance_records') }}" class="btn btn-primary">
        <i class="fas fa-refresh"></i>
        Clear Filters
      </a>
    </div>
    {% endif %}
  </div>
</div>

<script>
function toggleFilters() {
  const filterBody = document.getElementById('filterBody');
  const filterIcon = document.getElementById('filterIcon');
  
  if (filterBody.style.display === 'none' || filterBody.style.display === '') {
    filterBody.style.display = 'block';
    filterIcon.classList.remove('fa-chevron-down');
    filterIcon.classList.add('fa-chevron-up');
  } else {
    filterBody.style.display = 'none';
    filterIcon.classList.remove('fa-chevron-up');
    filterIcon.classList.add('fa-chevron-down');
  }
}

function confirmDelete(recordId, employeeName, date) {
  if (confirm(`Are you sure you want to delete the attendance record for ${employeeName} on ${date}?`)) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/time-attendance/record/${recordId}/delete`;
    document.body.appendChild(form);
    form.submit();
  }
}

function exportRecords() {
  alert('Export functionality coming soon!');
}

// Initialize filters state
document.addEventListener('DOMContentLoaded', function() {
  const filterBody = document.getElementById('filterBody');
  const hasFilters = {{ 'true' if request.args else 'false' }};
  
  if (hasFilters) {
    filterBody.style.display = 'block';
    document.getElementById('filterIcon').classList.remove('fa-chevron-down');
    document.getElementById('filterIcon').classList.add('fa-chevron-up');
  } else {
    filterBody.style.display = 'none';
  }
});
</script>
{% endblock %}