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

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-wallet2 me-2"></i> My Loans
    </h4>
    <a href="{{ url_for('loan.apply_loan') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-circle me-1"></i> Apply for Loan
    </a>
  </div>

  <!-- Summary cards -->
  <div class="row g-3 mb-3">
    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <div class="text-muted small">Total Active Loan</div>
              <div class="fs-5 fw-semibold">
                ₹{{ "%.2f"|format(summary.total_active_amount or 0) }}
              </div>
            </div>
            <div class="rounded-circle bg-primary-subtle p-2">
              <i class="bi bi-cash-stack fs-4 text-primary"></i>
            </div>
          </div>
        </div>
      </div>
    </div><!-- col -->

    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <div class="text-muted small">Pending Applications</div>
          <div class="fs-5 fw-semibold">
            {{ summary.pending_count or 0 }}
          </div>
        </div>
      </div>
    </div><!-- col -->

    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <div class="text-muted small">Monthly EMI</div>
          <div class="fs-5 fw-semibold">
            ₹{{ "%.2f"|format(summary.total_monthly_emi or 0) }}
          </div>
        </div>
      </div>
    </div><!-- col -->

    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <div class="text-muted small">Overdue EMIs</div>
          <div class="fs-5 fw-semibold text-danger">
            {{ summary.overdue_emi_count or 0 }}
          </div>
        </div>
      </div>
    </div><!-- col -->
  </div>

  {# Point 1: EMI due banner - visible only on/after 25th (route fills summary.current_month_emis) #}
  {% if summary.current_month_emis and summary.current_month_emis|length > 0 %}
  <div class="alert alert-warning shadow-sm d-flex align-items-start gap-2 mb-3">
    <i class="bi bi-bell-fill mt-1"></i>
    <div class="w-100">
      <div class="fw-semibold mb-1">This Month’s EMI Due</div>

      <div class="list-group list-group-flush">
        {% for item in summary.current_month_emis %}
          <div class="list-group-item px-0">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <div class="fw-semibold">
                  {{ item.loan.display_loan_type or item.loan.loan_type or "Loan" }}
                </div>
                <div class="small text-muted">
                  Loan #{{ item.loan.id }} · Due on {{ item.due_date.strftime('%d-%b-%Y') }}
                </div>
              </div>
              <div class="fw-semibold">
                ₹{{ "%.2f"|format(item.emi_amount or 0) }}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>

      <div class="small text-muted mt-2">
        <i class="bi bi-info-circle me-1"></i>
        EMI details are shown from the 25th of each month.
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Loans list -->
  <div class="card shadow-sm">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
      <span class="fw-semibold">Loan History</span>
      <form class="d-flex gap-2" method="get">
        <input type="text"
               name="q"
               value="{{ request.args.get('q','') }}"
               class="form-control form-control-sm"
               placeholder="Search by type / status">
        <button class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-search"></i>
        </button>
      </form>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>#</th>
            <th>Loan Type</th>
            <th>Applied On</th>
            <th>Amount</th>
            <th>Tenure</th>
            <th>EMI</th>
            <th>Status</th>
            <th>Approved By</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% if loans %}
            {% for loan in loans %}
              {% set amt = loan.sanctioned_amount or loan.requested_amount %}
              {% set tenure = loan.tenure_months or loan.requested_tenure_months %}
              {% if loan.emi_amount %}
                {% set emi = loan.emi_amount %}
              {% elif amt and tenure %}
                {% set emi = amt / tenure %}
              {% else %}
                {% set emi = 0 %}
              {% endif %}

              {% set st = (loan.status or '')|lower %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>{{ loan.display_loan_type or loan.loan_type or "-" }}</td>
                <td>{{ loan.requested_on.strftime("%d-%m-%Y") if loan.requested_on else "-" }}</td>
                <td>₹{{ "%.2f"|format(amt or 0) }}</td>
                <td>{{ tenure or '-' }} months</td>
                <td>₹{{ "%.2f"|format(emi or 0) }}</td>
                <td>
                  {% if st in ['requested', 'pending', 'under_review'] %}
                    <span class="badge bg-warning text-dark">Pending</span>
                  {% elif st in ['approved', 'active'] %}
                    <span class="badge bg-success">Approved / Active</span>
                  {% elif st == 'rejected' %}
                    <span class="badge bg-danger">Rejected</span>
                  {% elif st == 'closed' %}
                    <span class="badge bg-secondary">Closed</span>
                  {% elif st == 'cancelled' %}
                    <span class="badge bg-light text-muted border">Cancelled</span>
                  {% else %}
                    <span class="badge bg-light text-muted">{{ loan.status or 'Unknown' }}</span>
                  {% endif %}
                </td>
                <td>{{ loan.approved_by.full_name if loan.approved_by else "-" }}</td>
                <td class="text-end">
                  <a href="{{ url_for('loan.loan_detail', loan_id=loan.id) }}"
                     class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-eye"></i>
                  </a>
                </td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="9" class="text-center text-muted py-3">
                No loan records found.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}