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

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-file-earmark-plus me-2"></i> Apply for Loan
    </h4>
    <a href="{{ url_for('loan.my_loans') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left-short"></i> Back to My Loans
    </a>
  </div>

  <div class="row g-3">
    <div class="col-lg-8">
      <div class="card shadow-sm">
        <div class="card-header bg-light fw-semibold">
          Loan Application
        </div>
        <div class="card-body">
          <form method="post" novalidate>
            {{ csrf_token() if csrf_token is defined }}

            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">Loan Type <span class="text-danger">*</span></label>
                <select class="form-select" name="loan_type" required>
                  <option value="">-- Select --</option>
                  {% for lt in loan_types %}
                    <option value="{{ lt.name }}"
                            {% if form_data.loan_type == lt.name %}selected{% endif %}>
                      {{ lt.label }}
                    </option>
                  {% endfor %}
                </select>
              </div>

              <div class="col-md-6">
                <label class="form-label">Loan Amount (₹) <span class="text-danger">*</span></label>
                <input
                  type="number"
                  step="0.01"
                  min="0"
                  class="form-control"
                  name="amount"
                  id="loanAmount"
                  value="{{ form_data.amount or '' }}"
                  required
                >
              </div>

              <div class="col-md-6">
                <label class="form-label">Tenure (Months) <span class="text-danger">*</span></label>
                <input
                  type="number"
                  min="1"
                  class="form-control"
                  name="tenure_months"
                  id="loanTenure"
                  value="{{ form_data.tenure_months or '' }}"
                  required
                >
              </div>

              <div class="col-md-6">
                <label class="form-label">Expected Start Month</label>
                <input
                  type="month"
                  class="form-control"
                  name="start_month"
                  value="{{ form_data.start_month or '' }}"
                >
              </div>

              <div class="col-12">
                <label class="form-label">Reason / Purpose <span class="text-danger">*</span></label>
                <textarea name="reason" rows="3" class="form-control" required>{{ form_data.reason or '' }}</textarea>
              </div>

              <div class="col-12">
                <label class="form-label">Additional Notes (optional)</label>
                <textarea name="notes" rows="2" class="form-control">{{ form_data.notes or '' }}</textarea>
              </div>

              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="1" id="policyCheck" name="accept_policy" required>
                  <label class="form-check-label small" for="policyCheck">
                    I confirm that I have read and agree to the company loan policy.
                  </label>
                </div>
              </div>
            </div>

            <div class="mt-3 d-flex justify-content-end gap-2">
              <button type="reset" class="btn btn-outline-secondary btn-sm">
                Reset
              </button>
              <button type="submit" class="btn btn-primary">
                <i class="bi bi-send me-1"></i> Submit Application
              </button>
            </div>

          </form>
        </div>
      </div>
    </div><!-- col -->

    <!-- Side summary / EMI preview -->
    <div class="col-lg-4">
      <div class="card shadow-sm mb-3">
        <div class="card-header bg-light fw-semibold">
          Estimated EMI
        </div>
        <div class="card-body">
          <p class="text-muted small mb-1">Based on entered amount & tenure:</p>
          <div class="fs-4 fw-semibold" id="emiValue">
            {{ estimated_emi or "₹0.00" }}
          </div>
          <p class="small text-muted mb-0">
            This is an indicative value. Final EMI will be as per HR approval and policy.
          </p>
        </div>
      </div>

      <div class="card shadow-sm">
        <div class="card-header bg-light fw-semibold">
          Loan Policy Snapshot
        </div>
        <div class="card-body small">
          {% if loan_settings and loan_settings.policy_html %}
            {{ loan_settings.policy_html | safe }}
          {% else %}
            <ul class="mb-0">
              <li>Maximum loan amount as per grade &amp; salary.</li>
              <li>EMI will be deducted from monthly salary.</li>
              <li>Pre-closure / part-payment as per HR policy.</li>
              <li>Approval is at HR/Management discretion.</li>
            </ul>
          {% endif %}
        </div>
      </div>
    </div><!-- col -->

  </div><!-- row -->
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script>
    (function () {
      const amountInput = document.getElementById("loanAmount");
      const tenureInput = document.getElementById("loanTenure");
      const emiEl = document.getElementById("emiValue");

      function formatINR(num) {
        if (!num || isNaN(num)) return "₹0.00";
        // basic formatting; you can replace with locale-based if needed
        return "₹" + num.toFixed(2);
      }

      function recalcEmi() {
        const amount = parseFloat(amountInput?.value || "0");
        const tenure = parseInt(tenureInput?.value || "0", 10);

        if (amount > 0 && tenure > 0) {
          // Simple EMI placeholder: no interest, just principal / months
          // Replace with your actual interest-based formula if needed.
          const emi = amount / tenure;
          emiEl.textContent = formatINR(emi);
        } else {
          emiEl.textContent = "₹0.00";
        }
      }

      if (amountInput && tenureInput && emiEl) {
        ["input", "change"].forEach(evt => {
          amountInput.addEventListener(evt, recalcEmi);
          tenureInput.addEventListener(evt, recalcEmi);
        });
        // Initial calculation if there is prefilled data
        recalcEmi();
      }
    })();
  </script>
{% endblock %}