{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 1100px;">
  <!-- Header + status -->
   
  <div class="d-flex justify-content-between align-items-center mb-2">
    <h4 class="m-0">Exit for {{ er.employee.full_name }} ({{ er.employee.employee_code }})</h4>
    <span class="badge bg-secondary">{{ er.status|replace('_',' ') }}</span>
  </div>
  <div class="text-muted mb-3">
    Resignation: <b>{{ er.resignation_date.strftime('%d %b %Y') }}</b> · Proposed LWD:
    <b>{{ er.proposed_lwd.strftime('%d %b %Y') }}</b>
  </div>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for c, m in messages %}<div class="alert alert-{{c}}">{{ m }}</div>{% endfor %}
    {% endif %}
  {% endwith %}

  <div class="row g-3">
    <!-- Approvals -->
    <div class="col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <h6 class="card-title">Approvals</h6>
          <ul class="list-unstyled small mb-3">
            <li>Manager accepted:
              {% if er.manager_approved_at %}
                <span class="text-success">Yes</span> <span class="text-muted">({{ er.manager_approved_at.strftime('%d %b %Y, %I:%M %p') }})</span>
              {% else %}
                <span class="text-danger">Pending</span>
              {% endif %}
            </li>
            <li>HOD approved:
              {% if er.hod_approved_at %}
                <span class="text-success">Yes</span> <span class="text-muted">({{ er.hod_approved_at.strftime('%d %b %Y, %I:%M %p') }})</span>
              {% else %}
                <span class="text-muted">Optional / Pending</span>
              {% endif %}
            </li>
          </ul>

          {% if not er.manager_approved_at %}
            <form method="POST" action="{{ url_for('exit.manager_approve', exit_id=er.id) }}">
              <button class="btn btn-outline-primary btn-sm w-100">Manager: Accept Resignation</button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Handover -->
    <div class="col-lg-8">
      <div class="card shadow-sm">
        <div class="card-body">
          <h6 class="card-title d-flex justify-content-between align-items-center">
            <span>Handover Documents</span>
            <small class="text-muted">Employee uploads & assigns viewers</small>
          </h6>

          <!-- Upload form -->
          <form method="POST" enctype="multipart/form-data"
                action="{{ url_for('exit.upload_handover', exit_id=er.id) }}"
                class="border rounded p-3 mb-3">
            <div class="row g-2 align-items-end">
              <div class="col-md-4">
                <label class="form-label">Title</label>
                <input type="text" name="title" class="form-control" placeholder="e.g., Project X Handover" required>
              </div>
              <div class="col-md-4">
                <label class="form-label">File</label>
                <input type="file" name="file" class="form-control" accept=".pdf,.doc,.docx,.xlsx,.zip,.txt" required>
              </div>
              <div class="col-md-4">
                <label for="viewer_ids" class="form-label">Share with Viewers</label>
                <select id="viewer_ids" name="viewer_ids" class="form-select" multiple="multiple" required>
                  {# UPDATED: preselect reporting manager + existing viewers #}
                  {% set preselected = (existing_viewer_ids | default([])) %}
                  {% for emp in employees %}
                    <option value="{{ emp.id }}"
                      {% if emp.id == er.employee.reporting_manager_id or emp.id in preselected %}selected{% endif %}>
                      {{ emp.full_name }} ({{ emp.employee_code }})
                    </option>
                  {% endfor %}
                </select>
                <div class="form-text">Select people who must acknowledge this handover.</div>
              </div>
              <div class="col-12 text-end">
                <button class="btn btn-primary btn-sm px-3">Upload & Assign</button>
              </div>
            </div>
          </form>

          <!-- Docs list -->
          <div class="table-responsive">
            <table class="table table-sm align-middle">
              <thead class="table-light">
                <tr>
                  <th style="width:42px;">#</th>
                  <th>Title</th>
                  <th style="width:140px;">File</th>
                  <th>Viewers</th>
                  <th style="width:140px;">Status</th>
                  <th style="width:90px;"></th>
                </tr>
              </thead>
              <tbody>
                {% for d in docs %}
                <tr>
                  <td class="text-muted">{{ loop.index }}</td>
                  <td>{{ d.title }}</td>
                  <td>
                    <a target="_blank" href="{{ url_for('static', filename=d.file_path.replace('\\','/')) }}">Download</a>
                  </td>
                  <td class="small">
                {% set viewers = (d.viewers | default([])) | selectattr('can_view') | list %}
                {% for v in viewers %}
                    <div>
                    {{ v.viewer.full_name if v.viewer else v.viewer_emp_id }}
                    {% if v.acknowledged_at %}
                        <span class="text-success">✔</span>
                    {% else %}
                        <span class="text-muted">⧗</span>
                    {% endif %}
                    </div>
                {% else %}
                    <span class="text-muted">No viewers</span>
                {% endfor %}
                </td>

                <td class="small">
                {% set ns = namespace(pending=0) %}
                {% for v in viewers %}
                    {% if not v.acknowledged_at %}
                    {% set ns.pending = ns.pending + 1 %}
                    {% endif %}
                {% endfor %}

                {% if viewers|length == 0 %}
                    <span class="badge bg-secondary">No viewers</span>
                {% elif ns.pending == 0 %}
                    <span class="badge bg-success">All acknowledged</span>
                {% else %}
                    <span class="badge bg-warning text-dark">{{ ns.pending }} pending</span>
                {% endif %}
                </td>
                <td class="text-end">
                {% set my_view = viewers | selectattr('viewer_emp_id','equalto', current_user.id) | list %}
                {% if my_view and not my_view[0].acknowledged_at %}
                    <form method="POST" action="{{ url_for('exit.ack_handover', doc_id=d.id) }}">
                    <button class="btn btn-outline-primary btn-sm">Acknowledge</button>
                    </form>
                {% else %}
                    <span class="text-muted small">—</span>
                {% endif %}
                </td>  
                
                </tr>
                {% else %}
                <tr><td colspan="6" class="text-center text-muted">No documents uploaded yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

          <!-- Clearances -->
          <div class="row g-2 mt-3">
            <div class="col-md-4">
              <div class="border rounded p-2">
                <div class="small text-muted">IT Clearance</div>
                {% if er.it_cleared_at %}
                  <div class="text-success">Cleared <span class="text-muted">({{ er.it_cleared_at.strftime('%d %b %Y, %I:%M %p') }})</span></div>
                {% else %}
                  <form method="POST" action="{{ url_for('exit.it_clear', exit_id=er.id) }}">
                    <button class="btn btn-outline-secondary btn-sm w-100">Mark IT Cleared</button>
                  </form>
                {% endif %}
              </div>
            </div>
            <div class="col-md-4">
              <div class="border rounded p-2">
                <div class="small text-muted">Manager Final OK</div>
                {% if er.final_ok_by_manager_at %}
                  <div class="text-success">OK <span class="text-muted">({{ er.final_ok_by_manager_at.strftime('%d %b %Y, %I:%M %p') }})</span></div>
                {% else %}
                  <form method="POST" action="{{ url_for('exit.manager_final_ok', exit_id=er.id) }}">
                    <button class="btn btn-outline-secondary btn-sm w-100">Manager: Final OK</button>
                  </form>
                {% endif %}
              </div>
            </div>
            <div class="col-md-4">
              <div class="border rounded p-2">
                <div class="small text-muted">HR Finalise Exit</div>
                {% if er.status == 'final_approved' %}
                  <div class="text-success">Finalised <span class="text-muted">({{ er.final_ok_by_hr_at.strftime('%d %b %Y, %I:%M %p') }})</span></div>
                {% else %}
                  <form method="POST" action="{{ url_for('exit.final_approve', exit_id=er.id) }}">
                    <button class="btn btn-primary btn-sm w-100">Finalise Exit</button>
                  </form>
                  <div class="form-text">Enabled only when all acknowledgments + IT clearance + Manager final OK are done.</div>
                {% endif %}
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>


<!-- Status Tracker -->
<style>
  .stepper {display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .step {position:relative; padding:8px 12px; border-radius:999px; font-size:.875rem; display:flex; align-items:center; gap:8px;}
  .step.done {background:#e7f7ed; color:#146c43; border:1px solid #bce3c9;}
  .step.current {background:#eef5ff; color:#0a58ca; border:1px solid #cfe2ff;}
  .step.todo {background:#f8f9fa; color:#6c757d; border:1px solid #e9ecef;}
  .step .dot {width:8px; height:8px; border-radius:50%;}
  .step.done .dot {background:#198754;}
  .step.current .dot {background:#0d6efd;}
  .step.todo .dot {background:#adb5bd;}
  .step .ts {font-size:.75rem; color:#6c757d;}
  .step-connector {flex:0 0 20px; height:2px; background:#dee2e6; border-radius:1px;}
  @media (max-width: 768px){ .stepper {gap:8px} .step-connector {display:none;} }
</style>

<div class="card shadow-sm mb-3">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="m-0">Status Tracker</h6>
      <span class="small text-muted">Follow the steps left to complete</span>
    </div>
    <div class="stepper">
      {% for s in steps %}
        {% set state = 'done' if s.done else ('current' if loop.index0 == current_idx else 'todo') %}
        <div class="step {{ state }}">
          <span class="dot"></span>
          <span>{{ s.label }}</span>
          {% if s.ts %}
            <span class="ts">· {{ s.ts.strftime('%d %b %Y, %I:%M %p') }}</span>
          {% endif %}
        </div>
        {% if not loop.last %}
          <div class="step-connector"></div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
    $('#viewer_ids').select2({
        placeholder: "Select employees...",
        allowClear: true,
        width: '100%'
    });
});
</script>

{% endblock %}