GOV_QR_Codes_Management/templates/edit_employee.html

{% extends "base_authenticated.html" %}
{% set page_title = "Employee Management" %}

{% block title %}{{ page_title }}{% endblock %}

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

{% block content %}
<div class="employees-page">
  <!-- Page Header -->
  <div class="employees-header">
    <div class="header-content">
      <div class="header-navigation">
        <a href="{{ url_for('dashboard') }}" class="back-button">
          <i class="fas fa-arrow-left"></i>
          Back to Dashboard
        </a>
      </div>
      
      <h1><i class="fas fa-users"></i> Employee Management</h1>
      <p class="header-description">
        Manage employee records and view attendance statistics
      </p>
    </div>
    
    <div class="header-actions">
      {% if session.user_role == 'admin' %}
      <a href="{{ url_for('create_employee') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i>
        Add Employee
      </a>
      {% endif %}
    </div>
  </div>

  <!-- Statistics Cards -->
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-icon">
        <i class="fas fa-users"></i>
      </div>
      <div class="stat-info">
        <h3>{{ stats.total_employees }}</h3>
        <p>Total Employees</p>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon">
        <i class="fas fa-id-badge"></i>
      </div>
      <div class="stat-info">
        <h3>{{ stats.employees_with_title }}</h3>
        <p>With Job Titles</p>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon">
        <i class="fas fa-briefcase"></i>
      </div>
      <div class="stat-info">
        <h3>{{ stats.unique_titles }}</h3>
        <p>Unique Job Titles</p>
      </div>
    </div>
    
    {% if search %}
    <div class="stat-card search-results">
      <div class="stat-icon">
        <i class="fas fa-search"></i>
      </div>
      <div class="stat-info">
        <h3>{{ stats.search_results }}</h3>
        <p>Search Results</p>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Search and Filter Section -->
  <div class="search-section">
    <form method="GET" class="search-form">
      <div class="search-input-group">
        <input 
          type="text" 
          name="search" 
          value="{{ search }}" 
          placeholder="Search by name, employee ID, or job title..."
          class="search-input"
          autocomplete="off"
        >
        <button type="submit" class="search-btn">
          <i class="fas fa-search"></i>
        </button>
        {% if search %}
        <a href="{{ url_for('employees') }}" class="clear-search-btn" title="Clear search">
          <i class="fas fa-times"></i>
        </a>
        {% endif %}
      </div>
    </form>
  </div>

  <!-- Employee Table -->
  <div class="employees-table-container">
    <div class="table-header">
      <h2>
        {% if search %}
          Search Results for "{{ search }}"
        {% else %}
          All Employees
        {% endif %}
      </h2>
      <div class="table-info">
        Showing {{ employees.items|length }} of {{ employees.total }} employees
        {% if employees.pages > 1 %}
        (Page {{ employees.page }} of {{ employees.pages }})
        {% endif %}
      </div>
    </div>

    <div class="table-responsive">
      <table class="employees-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Job Title</th>
            <th>Contract ID</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for employee in employees.items %}
          <tr class="employee-row" data-employee-id="{{ employee.id }}">
            <td class="row-number">{{ loop.index + (employees.page - 1) * employees.per_page }}</td>
            
            <td class="employee-id">
              <span class="id-badge">{{ employee.id }}</span>
            </td>
            
            <td class="employee-name">
              <div class="name-container">
                <div class="avatar">
                  <i class="fas fa-user-circle"></i>
                </div>
                <div class="name-details">
                  <h4>{{ employee.full_name }}</h4>
                  <p>{{ employee.firstName }} {{ employee.lastName }}</p>
                </div>
              </div>
            </td>
            
            <td class="employee-title">
              {% if employee.title %}
                <span class="title-badge">{{ employee.title }}</span>
              {% else %}
                <span class="no-title">No Title</span>
              {% endif %}
            </td>
            
            <td class="contract-id">
              <span class="contract-badge">{{ employee.contractId }}</span>
            </td>
            
            <td class="actions">
              <div class="action-buttons">
                <a href="{{ url_for('employee_detail', employee_index=employee.index) }}" 
                   class="btn btn-sm btn-info" 
                   title="View Details">
                  <i class="fas fa-eye"></i>
                </a>
                
                {% if session.user_role == 'admin' %}
                <a href="{{ url_for('edit_employee', employee_index=employee.index) }}" 
                   class="btn btn-sm btn-warning" 
                   title="Edit Employee">
                  <i class="fas fa-edit"></i>
                </a>
                
                <button class="btn btn-sm btn-danger delete-btn" 
                        data-employee-index="{{ employee.index }}"
                        data-employee-name="{{ employee.full_name }}"
                        title="Delete Employee">
                  <i class="fas fa-trash"></i>
                </button>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if employees.pages > 1 %}
    <div class="pagination-container">
      <nav class="pagination-nav">
        <ul class="pagination">
          <!-- Previous Page -->
          {% if employees.has_prev %}
          <li>
            <a href="{{ url_for('employees', page=employees.prev_num, search=search) }}" 
               class="pagination-link">
              <i class="fas fa-chevron-left"></i>
              Previous
            </a>
          </li>
          {% endif %}
          
          <!-- Page Numbers -->
          {% for page_num in employees.iter_pages() %}
            {% if page_num %}
              {% if page_num != employees.page %}
              <li>
                <a href="{{ url_for('employees', page=page_num, search=search) }}" 
                   class="pagination-link">
                  {{ page_num }}
                </a>
              </li>
              {% else %}
              <li>
                <span class="pagination-link current">{{ page_num }}</span>
              </li>
              {% endif %}
            {% else %}
            <li>
              <span class="pagination-link">…</span>
            </li>
            {% endif %}
          {% endfor %}
          
          <!-- Next Page -->
          {% if employees.has_next %}
          <li>
            <a href="{{ url_for('employees', page=employees.next_num, search=search) }}" 
               class="pagination-link">
              Next
              <i class="fas fa-chevron-right"></i>
            </a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    {% endif %}

    <!-- Empty State -->
    {% if employees.total == 0 %}
    <div class="empty-state">
      <div class="empty-icon">
        <i class="fas fa-users-slash"></i>
      </div>
      <h3>
        {% if search %}
          No employees found for "{{ search }}"
        {% else %}
          No employees found
        {% endif %}
      </h3>
      <p>
        {% if search %}
          Try adjusting your search terms or <a href="{{ url_for('employees') }}">view all employees</a>.
        {% else %}
          Get started by <a href="{{ url_for('create_employee') }}">adding your first employee</a>.
        {% endif %}
      </p>
    </div>
    {% endif %}
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3><i class="fas fa-exclamation-triangle"></i> Confirm Deletion</h3>
      <button class="close-modal" data-modal="deleteModal">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to delete employee <strong id="deleteEmployeeName"></strong>?</p>
      <p class="warning-text">
        <i class="fas fa-warning"></i>
        This action cannot be undone. The employee will be permanently removed from the system.
      </p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" data-modal="deleteModal">Cancel</button>
      <form id="deleteForm" method="POST" style="display: inline;">
        <button type="submit" class="btn btn-danger">
          <i class="fas fa-trash"></i>
          Delete Employee
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Delete button functionality
    const deleteButtons = document.querySelectorAll('.delete-btn');
    const deleteModal = document.getElementById('deleteModal');
    const deleteForm = document.getElementById('deleteForm');
    const deleteEmployeeName = document.getElementById('deleteEmployeeName');
    
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const employeeIndex = this.getAttribute('data-employee-index');
            const employeeName = this.getAttribute('data-employee-name');
            
            deleteEmployeeName.textContent = employeeName;
            deleteForm.action = `/employees/${employeeIndex}/delete`;
            deleteModal.style.display = 'flex';
        });
    });
    
    // Modal close functionality
    document.querySelectorAll('[data-modal]').forEach(element => {
        element.addEventListener('click', function() {
            const modalId = this.getAttribute('data-modal');
            document.getElementById(modalId).style.display = 'none';
        });
    });
    
    // Close modal when clicking outside
    deleteModal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.style.display = 'none';
        }
    });
    
    // Search form auto-submit with debouncing
    const searchInput = document.querySelector('.search-input');
    let searchTimeout;
    
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            if (this.value.length >= 3 || this.value.length === 0) {
                this.form.submit();
            }
        }, 500);
    });
    
    // Highlight search terms
    const searchTerm = "{{ search }}";
    if (searchTerm) {
        highlightSearchTerms(searchTerm);
    }
    
    function highlightSearchTerms(term) {
        const elements = document.querySelectorAll('.employee-name h4, .employee-name p, .employee-title .title-badge, .employee-id .id-badge');
        const regex = new RegExp(`(${term})`, 'gi');
        
        elements.forEach(element => {
            const text = element.textContent;
            if (text.toLowerCase().includes(term.toLowerCase())) {
                element.innerHTML = text.replace(regex, '<mark>$1</mark>');
            }
        });
    }
});
</script>
{% endblock %}