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

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-list-check me-1"></i>
      Loan Types
    </h4>
    <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 Admin
    </a>
  </div>

  <div class="row g-3">
    <!-- Add / edit form -->
    <div class="col-lg-4">
      <div class="card shadow-sm">
        <div class="card-header bg-light fw-semibold">
          Add / Edit Loan Type
        </div>
        <div class="card-body">
          <form method="post" id="loanTypeForm">
            {{ csrf_token() if csrf_token is defined }}

            <input type="hidden" name="id" id="lt-id">

            <div class="mb-2">
              <label class="form-label small mb-1">Internal Name<span class="text-danger">*</span></label>
              <input type="text" name="name" id="lt-name"
                     class="form-control form-control-sm"
                     placeholder="e.g. personal_loan" required>
              <div class="form-text small">
                Used internally; lowercase, no spaces.
              </div>
            </div>

            <div class="mb-2">
              <label class="form-label small mb-1">Label<span class="text-danger">*</span></label>
              <input type="text" name="label" id="lt-label"
                     class="form-control form-control-sm"
                     placeholder="e.g. Personal Loan" required>
            </div>

            <div class="mb-2">
              <label class="form-label small mb-1">Description</label>
              <textarea name="description" id="lt-description"
                        rows="2"
                        class="form-control form-control-sm"
                        placeholder="Shown as help text / tooltip."></textarea>
            </div>

            <div class="row g-2 mb-2">
              <div class="col-6">
                <label class="form-label small mb-1">Max Amount (₹)</label>
                <input type="number" step="0.01" name="max_amount" id="lt-max-amount"
                       class="form-control form-control-sm">
              </div>
              <div class="col-6">
                <label class="form-label small mb-1">Max Tenure (months)</label>
                <input type="number" name="max_tenure_months" id="lt-max-tenure"
                       class="form-control form-control-sm">
              </div>
            </div>

            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" value="1"
                     id="lt-is-active" name="is_active" checked>
              <label class="form-check-label small" for="lt-is-active">
                Active (visible in Apply Loan dropdown)
              </label>
            </div>

            <div class="d-flex justify-content-end gap-2">
              <button type="button" class="btn btn-outline-secondary btn-sm" id="lt-reset">
                Reset
              </button>
              <button type="submit" class="btn btn-primary btn-sm">
                <i class="bi bi-save me-1"></i> Save
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- List of types -->
    <div class="col-lg-8">
      <div class="card shadow-sm">
        <div class="card-header bg-light fw-semibold">
          Existing Loan Types
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0 align-middle">
            <thead class="table-light">
              <tr>
                <th>#</th>
                <th>Label</th>
                <th>Internal Name</th>
                <th>Limits</th>
                <th>Status</th>
                <th class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% if types %}
                {% for lt in types %}
                  <tr data-lt='{
                    "id": {{ lt.id }},
                    "name": "{{ lt.name }}",
                    "label": "{{ lt.label|e }}",
                    "description": "{{ (lt.description or '')|e }}",
                    "max_amount": "{{ lt.max_amount or '' }}",
                    "max_tenure_months": "{{ lt.max_tenure_months or '' }}",
                    "is_active": {{ 1 if lt.is_active else 0 }}
                  }'>
                    <td>{{ loop.index }}</td>
                    <td>
                      <div class="fw-semibold">{{ lt.label }}</div>
                      {% if lt.description %}
                        <div class="small text-muted">{{ lt.description }}</div>
                      {% endif %}
                    </td>
                    <td class="small text-muted">{{ lt.name }}</td>
                    <td class="small">
                      {% if lt.max_amount %}
                        <div>Max Amt: ₹{{ "%.0f"|format(lt.max_amount) }}</div>
                      {% endif %}
                      {% if lt.max_tenure_months %}
                        <div>Max Tenure: {{ lt.max_tenure_months }}m</div>
                      {% endif %}
                      {% if not lt.max_amount and not lt.max_tenure_months %}
                        <span class="text-muted">Not set</span>
                      {% endif %}
                    </td>
                    <td>
                      {% if lt.is_active %}
                        <span class="badge bg-success-subtle text-success">Active</span>
                      {% else %}
                        <span class="badge bg-secondary-subtle text-secondary">Inactive</span>
                      {% endif %}
                    </td>
                    <td class="text-end">
                      <button type="button"
                              class="btn btn-outline-primary btn-sm btn-edit-lt">
                        Edit
                      </button>
                      <form method="post"
                            action="{{ url_for('loan.toggle_loan_type', type_id=lt.id) }}"
                            class="d-inline">
                        {{ csrf_token() if csrf_token is defined }}
                        <button type="submit"
                                class="btn btn-outline-secondary btn-sm">
                          {% if lt.is_active %}Deactivate{% else %}Activate{% endif %}
                        </button>
                      </form>
                    </td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="6" class="text-center text-muted py-3">
                    No loan types defined yet.
                  </td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
  // Prefill form when clicking "Edit"
  document.querySelectorAll(".btn-edit-lt").forEach(function(btn) {
    btn.addEventListener("click", function() {
      const tr = btn.closest("tr");
      const data = JSON.parse(tr.getAttribute("data-lt"));

      document.getElementById("lt-id").value = data.id || "";
      document.getElementById("lt-name").value = data.name || "";
      document.getElementById("lt-label").value = data.label || "";
      document.getElementById("lt-description").value = data.description || "";
      document.getElementById("lt-max-amount").value = data.max_amount || "";
      document.getElementById("lt-max-tenure").value = data.max_tenure_months || "";
      document.getElementById("lt-is-active").checked = !!data.is_active;
    });
  });

  // Reset button clears form
  document.getElementById("lt-reset").addEventListener("click", function() {
    document.getElementById("loanTypeForm").reset();
    document.getElementById("lt-id").value = "";
    document.getElementById("lt-is-active").checked = true;
  });
</script>
{% endblock %}