{% extends "base.html" %}
{% block title %}Loan Calculator — Capital Bridge Finance{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/calculator.css') }}">
{% endblock %}

{% block content %}

<!-- Hero -->
<section class="calc-hero" aria-label="Calculator page header">
  <div class="container">
    <h1>Business Loan Calculator</h1>
    <p>Instantly estimate your repayments across different loan amounts, terms, and types.</p>
  </div>
</section>

<!-- Calculator -->
<section class="calc-section">
  <div class="container">
    <div class="calc-grid">

      <!-- ── Left: Controls ── -->
      <div class="calc-controls">
        <h2>Configure Your Loan</h2>

        <!-- Loan type tabs -->
        <div class="loan-type-tabs" role="tablist" aria-label="Loan type">
          <button class="loan-type-tab active" data-type="unsecured" role="tab" aria-selected="true">Unsecured</button>
          <button class="loan-type-tab" data-type="secured" role="tab">Secured</button>
          <button class="loan-type-tab" data-type="equipment" role="tab">Equipment</button>
          <button class="loan-type-tab" data-type="property" role="tab">Property</button>
        </div>

        <!-- Loan amount -->
        <div class="slider-group">
          <div class="slider-header">
            <span class="slider-label">Loan Amount</span>
            <span class="slider-value">
              $<input type="text" id="amountInput" value="250,000"
                style="background:none;border:none;outline:none;font:inherit;color:inherit;width:100px;text-align:right;cursor:pointer;"
                aria-label="Loan amount in AUD">
            </span>
          </div>
          <div class="slider-track">
            <input type="range" class="range-slider" id="amountSlider"
              min="10000" max="5000000" step="5000" value="250000"
              aria-label="Loan amount slider">
          </div>
          <div class="slider-range-labels">
            <span>$10,000</span>
            <span>$5,000,000</span>
          </div>
        </div>

        <!-- Loan term -->
        <div class="slider-group">
          <div class="slider-header">
            <span class="slider-label">Loan Term</span>
            <span class="slider-value" id="termDisplay">36 mo</span>
          </div>
          <div class="slider-track">
            <input type="range" class="range-slider" id="termSlider"
              min="6" max="84" step="6" value="36"
              aria-label="Loan term slider">
          </div>
          <div class="slider-range-labels">
            <span>6 months</span>
            <span>84 months</span>
          </div>
          <div class="term-presets" role="group" aria-label="Preset terms">
            <button class="term-preset" data-months="12">1 yr</button>
            <button class="term-preset active" data-months="36">3 yrs</button>
            <button class="term-preset" data-months="60">5 yrs</button>
            <button class="term-preset" data-months="84">7 yrs</button>
          </div>
        </div>

        <!-- Rate display -->
        <div class="slider-group">
          <div class="slider-label" style="margin-bottom: 0.75rem;">Interest Rate</div>
          <div class="rate-display">
            <div class="rate-display-left">
              <div class="rate-display-label" id="rateLabel">Representative Rate</div>
              <div class="rate-display-rate">
                <span id="rateDisplay">12.50</span><span>% p.a.</span>
              </div>
            </div>
            <span class="rate-badge" id="rateBadge">p.a.</span>
          </div>
        </div>

        <!-- Repayment frequency -->
        <div class="freq-section">
          <div class="freq-label">Repayment Frequency</div>
          <div class="radio-group" role="radiogroup" aria-label="Repayment frequency">
            <div class="radio-pill">
              <input type="radio" name="frequency" id="freq_monthly" value="monthly" checked>
              <label for="freq_monthly">Monthly</label>
            </div>
            <div class="radio-pill">
              <input type="radio" name="frequency" id="freq_fortnightly" value="fortnightly">
              <label for="freq_fortnightly">Fortnightly</label>
            </div>
            <div class="radio-pill">
              <input type="radio" name="frequency" id="freq_weekly" value="weekly">
              <label for="freq_weekly">Weekly</label>
            </div>
          </div>
        </div>
      </div>

      <!-- ── Right: Results ── -->
      <div class="calc-results">
        <!-- Main results card -->
        <div class="results-card">
          <div class="results-card-header">
            <p>Estimated Repayment</p>
            <div class="results-payment" id="resultPayment">$0</div>
            <div class="results-payment-freq" id="resultFreq">per month</div>
          </div>

          <div class="results-stats">
            <div class="results-stat">
              <div class="results-stat-label">Total Repayable</div>
              <div class="results-stat-value" id="resultTotal">—</div>
            </div>
            <div class="results-stat">
              <div class="results-stat-label">Total Interest</div>
              <div class="results-stat-value accent" id="resultInterest">—</div>
            </div>
            <div class="results-stat">
              <div class="results-stat-label">Annual Rate</div>
              <div class="results-stat-value" id="resultRate">—</div>
            </div>
            <div class="results-stat">
              <div class="results-stat-label">Comparison Rate*</div>
              <div class="results-stat-value" id="resultComparison">—</div>
            </div>
          </div>

          <div class="results-comparison">
            * Comparison rate based on $150,000 over 5 years. WARNING: This comparison rate applies only to the example given. Different amounts and terms result in different comparison rates. Fees and charges may apply.
          </div>

          <div class="results-cta">
            <a href="{{ url_for('apply') }}" class="btn btn-primary btn-lg" id="calcApplyBtn">
              Apply for This Loan
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
          </div>
        </div>

        <!-- Amortisation table -->
        <div class="amort-card">
          <div class="amort-header" id="amortHeader" aria-expanded="false" aria-controls="amortBody">
            <h3>Repayment Schedule (first 12 periods)</h3>
            <svg class="amort-toggle" id="amortToggle" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
          </div>
          <div class="amort-body" id="amortBody">
            <table class="amort-table" aria-label="Amortisation schedule">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Payment</th>
                  <th>Principal</th>
                  <th>Interest</th>
                  <th>Balance</th>
                </tr>
              </thead>
              <tbody id="amortTbody">
                <tr><td colspan="5" style="text-align:center; padding: 1.5rem; color: var(--color-text-muted);">Calculating…</td></tr>
              </tbody>
            </table>
            <div class="amort-note">Figures shown are estimates based on your inputs above. Actual repayments may vary.</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Disclaimer -->
    <div class="calc-disclaimer" role="note">
      <strong>Important:</strong> The calculator results are indicative only and should not be relied upon as financial advice.
      Actual loan rates, fees, and repayments are subject to credit assessment, loan purpose, security offered, and individual
      circumstances. All rates are expressed per annum (p.a.). Capital Bridge Finance Pty Ltd holds Australian Credit Licence
      No. 123456. Please read our <a href="#" style="color: var(--color-accent);">Credit Guide</a> before applying.
    </div>
  </div>
</section>

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/calculator.js') }}"></script>
{% endblock %}