{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">

  <div class="d-flex justify-content-between align-items-center mb-2">
    <div>
      <h4 class="mb-0"><i class="bi bi-clipboard-check me-2"></i>Batch #{{ batch.id }}</h4>
      <div class="text-muted small">
        Policy: <b>{{ policy.name if policy else batch.policy_id }}</b>
        · Period: <b>{{ batch.period_key }}</b>
      </div>
    </div>
    <a href="{{ url_for('incentives.list_batches') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>Back
    </a>
  </div>

  <div class="mb-3">
    <span class="badge bg-{% if batch.status=='paid' %}success{% elif batch.status=='approved' %}primary{% else %}warning text-dark{% endif %} me-2">
      {{ batch.status }}
    </span>
    <span class="badge bg-info text-dark">Total: ₹{{ "%.2f"|format(total_amt) }}</span>
  </div>

  <div class="d-flex flex-wrap gap-2 mb-3">
    {% if batch.status == 'draft' %}
      <form method="POST" action="{{ url_for('incentives.approve_batch', batch_id=batch.id) }}">
        <button class="btn btn-primary">
          <i class="bi bi-lock me-1"></i>Approve (Lock)
        </button>
      </form>
    {% endif %}

    {% if batch.status == 'approved' %}
      <form method="POST" action="{{ url_for('incentives.mark_paid', batch_id=batch.id) }}" class="d-flex gap-2 align-items-end">
        <div>
          <label class="form-label small mb-1">Payment Mode</label>
          <select class="form-select form-select-sm" name="payment_mode" required>
            <option value="bank">Bank</option>
            <option value="cash">Cash</option>
          </select>
        </div>
        <div>
          <label class="form-label small mb-1">Reference (optional)</label>
          <input name="reference" class="form-control form-control-sm" placeholder="Txn / Voucher No.">
        </div>
        <div>
          <label class="form-label small mb-1">Notes (optional)</label>
          <input name="notes" class="form-control form-control-sm" placeholder="Any note">
        </div>
        <button class="btn btn-success">
          <i class="bi bi-check2-circle me-1"></i>Mark Paid
        </button>
      </form>
    {% endif %}
  </div>

  <div class="card shadow-sm">
    <div class="card-header fw-bold">Lines</div>
    <div class="card-body p-0">
      <table class="table table-striped mb-0">
        <thead class="table-light">
          <tr>
            <th>Employee</th>
            <th>Metric</th>
            <th class="text-end">Achieved</th>
            <th class="text-end">Target</th>
            <th class="text-end">Amount</th>
            <th>Method</th>
          </tr>
        </thead>
        <tbody>
          {% for l in lines %}
          <tr>
            <td class="fw-semibold">
              {{ l.employee.full_name if l.employee else l.employee_id }}
              <div class="text-muted small">{{ l.employee.employee_code if l.employee else "" }}</div>
            </td>
            <td class="text-muted">{{ l.calc_breakup_json.get('method') if l.calc_breakup_json else "-" }}</td>
            <td class="text-end">{{ "%.2f"|format(l.achieved_value or 0) }}</td>
            <td class="text-end">{{ "%.2f"|format(l.target_value or 0) }}</td>
            <td class="text-end fw-bold">₹{{ "%.2f"|format(l.calculated_amount or 0) }}</td>
            <td>
              <span class="badge bg-light text-dark">
                {{ l.calc_breakup_json.get('method','-') if l.calc_breakup_json else "-" }}
              </span>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="6" class="text-center text-muted py-4">No lines found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}