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

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

  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
    <div>
      <h4 class="mb-0">Team Salary</h4>
      <small class="text-muted">
        View:
        {% if view == "current" %}
          <span class="badge bg-success">Current Salary Structure</span>
        {% else %}
          <span class="badge bg-primary">Frozen Payroll</span>
          {% if frozen_month %}<span class="badge bg-light text-dark ms-2">{{ frozen_month }}</span>{% endif %}
        {% endif %}
      </small>
    </div>

    <div class="d-flex gap-2">
      <a class="btn btn-outline-success"
         href="{{ url_for('team_salary.team_salary_export',
                          view=view, month=frozen_month,
                          search=filters.search,
                          department_id=filters.department_id,
                          designation_id=filters.designation_id,
                          manager_id=filters.manager_id) }}">
        <i class="fa-solid fa-file-excel me-1"></i> Export Excel
      </a>
    </div>
  </div>

  <!-- Filters -->
  <form method="get" class="card shadow-sm mb-3">
    <div class="card-body">
      <input type="hidden" name="page" value="1">

      <div class="row g-2 align-items-end">

        <div class="col-md-2">
          <label class="form-label">View</label>
          <select name="view" class="form-select" onchange="this.form.submit()">
            <option value="current" {% if view == "current" %}selected{% endif %}>Current</option>
            <option value="frozen"  {% if view == "frozen" %}selected{% endif %}>Frozen</option>
          </select>
        </div>

        <div class="col-md-2 {% if view != 'frozen' %}d-none{% endif %}" id="monthWrap">
          <label class="form-label">Frozen Month</label>
          <select name="month" class="form-select" onchange="this.form.submit()">
            <option value="">(Latest)</option>
            {% for m in frozen_month_choices %}
              <option value="{{ m }}" {% if frozen_month == m %}selected{% endif %}>{{ m }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-3">
          <label class="form-label">Search</label>
          <input type="text" name="search" value="{{ filters.search }}" class="form-control"
                 placeholder="Name / Code / Email">
        </div>

        <div class="col-md-2">
          <label class="form-label">Department</label>
          <select name="department_id" class="form-select">
            <option value="">All</option>
            {% for d in dept_list %}
              <option value="{{ d.id }}" {% if filters.department_id|string == d.id|string %}selected{% endif %}>
                {{ d.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Designation</label>
          <select name="designation_id" class="form-select">
            <option value="">All</option>
            {% for ds in desig_list %}
              <option value="{{ ds.id }}" {% if filters.designation_id|string == ds.id|string %}selected{% endif %}>
                {{ ds.title }}
              </option>
            {% endfor %}
          </select>
        </div>

        {% if is_hr_or_admin %}
        <div class="col-md-2">
          <label class="form-label">Reporting Manager</label>
          <select name="manager_id" class="form-select">
            <option value="">All</option>
            {% for m in managers_list %}
              <option value="{{ m.id }}" {% if filters.manager_id|string == m.id|string %}selected{% endif %}>
                {{ m.full_name }} ({{ m.employee_code }})
              </option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        <div class="col-md-1">
          <label class="form-label">Per Page</label>
          <select name="per_page" class="form-select">
            {% for n in [10,20,30,50] %}
              <option value="{{ n }}" {% if per_page == n %}selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-1 d-grid">
          <button class="btn btn-primary">Apply</button>
        </div>

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

  {% if rows|length == 0 %}
    <div class="alert alert-warning">No employees found for selected filters.</div>
  {% else %}

  <div class="card shadow-sm">
    <div class="card-body p-0">

      <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
          <thead class="table-light">
            <tr>
              {% macro sort_link(label, key) -%}
                {% set next_dir = 'desc' if (sort == key and direction == 'asc') else 'asc' %}
                <a class="text-decoration-none"
                   href="{{ url_for('team_salary.team_salary',
                                    view=view,
                                    month=frozen_month,
                                    search=filters.search,
                                    department_id=filters.department_id,
                                    designation_id=filters.designation_id,
                                    manager_id=filters.manager_id,
                                    per_page=per_page,
                                    sort=key,
                                    dir=next_dir,
                                    page=1) }}">
                  {{ label }}
                  {% if sort == key %}
                    <i class="fa-solid fa-arrow-{{ 'up' if direction == 'asc' else 'down' }} ms-1"></i>
                  {% endif %}
                </a>
              {%- endmacro %}

              <th style="min-width:220px;">{{ sort_link("Employee", "name") }}</th>
              <th style="min-width:110px;">{{ sort_link("Code", "code") }}</th>
              <th style="min-width:160px;">Department</th>
              <th style="min-width:160px;">Designation</th>

              <th class="text-end" style="min-width:140px;">{{ sort_link("Gross", "gross") }}</th>
              <th class="text-end" style="min-width:140px;">{{ sort_link("Deductions", "deductions") }}</th>
              <th class="text-end" style="min-width:140px;">{{ sort_link("Net", "net") }}</th>

              {% if view == "frozen" %}
                <th class="text-end" style="min-width:140px;">{{ sort_link("CTC", "ctc") }}</th>
                <th style="min-width:110px;">Month</th>
              {% endif %}

              <th style="min-width:130px;">Action</th>
            </tr>
          </thead>

          <tbody>
            {% for (emp, gross, deductions, net, ctc, payroll_month) in rows %}
              <tr>
                <td>
                  <div class="fw-semibold">{{ emp.full_name }}</div>
                  <div class="text-muted small">
                    {{ emp.email }}
                    {% if emp.reporting_manager %}
                      · Manager: {{ emp.reporting_manager.full_name }}
                    {% endif %}
                  </div>
                </td>
                <td>{{ emp.employee_code }}</td>
                <td>{{ emp.department.name if emp.department else "-" }}</td>
                <td>{{ emp.designation.title if emp.designation else "-" }}</td>

                <td class="text-end">{{ "%.2f"|format(gross or 0) }}</td>
                <td class="text-end">{{ "%.2f"|format(deductions or 0) }}</td>
                <td class="text-end fw-semibold">{{ "%.2f"|format(net or 0) }}</td>

                {% if view == "frozen" %}
                  <td class="text-end">{{ "%.2f"|format(ctc or 0) }}</td>
                  <td>{{ payroll_month or frozen_month or "-" }}</td>
                {% endif %}

                <td>
                  <button class="btn btn-sm btn-outline-primary"
                          onclick="openBreakdown({{ emp.id }}, '{{ emp.full_name|e }}', '{{ emp.employee_code|e }}')">
                    <i class="fa-solid fa-list me-1"></i> Breakdown
                  </button>
                </td>
              </tr>
            {% endfor %}
          </tbody>

        </table>
      </div>

    </div>

    <!-- Pagination footer -->
    <div class="card-footer d-flex justify-content-between align-items-center flex-wrap gap-2">
      <div class="text-muted small">
        Showing {{ pagination.total }} result(s) · Page {{ pagination.page }} of {{ pagination.pages }}
      </div>

      <nav aria-label="Salary pagination">
        <ul class="pagination mb-0">

          <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
            <a class="page-link"
               href="{{ url_for('team_salary.team_salary',
                                view=view,
                                month=frozen_month,
                                search=filters.search,
                                department_id=filters.department_id,
                                designation_id=filters.designation_id,
                                manager_id=filters.manager_id,
                                per_page=per_page,
                                sort=sort,
                                dir=direction,
                                page=pagination.prev_num if pagination.has_prev else 1) }}">
              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('team_salary.team_salary',
                                  view=view,
                                  month=frozen_month,
                                  search=filters.search,
                                  department_id=filters.department_id,
                                  designation_id=filters.designation_id,
                                  manager_id=filters.manager_id,
                                  per_page=per_page,
                                  sort=sort,
                                  dir=direction,
                                  page=p) }}">
                {{ p }}
              </a>
            </li>
          {% endfor %}

          <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
            <a class="page-link"
               href="{{ url_for('team_salary.team_salary',
                                view=view,
                                month=frozen_month,
                                search=filters.search,
                                department_id=filters.department_id,
                                designation_id=filters.designation_id,
                                manager_id=filters.manager_id,
                                per_page=per_page,
                                sort=sort,
                                dir=direction,
                                page=pagination.next_num if pagination.has_next else pagination.pages) }}">
              Next
            </a>
          </li>

        </ul>
      </nav>
    </div>
  </div>

  {% endif %}
</div>

<!-- Breakdown Modal -->
<div class="modal fade" id="breakdownModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">

      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0">Salary Breakdown</h5>
          <div class="text-muted small" id="bdEmpLine">-</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
          <div class="badge bg-light text-dark" id="bdViewBadge">-</div>
          <div class="text-muted small" id="bdMonthLine"></div>
        </div>

        <div class="row g-3">
          <div class="col-md-6">
            <div class="card shadow-sm">
              <div class="card-header bg-white">
                <b>Earnings</b>
              </div>
              <div class="card-body p-0">
                <table class="table mb-0">
                  <tbody id="bdEarnings"></tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card shadow-sm">
              <div class="card-header bg-white">
                <b>Deductions</b>
              </div>
              <div class="card-body p-0">
                <table class="table mb-0">
                  <tbody id="bdDeductions"></tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="card shadow-sm">
              <div class="card-body">
                <div class="row g-2">
                  <div class="col-md-4">
                    <div class="text-muted small">Gross</div>
                    <div class="h5 mb-0" id="bdGross">0</div>
                  </div>
                  <div class="col-md-4">
                    <div class="text-muted small">Total Deductions</div>
                    <div class="h5 mb-0" id="bdDedTotal">0</div>
                  </div>
                  <div class="col-md-4">
                    <div class="text-muted small">Net</div>
                    <div class="h5 mb-0" id="bdNet">0</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="alert alert-warning mt-3 d-none" id="bdError"></div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
      </div>

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

<script>
  // show/hide month dropdown based on view
  document.addEventListener("DOMContentLoaded", function () {
    const viewSel = document.querySelector('select[name="view"]');
    const wrap = document.getElementById("monthWrap");
    if (viewSel && wrap) wrap.classList.toggle("d-none", viewSel.value !== "frozen");
  });

  function money(v) {
    const n = Number(v || 0);
    return n.toFixed(2);
  }

  async function openBreakdown(empId, empName, empCode) {
    const view = "{{ view }}";
    const month = "{{ frozen_month }}";

    document.getElementById("bdEmpLine").innerText = empName + " (" + empCode + ")";
    document.getElementById("bdError").classList.add("d-none");
    document.getElementById("bdEarnings").innerHTML = `<tr><td class="text-muted p-3">Loading...</td></tr>`;
    document.getElementById("bdDeductions").innerHTML = `<tr><td class="text-muted p-3">Loading...</td></tr>`;

    const modal = new bootstrap.Modal(document.getElementById("breakdownModal"));
    modal.show();

    const params = new URLSearchParams({
      employee_id: empId,
      view: view,
      month: month
    });

    const res = await fetch("{{ url_for('team_salary.team_salary_breakdown') }}?" + params.toString());
    const out = await res.json().catch(() => ({}));

    if (!res.ok || !out.ok) {
      document.getElementById("bdError").innerText = out.message || "Failed to load breakdown";
      document.getElementById("bdError").classList.remove("d-none");
      document.getElementById("bdEarnings").innerHTML = "";
      document.getElementById("bdDeductions").innerHTML = "";
      return;
    }

    document.getElementById("bdViewBadge").innerText = (out.view === "frozen" ? "Frozen" : "Current");
    document.getElementById("bdMonthLine").innerText = out.month ? ("Month: " + out.month) : "";

    const eRows = (out.earnings || []).map(x => `
      <tr>
        <td>${(x.name || "")}</td>
        <td class="text-end fw-semibold">${money(x.amount)}</td>
      </tr>
    `).join("");

    const dRows = (out.deductions || []).map(x => `
      <tr>
        <td>${(x.name || "")}</td>
        <td class="text-end fw-semibold">${money(x.amount)}</td>
      </tr>
    `).join("");

    document.getElementById("bdEarnings").innerHTML = eRows || `<tr><td class="text-muted p-3">No earnings found.</td></tr>`;
    document.getElementById("bdDeductions").innerHTML = dRows || `<tr><td class="text-muted p-3">No deductions found.</td></tr>`;

    document.getElementById("bdGross").innerText = money(out.gross);
    document.getElementById("bdDedTotal").innerText = money(out.deductions_total);
    document.getElementById("bdNet").innerText = money(out.net);
  }
</script>

{% endblock %}