{% 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') }}">
<style>
/* ── Unlimited export toggle ── */
.export-unlimited-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.export-unlimited-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary-color);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Autocomplete widget styles (mirrors attendance.css — not loaded on this page) ── */
.autocomplete-container-filter { position: relative; }

.autocomplete-results-filter {
    position: fixed;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    margin-top: 0;
}
.autocomplete-results-filter.show { display: block; }

.autocomplete-item-filter {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}
.autocomplete-item-filter:last-child { border-bottom: none; }
.autocomplete-item-filter:hover { background-color: #f8f9fa; }

.employee-info-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.employee-name-filter { font-weight: 600; color: #333; }
.employee-id-filter   { color: #666; font-size: 0.9rem; }

.clear-employee-filter {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;
}
.clear-employee-filter:hover { background: #c82333; }
.clear-employee-filter i { font-size: 0.75rem; }

.filter-input { padding-right: 35px !important; }

/* ── Multi-Employee Chip Filter ── */
.employee-chips-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 4px 36px 4px 8px;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    cursor: text;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.employee-chips-wrapper:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.employee-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    border-radius: 4px;
    padding: 2px 6px 2px 8px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.employee-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #6366f1;
    padding: 0;
    line-height: 1;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    border-radius: 2px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.employee-chip-remove:hover { color: #dc2626; }
.employee-chip-input {
    border: none;
    outline: none;
    font-size: 0.875rem;
    background: transparent;
    flex: 1;
    min-width: 120px;
    padding: 2px 0;
    color: #1f2937;
}
.employee-chip-input::placeholder { color: #9ca3af; }
.employee-chips-clear-all {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;
}
.employee-chips-clear-all:hover { background: #c82333; }
.employee-chips-clear-all i { font-size: 0.7rem; }

/* ── Mirror attendance.css filter layout on this page ── */
.filters-section { margin-bottom: 2rem; }

.filters-card {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    overflow: hidden;
}

.filters-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.filters-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filters-header h3 i { color: #2563eb; }

.filters-form { padding: 1.5rem; }

.filter-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label i { color: #2563eb; font-size: 0.75rem; }

.filter-group input,
.filter-group select {
    padding: 0.625rem 0.875rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.filter-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: end;
    margin-top: 0.5rem;
}

@media (max-width: 1200px) {
    .filter-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .filter-row { grid-template-columns: 1fr 1fr; }
    .filter-actions { grid-column: 1 / -1; }
}
</style>
{% 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.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('time_attendance.import_time_attendance') }}" class="btn btn-primary">
        <i class="fas fa-upload"></i>
        Import Data
      </a>
      {% endif %}
      <label class="export-unlimited-toggle" title="When checked, exports all dates in the selected range instead of capping at 2 weeks">
        <input type="checkbox" id="export_unlimited">
        <span>Unlimited</span>
      </label>
      <button class="btn btn-secondary" onclick="exportRecords('excel')">
        <i class="fas fa-file-excel"></i>
        Export to Excel
      </button>
      <button class="btn btn-secondary" onclick="exportByBuilding()" title="Report by building, plus a Filtered Report sheet (project managers and SP summary rows removed) and a Weekly Hours by Location sheet with the project total">
        <i class="fas fa-building"></i>
        Export by Building
      </button>
    </div>
  </div>

  <!-- Filters Section -->
  <div class="filters-section">
    <div class="filters-card">
      <div class="filters-header">
        <h3>
          <i class="fas fa-filter"></i>
          Filter Records
        </h3>
      </div>
      <div class="filters-form">
        <form method="GET" action="{{ url_for('time_attendance.time_attendance_records') }}">
          <div class="filter-row">

            <div class="filter-group">
              <label for="start_date">
                <i class="fas fa-calendar-alt"></i>
                Start Date
              </label>
              <input type="date"
                     id="start_date"
                     name="start_date"
                     value="{{ request.args.get('start_date', '') }}">
            </div>

            <div class="filter-group">
              <label for="end_date">
                <i class="fas fa-calendar-alt"></i>
                End Date
              </label>
              <input type="date"
                     id="end_date"
                     name="end_date"
                     value="{{ request.args.get('end_date', '') }}">
            </div>

            <div class="filter-group">
              <label for="project_id">
                <i class="fas fa-project-diagram"></i>
                Project
              </label>
              <select id="project_id" name="project_id">
                <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="filter-group">
              <label for="location_name">
                <i class="fas fa-map-marker-alt"></i>
                Location
              </label>
              <select id="location_name" name="location_name">
                <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="filter-group">
              <label for="ta_employee_chip_input">
                <i class="fas fa-user-search"></i>
                Employee
              </label>
              <div class="autocomplete-container-filter">
                <input type="hidden" id="employee_id" name="employee_id" value="{{ employee_filter }}">
                <div class="employee-chips-wrapper" id="taEmployeeChipsWrapper">
                  {% for emp in employee_display_names %}
                  <span class="employee-chip" data-id="{{ emp.id }}">
                    <span title="{{ emp.name }}">{{ emp.name }}</span>
                    <button type="button" class="employee-chip-remove" title="Remove">
                      <i class="fas fa-times"></i>
                    </button>
                  </span>
                  {% endfor %}
                  <input type="text"
                         id="ta_employee_chip_input"
                         class="employee-chip-input"
                         placeholder="{% if employee_display_names %}Add more...{% else %}Search by ID or Name...{% endif %}"
                         autocomplete="off">
                  {% if employee_filter %}
                  <button type="button" class="employee-chips-clear-all" id="taClearAllEmployees" title="Clear all">
                    <i class="fas fa-times"></i>
                  </button>
                  {% endif %}
                </div>
                <div id="ta_autocomplete_results" class="autocomplete-results-filter"></div>
              </div>
            </div>

            <div class="filter-actions">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-search"></i>
                Apply Filters
              </button>
              <button type="button" onclick="taClearAllFilters()" class="btn btn-outline">
                <i class="fas fa-times"></i>
                Clear
              </button>
            </div>

          </div>
        </form>
      </div>
    </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.resolved_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.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.resolved_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.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.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.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="no-records">
      <i class="fas fa-folder-open"></i>
      <p>No attendance records found matching your criteria.</p>
    </div>
    {% endif %}
  </div>
</div>

<script>
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 = (window.qrConfig && window.qrConfig.csrfToken) || '';
    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 — employee_id is now a hidden field (autocomplete widget)
  const employeeId = document.getElementById('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 || '';
  const unlimited = document.getElementById('export_unlimited')?.checked || false;
  
  // 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);
  if (unlimited) params.append('unlimited', 'true');
  
  // Redirect to export endpoint
  window.location.href = `/time-attendance/export?${params.toString()}`;
}

function exportByBuilding() {
  // Get current filter values — employee_id is now a hidden field (autocomplete widget)
  const employeeId = document.getElementById('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 || '';
  const unlimited = document.getElementById('export_unlimited')?.checked || false;
  
  // 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);
  if (unlimited) params.append('unlimited', 'true');
  
  // Redirect to export by building endpoint
  window.location.href = `/time-attendance/export-by-building?${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';
    }
  }
});

// Filters are always visible — no toggle needed

// ── Multi-Employee Chip Filter Autocomplete ───────────────────────────────
(function () {
  const chipInput      = document.getElementById('ta_employee_chip_input');
  const employeeHidden = document.getElementById('employee_id');
  const autocomplete   = document.getElementById('ta_autocomplete_results');
  const chipsWrapper   = document.getElementById('taEmployeeChipsWrapper');
  let searchTimeout;

  // State: map of id -> displayName for currently selected employees
  const selected = {};
  {% for emp in employee_display_names %}
  selected['{{ emp.id }}'] = '{{ emp.name | e }}';
  {% endfor %}

  function syncHiddenField() {
    employeeHidden.value = Object.keys(selected).join(',');
    const hasChips = Object.keys(selected).length > 0;
    let btn = document.getElementById('taClearAllEmployees');
    if (hasChips && !btn) {
      btn = document.createElement('button');
      btn.type = 'button';
      btn.id = 'taClearAllEmployees';
      btn.className = 'employee-chips-clear-all';
      btn.title = 'Clear all';
      btn.innerHTML = '<i class="fas fa-times"></i>';
      btn.addEventListener('click', clearAll);
      chipsWrapper.appendChild(btn);
    } else if (!hasChips && btn) {
      btn.remove();
    }
  }

  function addChip(id, name) {
    id = String(id);
    if (selected[id]) return;
    selected[id] = name;

    const chip = document.createElement('span');
    chip.className = 'employee-chip';
    chip.dataset.id = id;

    const nameSpan = document.createElement('span');
    nameSpan.title = name;
    nameSpan.textContent = name;

    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'employee-chip-remove';
    removeBtn.title = 'Remove';
    removeBtn.innerHTML = '<i class="fas fa-times"></i>';
    removeBtn.addEventListener('click', function () {
      delete selected[chip.dataset.id];
      chip.remove();
      syncHiddenField();
      updatePlaceholder();
    });

    chip.appendChild(nameSpan);
    chip.appendChild(removeBtn);
    chipsWrapper.insertBefore(chip, chipInput);
    syncHiddenField();
    updatePlaceholder();
  }

  function updatePlaceholder() {
    chipInput.placeholder = Object.keys(selected).length > 0
      ? 'Add more...'
      : 'Search by ID or Name...';
  }

  function clearAll() {
    Object.keys(selected).forEach(function(k) { delete selected[k]; });
    chipsWrapper.querySelectorAll('.employee-chip').forEach(function(c) { c.remove(); });
    syncHiddenField();
    updatePlaceholder();
  }

  // Wire remove buttons for server-rendered chips on page load
  chipsWrapper.querySelectorAll('.employee-chip-remove').forEach(function (btn) {
    btn.addEventListener('click', function () {
      const chip = btn.closest('.employee-chip');
      delete selected[chip.dataset.id];
      chip.remove();
      syncHiddenField();
      updatePlaceholder();
    });
  });

  const clearAllBtn = document.getElementById('taClearAllEmployees');
  if (clearAllBtn) {
    clearAllBtn.addEventListener('click', clearAll);
  }

  chipsWrapper.addEventListener('click', function (e) {
    if (!e.target.closest('.employee-chip') && !e.target.closest('.employee-chips-clear-all')) {
      chipInput.focus();
    }
  });

  chipInput.addEventListener('input', function () {
    const q = this.value.trim();
    if (q.length === 0) { autocomplete.classList.remove('show'); return; }
    if (q.length < 2)   { autocomplete.classList.remove('show'); return; }

    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function () {
      fetch('/api/search_employees?q=' + encodeURIComponent(q))
        .then(function (r) { return r.json(); })
        .then(function (data) { renderDropdown(data.employees || []); })
        .catch(function (err) { console.error('Employee search error:', err); });
    }, 300);
  });

  chipInput.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      const q = chipInput.value.trim();
      if (/^\d+$/.test(q) && !selected[q]) {
        addChip(q, 'ID: ' + q);
        chipInput.value = '';
        autocomplete.classList.remove('show');
      }
    }
    if (e.key === 'Backspace' && chipInput.value === '') {
      const chips = chipsWrapper.querySelectorAll('.employee-chip');
      if (chips.length > 0) {
        const last = chips[chips.length - 1];
        delete selected[last.dataset.id];
        last.remove();
        syncHiddenField();
        updatePlaceholder();
      }
    }
  });

  function renderDropdown(employees) {
    autocomplete.innerHTML = '';
    const unselected = employees.filter(function(emp) { return !selected[String(emp.id)]; });

    if (unselected.length === 0) {
      const noResult = document.createElement('div');
      noResult.className = 'autocomplete-item-filter';
      noResult.style.cssText = 'cursor:default;color:#999;';
      noResult.textContent = employees.length === 0 ? 'No employees found' : 'All matching employees already selected';
      autocomplete.appendChild(noResult);
    } else {
      unselected.forEach(function (emp) {
        const isUnregistered = (emp.lastName === '(no record)');
        const displayName = isUnregistered ? 'ID: ' + emp.id : emp.lastName + ', ' + emp.firstName;

        const item = document.createElement('div');
        item.className = 'autocomplete-item-filter';
        const info = document.createElement('div');
        info.className = 'employee-info-filter';

        const nameSpan = document.createElement('span');
        nameSpan.className = 'employee-name-filter';
        if (isUnregistered) {
          nameSpan.textContent = 'ID: ' + emp.id + ' ';
          const em = document.createElement('em');
          em.style.color = '#94a3b8';
          em.textContent = '(no record)';
          nameSpan.appendChild(em);
        } else {
          nameSpan.textContent = displayName;
        }

        const idSpan = document.createElement('span');
        idSpan.className = 'employee-id-filter';
        idSpan.textContent = 'ID: ' + emp.id;

        info.appendChild(nameSpan);
        info.appendChild(idSpan);
        item.appendChild(info);

        item.addEventListener('click', (function (id, name) {
          return function () {
            addChip(id, name);
            chipInput.value = '';
            autocomplete.classList.remove('show');
          };
        }(String(emp.id), displayName)));

        autocomplete.appendChild(item);
      });
    }
    positionDropdown();
    autocomplete.classList.add('show');
  }

  function positionDropdown() {
    const wrapperRect = chipsWrapper.getBoundingClientRect();
    autocomplete.style.top   = (wrapperRect.bottom + window.scrollY) + 'px';
    autocomplete.style.left  = wrapperRect.left + 'px';
    autocomplete.style.width = wrapperRect.width + 'px';
  }

  document.addEventListener('click', function (e) {
    if (!e.target.closest('.autocomplete-container-filter')) {
      autocomplete.classList.remove('show');
    }
  });

  window.addEventListener('scroll', function () {
    if (autocomplete.classList.contains('show')) positionDropdown();
  }, true);

  window.addEventListener('resize', function () {
    if (autocomplete.classList.contains('show')) positionDropdown();
  });

  // Legacy globals
  window.taSelectEmployee = function (id, name) {
    addChip(String(id), name);
    chipInput.value = '';
    autocomplete.classList.remove('show');
  };
  window.taClearEmployee = function () {
    clearAll();
    chipsWrapper.closest('form').submit();
  };
  window.taClearAllFilters = function () {
    window.location.href = '{{ url_for("time_attendance.time_attendance_records") }}';
  };
}());

// ── Dynamic Location Dropdown (scoped by selected project) ────────────────
(function () {
  const projectSelect  = document.getElementById('project_id');
  const locationSelect = document.getElementById('location_name');

  if (!projectSelect || !locationSelect) return;

  // Capture full server-rendered location list on page load for restoration
  const allLocationOptions = Array.from(locationSelect.options).map(function (opt) {
    return { value: opt.value, text: opt.text };
  });
  const initialLocationValue = locationSelect.value;

  function rebuildLocationDropdown(locations, preserveValue) {
    while (locationSelect.options.length > 1) { locationSelect.remove(1); }
    locations.forEach(function (locName) {
      const opt = document.createElement('option');
      opt.value = locName;
      opt.textContent = locName;
      if (locName === preserveValue) opt.selected = true;
      locationSelect.appendChild(opt);
    });
  }

  function loadLocationsForProject(projectId) {
    fetch('/api/time-attendance/locations?project_id=' + encodeURIComponent(projectId))
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (data.success) {
          const currentLoc = locationSelect.value;
          const validLoc = data.locations.includes(currentLoc) ? currentLoc : '';
          rebuildLocationDropdown(data.locations, validLoc);
        } else {
          console.error('Failed to load locations:', data.error);
        }
      })
      .catch(function (err) { console.error('Error fetching locations:', err); });
  }

  function restoreAllLocations() {
    while (locationSelect.options.length > 1) { locationSelect.remove(1); }
    for (let i = 1; i < allLocationOptions.length; i++) {
      const opt = document.createElement('option');
      opt.value = allLocationOptions[i].value;
      opt.textContent = allLocationOptions[i].text;
      if (allLocationOptions[i].value === initialLocationValue) opt.selected = true;
      locationSelect.appendChild(opt);
    }
  }

  projectSelect.addEventListener('change', function () {
    if (this.value) {
      loadLocationsForProject(this.value);
    } else {
      restoreAllLocations();
    }
  });
}());
</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;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.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%;
  }
  
  .header-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .header-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
{% endblock %}