{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <h3 class="text-primary mb-3">Leave Balance Report (FY {{ fy_label }}: {{ fy_start }} → {{ fy_end }})</h3>

  <form class="row g-2 mb-3" method="get" action="{{ url_for('leave.balance_report') }}">
    <div class="col-md-3">
      <label class="form-label">Department</label>
      <select class="form-select" name="department_id">
        <option value="">All</option>
        {% for d in departments %}
          <option value="{{ d.id }}" {% if dept_id==d.id %}selected{% endif %}>{{ d.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-3">
      <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-3">
      <label class="form-label">Leave Type</label>
      <select class="form-select" name="leave_type_id">
        <option value="">All</option>
        {% for lt in leave_types %}
          <option value="{{ lt.id }}" {% if lt_id==lt.id %}selected{% endif %}>{{ lt.name }} ({{ lt.code }})</option>
        {% endfor %}
      </select>
    </div>

    <!-- Submit controls -->
    <div class="col-md-3 d-flex align-items-end gap-2">
      <button class="btn btn-primary" type="submit">Filter</button>
      <a class="btn btn-outline-secondary" href="{{ url_for('leave.balance_report') }}">Reset</a>
    </div>
  </form>

  <div class="card shadow-sm">
    <div class="table-responsive">
      <table class="table table-bordered table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>#</th>
            <th>Emp Code</th>
            <th>Employee</th>
            <th>Department</th>
            <th>Leave Type</th>
            <th>Code</th>
            <th class="text-end">Credited</th>
            <th class="text-end">Used</th>
            <th class="text-end">Remaining</th>
          </tr>
        </thead>
        <tbody>
          {% for r in report %}
          <tr>
            <td>{{ loop.index }}</td>
            <td>{{ r.emp_code }}</td>
            <td>{{ r.employee }}</td>
            <td>{{ r.department }}</td>
            <td>{{ r.leave_type }}</td>
            <td>{{ r.leave_code }}</td>
            <td class="text-end">{{ "%.2f"|format(r.credited) }}</td>
            <td class="text-end">{{ "%.2f"|format(r.used) }}</td>
            <td class="text-end">{{ "%.2f"|format(r.remaining) }}</td>
          </tr>
          {% endfor %}
          {% if not report %}
          <!-- table has 9 columns including '#' -->
          <tr><td colspan="9" class="p-3">No data for selected filters.</td></tr>
          {% endif %}
        </tbody>
        <tfoot class="table-light">
          <tr>
            <!-- span first 6 columns so the last 3 align to Credited/Used/Remaining -->
            <th colspan="6" class="text-end">Totals</th>
            <th class="text-end">{{ "%.2f"|format(totals.credited) }}</th>
            <th class="text-end">{{ "%.2f"|format(totals.used) }}</th>
            <th class="text-end">{{ "%.2f"|format(totals.remaining) }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

<!-- Optional: auto-submit when any dropdown changes -->
<script>
  document.querySelectorAll('select[name="department_id"], select[name="employee_id"], select[name="leave_type_id"]')
    .forEach(el => el.addEventListener('change', () => el.form.submit()));
</script>
{% endblock %}