{% 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 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('excel')">
        <i class="fas fa-file-excel"></i>
        Export to Excel
      </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="project_id" class="form-label">Project</label>
          <select id="project_id" name="project_id" class="form-select">
            <option value="">All Projects</option>
            {% for project in projects %}
            <option value="{{ project.id }}" {% if request.args.get('project_id') == project.id|string %}selected{% endif %}>
              {{ project.name }}
            </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>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 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.employee_name }}</span>
              </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 class="location-cell">
              <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[:40] }}{% if record.recorded_address|length > 40 %}...{% endif %}
              </span>
              {% else %}
              <span class="text-muted">No address</span>
              {% endif %}
            </td>
            
            <!-- Actions -->
            <td class="actions-cell">
              <div class="action-buttons">
                <a href="{{ url_for('time_attendance_record_detail', record_id=record.id, **request.args) }}" 
                  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', ''),
                   project_id=request.args.get('project_id', ''),
                   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', ''),
                       project_id=request.args.get('project_id', ''),
                       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', ''),
                   project_id=request.args.get('project_id', ''),
                   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}?`)) {
    // Get current URL parameters (filters)
    const currentUrl = new URL(window.location.href);
    const params = currentUrl.searchParams;
    
    // Create form
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/time-attendance/delete/${recordId}`;
    
    // Add all current filter parameters as hidden inputs
    for (const [key, value] of params.entries()) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = value;
      form.appendChild(input);
    }
    
    // Add CSRF token if available
    const sessionCsrfToken = '{{ session.get("csrf_token", "") }}';
    if (sessionCsrfToken) {
      const csrfInput = document.createElement('input');
      csrfInput.type = 'hidden';
      csrfInput.name = 'csrf_token';
      csrfInput.value = sessionCsrfToken;
      form.appendChild(csrfInput);
    }
    
    document.body.appendChild(form);
    form.submit();
  }
}

function exportRecords(format) {
  // Get current filter values
  const employeeId = document.querySelector('select[name="employee_id"]')?.value || '';
  const locationName = document.querySelector('select[name="location_name"]')?.value || '';
  const projectId = document.querySelector('select[name="project_id"]')?.value || '';
  const startDate = document.querySelector('input[name="start_date"]')?.value || '';
  const endDate = document.querySelector('input[name="end_date"]')?.value || '';
  
  // Build query parameters
  const params = new URLSearchParams();
  if (employeeId) params.append('employee_id', employeeId);
  if (locationName) params.append('location_name', locationName);
  if (projectId) params.append('project_id', projectId); 
  if (startDate) params.append('start_date', startDate);
  if (endDate) params.append('end_date', endDate);
  params.append('format', format);
  
  // Redirect to export endpoint
  window.location.href = `/time-attendance/export?${params.toString()}`;
}

// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
  const menu = document.getElementById('exportMenu');
  const exportWrapper = document.querySelector('.export-dropdown-wrapper');
  
  if (menu && exportWrapper && !exportWrapper.contains(event.target)) {
    menu.style.display = 'none';
  }
});

// Close dropdown with Escape key
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    const menu = document.getElementById('exportMenu');
    if (menu) {
      menu.style.display = 'none';
    }
  }
});

// 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>

<style>
/* Additional styles for Excel-matched column layout */
.employee-id-cell {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #0f172a;
}

.employee-name-cell {
  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: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

/* Responsive table adjustments */
@media (max-width: 1400px) {
  .records-table th,
  .records-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.8125rem;
  }
  
  .address-cell {
    max-width: 150px;
  }
  
  .event-cell {
    max-width: 120px;
  }
}

@media (max-width: 1024px) {
  /* Hide less critical columns on smaller screens */
  .records-table th:nth-child(3),
  .records-table td:nth-child(3),
  .records-table th:nth-child(8),
  .records-table td:nth-child(8) {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Show only most important columns on mobile */
  .records-table th:nth-child(3),
  .records-table td:nth-child(3),
  .records-table th:nth-child(6),
  .records-table td:nth-child(6),
  .records-table th:nth-child(8),
  .records-table td:nth-child(8),
  .records-table th:nth-child(9),
  .records-table td:nth-child(9) {
    display: none;
  }
}
.export-dropdown-wrapper {
  position: relative;
  display: inline-block;
  z-index: 100;
}

.header-actions {
  position: relative;
  z-index: 100;
}

.export-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 9999;
  min-width: 200px;
  overflow: visible;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.export-option {
  width: 100%;
  padding: 0.875rem 1rem;
  border: none;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #0f172a;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f1f5f9;
}

.export-option:last-child {
  border-bottom: none;
}

.export-option:hover {
  background: #f8fafc;
}

.export-option:active {
  background: #f1f5f9;
}

.export-option i {
  font-size: 1.125rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.export-option span {
  font-weight: 500;
  white-space: nowrap;
}

/* Ensure parent containers don't hide dropdown */
.time-attendance-header {
  overflow: visible !important;
  position: relative;
  z-index: 50;
}

.records-section {
  position: relative;
  z-index: 1;
}

.filter-section {
  position: relative;
  z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .export-dropdown-menu {
    right: auto;
    left: 0;
    min-width: 180px;
  }
  
  .export-dropdown-wrapper {
    width: 100%;
  }
  
  .export-dropdown-menu {
    left: 0;
    right: auto;
    min-width: 100%;
  }
}
</style>
{% endblock %}