{% 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-file-earmark-text me-2"></i> Loan #{{ loan.id }}
      </h4>
      <div class="text-muted small">
        {{ loan.display_loan_type or loan.loan_type or "Loan" }} · Applied on
        {{ loan.requested_on.strftime("%d-%m-%Y") if loan.requested_on 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 %}

      {% if admin_view %}
        <a href="{{ url_for('loan.admin_dashboard') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-arrow-left-short"></i> Back to Admin
        </a>
      {% else %}
        <a href="{{ url_for('loan.my_loans') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-arrow-left-short"></i> Back
        </a>
      {% endif %}
    </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>

  <!-- TABS -->
  <div class="card shadow-sm">
    <div class="card-header bg-light">
      <ul class="nav nav-tabs card-header-tabs small" id="loanTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="overview-tab" data-bs-toggle="tab"
                  data-bs-target="#overview-pane" type="button" role="tab">
            Overview
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="emi-tab" data-bs-toggle="tab"
                  data-bs-target="#emi-pane" type="button" role="tab">
            EMI Schedule
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="history-tab" data-bs-toggle="tab"
                  data-bs-target="#history-pane" type="button" role="tab">
            History
          </button>
        </li>
        {% if not admin_view and loan.status in ['approved','active'] %}
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="actions-tab" data-bs-toggle="tab"
                  data-bs-target="#actions-pane" type="button" role="tab">
            Actions
          </button>
        </li>
        {% endif %}
      </ul>
    </div>

    <div class="card-body">
      <div class="tab-content">

        <!-- OVERVIEW TAB -->
        <div class="tab-pane fade show active" id="overview-pane" role="tabpanel" aria-labelledby="overview-tab">
          <div class="row g-3">
            <div class="col-lg-6">
              <div class="border rounded p-3 mb-3 small">
                <h6 class="fw-semibold mb-2">Loan Details</h6>
                <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>
                <div class="row mb-1">
                  <div class="col-6 text-muted">Total Paid</div>
                  <div class="col-6 text-end">
                    ₹{{ "%.2f"|format(total_paid or 0) }}
                  </div>
                </div>
                <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>

              <div class="border rounded p-3 small">
                <h6 class="fw-semibold mb-2">Reason / Notes</h6>
                <p class="mb-2"><strong>Reason:</strong></p>
                <p class="mb-3">
                  {{ loan.reason or "Not provided." }}
                </p>

                {% if loan.remarks %}
                  <p class="mb-2"><strong>HR / Manager Remarks:</strong></p>
                  <p class="mb-0">
                    {{ loan.remarks }}
                  </p>
                {% endif %}
              </div>

              {% if not admin_view and can_cancel %}
              <div class="mt-3">
                <form method="post" action="{{ url_for('loan.cancel', loan_id=loan.id) }}"
                      onsubmit="return confirm('Are you sure you want to cancel this loan request?');">
                  {{ csrf_token() if csrf_token is defined }}
                  <button class="btn btn-outline-danger btn-sm">
                    <i class="bi bi-x-circle me-1"></i> Cancel Request
                  </button>
                </form>
              </div>
              {% endif %}
            </div>

            <div class="col-lg-6">
              <div class="border rounded p-3 small">
                <h6 class="fw-semibold mb-2">Approval Details</h6>
                <div class="mb-2">
                  <span class="text-muted">Approved By: </span>
                  <span class="fw-semibold">
                    {{ loan.approved_by.full_name if loan.approved_by else "-" }}
                  </span>
                </div>
                <div class="mb-2">
                  <span class="text-muted">Approved On: </span>
                  {{ loan.approved_on.strftime("%d-%m-%Y") if loan.approved_on else "-" }}
                </div>
                <div class="mb-2">
                  <span class="text-muted">HR / Manager Remarks:</span>
                  <div class="border rounded p-2 mt-1 bg-light-subtle">
                    {{ loan.remarks or "No remarks." }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- EMI TAB -->
        <div class="tab-pane fade" id="emi-pane" role="tabpanel" aria-labelledby="emi-tab">
          <div class="table-responsive" style="max-height: 350px; 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 class="text-end">EMI (₹)</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% if emi_schedule %}
                  {% for emi in emi_schedule %}
                    {% set status = (emi.status if emi.status is defined else ('paid' if emi.paid else 'pending')) %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>{{ emi.month_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="4" class="text-center text-muted py-3">
                      EMI schedule not available.
                    </td>
                  </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>

        <!-- HISTORY TAB -->
        <div class="tab-pane fade" id="history-pane" role="tabpanel" aria-labelledby="history-tab">
          <div class="row g-3">
            <div class="col-lg-6">
              <h6 class="fw-semibold small mb-2">Skip EMI Requests</h6>
              <div class="border rounded p-2 small" style="max-height: 220px; overflow-y:auto;">
                {% if skip_requests is defined and 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.</div>
                {% endif %}
              </div>
            </div>

            <div class="col-lg-6">
              <h6 class="fw-semibold small mb-2">Extra / Offline Payments</h6>
              <div class="border rounded p-2 small" style="max-height: 220px; overflow-y:auto;">
                {% if extra_payment_requests is defined and 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.</div>
                {% endif %}
              </div>
            </div>
          </div>

          {% if transactions is defined and transactions %}
          <hr class="my-3">
          <h6 class="fw-semibold small mb-2">Payment Transactions</h6>
          <div class="border rounded p-2 small" style="max-height: 220px; overflow-y:auto;">
            <ul class="list-unstyled mb-0">
              {% for t in transactions %}
                <li class="mb-2">
                  <div class="d-flex justify-content-between">
                    <div>
                      {{ t.txn_date.strftime("%d-%m-%Y") if t.txn_date else "-" }}
                      · {{ t.txn_type|replace('_',' ')|title }}
                    </div>
                    <div class="fw-semibold">
                      {{ t.direction }} ₹{{ "%.2f"|format(t.amount or 0) }}
                    </div>
                  </div>
                  {% if t.reference %}
                    <div class="text-muted">Ref: {{ t.reference }}</div>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
        </div>

        <!-- ACTIONS TAB (employee only) -->
        {% if not admin_view and loan.status in ['approved','active'] %}
        <div class="tab-pane fade" id="actions-pane" role="tabpanel" aria-labelledby="actions-tab">
          <div class="row g-3">
            <div class="col-lg-6">
              <div class="border rounded p-3 small">
                <h6 class="fw-semibold mb-2">Request to Skip EMI</h6>
                {% set pending_emis = emi_schedule | selectattr('can_skip', 'equalto', True) | list %}
                {% if pending_emis %}
                  <form method="post" action="{{ url_for('loan.request_skip_emi', loan_id=loan.id) }}">
                    {{ csrf_token() if csrf_token is defined }}
                    <div class="mb-2">
                      <label class="form-label small">Select EMI</label>
                      <select name="emi_id" class="form-select form-select-sm" required>
                        {% for emi in pending_emis %}
                          {% set status = (emi.status if emi.status is defined else ('paid' if emi.paid else 'pending')) %}
                          {% if status != 'skipped' %}
                          <option value="{{ emi.id }}">
                            {{ emi.month_label }} – ₹{{ "%.2f"|format(emi.amount or 0) }}
                          </option>
                          {% endif %}
                        {% endfor %}
                      </select>
                    </div>
                    <div class="mb-2">
                      <label class="form-label small">Reason</label>
                      <textarea name="reason" rows="2"
                                class="form-control form-control-sm"
                                placeholder="Explain why you want to skip this EMI"
                                required></textarea>
                    </div>
                    <button class="btn btn-outline-warning btn-sm">
                      Submit Skip Request
                    </button>
                  </form>
                {% else %}
                  <p class="text-muted mb-0">No pending EMIs available for skip request.</p>
                {% endif %}
              </div>
            </div>

            <div class="col-lg-6">
              <div class="border rounded p-3 small">
                <h6 class="fw-semibold mb-2">Extra / Offline Payment Request</h6>
                <form method="post" action="{{ url_for('loan.request_extra_payment', loan_id=loan.id) }}">
                  {{ csrf_token() if csrf_token is defined }}
                  <div class="row g-2">
                    <div class="col-md-6">
                      <label class="form-label small mb-1">Amount (₹)</label>
                      <input type="number" step="0.01" min="1"
                             class="form-control form-control-sm"
                             name="amount" required>
                    </div>
                    <div class="col-md-6">
                      <label class="form-label small mb-1">Payment Mode</label>
                      <select name="payment_mode" class="form-select form-select-sm">
                        <option value="Cash">Cash</option>
                        <option value="Cheque">Cheque</option>
                        <option value="Online">Online / UPI</option>
                        <option value="Other">Other</option>
                      </select>
                    </div>
                  </div>
                  <div class="mt-2">
                    <label class="form-label small mb-1">Reference / Details</label>
                    <input type="text" name="payment_ref"
                           class="form-control form-control-sm"
                           placeholder="Cheque no / txn id / remarks">
                  </div>
                  <button class="btn btn-outline-primary btn-sm mt-2">
                    Submit Extra Payment Request
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
        {% endif %}

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

</div>
{% endblock %}