{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h3 class="text-primary mb-0">Manager Leave Approvals</h3>
    <span class="text-muted small">Review and act on your team’s requests</span>
  </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 %}

  <!-- Filters -->
  <form class="card shadow-sm mb-4" method="get" action="{{ url_for('leave.manager_pending') }}">
    <div class="card-header bg-light fw-semibold">
      <span class="me-2">🔎 Filters</span>
      <a class="small" href="{{ url_for('leave.manager_pending') }}">Reset</a>
    </div>
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-4">
          <label class="form-label">Employee</label>
          <select class="form-select" name="employee_id">
            <option value="">All</option>
            {% for e in employees %}
              <option value="{{ e.id }}" {% if emp_id==e.id %}selected{% endif %}>{{ e.full_name }} ({{ e.employee_code }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label">From (Month)</label>
          <input type="month" class="form-control" name="month_from" value="{{ month_from or '' }}">
        </div>
        <div class="col-md-2">
          <label class="form-label">To (Month)</label>
          <input type="month" class="form-control" name="month_to" value="{{ month_to or '' }}">
        </div>
        <div class="col-md-3">
          <label class="form-label">Manager Remark (contains)</label>
          <input type="text" class="form-control" name="remark" value="{{ remark_q or '' }}" placeholder="e.g. WFH, urgent, doc ok">
        </div>
        <div class="col-md-1 d-grid">
          <button class="btn btn-primary">Apply</button>
        </div>
      </div>
    </div>
  </form>

  <!-- Pending approvals with bulk actions -->
  <div class="card mb-5 shadow-sm">
    <div class="card-header bg-warning-subtle fw-bold d-flex align-items-center justify-content-between">
      <span>🔸 Pending Manager Approvals</span>
      {% if pending_requests %}
      <form id="bulkActionsTop" class="d-flex gap-2" method="post" action="{{ url_for('leave.manager_bulk_action') }}">
        <input type="hidden" name="action" id="bulkActionHidden">
        <input type="text" name="remark" class="form-control form-control-sm" placeholder="Remark for selected (optional)" style="max-width: 320px;">
        <button type="button" class="btn btn-success btn-sm" onclick="submitBulk('approve')">Approve Selected</button>
        <button type="button" class="btn btn-danger btn-sm"  onclick="submitBulk('reject')">Reject Selected</button>
      </form>
      {% endif %}
    </div>

    <div class="table-responsive">
      {% if pending_requests %}
      <form id="bulkForm" method="post" action="{{ url_for('leave.manager_bulk_action') }}">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:36px;"><input type="checkbox" id="select_all_mgr" class="form-check-input"></th>
              <th class="text-muted">#</th>
              <th>Employee</th>
              <th>Dates</th>
              <th class="text-end">Days</th>
              <th>Leave</th>
              <th>Code</th>
              <th>Reason</th>
              <th style="min-width:220px;">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for r in pending_requests %}
            <tr>
              <td><input type="checkbox" class="form-check-input chk-item" name="req_ids" value="{{ r.id }}"></td>
              <td class="text-muted">{{ loop.index }}</td>
              <td>
                <div class="fw-semibold">{{ r.employee.full_name }}</div>
                <div class="small text-muted">{{ r.employee.code }}</div>
              </td>
              <td>
                <span class="badge rounded-pill text-bg-light">{{ r.start_date.strftime('%d-%b-%Y') }}</span>
                {% if r.end_date != r.start_date %}
                  <span class="mx-1">→</span>
                  <span class="badge rounded-pill text-bg-light">{{ r.end_date.strftime('%d-%b-%Y') }}</span>
                {% endif %}
              </td>
              <td class="text-end">{{ r.total_days if r.total_days else (0.5 if r.half_day else 1) }}</td>
              <td><span class="badge text-bg-primary">{{ r.leave_type.name }}</span></td>
              <td><span class="badge text-bg-secondary">{{ r.leave_type.code }}</span></td>
              <td class="text-wrap" style="max-width: 320px;">{{ r.reason }}</td>
              <td>
                <!-- Single-item actions -->
                <form method="POST" action="{{ url_for('leave.manager_approve', req_id=r.id) }}">
                  <div class="input-group input-group-sm mb-2">
                    <input type="text" name="remark" class="form-control" placeholder="Remark" required>
                  </div>
                  <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-success" formaction="{{ url_for('leave.manager_approve', req_id=r.id) }}">✅ Approve</button>
                    <button class="btn btn-sm btn-danger"  formaction="{{ url_for('leave.manager_reject',  req_id=r.id) }}">❌ Reject</button>
                  </div>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>

        <!-- Mirrors header inputs for bulk -->
        <input type="hidden" name="action" id="bulkActionHidden2">
        <input type="hidden" name="remark" id="bulkRemarkMirror">
      </form>
      {% else %}
        <div class="p-3">No pending requests.</div>
      {% endif %}
    </div>
  </div>

  <!-- Processed by Manager -->
  <div class="card shadow-sm">
    <div class="card-header bg-success text-white fw-bold">
      ✅ Processed by Manager
    </div>
    <div class="table-responsive">
      {% if processed_requests %}
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th class="text-muted">#</th>
            <th>Employee</th>
            <th>Dates</th>
            <th class="text-end">Days</th>
            <th>Leave</th>
            <th>Status</th>
            <th>Manager Remark</th>
          </tr>
        </thead>
        <tbody>
          {% for r in processed_requests %}
          <tr>
            <td class="text-muted">{{ loop.index }}</td>
            <td>
              <div class="fw-semibold">{{ r.employee.full_name }}</div>
              <div class="small text-muted">{{ r.employee.code }}</div>
            </td>
            <td>
              <span class="badge rounded-pill text-bg-light">{{ r.start_date.strftime('%d-%b-%Y') }}</span>
              {% if r.end_date != r.start_date %}
                <span class="mx-1">→</span>
                <span class="badge rounded-pill text-bg-light">{{ r.end_date.strftime('%d-%b-%Y') }}</span>
              {% endif %}
            </td>
            <td class="text-end">{{ r.total_days if r.total_days else (0.5 if r.half_day else 1) }}</td>
            <td><span class="badge text-bg-primary">{{ r.leave_type.name }}</span></td>
            <td>
              {% set s = r.status %}
              {% if s == 'manager_approved' %}
                <span class="badge text-bg-info">Manager Approved</span>
              {% elif s == 'final_approved' %}
                <span class="badge text-bg-success">HR Approved</span>
              {% elif s == 'rejected' %}
                <span class="badge text-bg-danger">Rejected</span>
              {% else %}
                <span class="badge text-bg-secondary">{{ s|replace('_',' ')|capitalize }}</span>
              {% endif %}
            </td>
            <td class="text-wrap" style="max-width: 420px;">
              {% set mgr_logs = r.approval_logs | selectattr('approver_role','equalto','manager') | list %}
              {% if mgr_logs %}
                {% set last = mgr_logs[-1] %}
                <div class="small">
                  <span class="badge rounded-pill text-bg-secondary me-1">{{ last.status|capitalize }}</span>
                  {{ last.remark or '—' }}
                </div>
              {% else %}
                <span class="text-muted small">—</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
        <div class="p-3">No processed requests.</div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Page JS -->
<script>
  // Select All in Pending table
  document.getElementById('select_all_mgr')?.addEventListener('change', function(){
    document.querySelectorAll('input.chk-item').forEach(cb => cb.checked = this.checked);
  });

  // Bulk actions submit
  function submitBulk(action) {
    const anyChecked = Array.from(document.querySelectorAll('input.chk-item')).some(cb => cb.checked);
    if (!anyChecked) { alert('Please select at least one request.'); return; }
    document.getElementById('bulkActionHidden2').value = action;
    const remarkTop = document.querySelector('#bulkActionsTop input[name="remark"]')?.value || '';
    document.getElementById('bulkRemarkMirror').value = remarkTop;
    document.getElementById('bulkForm').submit();
  }
</script>
{% endblock %}