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

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-trophy me-2"></i>Incentive Policies</h4>
    <div class="d-flex gap-2">
      <a href="{{ url_for('incentives.run_incentive') }}" class="btn btn-success">
        <i class="bi bi-play-circle me-1"></i> Run Incentive
      </a>
      <a href="{{ url_for('incentives.list_batches') }}" class="btn btn-outline-primary">
        <i class="bi bi-clipboard-check me-1"></i> Batches
      </a>
    </div>
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-header fw-bold">Create New Policy</div>
    <div class="card-body">
      <form method="POST" class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Policy Name</label>
          <input name="name" class="form-control" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Period Type</label>
          <select name="period_type" class="form-select">
            <option value="monthly">Monthly</option>
            <option value="quarterly">Quarterly</option>
            <option value="custom">Custom</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Payment Mode Allowed</label>
          <div class="d-flex gap-3 mt-2">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="allow_bank" id="allow_bank" checked>
              <label class="form-check-label" for="allow_bank">Bank</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="allow_cash" id="allow_cash">
              <label class="form-check-label" for="allow_cash">Cash</label>
            </div>
          </div>
        </div>

        <div class="col-12">
          <label class="form-label">Description</label>
          <textarea name="description" class="form-control" rows="2"></textarea>
        </div>

        <div class="col-12">
          <button class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>Create Policy
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header fw-bold">Existing Policies</div>
    <div class="card-body p-0">
      <table class="table table-striped mb-0">
        <thead class="table-light">
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Period</th>
            <th>Status</th>
            <th>Modes</th>
            <th style="width:140px;">Action</th>
          </tr>
        </thead>
        <tbody>
          {% for p in policies %}
          <tr>
            <td>{{ p.id }}</td>
            <td class="fw-semibold">{{ p.name }}</td>
            <td>{{ p.period_type }}</td>
            <td>
              <span class="badge bg-{% if p.status=='active' %}success{% elif p.status=='closed' %}secondary{% else %}warning text-dark{% endif %}">
                {{ p.status }}
              </span>
            </td>
            <td>
              {% if p.allow_bank %}<span class="badge bg-info text-dark">Bank</span>{% endif %}
              {% if p.allow_cash %}<span class="badge bg-dark">Cash</span>{% endif %}
            </td>
            <td>
              <a class="btn btn-sm btn-outline-primary" href="{{ url_for('incentives.policy_detail', policy_id=p.id) }}">
                <i class="bi bi-eye me-1"></i>Open
              </a>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="6" class="text-center text-muted py-4">No policies created yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}