{% 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>
/* Export dropdown styles */
.export-dropdown {
  position: relative;
  display: inline-block;
}

.export-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 9999;
  min-width: 220px;
}

.export-menu.show {
  display: block;
}

.export-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.875rem;
  color: #2d3748;
}

.export-menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.export-menu-item:last-child {
  border-radius: 0 0 8px 8px;
}

.export-menu-item:hover {
  background: #f7fafc;
}

.export-menu-item i {
  font-size: 1.125rem;
  width: 20px;
  text-align: center;
}

.export-menu-item .fa-file-csv {
  color: #4299e1;
}

.export-menu-item .fa-file-excel {
  color: #48bb78;
}

.export-menu-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 0.25rem 0;
}

.export-menu-info {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: #718096;
  background: #f7fafc;
  border-radius: 0 0 8px 8px;
}

.time-attendance-page {
  overflow: visible !important;
}

.time-attendance-header {
  overflow: visible !important;
}
</style>
{% 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 %}
      
      <!-- Export Dropdown -->
      <div class="export-dropdown">
        <button class="btn btn-secondary" onclick="toggleExportMenu()">
          <i class="fas fa-download"></i>
          Export
          <i class="fas fa-chevron-down" style="margin-left: 0.5rem; font-size: 0.75rem;"></i>
        </button>
        
        <div class="export-menu" id="exportMenu">
          <button class="export-menu-item" onclick="exportToCSV()">
            <i class="fas fa-file-csv"></i>
            <div>
              <strong>Export to CSV</strong>
              <div style="font-size: 0.75rem; color: #718096;">Quick download, all data</div>
            </div>
          </button>
          
          <button class="export-menu-item" onclick="exportToExcel()">
            <i class="fas fa-file-excel"></i>
            <div>
              <strong>Export to Excel</strong>
              <div style="font-size: 0.75rem; color: #718096;">Formatted with summary sheet</div>
            </div>
          </button>
          
          <div class="export-menu-divider"></div>
          
          <div class="export-menu-info">
            <i class="fas fa-info-circle"></i>
            Export will include current filters
          </div>
        </div>
      </div>
    </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 employees %}
            <option value="{{ employee.employee_id }}" 
                    {% if current_filters.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 locations %}
            <option value="{{ location.location_name }}" 
                    {% if current_filters.location_name == location.location_name %}selected{% endif %}>
              {{ location.location_name }}
            </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="{{ current_filters.start_date or '' }}">
        </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="{{ current_filters.end_date or '' }}">
        </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-outline">
            <i class="fas fa-undo"></i>
            Clear Filters
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Records Count Info -->
  {% if records %}
  <div class="records-info">
    <div class="info-card">
      <i class="fas fa-database"></i>
      <span>Showing {{ records.items|length }} of {{ records.total }} records</span>
      {% if current_filters.employee_id or current_filters.location_name or current_filters.start_date or current_filters.end_date %}
      <span class="filter-badge">Filtered</span>
      {% endif %}
    </div>
  </div>
  {% endif %}

  <!-- Records Table -->
  {% if records and records.items %}
  <div class="table-section">
    <div class="table-container">
      <table class="records-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Employee</th>
            <th>Date</th>
            <th>Time</th>
            <th>Location</th>
            <th>Action</th>
            <th>Platform</th>
            <th>Import Source</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for record in records.items %}
          <tr>
            <td>{{ record.id }}</td>
            <td>
              <div class="employee-info">
                <strong>{{ record.employee_name }}</strong>
                <small>ID: {{ record.employee_id }}</small>
              </div>
            </td>
            <td>{{ record.attendance_date.strftime('%Y-%m-%d') if record.attendance_date else 'N/A' }}</td>
            <td>{{ record.attendance_time.strftime('%H:%M:%S') if record.attendance_time else 'N/A' }}</td>
            <td>{{ record.location_name }}</td>
            <td>
              <span class="action-badge {% if 'Check In' in record.action_description %}check-in{% else %}check-out{% endif %}">
                {{ record.action_description }}
              </span>
            </td>
            <td>{{ record.platform or 'N/A' }}</td>
            <td>
              <div class="import-info">
                {{ record.import_source or 'Unknown' }}
                <small>{{ record.import_date.strftime('%Y-%m-%d') if record.import_date else '' }}</small>
              </div>
            </td>
            <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="confirmDelete({{ record.id }}, '{{ record.employee_name }}', '{{ record.attendance_date.strftime('%Y-%m-%d') if record.attendance_date else 'N/A' }}')" title="Delete">
                  <i class="fas fa-trash"></i>
                </button>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- Pagination -->
    {% if records.pages > 1 %}
    <div class="pagination-section">
      <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, **current_filters) }}" 
           class="pagination-btn">
          <i class="fas fa-chevron-left"></i>
          Previous
        </a>
        {% else %}
        <span class="pagination-btn disabled">
          <i class="fas fa-chevron-left"></i>
          Previous
        </span>
        {% 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, **current_filters) }}" 
               class="pagination-btn">{{ page_num }}</a>
            {% else %}
            <span class="pagination-btn active">{{ page_num }}</span>
            {% endif %}
          {% else %}
          <span class="pagination-btn disabled">…</span>
          {% endif %}
        {% endfor %}

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

  {% else %}
  <!-- Empty State -->
  <div class="empty-state">
    <div class="empty-icon">
      <i class="fas fa-search"></i>
    </div>
    <h3>No Records Found</h3>
    <p>
      {% if current_filters.employee_id or current_filters.location_name or current_filters.start_date or current_filters.end_date %}
      No attendance records match your current filter criteria.
      Try adjusting your filters or clearing them to see all records.
      {% else %}
      No time attendance records have been imported yet.
      Import your first Excel file to get started.
      {% endif %}
    </p>
    <div class="empty-actions">
      {% if current_filters.employee_id or current_filters.location_name or current_filters.start_date or current_filters.end_date %}
      <a href="{{ url_for('time_attendance_records') }}" class="btn btn-primary">
        <i class="fas fa-undo"></i>
        Clear Filters
      </a>
      {% endif %}
      {% if session.role == 'admin' %}
      <a href="{{ url_for('import_time_attendance') }}" class="btn btn-secondary">
        <i class="fas fa-upload"></i>
        Import Data
      </a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal" style="display: none;">
  <div class="modal-content">
    <div class="modal-header">
      <h3>
        <i class="fas fa-exclamation-triangle"></i>
        Confirm Deletion
      </h3>
      <button class="modal-close" onclick="closeDeleteModal()">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to delete this attendance record?</p>
      <p><strong>Employee:</strong> <span id="deleteEmployeeName"></span></p>
      <p><strong>Date:</strong> <span id="deleteDate"></span></p>
      <p class="text-danger">This action cannot be undone.</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" onclick="closeDeleteModal()">Cancel</button>
      <form id="deleteForm" method="POST" style="display: inline;">
        <button type="submit" class="btn btn-danger">
          <i class="fas fa-trash"></i>
          Delete Record
        </button>
      </form>
    </div>
  </div>
</div>

<script>
// Toggle filters
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');
  }
}

// Toggle export menu
function toggleExportMenu() {
  const menu = document.getElementById('exportMenu');
  menu.classList.toggle('show');
}

// Close export menu when clicking outside
document.addEventListener('click', function(e) {
  const exportDropdown = document.querySelector('.export-dropdown');
  if (exportDropdown && !exportDropdown.contains(e.target)) {
    document.getElementById('exportMenu').classList.remove('show');
  }
});

// Get current filters as URL parameters
function getCurrentFilters() {
  const params = new URLSearchParams(window.location.search);
  return {
    employee_id: params.get('employee_id') || '',
    location_name: params.get('location_name') || '',
    start_date: params.get('start_date') || '',
    end_date: params.get('end_date') || '',
    import_batch: params.get('import_batch') || ''
  };
}

// Export to CSV
function exportToCSV() {
  const filters = getCurrentFilters();
  const params = new URLSearchParams(filters);
  params.set('format', 'csv');
  
  window.location.href = `{{ url_for('export_time_attendance') }}?${params.toString()}`;
  toggleExportMenu();
}

// Export to Excel
function exportToExcel() {
  const filters = getCurrentFilters();
  const params = new URLSearchParams(filters);
  params.set('format', 'excel');
  
  window.location.href = `{{ url_for('export_time_attendance') }}?${params.toString()}`;
  toggleExportMenu();
}

// View record details
function viewRecord(recordId) {
  // Implement view details functionality
  alert(`View details for record ID: ${recordId}\nThis feature can be implemented to show a modal with full record details.`);
}

// Delete confirmation
function confirmDelete(recordId, employeeName, date) {
  document.getElementById('deleteEmployeeName').textContent = employeeName;
  document.getElementById('deleteDate').textContent = date;
  document.getElementById('deleteForm').action = `{{ url_for('delete_time_attendance_record', record_id=0) }}`.replace('0', recordId);
  document.getElementById('deleteModal').style.display = 'flex';
}

function closeDeleteModal() {
  document.getElementById('deleteModal').style.display = 'none';
}

// Close modal when clicking outside
document.getElementById('deleteModal').addEventListener('click', function(e) {
  if (e.target === this) {
    closeDeleteModal();
  }
});

// Escape key to close modal
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    closeDeleteModal();
  }
});

// Initialize filters state
document.addEventListener('DOMContentLoaded', function() {
  // Show filters if any are active
  const hasActiveFilters = {{ 'true' if current_filters.employee_id or current_filters.location_name or current_filters.start_date or current_filters.end_date else 'false' }};
  if (hasActiveFilters) {
    toggleFilters();
  }
});
</script>
{% endblock %}