{% extends "base.html" %}
{% block content %}
{% macro money(v) -%}₹{{ '%.2f'|format(v or 0) }}{%- endmacro %}

<div class="container mt-4" style="max-width: 1200px;">

  <!-- Title + (optional) Excel export -->
  <div class="d-flex align-items-center justify-content-between mb-2">
    <div class="d-flex align-items-center gap-2">
      <h3 class="fw-bold text-primary mb-0">
        <i class="bi bi-people me-2"></i> Team Salaries
      </h3>
      {% if mode == 'live' %}
        <span class="badge rounded-pill text-bg-warning-subtle border border-warning-subtle">
          <i class="bi bi-lightning-charge me-1"></i> Live projection
        </span>
      {% endif %}
    </div>
    {% if rows and rows|length %}
      <a class="btn btn-outline-success btn-sm"
         href="{{ url_for('payroll.team_salaries_excel', month=month, manager_id=selected_manager_id, mode=mode) }}">
        <i class="bi bi-file-earmark-excel me-1"></i> Export Excel
      </a>
    {% endif %}
  </div>

  <!-- Mode toggle -->
  <div class="btn-group mb-3" role="group" aria-label="Mode">
    <a class="btn btn-sm {% if mode=='frozen' %}btn-primary{% else %}btn-outline-primary{% endif %}"
       href="{{ url_for('payroll.team_salaries', month=month, manager_id=selected_manager_id, mode='frozen') }}">
      Frozen
    </a>
    <a class="btn btn-sm {% if mode=='live' %}btn-primary{% else %}btn-outline-primary{% endif %}"
       href="{{ url_for('payroll.team_salaries', month=month, manager_id=selected_manager_id, mode='live') }}">
      Live (Unfrozen)
    </a>
  </div>

  <!-- Filters -->
  <form class="card shadow-sm border-0 mb-3" method="get" action="{{ url_for('payroll.team_salaries') }}">
    <input type="hidden" name="mode" value="{{ mode }}">
    <div class="card-body row g-3">
      <div class="col-12 col-md-3">
        <label class="form-label fw-semibold">Month</label>
        <input type="month" class="form-control" name="month" value="{{ month }}" required>
      </div>

      {% if is_hr_admin %}
      <div class="col-12 col-md-5">
        <label class="form-label fw-semibold">Manager</label>
        <select class="form-select" name="manager_id" {% if not managers or managers|length == 0 %}disabled{% endif %}>
          {% if managers and managers|length %}
            {% for m in managers %}
              <option value="{{ m.id }}" {% if m.id == selected_manager_id %}selected{% endif %}>
                {{ m.full_name }}
              </option>
            {% endfor %}
          {% else %}
            <option>— No managers found —</option>
          {% endif %}
        </select>
        <small class="text-muted">HR/Admin can switch managers</small>
      </div>
      {% endif %}

      <div class="col-12 col-md-2 d-flex align-items-end">
        <button class="btn btn-primary w-100">
          <i class="bi bi-search me-1"></i> View
        </button>
      </div>
    </div>
  </form>

  {% if excluded_team and excluded_team|length %}
    <div class="alert alert-secondary py-2">
      <a class="text-decoration-none d-inline-flex align-items-center" data-bs-toggle="collapse" href="#excludedCollapse" role="button" aria-expanded="false" aria-controls="excludedCollapse">
        <i class="bi bi-info-circle me-2"></i> Some team members are hidden this month
      </a>
      <div class="collapse mt-2" id="excludedCollapse">
        <ul class="mb-0 small">
          {% for x in excluded_team %}
            <li>{{ x.emp.full_name }} — {{ x.reason }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  {% endif %}

  {% if rows and rows|length > 0 %}
    <div class="alert alert-light border d-flex justify-content-between align-items-center">
      <div class="small">
        <strong>Period:</strong> {{ month }}
        &nbsp;|&nbsp; <strong>Mode:</strong> {{ 'Frozen' if mode=='frozen' else 'Live (Unfrozen)' }}
        &nbsp;|&nbsp; <strong>Team size:</strong> {{ team|length }}
      </div>
      <div class="small">
        <strong>Total Gross (M):</strong> {{ money(totals.gross_m) }}
        &nbsp;|&nbsp; <strong>Total Net:</strong> {{ money(totals.net_m) }}
      </div>
    </div>

    <ul class="nav nav-pills mb-3" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-master" type="button" role="tab">
          Master (Assigned)
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-monthly" type="button" role="tab">
          Monthly ({{ 'Frozen' if mode=='frozen' else 'Live' }})
        </button>
      </li>
    </ul>

    <div class="tab-content">
      <!-- Master -->
      <div class="tab-pane fade show active" id="tab-master" role="tabpanel">
        <div class="table-responsive" style="max-height: 62vh;">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light position-sticky top-0" style="z-index:1;">
              <tr>
                <th class="text-nowrap">#</th>
                <th>Employee</th>
                <th>Department</th>
                <th class="text-end">Basic</th>
                <th class="text-end">HRA</th>
                <th class="text-end">TA</th>
                <th class="text-end">MA</th>
                <th class="text-end">Inc.</th>
                <th class="text-end">Other</th>
                <th class="text-end">Gross</th>
              </tr>
            </thead>
            <tbody>
              {% for r in rows %}
              <tr>
                <td class="text-nowrap">{{ r.sn }}</td>
                <td class="text-nowrap">
                  {{ r.emp.full_name }}
                  {% if r.note %}
                    <span class="badge text-bg-warning-subtle border border-warning-subtle ms-2" title="{{ r.note }}">
                      Live
                    </span>
                  {% endif %}
                </td>
                <td class="text-nowrap">{{ r.dept_name }}</td>
                <td class="text-end">{{ money(r.basic_0) }}</td>
                <td class="text-end">{{ money(r.hra_0) }}</td>
                <td class="text-end">{{ money(r.ta_0) }}</td>
                <td class="text-end">{{ money(r.ma_0) }}</td>
                <td class="text-end">{{ money(r.inc_0) }}</td>
                <td class="text-end">{{ money(r.other_0) }}</td>
                <td class="text-end fw-semibold">{{ money(r.gross_0) }}</td>
              </tr>
              {% endfor %}
            </tbody>
            <tfoot class="table-light">
              <tr>
                <th colspan="9" class="text-end">Total Gross</th>
                <th class="text-end fw-semibold">{{ money(totals.gross_0) if totals.gross_0 is defined else '—' }}</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <!-- Monthly -->
      <div class="tab-pane fade" id="tab-monthly" role="tabpanel">
        <div class="table-responsive" style="max-height: 62vh;">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light position-sticky top-0" style="z-index:1;">
              <tr>
                <th class="text-nowrap">#</th>
                <th>Employee</th>
                <th>Department</th>
                <th class="text-end">Days</th>
                <th class="text-end">Basic M</th>
                <th class="text-end">HRA M</th>
                <th class="text-end">TA M</th>
                <th class="text-end">MA M</th>
                <th class="text-end">Inc. M</th>
                <th class="text-end">Other M</th>
                <th class="text-end">Laptop</th>
                <th class="text-end">KPI</th>
                <th class="text-end">Arrears</th>
                <th class="text-end">Gross M</th>
                <th class="text-end">PF</th>
                <th class="text-end">ESI</th>
                <th class="text-end">TDS</th>
                <th class="text-end">PT</th>
                <th class="text-end">Advance</th>
                <th class="text-end">Target</th>
                <th class="text-end">Mobile</th>
                <th class="text-end">Net</th>
              </tr>
            </thead>
            <tbody>
              {% for r in rows %}
              <tr>
                <td class="text-nowrap">{{ r.sn }}</td>
                <td class="text-nowrap">
                  {{ r.emp.full_name }}
                  {% if r.note %}
                    <span class="badge text-bg-warning-subtle border border-warning-subtle ms-2" title="{{ r.note }}">
                      Live
                    </span>
                  {% endif %}
                </td>
                <td class="text-nowrap">{{ r.dept_name }}</td>
                <td class="text-end">{{ '%.2f'|format(r.days or 0) }}</td>
                <td class="text-end">{{ money(r.basic_m) }}</td>
                <td class="text-end">{{ money(r.hra_m) }}</td>
                <td class="text-end">{{ money(r.ta_m) }}</td>
                <td class="text-end">{{ money(r.ma_m) }}</td>
                <td class="text-end">{{ money(r.inc_m) }}</td>
                <td class="text-end">{{ money(r.other_m) }}</td>
                <td class="text-end">{{ money(r.laptop_m) }}</td>
                <td class="text-end">{{ money(r.kpi_m) }}</td>
                <td class="text-end">{{ money(r.arrears_m) }}</td>
                <td class="text-end fw-semibold">{{ money(r.gross_m) }}</td>
                <td class="text-end">{{ money(r.pf_m) }}</td>
                <td class="text-end">{{ money(r.esi_m) }}</td>
                <td class="text-end">{{ money(r.tds_m) }}</td>
                <td class="text-end">{{ money(r.pt_m) }}</td>
                <td class="text-end">{{ money(r.adv_m) }}</td>
                <td class="text-end">{{ money(r.target_m) }}</td>
                <td class="text-end">{{ money(r.mobile_m) }}</td>
                <td class="text-end fw-bold">{{ money(r.net_m) }}</td>
              </tr>
              {% endfor %}
            </tbody>
            <tfoot class="table-light">
              <tr>
                <th colspan="13" class="text-end">Totals</th>
                <th class="text-end fw-semibold">{{ money(totals.gross_m) }}</th>
                <th colspan="7"></th>
                <th class="text-end fw-bold">{{ money(totals.net_m) }}</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  {% else %}
    <div class="alert alert-info">No data to show for this selection.</div>
  {% endif %}

</div>
{% endblock %}