<!-- Main Card -->
  <div class="card mb-4">
    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#loan-calculator">
      <h3 class="mb-0">LIC House Loan EMI Calculator</h3>
    </div>

    <div id="loan-calculator" class="collapse show">
      <div class="card-body">
        <form id="loanForm">
          <div class="row g-4">
            <div class="col-md-4">
              <label for="amount" class="form-label">Loan Amount (₹)</label>
              <input type="number" class="form-control" id="amount" placeholder="e.g. 5000000" required>
            </div>
            <div class="col-md-4">
              <label for="rate" class="form-label">Annual Interest Rate (%)</label>
              <input type="number" class="form-control" id="rate" step="0.01" placeholder="e.g. 8.5" required>
            </div>
            <div class="col-md-4">
              <label for="tenure" class="form-label">Tenure (Years)</label>
              <input type="number" class="form-control" id="tenure" placeholder="e.g. 20" required>
            </div>
          </div>
          <button type="submit" class="btn btn-primary w-100 mt-4">Calculate EMI</button>
        </form>

        <!-- Results -->
        <div id="results" class="mt-4" style="display:none;">
          <h5>Results:</h5>
          <p><strong>Monthly EMI:</strong> ₹<span id="emi"></span></p>
          <p><strong>Total Interest:</strong> ₹<span id="interest"></span></p>
          <p><strong>Total Payment (Principal + Interest):</strong> ₹<span id="total"></span></p>
          
          <!-- Chart -->
          <div class="d-flex justify-content-center mt-3">
            <canvas id="emiChart" style="max-width:400px; max-height:400px;"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>