{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 1200px;">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-clipboard-check me-2"></i>Preview Historical Loan Import</h4>
    <a class="btn btn-outline-secondary" href="{{ url_for('loan.historical_loans_import') }}">
      <i class="bi bi-arrow-left me-1"></i> Back
    </a>
  </div>

  {% if errors and errors|length > 0 %}
  <div class="alert alert-danger">
    <b>Validation Errors:</b>
    <ul class="mb-0">
      {% for e in errors %}
        <li>Row {{ e.row }} — <b>{{ e.field }}</b>: {{ e.error }}</li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  <div class="card shadow-sm mb-3">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-sm table-striped align-middle">
          <thead class="table-light">
            <tr>
              <th>Row</th>
              <th>Employee Code</th>
              <th>Loan Type</th>
              <th>Sanctioned</th>
              <th>Tenure</th>
              <th>EMI</th>
              <th>Start</th>
              <th>Total Paid</th>
              <th>Status</th>
              <th>Last Pay Date</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
          {% for r in preview_rows %}
            <tr>
              <td>{{ r.row_no }}</td>
              <td>{{ r.employee_code }}</td>
              <td>{{ r.loan_type }}</td>
              <td>{{ r.sanctioned_amount }}</td>
              <td>{{ r.tenure_months }}</td>
              <td>{{ r.emi_amount }}</td>
              <td>{{ r.start_month }}</td>
              <td>{{ r.total_paid }}</td>
              <td>{{ r.status }}</td>
              <td>{{ r.last_payment_date }}</td>
              <td>{{ r.remarks }}</td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>

      {% if ok_to_import %}
      <form method="POST" action="{{ url_for('loan.historical_loans_import_confirm') }}">
        <input type="hidden" name="token" value="{{ token }}">
        <button class="btn btn-success">
          <i class="bi bi-check2-circle me-1"></i> Confirm Import
        </button>
      </form>
      {% else %}
      <div class="text-muted">Fix errors and upload again to import.</div>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}