{% extends "base_authenticated.html" %} {% set page_title = "Edit Employee" %}
{% block title %}{{ page_title }}{% endblock %} {% block extra_head %}
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/employees.css') }}"
/>
<style>
  .form-container {
    max-width: 1400px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .form-header {
    background: #f8fafc;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
  }

  .form-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #d97706);
  }

  .form-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
  }

  .form-header h2 i {
    color: #f59e0b;
  }

  .employee-info {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
  }

  .employee-info h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.5rem 0;
  }

  .employee-info p {
    color: #92400e;
    font-size: 0.875rem;
    margin: 0;
  }

  .form-body {
    padding: 3rem;
  }

  .form-group {
    margin-bottom: 2rem;
  }

  .form-group:last-child {
    margin-bottom: 0;
  }

  .form-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
  }

  .form-label.required::after {
    content: " *";
    color: #dc2626;
  }

  .form-input {
    width: 75%;
    padding: 1rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background: #ffffff;
  }

  .form-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
  }

  .form-input.error {
    border-color: #dc2626;
  }

  .form-help {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
  }

  .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  @media (max-width: 1200px) {
    .form-container {
      max-width: 1000px;
    }
    
    .form-row {
      gap: 1.5rem;
    }
  }

  @media (max-width: 768px) {
    .form-container {
      max-width: 90%;
      margin: 0 1rem;
    }
    
    .form-row {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    
    .form-actions {
      flex-direction: column;
    }
  }
</style>
{% 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('employees') }}" class="back-button">
          <i class="fas fa-arrow-left"></i>
          Back to Employees
        </a>
      </div>

      <h1><i class="fas fa-user-edit"></i> Edit Employee</h1>
      <p class="header-description">
        Update employee information in the system
      </p>
    </div>
  </div>

  <!-- Form Container -->
  <div class="form-container">
    <div class="form-header">
      <h2>
        <i class="fas fa-user-edit"></i>
        Employee Information
      </h2>

      <div class="employee-info">
        <h3>
          <i class="fas fa-info-circle"></i>
          Current Employee
        </h3>
        <p><strong>{{ employee.full_name }}</strong> (ID: {{ employee.id }})</p>
      </div>
    </div>

    <div class="form-body">
      <form method="POST" id="editEmployeeForm">
        <!-- Employee ID and Contract ID Row -->
        <div class="form-row">
          <div class="form-group">
            <label for="employee_id" class="form-label required"
              >Employee ID</label
            >
            <input
              type="number"
              id="employee_id"
              name="employee_id"
              class="form-input"
              required
              min="1"
              placeholder="Enter unique employee ID"
              value="{{ request.form.get('employee_id', employee.id) }}"
            />
            <div class="form-help">Must be a unique numeric identifier</div>
          </div>

          <div class="form-group">
            <label for="contract_id" class="form-label">Project</label>
            <select 
              id="contract_id" 
              name="contract_id" 
              class="form-input"
              required
            >
              <option value="">-- Select Project --</option>
              {% for project in projects %}
              <option 
                value="{{ project.id }}" 
                {% if request.form.get('contract_id') == project.id|string or (not request.form.get('contract_id') and employee.contractId == project.id) %}selected{% endif %}
              >
                {{ project.name }}
              </option>
              {% endfor %}
            </select>
            <div class="form-help">
              Select the project this employee will be assigned to
            </div>
          </div>
        </div>

        <!-- First Name and Last Name Row -->
        <div class="form-row">
          <div class="form-group">
            <label for="first_name" class="form-label required"
              >First Name</label
            >
            <input
              type="text"
              id="first_name"
              name="first_name"
              class="form-input"
              required
              maxlength="50"
              placeholder="Enter first name"
              value="{{ request.form.get('first_name', employee.firstName) }}"
            />
          </div>

          <div class="form-group">
            <label for="last_name" class="form-label required">Last Name</label>
            <input
              type="text"
              id="last_name"
              name="last_name"
              class="form-input"
              required
              maxlength="50"
              placeholder="Enter last name"
              value="{{ request.form.get('last_name', employee.lastName) }}"
            />
          </div>
        </div>

        <!-- Job Title -->
        <div class="form-group">
          <label for="title" class="form-label">Job Title</label>
          <input
            type="text"
            id="title"
            name="title"
            class="form-input"
            maxlength="20"
            placeholder="Enter job title (optional)"
            value="{{ request.form.get('title', employee.title or '') }}"
          />
          <div class="form-help">Optional field, maximum 20 characters</div>
        </div>

        <!-- Form Actions -->
        <div class="form-actions">
          <a href="{{ url_for('employees') }}" class="btn btn-secondary">
            <i class="fas fa-times"></i>
            Cancel
          </a>
          <button type="submit" class="btn btn-warning">
            <i class="fas fa-save"></i>
            Update Employee
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %} {% block extra_scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("editEmployeeForm");
    const employeeIdInput = document.getElementById("employee_id");
    const firstNameInput = document.getElementById("first_name");
    const lastNameInput = document.getElementById("last_name");

    // Store original values for change detection
    const originalValues = {
      employee_id: employeeIdInput.value,
      first_name: firstNameInput.value,
      last_name: lastNameInput.value,
      title: document.getElementById("title").value,
      contract_id: document.getElementById("contract_id").value,
    };

    // Form validation
    form.addEventListener("submit", function (e) {
      let isValid = true;

      // Clear previous error states
      document.querySelectorAll(".form-input").forEach((input) => {
        input.classList.remove("error");
      });

      // Validate Employee ID
      if (!employeeIdInput.value.trim()) {
        employeeIdInput.classList.add("error");
        isValid = false;
      }

      // Validate First Name
      if (!firstNameInput.value.trim()) {
        firstNameInput.classList.add("error");
        isValid = false;
      }

      // Validate Last Name
      if (!lastNameInput.value.trim()) {
        lastNameInput.classList.add("error");
        isValid = false;
      }

      if (!isValid) {
        e.preventDefault();
        alert("Please fill in all required fields.");
        return;
      }

      // Check if any changes were made
      const currentValues = {
        employee_id: employeeIdInput.value,
        first_name: firstNameInput.value,
        last_name: lastNameInput.value,
        title: document.getElementById("title").value,
        contract_id: document.getElementById("contract_id").value,
      };

      let hasChanges = false;
      for (let key in originalValues) {
        if (originalValues[key] !== currentValues[key]) {
          hasChanges = true;
          break;
        }
      }

      if (!hasChanges) {
        e.preventDefault();
        alert(
          "No changes detected. Please modify at least one field to update the employee."
        );
        return;
      }

      // Confirm update if employee ID changed
      if (originalValues.employee_id !== currentValues.employee_id) {
        if (
          !confirm(
            `You are changing the Employee ID from ${originalValues.employee_id} to ${currentValues.employee_id}. This may affect attendance records. Are you sure?`
          )
        ) {
          e.preventDefault();
          return;
        }
      }
    });

    // Auto-capitalize names
    [firstNameInput, lastNameInput].forEach((input) => {
      input.addEventListener("input", function () {
        const words = this.value.split(" ");
        const capitalizedWords = words.map((word) => {
          if (word.length > 0) {
            return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
          }
          return word;
        });
        this.value = capitalizedWords.join(" ");
      });
    });

    // Employee ID validation
    employeeIdInput.addEventListener("input", function () {
      // Remove any non-numeric characters
      this.value = this.value.replace(/[^0-9]/g, "");

      // Remove leading zeros
      if (this.value.length > 1) {
        this.value = this.value.replace(/^0+/, "");
      }
    });

    const contractIdSelect = document.getElementById("contract_id");
    contractIdSelect.addEventListener("change", function () {
      if (this.value) {
        this.classList.remove("error");
        // Remove the yellow highlight for changes
        this.style.borderLeft = "";
      }
    });

    if (!contractIdSelect.value) {
      contractIdSelect.classList.add("error");
      isValid = false;
    }

    // Highlight changed fields
    function highlightChanges() {
      Object.keys(originalValues).forEach((key) => {
        const input = document.getElementById(key);
        if (input && input.value !== originalValues[key]) {
          input.style.borderLeft = "4px solid #f59e0b";
        } else if (input) {
          input.style.borderLeft = "";
        }
      });
    }

    // Add change detection
    document.querySelectorAll(".form-input").forEach((input) => {
      input.addEventListener("input", highlightChanges);
    });
  });
</script>
{% endblock %}