{% extends 'base.html' %}
{% block content %}

{# ---------- Macros with error/highlight + repopulation + READ-ONLY ---------- #}
{% macro input_field(label, name, value, type='text', required=False, errors=None, form_values=None, is_readonly=False) -%}
  {% set v = (form_values[name] if form_values and name in form_values else value) %}
  {% set has_err = errors and (name in errors) %}
  <div class="col-md-6 mb-3">
    <label class="form-label">
      {{ label }}
      {% if required %}<span class="text-danger">*</span>{% endif %}
    </label>
    <input type="{{ type }}"
           class="form-control {% if has_err %}is-invalid{% endif %}"
           name="{{ name }}"
           id="{{ name }}"
           value="{{ v or '' }}"
           {% if required and not is_readonly %}required{% endif %}
           {% if is_readonly %}disabled{% endif %}>
    {% if has_err %}
      <div class="invalid-feedback">{{ errors[name] }}</div>
    {% endif %}
  </div>
{%- endmacro %}

{% macro select_field(label, name, options, option_value, option_label, selected_value, required=False, errors=None, form_values=None, is_readonly=False) -%}
  {% set sel = (form_values[name] if form_values and name in form_values else selected_value) %}
  {% set has_err = errors and (name in errors) %}
  <div class="col-md-6 mb-3">
    <label class="form-label">
      {{ label }}
      {% if required %}<span class="text-danger">*</span>{% endif %}
    </label>
    <select class="form-select {% if has_err %}is-invalid{% endif %}"
            name="{{ name }}"
            id="{{ name }}"
            {% if required and not is_readonly %}required{% endif %}
            {% if is_readonly %}disabled{% endif %}>
      <option value="">-- Select --</option>
      {% for opt in options %}
        {% set val = (opt[option_value] if opt is mapping else (opt|attr(option_value))) %}
        {% set lab = (opt[option_label] if opt is mapping else (opt|attr(option_label))) %}
        <option value="{{ val }}" {% if (sel|string) == (val|string) %}selected{% endif %}>{{ lab }}</option>
      {% endfor %}
    </select>
    {% if has_err %}
      <div class="invalid-feedback">{{ errors[name] }}</div>
    {% endif %}
  </div>
{%- endmacro %}

{% set errors = errors or {} %}
{% set form_values = form_values or {} %}
{% set is_readonly = is_readonly or false %}

<div class="container mt-4">
  <div class="d-flex align-items-center justify-content-between mb-2">
    <h2 class="text-primary mb-0">Edit Employee</h2>
    {# Status chip #}
    {% set st = (employee.status or 'active')|lower %}
    {% if st == 'active' %}
      <span class="badge bg-success">Active</span>
    {% elif st in ['notice','notice_period','manager_accepted'] %}
      <span class="badge bg-warning text-dark">Notice Period</span>
    {% elif st == 'resigned' %}
      <span class="badge bg-danger">Resigned</span>
    {% else %}
      <span class="badge bg-secondary">{{ employee.status }}</span>
    {% endif %}
  </div>

  {# ---------- Flash messages ---------- #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {# Read-only banner #}
  {% if is_readonly %}
    <div class="alert alert-info d-flex align-items-start" role="alert">
      <div>
        <strong>Read‑only profile:</strong> This employee has completed exit. Editing is disabled.
      </div>
    </div>
  {% endif %}

  <form method="POST" enctype="multipart/form-data" id="editForm" novalidate>
    <ul class="nav nav-tabs" id="employeeTab" role="tablist">
      <li class="nav-item"><a class="nav-link active" id="personal-tab" data-bs-toggle="tab" href="#personal" role="tab">Personal</a></li>
      <li class="nav-item"><a class="nav-link" id="education-tab" data-bs-toggle="tab" href="#education" role="tab">Education</a></li>
      <li class="nav-item"><a class="nav-link" id="professional-tab" data-bs-toggle="tab" href="#professional" role="tab">Professional</a></li>
      <li class="nav-item"><a class="nav-link" id="documents-tab" data-bs-toggle="tab" href="#documents" role="tab">Documents</a></li>
    </ul>

    <div class="tab-content border p-3" id="employeeTabContent">

      {# ---------- Personal Tab ---------- #}
      <div class="tab-pane fade show active" id="personal" role="tabpanel">
        <div class="row">
          {{ input_field('Full Name', 'full_name', employee.full_name, 'text', True, errors, form_values, is_readonly) }}
          {{ input_field('Email (Work)', 'email', employee.email, 'email', True, errors, form_values, is_readonly) }}
          {{ input_field('Phone', 'phone', employee.phone, 'tel', True, errors, form_values, is_readonly) }}
          {{ input_field('Current Employee Code', 'employee_code', employee.employee_code, 'text', True, errors, form_values, is_readonly) }}

          {{ input_field('Location', 'location', employee.location, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Qualification', 'qualification', employee.qualification, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Institute', 'institute', employee.institute, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Personal Email', 'personal_email', employee.personal_email, 'email', False, errors, form_values, is_readonly) }}

          {{ input_field('Gender', 'gender', employee.gender, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Date of Birth', 'dob', employee.dob.strftime('%Y-%m-%d') if employee.dob else '', 'date', False, errors, form_values, is_readonly) }}
          {{ input_field('Father/Spouse Name', 'father_spouse_name', employee.father_spouse_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Marital Status', 'marital_status', employee.marital_status, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Permanent Address', 'address', employee.address, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Temporary Address', 'temporary_address', employee.temporary_address, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Personal Number', 'personal_number', employee.personal_number, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Emergency Contact Name', 'emergency_contact_name', employee.emergency_contact_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Emergency Contact Number', 'emergency_contact_number', employee.emergency_contact_number, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Aadhar Name', 'aadhar_name', employee.aadhar_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Aadhar Number', 'aadhar_number', employee.aadhar_number, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('PAN Name', 'pan_name', employee.pan_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('PAN Number', 'pan_number', employee.pan_number, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('UAN', 'uan', employee.uan, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Last Company PF Number', 'last_company_pf_number', employee.last_company_pf_number, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Bank Account Name', 'bank_account_name', employee.bank_account_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Bank Account Number', 'bank_account_number', employee.bank_account_number, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('IFSC Code', 'ifsc_code', employee.ifsc_code, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Bank Name', 'bank_name', employee.bank_name, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Date of Joining', 'date_of_joining', employee.date_of_joining.strftime('%Y-%m-%d') if employee.date_of_joining else '', 'date', False, errors, form_values, is_readonly) }}
          {{ input_field('Shift Start', 'shift_start', employee.shift_start, 'time', False, errors, form_values, is_readonly) }}
          {{ input_field('Shift End', 'shift_end', employee.shift_end, 'time', False, errors, form_values, is_readonly) }}
          {{ input_field('Desktime ID', 'desktime_id', employee.desktime_id, 'text', False, errors, form_values, is_readonly) }}

          {% set work_modes = [{'id':'Hybrid','title':'Hybrid'},{'id':'WFO','title':'WFO'},{'id':'WFH','title':'WFH'}] %}
          {{ select_field('Work Mode', 'work_mode', work_modes, 'id', 'title', employee.work_mode, False, errors, form_values, is_readonly) }}

          {{ select_field('Reporting Manager', 'reporting_manager_id', managers, 'id', 'full_name', employee.reporting_manager_id, True, errors, form_values, is_readonly) }}
          {{ select_field('Department', 'department_id', departments, 'id', 'name', employee.department_id, True, errors, form_values, is_readonly) }}
          {{ select_field('Designation', 'designation_id', designations, 'id', 'title', employee.designation_id, True, errors, form_values, is_readonly) }}
        </div>
      </div>

      {# ---------- Education Tab ---------- #}
      <div class="tab-pane fade" id="education" role="tabpanel">
        <div class="row">
          {{ input_field('Secondary School Name', 'secondary_name', employee.secondary_school_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Marks', 'secondary_marks', employee.secondary_school_marks, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Year', 'secondary_year', employee.secondary_school_year, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Higher Secondary School Name', 'higher_secondary_name', employee.higher_secondary_school_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Marks', 'higher_secondary_marks', employee.higher_secondary_school_marks, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Year', 'higher_secondary_year', employee.higher_secondary_school_year, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Graduation Name', 'graduation_name', employee.graduation_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Marks', 'graduation_marks', employee.graduation_marks, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Year', 'graduation_year', employee.graduation_year, 'text', False, errors, form_values, is_readonly) }}

          {{ input_field('Post Graduation Name', 'post_graduation_name', employee.post_graduation_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Marks', 'post_graduation_marks', employee.post_graduation_marks, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Year', 'post_graduation_year', employee.post_graduation_year, 'text', False, errors, form_values, is_readonly) }}
        </div>
      </div>

      {# ---------- Professional Tab ---------- #}
      <div class="tab-pane fade" id="professional" role="tabpanel">
        <div class="row">
          {{ input_field('Last Company Name', 'last_company_name', employee.last_company_name, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Last Company Code', 'last_company_code', employee.last_company_code, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Last Designation', 'last_company_designation', employee.last_company_designation, 'text', False, errors, form_values, is_readonly) }}
          {{ input_field('Last Joining Date', 'last_company_doj', (employee.last_company_join_date.strftime('%Y-%m-%d') if employee.last_company_join_date else ''), 'date', False, errors, form_values, is_readonly) }}
          {{ input_field('Last Exit Date', 'last_company_doe', (employee.last_company_exit_date.strftime('%Y-%m-%d') if employee.last_company_exit_date else ''), 'date', False, errors, form_values, is_readonly) }}
        </div>
      </div>

      {# ---------- Documents Tab ---------- #}
      <div class="tab-pane fade" id="documents" role="tabpanel">
        <div class="row">
          {% macro file_input(label, name, path, is_readonly=False) -%}
            <div class="col-md-6 mb-3">
              <label class="form-label">{{ label }}</label>
              <input type="file" class="form-control" name="{{ name }}" accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"
                     {% if is_readonly %}disabled{% endif %}>
              {% if path %}
                <div class="mt-2">
                  <a href="{{ url_for('static', filename=path.replace('\\', '/')) }}" target="_blank">📄 View Existing</a>
                </div>
              {% endif %}
            </div>
          {%- endmacro %}

          {{ file_input('Resume', 'resume', employee.resume_path, is_readonly) }}
          {{ file_input('ID Proof', 'id_proof', employee.id_proof_path, is_readonly) }}
          {{ file_input('Qualification Certificate', 'doc_qualification', employee.doc_qualification, is_readonly) }}
          {{ file_input('Employment Proof', 'doc_employment_proof', employee.doc_employment_proof, is_readonly) }}
          {{ file_input('Photograph', 'doc_photographs', employee.doc_photographs, is_readonly) }}
          {{ file_input('PAN Card', 'doc_pan_card', employee.doc_pan_card, is_readonly) }}
          {{ file_input('Aadhar Card', 'doc_aadhar_card', employee.doc_aadhar_card, is_readonly) }}
          {{ file_input('Parent/Spouse Aadhar', 'doc_parents_aadhar', employee.doc_parents_aadhar, is_readonly) }}
          {{ file_input('UAN Card', 'doc_uan_card', employee.doc_uan_card, is_readonly) }}
          {{ file_input('Cancelled Cheque', 'doc_cancelled_cheque', employee.doc_cancelled_cheque, is_readonly) }}
        </div>
      </div>
    </div>

    <div class="mt-3 text-end">
      {% if not is_readonly %}
        <button type="submit" class="btn btn-primary px-4">Update</button>
      {% else %}
        <button type="button" class="btn btn-secondary px-4" disabled>Update</button>
      {% endif %}
    </div>
  </form>
</div>

{# ---------- JS: tabs, focus first error, client assist ---------- #}
<script>
  // Enable tab switching (Bootstrap 5)
  var triggerTabList = [].slice.call(document.querySelectorAll('#employeeTab a'));
  triggerTabList.forEach(function (triggerEl) {
    var tabTrigger = new bootstrap.Tab(triggerEl);
    triggerEl.addEventListener('click', function (event) {
      event.preventDefault();
      tabTrigger.show();
    });
  });

  document.addEventListener('DOMContentLoaded', function () {
    // If server marked fields invalid, open the relevant tab and focus the first bad one
    const firstInvalid = document.querySelector('.is-invalid');
    if (firstInvalid) {
      const pane = firstInvalid.closest('.tab-pane');
      if (pane && pane.id) {
        const trigger = document.querySelector('a[data-bs-toggle="tab"][href="#' + pane.id + '"]');
        if (trigger) new bootstrap.Tab(trigger).show();
      }
      firstInvalid.focus({preventScroll:true});
      firstInvalid.scrollIntoView({behavior:'smooth', block:'center'});
    }

    // Client-side assist: use HTML5 validation + Bootstrap's was-validated
    const form = document.getElementById('editForm');
    form.addEventListener('submit', function (e) {
      // Skip client validation if read-only (no submit will happen anyway)
      {% if not is_readonly %}
      if (!form.checkValidity()) {
        e.preventDefault();
        e.stopPropagation();
        form.classList.add('was-validated');

        const firstBad = form.querySelector(':invalid');
        if (firstBad) {
          const pane2 = firstBad.closest('.tab-pane');
          if (pane2 && pane2.id) {
            const trig2 = document.querySelector('a[data-bs-toggle="tab"][href="#' + pane2.id + '"]');
            if (trig2) new bootstrap.Tab(trig2).show();
          }
          firstBad.focus({preventScroll:true});
          firstBad.scrollIntoView({behavior:'smooth', block:'center'});
        }
      }
      {% endif %}
    }, false);
  });
</script>

{% endblock %}