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

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-bank me-2"></i>
        Loan Approval – #{{ loan.id }}
      </h4>
      <div class="text-muted small">
        {{ loan.display_loan_type or loan.loan_type or "Loan" }}
        · Employee: {{ loan.employee.full_name if loan.employee else "-" }}
      </div>
    </div>

    <div class="d-flex gap-2 align-items-center">
      {% set st = (loan.status or '').lower() %}
      {% if st in ['approved', 'active'] %}
        <span class="badge bg-success px-3 py-2">Approved / Active</span>
      {% elif st in ['requested', 'pending', 'under_review'] %}
        <span class="badge bg-warning text-dark px-3 py-2">Pending Approval</span>
      {% elif st == 'rejected' %}
        <span class="badge bg-danger px-3 py-2">Rejected</span>
      {% elif st == 'closed' %}
        <span class="badge bg-secondary px-3 py-2">Closed</span>
      {% else %}
        <span class="badge bg-light text-dark px-3 py-2">{{ loan.status or "Unknown" }}</span>
      {% endif %}

      <a href="{{ url_for('loan.admin_dashboard') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left-short"></i> Back to Loan Dashboard
      </a>
    </div>
  </div>

  <!-- Top summary row -->
  <div class="row g-3 mb-3">
    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body py-2">
          <div class="text-muted small">Loan Amount</div>
          <div class="fw-semibold fs-5">₹{{ "%.2f"|format(loan_amount or 0) }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body py-2">
          <div class="text-muted small">Tenure</div>
          <div class="fw-semibold fs-5">{{ tenure_months or "-" }} months</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body py-2">
          <div class="text-muted small">Monthly EMI</div>
          <div class="fw-semibold fs-5">₹{{ "%.2f"|format(emi_amount or 0) }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card shadow-sm h-100">
        <div class="card-body py-2">
          <div class="text-muted small">Outstanding</div>
          <div class="fw-semibold fs-5 {% if outstanding > 0 %}text-danger{% endif %}">
            ₹{{ "%.2f"|format(outstanding or 0) }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Row: Employee details + Approval form -->
  <div class="row g-3 mb-3">

    <!-- Employee & request details -->
    <div class="col-lg-6">
      <div class="card shadow-sm mb-3">
        <div class="card-header bg-light fw-semibold small">Employee Details</div>
        <div class="card-body small">
          <div class="fw-semibold">{{ loan.employee.full_name if loan.employee else "-" }}</div>
          <div class="text-muted">
            Code: {{ loan.employee.employee_code if loan.employee else "-" }}
          </div>
          <div class="text-muted">
            Department: {{ loan.employee.department.name if loan.employee and loan.employee.department else "-" }}
          </div>
          <div class="text-muted">
            Email: {{ loan.employee.email if loan.employee else "-" }}
          </div>
        </div>
      </div>

      <div class="card shadow-sm">
        <div class="card-header bg-light fw-semibold small">Loan Request Details</div>
        <div class="card-body small">
          <div class="row mb-1">
            <div class="col-6 text-muted">Type</div>
            <div class="col-6 text-end">
              {{ loan.display_loan_type or loan.loan_type or "-" }}
            </div>
          </div>
          <div class="row mb-1">
            <div class="col-6 text-muted">Requested Amount</div>
            <div class="col-6 text-end">
              ₹{{ "%.2f"|format(loan.requested_amount or 0) }}
            </div>
          </div>
          <div class="row mb-1">
            <div class="col-6 text-muted">Requested Tenure</div>
            <div class="col-6 text-end">
              {{ loan.requested_tenure_months or "-" }} months
            </div>
          </div>
          <div class="row mb-1">
            <div class="col-6 text-muted">Requested On</div>
            <div class="col-6 text-end">
              {{ loan.requested_on.strftime("%d-%b-%Y") if loan.requested_on else "-" }}
            </div>
          </div>
          <div class="row mb-1">
            <div class="col-6 text-muted">Start Month</div>
            <div class="col-6 text-end">
              {{ loan.start_month.strftime("%b %Y") if loan.start_month else "-" }}
            </div>
          </div>

          {# NEW: Status + Approved By #}
          <div class="row mb-1">
            <div class="col-6 text-muted">Status</div>
            <div class="col-6 text-end">
              {{ (loan.status or "Unknown")|replace("_"," ")|title }}
            </div>
          </div>
          <div class="row mb-1">
            <div class="col-6 text-muted">Approved By</div>
            <div class="col-6 text-end">
              {{ loan.approved_by.full_name if loan.approved_by else "-" }}
            </div>
          </div>

          {% if loan.reason %}
            <hr class="my-2">
            <div class="text-muted">Reason:</div>
            <div>{{ loan.reason }}</div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Approve / Reject form -->
    <div class="col-lg-6">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-light fw-semibold small">Approve / Reject Loan</div>
        <div class="card-body small">
          <form method="post" action="{{ url_for('loan.admin_detail', loan_id=loan.id) }}">
            {{ csrf_token() if csrf_token is defined }}

            <div class="row g-2 mb-2">
              <div class="col-md-3">
                <label class="form-label small mb-1">Sanction Amount (₹)</label>
                <input type="number" step="0.01" min="0"
                      name="sanctioned_amount"
                      class="form-control form-control-sm"
                      value="{{ loan.sanctioned_amount or loan.requested_amount }}">
              </div>
              <div class="col-md-3">
                <label class="form-label small mb-1">Tenure (months)</label>
                <input type="number" min="1"
                      name="tenure_months"
                      class="form-control form-control-sm"
                      value="{{ loan.tenure_months or loan.requested_tenure_months }}">
              </div>
              <div class="col-md-3">
                <label class="form-label small mb-1">EMI Amount (₹)</label>
                {% set base_amt = loan.sanctioned_amount or loan.requested_amount %}
                {% set base_ten = loan.tenure_months or loan.requested_tenure_months %}
                {% if loan.emi_amount %}
                  {% set base_emi = loan.emi_amount %}
                {% elif base_amt and base_ten %}
                  {% set base_emi = base_amt / base_ten %}
                {% else %}
                  {% set base_emi = '' %}
                {% endif %}
                <input type="number" step="500" min="500"
                      name="emi_amount"
                      class="form-control form-control-sm"
                      value="{{ base_emi }}"
                      placeholder="Must be multiple of 500">
              </div>
              <div class="col-md-3">
                <label class="form-label small mb-1">Start Month</label>
                {% set start_val = '' %}
                {% if loan.start_month %}
                  {% set start_val = loan.start_month.strftime('%Y-%m') %}
                {% elif loan.requested_on %}
                  {% set start_val = loan.requested_on.strftime('%Y-%m') %}
                {% endif %}
                <input type="month"
                      name="start_month"
                      class="form-control form-control-sm"
                      value="{{ start_val }}">
              </div>
            </div>

            <div class="mb-2">
              <small class="text-muted">
                You can adjust amount, tenure, and start month before approval.
                EMI schedule will be rebuilt automatically.
              </small>
            </div>

            <div class="mb-3">
              <label class="form-label small mb-1">Approver Remarks (optional)</label>
              <textarea name="approver_remarks"
                        rows="3"
                        class="form-control form-control-sm"
                        placeholder="Any notes for this decision...">{{ loan.remarks or '' }}</textarea>
            </div>

            <div class="d-flex justify-content-between align-items-center">
              <div class="small text-muted">
                On approval, EMI schedule &amp; disbursement transaction will be created automatically.
              </div>
              <div class="d-flex gap-2">
                <button type="submit"
                        name="action"
                        value="reject"
                        class="btn btn-outline-danger btn-sm">
                  <i class="bi bi-x-circle me-1"></i> Reject
                </button>
                <button type="submit"
                        name="action"
                        value="approve"
                        class="btn btn-success btn-sm">
                  <i class="bi bi-check-circle me-1"></i> Approve
                </button>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Second row: EMI + Skip/Extra + Previous loans -->
  <div class="row g-3 mb-3">
    <!-- EMI schedule -->
    <div class="col-lg-6">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-light fw-semibold small">EMI Schedule</div>
        <div class="card-body p-0">
          <div class="table-responsive" style="max-height: 260px; overflow-y:auto;">
            <table class="table table-sm table-hover mb-0 align-middle">
              <thead class="table-light">
                <tr>
                  <th>#</th>
                  <th>Month</th>
                  <th>Due Date</th>
                  <th class="text-end">Amount (₹)</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% if emi_schedule %}
                  {% for emi in emi_schedule %}
                    {% set status = emi.status %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>{{ emi.month_label }}</td>
                      <td>{{ emi.due_date_label }}</td>
                      <td class="text-end">₹{{ "%.2f"|format(emi.amount or 0) }}</td>
                      <td>
                        {% if status == 'paid' or emi.paid %}
                          <span class="badge bg-success">Paid</span>
                        {% elif status == 'skipped' %}
                          <span class="badge bg-secondary">Skipped</span>
                        {% elif emi.is_overdue and status == 'pending' %}
                          <span class="badge bg-danger">Overdue</span>
                        {% else %}
                          <span class="badge bg-warning text-dark">Pending</span>
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                {% else %}
                  <tr>
                    <td colspan="5" class="text-center text-muted py-3">
                      EMI schedule will be created on approval.
                    </td>
                  </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Skip / extra + previous loans -->
    <div class="col-lg-6">
      <div class="card shadow-sm mb-3">
        <div class="card-header bg-light fw-semibold small">Skip EMI Requests</div>
        <div class="card-body small" style="max-height: 130px; overflow-y:auto;">
          {% if skip_requests %}
            {% for r in skip_requests %}
              <div class="mb-2 pb-2 border-bottom last:border-0">
                <div class="d-flex justify-content-between">
                  <div>
                    <strong>{{ r.request_month.strftime("%b %Y") if r.request_month else "-" }}</strong>
                  </div>
                  <div>
                    {% if r.status == 'approved' %}
                      <span class="badge bg-success">Approved</span>
                    {% elif r.status == 'rejected' %}
                      <span class="badge bg-danger">Rejected</span>
                    {% else %}
                      <span class="badge bg-warning text-dark">Pending</span>
                    {% endif %}
                  </div>
                </div>
                {% if r.reason %}
                  <div class="text-muted">Reason: {{ r.reason }}</div>
                {% endif %}
                {% if r.remarks %}
                  <div class="text-muted">HR Remarks: {{ r.remarks }}</div>
                {% endif %}
              </div>
            {% endfor %}
          {% else %}
            <div class="text-muted">No skip requests for this loan.</div>
          {% endif %}
        </div>
      </div>

      <div class="card shadow-sm mb-3">
        <div class="card-header bg-light fw-semibold small">Extra / Offline Payment Requests</div>
        <div class="card-body small" style="max-height: 130px; overflow-y:auto;">
          {% if extra_payment_requests %}
            {% for r in extra_payment_requests %}
              <div class="mb-2 pb-2 border-bottom last:border-0">
                <div class="d-flex justify-content-between">
                  <div>
                    <strong>₹{{ "%.2f"|format(r.amount or 0) }}</strong>
                    {% if r.payment_mode %}
                      <span class="text-muted"> · {{ r.payment_mode }}</span>
                    {% endif %}
                  </div>
                  <div>
                    {% if r.status == 'approved' %}
                      <span class="badge bg-success">Approved</span>
                    {% elif r.status == 'rejected' %}
                      <span class="badge bg-danger">Rejected</span>
                    {% else %}
                      <span class="badge bg-warning text-dark">Pending</span>
                    {% endif %}
                  </div>
                </div>
                {% if r.payment_ref %}
                  <div class="text-muted">Ref: {{ r.payment_ref }}</div>
                {% endif %}
                {% if r.remarks %}
                  <div class="text-muted">HR Remarks: {{ r.remarks }}</div>
                {% endif %}
              </div>
            {% endfor %}
          {% else %}
            <div class="text-muted">No extra payment requests for this loan.</div>
          {% endif %}
        </div>
      </div>

      {% if previous_loans %}
      <div class="card shadow-sm">
        <div class="card-header bg-light fw-semibold small">Previous Loans for this Employee</div>
        <div class="card-body p-0">
          <div class="table-responsive" style="max-height: 180px; overflow-y:auto;">
            <table class="table table-sm mb-0 align-middle">
              <thead class="table-light">
                <tr>
                  <th>ID</th>
                  <th>Type</th>
                  <th class="text-end">Amount (₹)</th>
                  <th class="text-end">Tenure</th>
                  <th class="text-end">Paid (₹)</th>
                  <th class="text-end">Outstanding (₹)</th>
                  <th>Last EMI Paid</th>
                </tr>
              </thead>
              <tbody>
                {% for row in previous_loans %}
                  <tr>
                    <td>#{{ row.loan.id }}</td>
                    <td>{{ row.loan.display_loan_type or row.loan.loan_type }}</td>
                    <td class="text-end">{{ "%.2f"|format(row.loan_amount or 0) }}</td>
                    <td class="text-end">{{ row.tenure_months or '-' }}</td>
                    <td class="text-end">{{ "%.2f"|format(row.paid_amount or 0) }}</td>
                    <td class="text-end">{{ "%.2f"|format(row.outstanding_amount or 0) }}</td>
                    <td>
                      {% if row.last_paid_emi_date %}
                        {{ row.last_paid_emi_date.strftime('%d-%b-%Y') }}
                      {% else %}
                        –
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {% endif %}

    </div>
  </div>

</div>
{% endblock %}