{% extends "base.html" %}
{% block title %}Apply Now — Quick Funding{% endblock %}

{% block extra_css %}
<style>
.apply-hero{background:linear-gradient(135deg,var(--navy) 0%,#0e2d55 100%);padding:var(--s16) 0 var(--s20);text-align:center;position:relative}
.apply-hero h1{color:#fff;margin-bottom:var(--s3)}
.apply-hero p{color:rgba(255,255,255,.75);font-size:1.125rem}
.apply-hero-wave{position:absolute;bottom:-1px;left:0;right:0}
.apply-trust{display:flex;justify-content:center;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s8)}
.apply-trust-item{display:flex;align-items:center;gap:var(--s2);color:rgba(255,255,255,.65);font-size:.875rem;font-weight:500}
.apply-trust-item svg{color:var(--blue)}

.apply-section{padding:var(--s16) 0 var(--s20);background:var(--gray-100)}
.apply-layout{display:grid;grid-template-columns:1fr 360px;gap:var(--s8);align-items:start}

/* Form card */
.form-card{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}

/* Progress */
.progress-header{padding:var(--s6) var(--s8);border-bottom:1px solid var(--gray-200);background:var(--gray-100)}
.progress-steps{display:flex;align-items:flex-start;justify-content:center;gap:0}
.prog-step{display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:80px}
.prog-dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.875rem;color:var(--gray-400);transition:all var(--t);background:#fff;flex-shrink:0}
.prog-step.active .prog-dot{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.prog-step.done .prog-dot{background:var(--success);border-color:var(--success);color:#fff}
.prog-label{font-size:.75rem;font-weight:600;color:var(--gray-400);text-align:center;transition:color var(--t);white-space:nowrap}
.prog-step.active .prog-label{color:var(--blue)}
.prog-step.done .prog-label{color:var(--success)}
.prog-connector-wrap{display:flex;align-items:flex-start;padding-top:17px;flex:1;min-width:40px;max-width:80px}
.prog-connector{width:100%;height:2px;background:var(--gray-200);transition:background var(--t)}

/* Steps */
.form-step{display:none;padding:var(--s8)}
.form-step.active{display:block}
.step-title{font-family:var(--font-head);font-size:1.375rem;font-weight:700;margin-bottom:var(--s1)}
.step-sub{color:var(--gray-500);font-size:.9375rem;margin-bottom:var(--s8);border-bottom:1px solid var(--gray-200);padding-bottom:var(--s6)}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form-nav-bar{padding:var(--s5) var(--s8);border-top:1px solid var(--gray-200);background:var(--gray-100);display:flex;justify-content:space-between;align-items:center}

/* Confirm step */
.confirm-summary{background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:var(--r-lg);padding:var(--s6);margin-bottom:var(--s6)}
.confirm-row{display:flex;justify-content:space-between;align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--blue-light);font-size:.9375rem}
.confirm-row:last-child{border-bottom:none}
.confirm-row-label{color:var(--gray-500);font-weight:500}
.confirm-row-val{font-weight:700;color:var(--black-text)}
.consent-block{margin-bottom:var(--s5)}

/* Sidebar */
.apply-sidebar{display:flex;flex-direction:column;gap:var(--s5)}
.sidebar-card{background:#fff;border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}
.sidebar-card h4{margin-bottom:var(--s4);font-family:var(--font-head);font-size:1rem;display:flex;align-items:center;gap:var(--s3)}
.sidebar-card h4 svg{color:var(--blue)}
.sidebar-trust-list{display:flex;flex-direction:column;gap:var(--s3)}
.sidebar-trust-item{display:flex;align-items:flex-start;gap:var(--s3);font-size:.875rem}
.sidebar-trust-icon{width:28px;height:28px;background:var(--success-bg);color:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-detail{display:flex;align-items:center;gap:var(--s3);font-size:.9rem;margin-bottom:var(--s3);color:var(--gray-700)}
.contact-detail svg{color:var(--blue);flex-shrink:0}
.contact-detail a{color:var(--blue);font-weight:700}
.hours-item{display:flex;justify-content:space-between;font-size:.875rem;padding:var(--s2) 0;border-bottom:1px solid var(--gray-100)}

@media(max-width:900px){.apply-layout{grid-template-columns:1fr}.apply-sidebar{display:grid;grid-template-columns:1fr 1fr;order:-1}}
@media(max-width:640px){.form-row-2{grid-template-columns:1fr}.apply-sidebar{grid-template-columns:1fr}.prog-step{min-width:60px}.prog-connector-wrap{min-width:20px}.apply-trust{flex-direction:column;align-items:center;gap:var(--s3)}}
</style>
{% endblock %}

{% block content %}
<div class="apply-hero">
  <div class="container">
    <span class="eyebrow" style="display:block;margin-bottom:var(--s3)" data-aos="fade-up">Apply Online</span>
    <h1 data-aos="fade-up" data-aos-delay="100">Apply for Finance</h1>
    <p data-aos="fade-up" data-aos-delay="200">10-minute application. No upfront fees.</p>
    <div class="apply-trust" data-aos="fade-up" data-aos-delay="300">
      <span class="apply-trust-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>256-bit SSL Secure</span>
      <!--<span class="apply-trust-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>ASIC Regulated ACL 389328</span>-->
      <span class="apply-trust-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>No upfront fees</span>
      <!--<span class="apply-trust-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>24-hr decision</span>-->
    </div>
  </div>
  <svg class="apply-hero-wave" viewBox="0 0 1440 60" fill="none" preserveAspectRatio="none" style="display:block;width:100%"><path d="M0 60h1440V0c-240 40-480 60-720 60S240 40 0 0v60z" fill="#F3F4F6"/></svg>
</div>

<section class="apply-section">
  <div class="container">
    <div class="apply-layout">

      <!-- ── Form ── -->
      <div class="form-card" data-aos="fade-up">
        <div class="progress-header">
          <div class="progress-steps">
            <!--<div class="prog-step active" id="prog-0"><div class="prog-dot">1</div><span class="prog-label active" id="plbl-0">About You</span></div>-->
            <!--<div class="prog-connector-wrap"><div class="prog-connector" id="line-0"></div></div>-->
            <div class="prog-step active" id="prog-0"><div class="prog-dot">1</div><span class="prog-label" id="plbl-1">Loan Details</span></div>
            <div class="prog-connector-wrap"><div class="prog-connector" id="line-0"></div></div>
            <div class="prog-step" id="prog-1"><div class="prog-dot">2</div><span class="prog-label" id="plbl-2">Your Info</span></div>
            <div class="prog-connector-wrap"><div class="prog-connector" id="line-1"></div></div>
            <div class="prog-step" id="prog-2"><div class="prog-dot">3</div><span class="prog-label" id="plbl-3">Confirm</span></div>
          </div>
        </div>

        <form method="POST" action="{{ url_for('apply') }}" id="applyForm" novalidate>
          <input type="hidden" name="_csrf_token" value="qf2025">

          <!-- Step 1 -->
          <!--<div class="form-step active" id="step-0">-->
          <!--  <div class="form-step-body" style="padding:var(--s8)">-->
          <!--    <div class="step-title">About Your Business</div>-->
          <!--    <div class="step-sub">Tell us about the entity applying for finance.</div>-->
          <!--    <div class="form-group">-->
          <!--      <label class="form-label">Business / Full Name </label>-->
          <!--      <input type="text" name="business_name" id="business_name" class="form-control" placeholder="e.g. Smith Plumbing Pty Ltd">-->
          <!--    </div>-->
          <!--    <div class="form-group">-->
          <!--      <label class="form-label">ABN </label>-->
          <!--      <input type="text" name="abn" id="abn" class="form-control" placeholder="11 digits, e.g. 12 345 678 901" maxlength="14">-->
          <!--    </div>-->
          <!--    <div class="form-row-2">-->
          <!--      <div class="form-group">-->
          <!--        <label class="form-label">Business Structure</label>-->
          <!--        <select name="structure" class="form-control">-->
          <!--          <option value="">Select…</option>-->
          <!--          <option>Sole Trader</option>-->
          <!--          <option>Partnership</option>-->
          <!--          <option>Company (Pty Ltd)</option>-->
          <!--          <option>Trust</option>-->
          <!--        </select>-->
          <!--      </div>-->
          <!--      <div class="form-group">-->
          <!--        <label class="form-label">Industry</label>-->
          <!--        <select name="industry" class="form-control">-->
          <!--          <option value="">Select…</option>-->
          <!--          <option>Retail / Hospitality</option>-->
          <!--          <option>Construction / Trades</option>-->
          <!--          <option>Healthcare</option>-->
          <!--          <option>Professional Services</option>-->
          <!--          <option>Transport / Logistics</option>-->
          <!--          <option>Manufacturing</option>-->
          <!--          <option>Agriculture</option>-->
          <!--          <option>Technology</option>-->
          <!--          <option>Other</option>-->
          <!--        </select>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <div class="form-row-2">-->
          <!--      <div class="form-group">-->
          <!--        <label class="form-label">Years Trading</label>-->
          <!--        <select name="years_trading" class="form-control">-->
          <!--          <option value="">Select…</option>-->
          <!--          <option>Less than 6 months</option>-->
          <!--          <option>6 months – 1 year</option>-->
          <!--          <option>1 – 3 years</option>-->
          <!--          <option>3 – 5 years</option>-->
          <!--          <option>5+ years</option>-->
          <!--        </select>-->
          <!--      </div>-->
          <!--      <div class="form-group">-->
          <!--        <label class="form-label">Annual Revenue</label>-->
          <!--        <select name="annual_revenue" class="form-control">-->
          <!--          <option value="">Select…</option>-->
          <!--          <option>Under $25,000</option>-->
          <!--          <option>$25,000 – $100,000</option>-->
          <!--          <option>$100,000 – $500,000</option>-->
          <!--          <option>$500,000 – $2M</option>-->
          <!--          <option>$2M+</option>-->
          <!--        </select>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--  </div>-->
          <!--  <div class="form-nav-bar">-->
          <!--    <span style="font-size:.875rem;color:var(--gray-400)">Step 1 of 4</span>-->
          <!--    <button type="button" class="btn btn-primary" onclick="nextStep(0)">Continue <svg width="15" height="15" 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></button>-->
          <!--  </div>-->
          <!--</div>-->

          <!-- Step 1 -->
          <div class="form-step active" id="step-0">
            <div class="form-step-body" style="padding:var(--s8)">
              <div class="step-title">Loan Details</div>
              <div class="step-sub">Tell us about the finance you need.</div>
              <div class="form-group">
                <label class="form-label">Loan Type <span class="req">*</span></label>
                <select name="loan_type" id="loan_type" class="form-control" required>
                  <option value="business" {% if prefill.loan_type=='business' %}selected{% endif %}>Business Loan</option>
                  <option value="personal" {% if prefill.loan_type=='personal' %}selected{% endif %}>Personal Loan</option>
                  <option value="car" {% if prefill.loan_type=='car' %}selected{% endif %}>Car Loan</option>
                </select>
              </div>
              <div class="form-row-2">
                <div class="form-group">
                  <label class="form-label">Loan Amount <span class="req">*</span></label>
                  <input type="number" name="loan_amount" id="loan_amount" class="form-control" placeholder="e.g. 80000" min="1000" max="500000" value="{{ prefill.amount }}" required>
                </div>
                <div class="form-group">
                  <label class="form-label">Loan Term (months)</label>
                  <select name="loan_term" class="form-control">
                    {% for m in [6,12,18,24,36,48,60,72,84] %}
                    <option {% if prefill.term|string == m|string %}selected{% endif %}>{{ m }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">Loan Purpose <span class="req">*</span></label>
                <select name="loan_purpose" class="form-control" required>
                  <option value="">Select purpose…</option>
                  <option>Working Capital</option>
                  <option>Equipment Purchase</option>
                  <option>Vehicle Purchase</option>
                  <option>Business Expansion</option>
                  <option>Debt Consolidation</option>
                  <option>Home Renovation</option>
                  <option>Education / Training</option>
                  <option>Travel / Lifestyle</option>
                  <option>Medical Expenses</option>
                  <option>Other</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Asset Security</label>
                <div class="radio-group">
                  <div class="radio-pill"><input type="radio" name="security" id="sec_yes" value="yes"><label for="sec_yes">Yes — I have assets</label></div>
                  <div class="radio-pill"><input type="radio" name="security" id="sec_no" value="no" checked><label for="sec_no">No — unsecured</label></div>
                  <div class="radio-pill"><input type="radio" name="security" id="sec_vehicle" value="vehicle"><label for="sec_vehicle">Vehicle as security</label></div>
                </div>
              </div>
            </div>
            <div class="form-nav-bar">
              <span style="font-size:.875rem;color:var(--gray-400)">Step 1 of 3</span>
              <button type="button" class="btn btn-primary" onclick="nextStep(0)">Continue <svg width="15" height="15" 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></button>
            </div>
          </div>

          <!-- Step 2 -->
          <div class="form-step" id="step-1">
            <div class="form-step-body" style="padding:var(--s8)">
              <div class="step-title">Your Personal Information</div>
              <div class="step-sub">Your details for our assessment team.</div>
              <div class="form-row-2">
                <div class="form-group">
                  <label class="form-label">First Name <span class="req">*</span></label>
                  <input type="text" name="first_name" id="first_name" class="form-control" placeholder="Jane" required>
                </div>
                <div class="form-group">
                  <label class="form-label">Last Name <span class="req">*</span></label>
                  <input type="text" name="last_name" class="form-control" placeholder="Smith" required>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">Email Address <span class="req">*</span></label>
                <input type="email" name="email" class="form-control" placeholder="jane@example.com.au" required>
              </div>
              <div class="form-group">
                <label class="form-label">Mobile Number <span class="req">*</span></label>
                <input type="tel" name="mobile" class="form-control" placeholder="04XX XXX XXX" required>
              </div>
              <div class="form-row-2">
                <div class="form-group">
                  <label class="form-label">State</label>
                  <select name="state" class="form-control">
                    <option value="">Select state…</option>
                    {% for s in ['NSW','VIC','QLD','WA','SA','TAS','ACT','NT'] %}
                    <option>{{ s }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-label">How did you hear about us?</label>
                  <select name="referral" class="form-control">
                    <option value="">Select…</option>
                    <option>Google Search</option>
                    <option>Referral from friend</option>
                    <option>Social Media</option>
                    <option>Broker / Advisor</option>
                    <option>Other</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">Additional Notes</label>
                <textarea name="notes" class="form-control" rows="3" placeholder="Anything else you'd like us to know…"></textarea>
              </div>
            </div>
            <div class="form-nav-bar">
              <button type="button" class="btn btn-outline" onclick="prevStep(1)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Back</button>
              <button type="button" class="btn btn-primary" onclick="nextStep(1)">Review Application <svg width="15" height="15" 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></button>
            </div>
          </div>

          <!-- Step 3 -->
          <div class="form-step" id="step-2">
            <div class="form-step-body" style="padding:var(--s8)">
              <div class="step-title">Review &amp; Submit</div>
              <div class="step-sub">Please review your application before submitting.</div>
              <div class="confirm-summary" id="confirmSummary">
                <div class="confirm-row"><span class="confirm-row-label">Applicant</span><span class="confirm-row-val" id="sum-name">—</span></div>
                <div class="confirm-row"><span class="confirm-row-label">Loan Type</span><span class="confirm-row-val" id="sum-type">—</span></div>
                <div class="confirm-row"><span class="confirm-row-label">Loan Amount</span><span class="confirm-row-val" id="sum-amount">—</span></div>
                <div class="confirm-row"><span class="confirm-row-label">Loan Term</span><span class="confirm-row-val" id="sum-term">—</span></div>
                <div class="confirm-row"><span class="confirm-row-label">Contact</span><span class="confirm-row-val" id="sum-email">—</span></div>
              </div>
              <div class="consent-block">
                <label class="form-check">
                  <input type="checkbox" name="privacy_consent" id="privacy_consent" required>
                  <span class="form-check-label">I have read and agree to the <a href="#" style="color:var(--blue)">Privacy Policy</a> and <a href="#" style="color:var(--blue)">Credit Guide</a>. I consent to Quick Funding collecting, using, and disclosing my personal information for the purpose of assessing my credit application. <span class="req">*</span></span>
                </label>
              </div>
              <div class="consent-block">
                <label class="form-check">
                  <input type="checkbox" name="credit_consent" id="credit_consent" required>
                  <span class="form-check-label">I authorise Quick Funding to access my credit information from credit reporting bodies and third parties for assessment purposes. <span class="req">*</span></span>
                </label>
              </div>
            </div>
            <div class="form-nav-bar">
              <button type="button" class="btn btn-outline" onclick="prevStep(2)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Back</button>
              <button type="submit" class="btn btn-primary" id="submitBtn">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                Submit Application
              </button>
            </div>
          </div>

        </form>
      </div>

      <!-- ── Sidebar ── -->
      <div class="apply-sidebar" data-aos="fade-left">
        <div class="sidebar-card">
          <h4><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Why Quick Funding?</h4>
          <div class="sidebar-trust-list">
            <!--<div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>ASIC regulated — Credit Licence 389328</span></div>-->
            <div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>256-bit SSL encryption — your data is safe</span></div>
            <!--<div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>Decisions in as little as 24 hours</span></div>-->
            <div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>No upfront fees or hidden charges</span></div>
            <div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>Dedicated Australian-based specialist</span></div>
            <!--<div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>AFCA member — independent dispute resolution</span></div>-->
            <div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>Tailored solutions</span></div>
            <div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>Wide lender network</span></div>
            <div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>Transparent guidance</span></div>
            <div class="sidebar-trust-item"><div class="sidebar-trust-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><span>Dedicated support</span></div>
          </div>
        </div>
        <div class="sidebar-card">
          <h4><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8a19.79 19.79 0 01-3.07-8.63A2 2 0 012 .18h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg> Need Help?</h4>
          <div class="contact-detail"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8a19.79 19.79 0 01-3.07-8.63A2 2 0 012 .18h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg><a href="tel:0290717960">02 9071 7960</a></div>
          <div class="contact-detail"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg><a href="mailto:loans@quickfunding.com.au">loans@quickfunding.com.au</a></div>
          <div class="hours-item"><span>Mon–Fri</span><span style="font-weight:700">8:30am – 5:30pm</span></div>
          <div class="hours-item"><span>Saturday</span><span style="font-weight:700">9:00am – 1:00pm</span></div>
          <div class="hours-item" style="border-bottom:none"><span>Sunday</span><span style="color:var(--gray-400)">Closed</span></div>
        </div>
      </div>

    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
let currentStep = 0;
const totalSteps = 3;

function updateProgress(step) {
  for (let i = 0; i < totalSteps; i++) {
    const stepEl = document.getElementById(`prog-${i}`);
    stepEl.classList.remove('active','done');
    if (i < step) stepEl.classList.add('done');
    else if (i === step) stepEl.classList.add('active');
    // connector
    const line = document.getElementById(`line-${i}`);
    if (line) line.style.background = i < step ? 'var(--success)' : 'var(--gray-200)';
  }
}

function showStep(n) {
  document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));
  document.getElementById(`step-${n}`).classList.add('active');
  updateProgress(n);
  window.scrollTo({ top: document.querySelector('.form-card').offsetTop - 100, behavior: 'smooth' });
}

function nextStep(from) {
  if (from === 1) buildSummary();
  showStep(from + 1);
  currentStep = from + 1;
}
function prevStep(from) { showStep(from - 1); currentStep = from - 1; }

function buildSummary() {
  const first = document.getElementById('first_name')?.value || '';
  const biz   = document.getElementById('business_name')?.value || '';
  const amt   = document.getElementById('loan_amount')?.value || '';
  const type  = document.getElementById('loan_type')?.value || '';
  const email = document.querySelector('[name=email]')?.value || '';
  const term  = document.querySelector('[name=loan_term]')?.value || '';
  document.getElementById('sum-name').textContent   = [first, biz].filter(Boolean).join(' — ') || '—';
  document.getElementById('sum-type').textContent   = type ? type.charAt(0).toUpperCase()+type.slice(1)+' Loan' : '—';
  document.getElementById('sum-amount').textContent = amt ? new Intl.NumberFormat('en-AU',{style:'currency',currency:'AUD',maximumFractionDigits:0}).format(amt) : '—';
  document.getElementById('sum-term').textContent   = term ? term+' months' : '—';
  document.getElementById('sum-email').textContent  = email || '—';
}

// Prefill loan type from URL
const urlType = new URLSearchParams(window.location.search).get('type');
if (urlType) {
  const sel = document.getElementById('loan_type');
  if (sel) sel.value = urlType;
}
</script>
{% endblock %}