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

<style>
  .toolbar .form-select,
  .toolbar .form-control { min-width: 120px; }

  .table-shell {
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }

  .table-responsive { max-height: 65vh; overflow: auto; }

  thead.sticky-head th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8f9fa;
  }

  .cell-right { text-align: right; white-space: nowrap; }
  .cell-nowrap { white-space: nowrap; }

  .filter-chip {
    font-size: .8rem;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    background: #f1f3f5;
    margin-right: .25rem;
  }

  .page-kicker {
    font-size: .8rem; color: #6c757d; text-transform: uppercase;
    letter-spacing: .06em;
  }
</style>

<div class="container-fluid py-4">

  <!-- Title + Filters Toolbar -->
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-3">
    <div>
      <div class="page-kicker mb-1">Payroll • Consolidated View</div>
      <h4 class="mb-1 d-flex align-items-center gap-2">
        <span>📑 Consolidated Salary</span>
      </h4>
      <div class="text-muted">
        Period: <strong>{{ month }}</strong>
      </div>
    </div>

    <form method="get" class="toolbar d-flex flex-wrap align-items-end gap-2">

      <!-- Month: YYYY-MM -->
      <div>
        <label class="form-label mb-1 small">Month</label>
        <input type="month"
               name="month"
               class="form-control form-control-sm"
               value="{{ month }}">
      </div>

      <!-- Company Prefix -->
      {% if code_prefixes is defined %}
      <div>
        <label class="form-label mb-1 small">Company</label>
        <select name="inst" class="form-select form-select-sm">
          <option value="">All</option>
          {% for p in code_prefixes %}
            <option value="{{ p }}"
                    {% if selected_prefix is defined and p == selected_prefix %}selected{% endif %}>
              {{ p }}
            </option>
          {% endfor %}
        </select>
      </div>
      {% endif %}

      <!-- Location -->
      {% if locations is defined %}
      <div>
        <label class="form-label mb-1 small">Location</label>
        <select name="location" class="form-select form-select-sm">
          <option value="">All</option>
          {% for loc in locations %}
            <option value="{{ loc }}"
                    {% if selected_location is defined and loc == selected_location %}selected{% endif %}>
              {{ loc }}
            </option>
          {% endfor %}
        </select>
      </div>
      {% endif %}

      <!-- Department -->
      {% if departments is defined %}
      <div>
        <label class="form-label mb-1 small">Department</label>
        <select name="department_id" class="form-select form-select-sm">
          <option value="">All</option>
          {% for d in departments %}
            <option value="{{ d.id }}"
                    {% if dept_id is defined and dept_id == d.id %}selected{% endif %}>
              {{ d.name }}
            </option>
          {% endfor %}
        </select>
      </div>
      {% endif %}

      <!-- Designation -->
      {% if designations is defined %}
      <div>
        <label class="form-label mb-1 small">Designation</label>
        <select name="designation_id" class="form-select form-select-sm">
          <option value="">All</option>
          {% for des in designations %}
            <option value="{{ des.id }}"
                    {% if desig_id is defined and desig_id == des.id %}selected{% endif %}>
              {{ des.title }}
            </option>
          {% endfor %}
        </select>
      </div>
      {% endif %}

      <!-- Search -->
      <div>
        <label class="form-label mb-1 small">Employee</label>
        <input type="text"
               name="q"
               value="{{ q if q is defined }}"
               class="form-control form-control-sm"
               placeholder="Name / Code">
      </div>

      <!-- Actions -->
      <div class="d-flex flex-wrap gap-2 ms-1">
        <button type="submit" class="btn btn-primary btn-sm">
          🔍 Apply
        </button>

        <a href="{{ url_for('payroll.download_consolidated_salary_excel', month=month) }}"
           class="btn btn-outline-success btn-sm">
          <i class="bi bi-file-earmark-excel me-1"></i> Excel
        </a>

        <a href="{{ url_for('payroll.download_disbursement_sheet', month=month) }}"
           class="btn btn-outline-primary btn-sm">
          <i class="bi bi-bank me-1"></i> Disbursement
        </a>
      </div>
    </form>
  </div>

  <!-- Active filter chips -->
  <div class="mb-3 small text-muted">
    {% set chips = [] %}

    {% if selected_prefix is defined and selected_prefix %}
      {% set _ = chips.append('Company: ' ~ selected_prefix) %}
    {% endif %}

    {% if selected_location is defined and selected_location %}
      {% set _ = chips.append('Location: ' ~ selected_location) %}
    {% endif %}

    {% if dept_id is defined and dept_id %}
      {% for d in departments or [] %}
        {% if d.id == dept_id %}
          {% set _ = chips.append('Dept: ' ~ d.name) %}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% if desig_id is defined and desig_id %}
      {% for des in designations or [] %}
        {% if des.id == desig_id %}
          {% set _ = chips.append('Desig: ' ~ des.title) %}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% if q is defined and q %}
      {% set _ = chips.append('Search: ' ~ q) %}
    {% endif %}

    {% if chips %}
      <span class="me-1">Filters:</span>
      {% for c in chips %}
        <span class="filter-chip">{{ c }}</span>
      {% endfor %}
    {% endif %}
  </div>

  <!-- Tabs + Tables -->
  <div class="table-shell">

    <!-- Tabs header -->
    <ul class="nav nav-tabs px-3 pt-3" id="consolidatedTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="general-tab" data-bs-toggle="tab"
                data-bs-target="#general" type="button" role="tab">
          General
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="master-tab" data-bs-toggle="tab"
                data-bs-target="#master" type="button" role="tab">
          Master Salary (Assigned)
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="monthly-tab" data-bs-toggle="tab"
                data-bs-target="#monthly" type="button" role="tab">
          Monthly Salary (Paid)
        </button>
      </li>
    </ul>

    <div class="tab-content p-3">

      <!-- General -->
      <div class="tab-pane fade show active" id="general" role="tabpanel">
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-striped align-middle mb-0">
            <thead class="sticky-head">
              <tr>
                <th>SN</th>
                <th>Emp Code</th>
                <th>Employee Name</th>
                <th>Department</th>
                <th>UAN</th>
                <th class="text-center">Present</th>
                <th class="text-center">Leave</th>
                <th class="text-center">Holiday</th>
                <th class="text-center">Weekend</th>
                <th class="text-center">LWP</th>
                <th class="text-center">Paid Days</th>
                <th class="cell-right">Net Salary</th>
              </tr>
            </thead>
            <tbody>
              {% for row in general_rows %}
                <tr>
                  <td>{{ row["SN"] }}</td>
                  <td class="cell-nowrap">{{ row["Employee Code"] }}</td>
                  <td>{{ row["Employee Name"] }}</td>
                  <td>{{ row["Department"] }}</td>
                  <td>{{ row["UAN"] }}</td>
                  <td class="text-center">{{ row["Present"] }}</td>
                  <td class="text-center">{{ row["Leave"] }}</td>
                  <td class="text-center">{{ row["Holiday"] }}</td>
                  <td class="text-center">{{ row["Weekend"] }}</td>
                  <td class="text-center">{{ row["LWP"] }}</td>
                  <td class="text-center fw-semibold">{{ row["Paid Days"] }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Net Salary"]) }}</td>
                </tr>
              {% endfor %}
              {% if general_rows|length == 0 %}
                <tr>
                  <td colspan="12" class="text-center py-4 text-muted">
                    No data for {{ month }} with selected filters.
                  </td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>

      <!-- Master -->
      <div class="tab-pane fade" id="master" role="tabpanel">
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-striped align-middle mb-0">
            <thead class="sticky-head">
              <tr>
                <th>SN</th>
                <th>Emp Code</th>
                <th>Employee Name</th>
                <th>Department</th>
                <th class="cell-right">Basic</th>
                <th class="cell-right">HRA</th>
                <th class="cell-right">TA</th>
                <th class="cell-right">MA</th>
                <th class="cell-right">Inc</th>
                <th class="cell-right">Other</th>
                <th class="cell-right">Gross</th>
              </tr>
            </thead>
            <tbody>
              {% for row in master_rows %}
                <tr>
                  <td>{{ row["SN"] }}</td>
                  <td class="cell-nowrap">{{ row["Employee Code"] }}</td>
                  <td>{{ row["Employee Name"] }}</td>
                  <td>{{ row["Department"] }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Basic"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["HRA"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["TA"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["MA"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Inc"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Other"]) }}</td>
                  <td class="cell-right fw-semibold">₹{{ "%.2f"|format(row["Gross"]) }}</td>
                </tr>
              {% endfor %}
              {% if master_rows|length == 0 %}
                <tr>
                  <td colspan="11" class="text-center py-4 text-muted">
                    No master salary data for {{ month }} with selected filters.
                  </td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>

      <!-- Monthly -->
      <div class="tab-pane fade" id="monthly" role="tabpanel">
        <div class="table-responsive">
          <table class="table table-sm table-bordered table-striped align-middle mb-0">
            <thead class="sticky-head">
              <tr>
                <th>SN</th>
                <th>Emp Code</th>
                <th>Employee Name</th>
                <th>Department</th>
                <th class="text-center">Days</th>
                <th class="cell-right">Basic</th>
                <th class="cell-right">HRA</th>
                <th class="cell-right">TA</th>
                <th class="cell-right">MA</th>
                <th class="cell-right">Inc</th>
                <th class="cell-right">Other</th>
                <th class="cell-right">Laptop</th>
                <th class="cell-right">KPI Inc.</th>
                <th class="cell-right">Arrear</th>
                <th class="cell-right">Gross</th>
                <th class="cell-right">PF</th>
                <th class="cell-right">ESI</th>
                <th class="cell-right">TDS</th>
                <th class="cell-right">PT</th>
                <th class="cell-right">Advance</th>
                <th class="cell-right">Target</th>
                <th class="cell-right">Mobile</th>
                <th class="cell-right">Net Salary</th>
              </tr>
            </thead>
            <tbody>
              {% for row in monthly_rows %}
                <tr>
                  <td>{{ row["SN"] }}</td>
                  <td class="cell-nowrap">{{ row["Employee Code"] }}</td>
                  <td>{{ row["Employee Name"] }}</td>
                  <td>{{ row["Department"] }}</td>
                  <td class="text-center">{{ row["Days"] }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Basic"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["HRA"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["TA"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["MA"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Inc"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Other"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Laptop"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["KPI Incentive"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Arrear"]) }}</td>
                  <td class="cell-right fw-semibold">₹{{ "%.2f"|format(row["Gross"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["PF"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["ESI"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["TDS"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["PT"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Advance"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Target"]) }}</td>
                  <td class="cell-right">₹{{ "%.2f"|format(row["Mobile"]) }}</td>
                  <td class="cell-right fw-semibold">₹{{ "%.2f"|format(row["Net Salary"]) }}</td>
                </tr>
              {% endfor %}
              {% if monthly_rows|length == 0 %}
                <tr>
                  <td colspan="23" class="text-center py-4 text-muted">
                    No monthly salary data for {{ month }} with selected filters.
                  </td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>

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

{% endblock %}