{% extends 'base.html' %}
{% block content %}
<div class="container mt-4" style="max-width:1100px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0"><i class="bi bi-ui-checks-grid text-primary me-2"></i>Reimbursement Type Master</h3>
  </div>

  <form method="POST" class="card shadow-sm mb-3">
    <div class="card-body row g-2 align-items-end">
      <div class="col-md-5">
        <label class="form-label fw-semibold">Type Name</label>
        <input class="form-control" name="name" placeholder="e.g., Travel" required>
      </div>
      <div class="col-md-3">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="requires_route_fields" id="rr">
          <label class="form-check-label" for="rr">Requires From/To</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="requires_km_fields" id="rk">
          <label class="form-check-label" for="rk">Requires KMs/Rate</label>
        </div>
      </div>
      <div class="col-md-4 text-end">
        <button class="btn btn-primary"><i class="bi bi-plus-circle me-1"></i>Add Type</button>
      </div>
    </div>
  </form>

  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-bordered align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Name</th>
              <th class="text-center">Active</th>
              <th class="text-center">From/To</th>
              <th class="text-center">KMs/Rate</th>
              <th style="width:240px;">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for t in types %}
            <tr>
              <td class="fw-semibold">{{ t.name }}</td>
              <td class="text-center">
                <span class="badge {{ 'bg-success' if t.is_active else 'bg-secondary' }}">
                  {{ 'Yes' if t.is_active else 'No' }}
                </span>
              </td>
              <td class="text-center">{{ 'Yes' if t.requires_route_fields else 'No' }}</td>
              <td class="text-center">{{ 'Yes' if t.requires_km_fields else 'No' }}</td>
              <td>
                <form method="POST" action="{{ url_for('tr.reimbursement_type_toggle', type_id=t.id) }}" class="d-inline">
                  <button class="btn btn-sm btn-outline-secondary">
                    {{ 'Disable' if t.is_active else 'Enable' }}
                  </button>
                </form>

                <!-- inline edit -->
                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#edit{{t.id}}">
                  Edit
                </button>
              </td>
            </tr>
            <tr class="collapse" id="edit{{t.id}}">
              <td colspan="5">
                <form method="POST" action="{{ url_for('tr.reimbursement_type_edit', type_id=t.id) }}" class="row g-2 align-items-end">
                  <div class="col-md-5">
                    <label class="form-label fw-semibold">Name</label>
                    <input class="form-control" name="name" value="{{ t.name }}" required>
                  </div>
                  <div class="col-md-4">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="requires_route_fields" id="rr{{t.id}}" {% if t.requires_route_fields %}checked{% endif %}>
                      <label class="form-check-label" for="rr{{t.id}}">Requires From/To</label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="requires_km_fields" id="rk{{t.id}}" {% if t.requires_km_fields %}checked{% endif %}>
                      <label class="form-check-label" for="rk{{t.id}}">Requires KMs/Rate</label>
                    </div>
                  </div>
                  <div class="col-md-3 text-end">
                    <button class="btn btn-success">Save</button>
                  </div>
                </form>
              </td>
            </tr>
            {% endfor %}
            {% if not types %}
              <tr><td colspan="5" class="text-center text-muted py-4">No types found.</td></tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}