{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <div class="d-flex align-items-center justify-content-between flex-wrap">
    <h2 class="mb-3">Pending Employee Approvals</h2>
    {% if pagination %}
      <div class="text-muted small mb-3">
        Page {{ pagination.page }} of {{ pagination.pages or 1 }} •
        Showing {{ pending|length }} of {{ pagination.total }} results
      </div>
    {% endif %}
  </div>

  <!-- Filters -->
  <form method="GET" class="row g-2 mb-3">
    <div class="col-12 col-md-4">
      <input type="text" name="q" class="form-control"
             placeholder="Search name / email / phone / code"
             value="{{ q or '' }}">
    </div>
    <div class="col-6 col-md-3">
      <select name="department_id" class="form-select">
        <option value="">All Departments</option>
        {% for d in (departments or []) %}
          <option value="{{ d.id }}" {% if dept_id==d.id %}selected{% endif %}>{{ d.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-6 col-md-3">
      <select name="designation_id" class="form-select">
        <option value="">All Designations</option>
        {% for d in (designations or []) %}
          <option value="{{ d.id }}" {% if desig_id==d.id %}selected{% endif %}>{{ d.title }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-6 col-md-2">
      <input type="date" name="doj_from" class="form-control" value="{{ doj_from or '' }}" placeholder="DOJ from">
    </div>
    <div class="col-6 col-md-2">
      <input type="date" name="doj_to" class="form-control" value="{{ doj_to or '' }}" placeholder="DOJ to">
    </div>
    <div class="col-6 col-md-2">
      <select name="per_page" class="form-select">
        {% for n in [10,25,50,100] %}
          <option value="{{ n }}" {% if per_page==n %}selected{% endif %}>{{ n }} / page</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-6 col-md-2 d-grid">
      <button class="btn btn-primary">Filter</button>
    </div>
    <div class="col-6 col-md-2 d-grid">
      <a class="btn btn-outline-secondary" href="{{ url_for('employee.view_pending_employees') }}">Reset</a>
    </div>
  </form>

  {% if pending %}
  <div class="table-responsive">
    <table class="table table-bordered table-striped align-middle">
      <thead class="table-dark">
        <tr>
          <th>Full Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Department</th>
          <th>Designation</th>
          <th>Date of Joining</th>
          <th>Approve</th>
        </tr>
      </thead>
      <tbody>
      {% for emp in pending %}
        <tr>
          <td>{{ emp.full_name }}</td>
          <td>{{ emp.email }}</td>
          <td>{{ emp.phone }}</td>
          <td>{{ emp.department.name if emp.department_id else '' }}</td>
          <td>{{ emp.designation.title if emp.designation_id else '' }}</td>
          <td>{{ emp.date_of_joining.strftime('%d-%m-%Y') if emp.date_of_joining else '' }}</td>
          <td>
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#approveModal{{ emp.id }}">
              Review & Approve
            </button>

            <!-- Modal -->
            <div class="modal fade" id="approveModal{{ emp.id }}" tabindex="-1">
              <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Review Employee: {{ emp.full_name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>
                  <div class="modal-body">

                    <!-- BASIC INFO -->
                    <table class="table table-bordered">
                      <tbody>
                        <tr><th>Full Name</th><td>{{ emp.full_name or '-' }}</td></tr>
                        <tr><th>Gender</th><td>{{ emp.gender or '-' }}</td></tr>
                        <tr><th>DOB</th><td>{{ emp.dob.strftime('%d-%m-%Y') if emp.dob else '-' }}</td></tr>
                        <tr><th>Marital Status</th><td>{{ emp.marital_status or '-' }}</td></tr>
                        <tr><th>Father/Spouse Name</th><td>{{ emp.father_spouse_name or '-' }}</td></tr>
                        <tr><th>Personal Number</th><td>{{ emp.personal_number or '-' }}</td></tr>
                        <tr><th>Emergency Contact Name</th><td>{{ emp.emergency_contact_name or '-' }}</td></tr>
                        <tr><th>Emergency Contact Number</th><td>{{ emp.emergency_contact_number or '-' }}</td></tr>
                        <tr><th>Address</th><td>{{ emp.address or '-' }}</td></tr>
                        <tr><th>Temporary Address</th><td>{{ emp.temporary_address or '-' }}</td></tr>

                        <tr><th>Aadhar Name</th><td>{{ emp.aadhar_name or '-' }}</td></tr>
                        <tr><th>Aadhar Number</th><td>{{ emp.aadhar_number or '-' }}</td></tr>
                        <tr><th>PAN Name</th><td>{{ emp.pan_name or '-' }}</td></tr>
                        <tr><th>PAN Number</th><td>{{ emp.pan_number or '-' }}</td></tr>
                        <tr><th>UAN</th><td>{{ emp.uan or '-' }}</td></tr>
                        <tr><th>Last PF Number</th><td>{{ emp.last_company_pf_number or '-' }}</td></tr>

                        <tr><th>Bank Account Name</th><td>{{ emp.bank_account_name or '-' }}</td></tr>
                        <tr><th>Bank Account Number</th><td>{{ emp.bank_account_number or '-' }}</td></tr>
                        <tr><th>IFSC</th><td>{{ emp.ifsc_code or '-' }}</td></tr>
                        <tr><th>Bank Name</th><td>{{ emp.bank_name or '-' }}</td></tr>

                        <tr><th>Last Company</th><td>{{ emp.last_company_name or '-' }}</td></tr>
                        <tr><th>Last Emp Code</th><td>{{ emp.last_company_code or '-' }}</td></tr>
                        <tr><th>Last Designation</th><td>{{ emp.last_company_designation or '-' }}</td></tr>
                        <tr><th>Date of Joining</th><td>{{ emp.date_of_joining.strftime('%d-%m-%Y') if emp.date_of_joining else '-' }}</td></tr>
                      </tbody>
                    </table>

                    <!-- EDUCATION (FIXED ATTRIBUTE NAMES) -->
                    {% set edu = [
                      ('Secondary', 'secondary_school'),
                      ('Higher Secondary', 'higher_secondary_school'),
                      ('Graduation', 'graduation'),
                      ('Post Graduation', 'post_graduation')
                    ] %}
                    <table class="table table-bordered mt-3">
                      <thead class="table-light">
                        <tr>
                          <th style="width:30%">Education</th>
                          <th>Institute</th>
                          <th style="width:15%">Marks</th>
                          <th style="width:15%">Year</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for label, base in edu %}
                          {% set name  = emp|attr(base ~ '_name') %}
                          {% set marks = emp|attr(base ~ '_marks') %}
                          {% set year  = emp|attr(base ~ '_year') %}
                          <tr>
                            <th>{{ label }}</th>
                            <td>{{ name  or '-' }}</td>
                            <td>{{ marks or '-' }}</td>
                            <td>{{ year  or '-' }}</td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>

                    <!-- DOCUMENTS -->
                    {% macro doc_links(paths) -%}
                      {% if paths %}
                        {% for p in (paths.split(',') if ',' in paths else [paths]) %}
                          {% set clean = p.strip().replace('\\','/') %}
                          {% if clean %}
                            <a href="{{ url_for('static', filename=clean) }}" target="_blank" class="d-inline-block me-2 mb-1">View</a>
                          {% endif %}
                        {% endfor %}
                      {% else %}
                        -
                      {% endif %}
                    {%- endmacro %}

                    <table class="table table-bordered mt-3">
                      <tbody>
                        <tr><th>Resume</th><td>{{ doc_links(emp.resume_path) }}</td></tr>
                        <tr><th>ID Proof</th><td>{{ doc_links(emp.id_proof_path) }}</td></tr>
                        <tr><th>Qualification Docs</th><td>{{ doc_links(emp.doc_qualification) }}</td></tr>
                        <tr><th>Employment Docs</th><td>{{ doc_links(emp.doc_employment_proof) }}</td></tr>
                        <tr><th>Photographs</th><td>{{ doc_links(emp.doc_photographs) }}</td></tr>
                      </tbody>
                    </table>

                    <div class="form-check mt-3">
                      <input class="form-check-input" type="checkbox" id="confirmCheck{{ emp.id }}" onchange="toggleApprovalFields({{ emp.id }})">
                      <label class="form-check-label" for="confirmCheck{{ emp.id }}">
                        I have reviewed all the information and documents.
                      </label>
                    </div>

                    <form method="POST" action="{{ url_for('employee.approve_pending_employee', pending_id=emp.id) }}" class="mt-3">
                      <div class="mb-2">
                        <label class="form-label">Employee Code</label>
                        <input type="text" name="employee_code" class="form-control form-control-sm" id="empCode{{ emp.id }}" disabled required>
                      </div>
                      <div class="mb-2">
                        <label class="form-label">Reporting Manager</label>
                        <select name="reporting_manager_id" class="form-select form-select-sm" id="reportMgr{{ emp.id }}" disabled>
                          <option value="">Select</option>
                          {% for mgr in managers %}
                            <option value="{{ mgr.id }}">{{ mgr.full_name }} ({{ mgr.employee_code }})</option>
                          {% endfor %}
                        </select>
                      </div>

                      <button type="submit" class="btn btn-success btn-sm mt-2" id="approveBtn{{ emp.id }}" disabled>
                        Approve
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div><!-- /modal -->
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if pagination and (pagination.pages or 0) > 1 %}
  <nav aria-label="pagination">
    <ul class="pagination">
      <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
        <a class="page-link"
           href="{{ url_for('employee.view_pending_employees',
                            page=pagination.prev_num,
                            per_page=per_page,
                            q=q, department_id=dept_id, designation_id=desig_id,
                            doj_from=doj_from, doj_to=doj_to) }}">Prev</a>
      </li>
      {% for p in page_numbers %}
        <li class="page-item {% if p == pagination.page %}active{% endif %}">
          <a class="page-link"
             href="{{ url_for('employee.view_pending_employees',
                              page=p,
                              per_page=per_page,
                              q=q, department_id=dept_id, designation_id=desig_id,
                              doj_from=doj_from, doj_to=doj_to) }}">{{ p }}</a>
        </li>
      {% endfor %}
      <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
        <a class="page-link"
           href="{{ url_for('employee.view_pending_employees',
                            page=pagination.next_num,
                            per_page=per_page,
                            q=q, department_id=dept_id, designation_id=desig_id,
                            doj_from=doj_from, doj_to=doj_to) }}">Next</a>
      </li>
    </ul>
  </nav>
  {% endif %}

  {% else %}
    <div class="alert alert-info mt-3">No pending employees at the moment.</div>
  {% endif %}
</div>

<script>
function toggleApprovalFields(id) {
  const checked = document.getElementById('confirmCheck' + id).checked;
  document.getElementById('empCode' + id).disabled   = !checked;
  document.getElementById('reportMgr' + id).disabled  = !checked;
  document.getElementById('approveBtn' + id).disabled = !checked;
}
</script>
{% endblock %}