{% 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.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.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 () {
    console.log("🔄 Employee page JavaScript loaded");

    // Delete button functionality
    const deleteButtons = document.querySelectorAll(".delete-btn");
    const deleteModal = document.getElementById("deleteModal");
    const deleteForm = document.getElementById("deleteForm");
    const deleteEmployeeName = document.getElementById("deleteEmployeeName");

    console.log(`📊 Found ${deleteButtons.length} delete buttons`);
    console.log("🔍 Delete modal:", deleteModal);
    console.log("📝 Delete form:", deleteForm);

    deleteButtons.forEach((button) => {
      button.addEventListener("click", function (event) {
        event.preventDefault();
        event.stopPropagation();

        const employeeIndex = this.getAttribute("data-employee-index");
        const employeeName = this.getAttribute("data-employee-name");

        console.log(
          `🗑️ Delete button clicked for employee: ${employeeName} (Index: ${employeeIndex})`
        );

        if (deleteEmployeeName) {
          deleteEmployeeName.textContent = employeeName;
        }

        if (deleteForm) {
          deleteForm.action = `/employees/${employeeIndex}/delete`;
          console.log(`📋 Form action set to: ${deleteForm.action}`);
        }

        if (deleteModal) {
          deleteModal.style.display = "flex";
          deleteModal.style.visibility = "visible";
          deleteModal.style.opacity = "1";
          console.log("✅ Modal should be visible now");
        }
      });
    });

    // Enhanced modal close functionality
    document.querySelectorAll("[data-modal]").forEach((element) => {
      element.addEventListener("click", function (event) {
        event.preventDefault();
        const modalId = this.getAttribute("data-modal");
        const modal = document.getElementById(modalId);
        if (modal) {
          modal.style.display = "none";
          modal.style.visibility = "hidden";
          modal.style.opacity = "0";
          console.log(`❌ Modal ${modalId} closed`);
        }
      });
    });

    // Close modal when clicking outside
    if (deleteModal) {
      deleteModal.addEventListener("click", function (e) {
        if (e.target === this) {
          this.style.display = "none";
          this.style.visibility = "hidden";
          this.style.opacity = "0";
          console.log("❌ Modal closed by clicking outside");
        }
      });
    }

    // Enhanced form submission logging
    if (deleteForm) {
      deleteForm.addEventListener("submit", function (event) {
        console.log(`🚀 Form submitting to: ${this.action}`);
        console.log("📊 Form method:", this.method);
      });
    }

    // Search form auto-submit with debouncing (unchanged)
    const searchInput = document.querySelector(".search-input");
    let searchTimeout;

    if (searchInput) {
      searchInput.addEventListener("input", function () {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
          if (this.value.length >= 3 || this.value.length === 0) {
            this.form.submit();
          }
        }, 500);
      });
    }

    // Highlight search terms (unchanged)
    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 %}