{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width:1200px;">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
    <h3 class="mb-0"><i class="bi bi-bank2 text-primary me-2"></i>Reimbursement Disbursement</h3>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary"
         href="{{ url_for('tr.hr_disbursement_csv', month=month, year=year) }}">
        <i class="bi bi-download me-1"></i> Download CSV
      </a>
    </div>
  </div>

  <form method="GET" class="card shadow-sm mb-3">
    <div class="card-body row g-2 align-items-end">
      <div class="col-md-2">
        <label class="form-label fw-semibold">Month</label>
        <select name="month" class="form-select">
          <option value="">All</option>
          {% for m in range(1,13) %}
            <option value="{{ m }}" {% if month==m %}selected{% endif %}>{{ "%02d"|format(m) }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label fw-semibold">Year</label>
        <input type="number" name="year" class="form-control" value="{{ year or '' }}">
      </div>
      <div class="col-md-3">
        <button class="btn btn-primary"><i class="bi bi-funnel me-1"></i>Filter</button>
      </div>
    </div>
  </form>

  <form method="POST" action="{{ url_for('tr.hr_mark_paid_bulk', month=month, year=year) }}" class="card shadow-sm">
    <div class="card-body">
      <div class="row g-2 mb-3">
        <div class="col-md-8">
          <input class="form-control" name="remark" placeholder="Remark (optional for bulk mark paid)">
        </div>
        <div class="col-md-4 text-end">
          <button class="btn btn-success">
            <i class="bi bi-cash-coin me-1"></i> Mark Paid (Selected)
          </button>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-bordered align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:44px;">
                <input type="checkbox" id="sel-all">
              </th>
              <th>Employee</th>
              <th>Type</th>
              <th>Range</th>
              <th class="text-end">Amount</th>
              <th>Status</th>
              <th style="width:120px;">View</th>
            </tr>
          </thead>
          <tbody>
            {% for r in rows %}
              <tr>
                <td>
                  {% if r.status == 'hr_approved' %}
                    <input type="checkbox" name="req_ids[]" value="{{ r.id }}" class="row-sel">
                  {% endif %}
                </td>
                <td>
                  <div class="fw-semibold">{{ r.employee.full_name }}</div>
                  <div class="text-muted small">{{ r.employee.employee_code }}</div>
                </td>
                <td>{{ r.reimb_type }}</td>
                <td class="text-muted">{{ r.from_date }} → {{ r.to_date }}</td>
                <td class="text-end">₹ {{ '%.2f'|format(r.total_amount or 0) }}</td>
                <td>
                  <span class="badge {% if r.status=='paid' %}bg-success{% else %}bg-info{% endif %}">
                    {{ r.status.replace('_',' ').title() }}
                  </span>
                </td>
                <td>
                  <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('tr.tr_view', req_id=r.id) }}">Open</a>
                </td>
              </tr>
            {% endfor %}
            {% if not rows %}
              <tr><td colspan="7" class="text-center text-muted py-4">No records.</td></tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </form>
</div>

<script>
  const selAll = document.getElementById('sel-all');
  selAll?.addEventListener('change', ()=>{
    document.querySelectorAll('.row-sel').forEach(cb => cb.checked = selAll.checked);
  });
</script>
{% endblock %}