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

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

{% block content %}
<div class="attendance-page">
  <!-- Page Header -->
  <div class="attendance-header">
    <div class="header-content">
      <h1>
        <i class="fas fa-clock"></i>
        Time Attendance Dashboard
      </h1>
      <p>Manage and analyze employee time attendance data from Excel imports</p>
    </div>
    
    <div class="header-actions">
      {% if session.role in ['admin', 'payroll'] %}
      <a href="{{ url_for('import_time_attendance') }}" class="btn btn-primary">
        <i class="fas fa-upload"></i>
        Import Excel Data
      </a>
      {% endif %}
      <a href="{{ url_for('time_attendance_records') }}" class="btn btn-secondary">
        <i class="fas fa-search"></i>
        View All Records
      </a>
    </div>
  </div>

  <!-- Statistics Section -->
  <div class="stats-section">
    <div class="stats-grid">
      <div class="stat-card primary">
        <div class="stat-icon">
          <i class="fas fa-database"></i>
        </div>
        <div class="stat-content">
          <h3>{{ "{:,}".format(total_records) }}</h3>
          <p>Total Records</p>
        </div>
      </div>
      
      <div class="stat-card success">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-content">
          <h3>{{ "{:,}".format(unique_employees) }}</h3>
          <p>Employees</p>
        </div>
      </div>
      
      <div class="stat-card info">
        <div class="stat-icon">
          <i class="fas fa-map-marker-alt"></i>
        </div>
        <div class="stat-content">
          <h3>{{ "{:,}".format(unique_locations) }}</h3>
          <p>Locations</p>
        </div>
      </div>
      
      <div class="stat-card warning">
        <div class="stat-icon">
          <i class="fas fa-file-import"></i>
        </div>
        <div class="stat-content">
          <h3>{{ "{:,}".format(recent_imports|length) }}</h3>
          <p>Import Batches</p>
        </div>
      </div>
    </div>
  </div>

  {% if recent_records %}
  <div class="attendance-table-section">
    <div class="table-header">
      <h3>
        <i class="fas fa-table"></i>
        Recent Time Attendance Records
      </h3>
      <div class="table-controls">
        <div class="entries-per-page">
          <span>Showing latest {{ recent_records|length }} records</span>
        </div>
      </div>
    </div>
    
    <div class="table-container">
      <table class="attendance-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>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for record in recent_records %}
          <tr>
            <!-- 1. ID (Employee ID) -->
            <td>
              <div class="employee-info">
                <span class="employee-id">{{ record.employee_id }}</span>
              </div>
            </td>
            
            <!-- 2. Name -->
            <td>
              <div class="employee-name-simple">
                {{ record.employee_name or 'Unknown' }}
              </div>
            </td>
            
            <!-- 3. Platform -->
            <td class="platform-cell">
              {{ record.platform or 'Unknown' }}
            </td>
            
            <!-- 4. Date -->
            <td class="date-cell">
              {{ record.attendance_date.strftime('%Y-%m-%d') }}
            </td>
            
            <!-- 5. Time -->
            <td class="time-cell">
              {{ record.attendance_time.strftime('%H:%M:%S') }}
            </td>
            
            <!-- 6. Location Name -->
            <td>
              <div class="location-info">
                <i class="fas fa-map-marker-alt"></i>
                {{ record.location_name }}
              </div>
            </td>
            
            <!-- 7. Action Description -->
            <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>
            
            <!-- 8. Event Description -->
            <td class="event-cell">
              {{ record.event_description if record.event_description else '-' }}
            </td>
            
            <!-- 9. Recorded Address -->
            <td class="address-cell">
              {% if record.recorded_address %}
              <span title="{{ record.recorded_address }}">
                {{ record.recorded_address[:35] }}{% if record.recorded_address|length > 35 %}...{% endif %}
              </span>
              {% else %}
              <span class="text-muted">No address</span>
              {% endif %}
            </td>
            
            <!-- Actions -->
            <td>
              <div class="record-actions">
                <button class="action-btn btn-view" onclick="viewRecord({{ record.id }})" title="View Details">
                  <i class="fas fa-eye"></i>
                </button>
                {% if session.role == 'admin' %}
                <button class="action-btn btn-delete" onclick="deleteRecord({{ record.id }}, '{{ record.employee_name }}', '{{ record.attendance_date }}')" title="Delete">
                  <i class="fas fa-trash"></i>
                </button>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- Table Footer -->
    <div class="table-footer">
      <div class="table-info">
        <span>Showing {{ recent_records|length }} of {{ "{:,}".format(total_records) }} total records</span>
      </div>
      <div class="table-actions">
        <a href="{{ url_for('time_attendance_records') }}" class="btn btn-primary">
          <i class="fas fa-list"></i>
          View All Records
        </a>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Recent Imports Table -->
  {% if recent_imports %}
  <div class="attendance-table-section">
    <div class="table-header">
      <h3>
        <i class="fas fa-history"></i>
        Recent Import Batches
      </h3>
      <div class="table-controls">
        <span>Last {{ recent_imports|length }} import batches</span>
      </div>
    </div>
    
    <div class="table-container">
      <table class="attendance-table">
        <thead>
          <tr>
            <th>Import Date</th>
            <th>Source</th>
            <th>Records</th>
            <th>Batch ID</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for import_batch in recent_imports %}
          <tr>
            <td>
              <div class="date-info">
                <i class="fas fa-calendar"></i>
                {{ import_batch.import_date.strftime('%Y-%m-%d %H:%M') if import_batch.import_date else 'Unknown' }}
              </div>
            </td>
            <td>
              <div class="source-info">
                <i class="fas fa-file-excel" style="color: #059669;"></i>
                {{ import_batch.import_source or 'Excel Import' }}
              </div>
            </td>
            <td>
              <span class="record-count">{{ "{:,}".format(import_batch.record_count) }}</span>
            </td>
            <td>
              <code class="batch-id">{{ import_batch.import_batch_id[:8] }}...</code>
            </td>
            <td>
              <div class="record-actions">
                <a href="{{ url_for('time_attendance_records', import_batch=import_batch.import_batch_id) }}" 
                  class="action-btn btn-view" title="View Records">
                  <i class="fas fa-eye"></i>
                </a>
                <a href="{{ url_for('view_import_batch', batch_id=import_batch.import_batch_id) }}" 
                  class="action-btn btn-info" title="Batch Details">
                  <i class="fas fa-info-circle"></i>
                </a>
                {% if session.role == 'admin' %}
                <button onclick="deleteBatch('{{ import_batch.import_batch_id }}')" 
                        class="action-btn btn-delete" title="Delete Batch">
                  <i class="fas fa-trash"></i>
                </button>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <!-- Empty State -->
  {% if total_records == 0 %}
  <div class="empty-state">
    <div class="empty-icon">
      <i class="fas fa-clock"></i>
    </div>
    <h3>No Time Attendance Data</h3>
    <p>
      Get started by importing your first Excel file with time attendance data.
      The system supports various Excel formats (.xlsx, .xls) and will automatically process your data.
    </p>
    {% if session.role == 'admin' %}
    <div class="empty-actions">
      <a href="{{ url_for('import_time_attendance') }}" class="btn btn-primary">
        <i class="fas fa-upload"></i>
        Import Your First File
      </a>
    </div>
    {% endif %}
  </div>
  {% endif %}
</div>

<style>
/* Additional styles specific to this page */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  font-size: var(--font-size-sm);
}

.table-info {
  color: var(--gray-600);
}

.record-count {
  font-weight: 600;
  color: var(--gray-900);
}

.batch-id {
  background: var(--gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--gray-600);
}

.text-muted {
  color: var(--gray-400);
  font-style: italic;
}

.date-info,
.time-info,
.action-info,
.platform-info,
.address-info,
.source-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
}

.date-info i,
.time-info i,
.action-info i {
  width: 14px;
  text-align: center;
}

.platform-info,
.address-info {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.empty-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-size: 3rem;
}

.empty-state h3 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--gray-600);
  font-size: var(--font-size-lg);
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.empty-actions {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .table-footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  /* Hide some columns on mobile */
  .attendance-table th:nth-child(8),
  .attendance-table td:nth-child(8),
  .attendance-table th:nth-child(9),
  .attendance-table td:nth-child(9) {
    display: none;
  }
}

.employee-name-simple {
  font-weight: 500;
  color: #0f172a;
}

.date-cell,
.time-cell {
  font-family: 'Courier New', monospace;
  color: #374151;
  font-size: 0.875rem;
}

.event-cell {
  color: #64748b;
  font-size: 0.875rem;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.text-muted {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.875rem;
}

.platform-cell {
  color: #64748b;
  font-size: 0.875rem;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive adjustments for dashboard table */
@media (max-width: 1400px) {
  .attendance-table th:nth-child(4),
  .attendance-table td:nth-child(4),
  .attendance-table th:nth-child(9),
  .attendance-table td:nth-child(9) {
    display: none;
  }
}

@media (max-width: 1024px) {
  .attendance-table th:nth-child(4),
  .attendance-table td:nth-child(4),
  .attendance-table th:nth-child(7),
  .attendance-table td:nth-child(7),
  .attendance-table th:nth-child(9),
  .attendance-table td:nth-child(9),
  .attendance-table th:nth-child(10),
  .attendance-table td:nth-child(10) {
    display: none;
  }
}

@media (max-width: 768px) {
  .attendance-table th:nth-child(4),
  .attendance-table td:nth-child(4),
  .attendance-table th:nth-child(7),
  .attendance-table td:nth-child(7),
  .attendance-table th:nth-child(8),
  .attendance-table td:nth-child(8),
  .attendance-table th:nth-child(9),
  .attendance-table td:nth-child(9),
  .attendance-table th:nth-child(10),
  .attendance-table td:nth-child(10) {
    display: none;
  }
}
</style>

<script>
// View record details
function viewRecord(recordId) {
  window.location.href = "{{ url_for('time_attendance_record_detail', record_id=0) }}".replace('0', recordId);
}

// Delete record with confirmation
function deleteRecord(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 = "{{ url_for('delete_time_attendance_record', record_id=0) }}".replace('0', recordId);
    document.body.appendChild(form);
    form.submit();
  }
}

function deleteBatch(batchId) {
  if (confirm('Are you sure you want to delete this entire import batch? This action cannot be undone.')) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/time-attendance/import/batch/${batchId}/delete`;
    
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (csrfToken) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'csrf_token';
      input.value = csrfToken.content;
      form.appendChild(input);
    }
    
    document.body.appendChild(form);
    form.submit();
  }
}
</script>
{% endblock %}