<!-- Tow‑Truck Loan Calculator v2 -->
<div id="tow-truck-calculator-v2">
  <!-- Chart.js (tiny, 6 kB gzipped) -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

  <style>
    #tow-truck-calculator-v2 *{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;}
    #tow-truck-calculator-v2{max-width:700px;margin:0 auto;padding:20px;border:2px solid #004f80;border-radius:10px;background:#f8faff;}
    #tow-truck-calculator-v2 h2{margin-top:0;color:#004f80;text-align:center;}
    #tow-truck-calculator-v2 label{display:block;margin:14px 0 6px;font-weight:600;color:#004f80;}
    #tow-truck-calculator-v2 input,
    #tow-truck-calculator-v2 select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:4px;font-size:15px;}
    #tow-truck-calculator-v2 .row{display:flex;gap:14px;flex-wrap:wrap;}
    #tow-truck-calculator-v2 .row>div{flex:1 1 180px;}
    #tow-truck-calculator-v2 .slider-wrap{display:flex;align-items:center;gap:8px;}
    #tow-truck-calculator-v2 .slider-wrap span{min-width:60px;text-align:right;}
    #tow-truck-calculator-v2 #results{margin-top:24px;padding:16px;border:1px solid #ddd;border-radius:8px;background:#fff;}
    #tow-truck-calculator-v2 #results p{margin:6px 0;font-size:16px;}
    #tow-truck-calculator-v2 button.download{margin-top:12px;padding:8px 14px;font-weight:700;background:#ffc400;border:none;border-radius:4px;color:#fff;cursor:pointer;}
    #tow-truck-calculator-v2 canvas{max-height:260px;margin-top:18px;}
    /* Dark mode */
    @media (prefers-color-scheme: dark){
      #tow-truck-calculator-v2{background:#0e1a25;border-color:#1976d2;}
      #tow-truck-calculator-v2 h2,
      #tow-truck-calculator-v2 label{color:#90caf9;}
      #tow-truck-calculator-v2 #results{background:#162430;border-color:#34495e;color:#e0e0e0;}
    }
  </style>

  <h2>Tow‑Truck Loan Calculator</h2>

  <div class="row">
    <div>
      <label for="truck-type">Tow‑Truck Type</label>
      <select id="truck-type">
        <option value="flatbed"  data-price="120000">Flatbed – $120,000</option>
        <option value="wheel"    data-price="80000">Wheel‑Lift – $80,000</option>
        <option value="integrated" data-price="150000">Integrated – $150,000</option>
        <option value="heavy"    data-price="250000">Heavy‑Duty – $250,000</option>
        <option value="custom">Custom Price</option>
      </select>
    </div>
    <div>
      <label for="truck-price">Truck Price ($)</label>
      <input type="number" id="truck-price" step="1000" placeholder="Enter price">
    </div>
    <div>
      <label for="down-payment">Down Payment ($)</label>
      <input type="number" id="down-payment" step="1000" value="0">
    </div>
  </div>

  <div class="row">
    <div>
      <label>Sales Tax Rate (%)</label>
      <input type="number" id="sales-tax" step="0.1" value="0">
    </div>
    <div>
      <label>Interest Rate (%)</label>
      <div class="slider-wrap">
        <input type="range" id="interest-rate" min="0" max="20" step="0.1" value="7">
        <span id="interest-val">7%</span>
      </div>
    </div>
    <div>
      <label>Term (months)</label>
      <div class="slider-wrap">
        <input type="range" id="term" min="12" max="120" step="1" value="60">
        <span id="term-val">60</span>
      </div>
    </div>
  </div>

  <!-- Results -->
  <div id="results" style="display:none;">
    <p>Loan Amount: <strong id="loan-amount"></strong></p>
    <p>Monthly Payment: <strong id="monthly-payment"></strong></p>
    <p>Total Interest Paid: <strong id="total-interest"></strong></p>
    <p>Total Cost (Down + Payments): <strong id="total-cost"></strong></p>
    <p>Pay‑off Date: <strong id="payoff-date"></strong></p>
    <button class="download" id="download-csv">Download Schedule (CSV)</button>
    <canvas id="balance-chart"></canvas>
  </div>

  <script>
    (function(){
      /* ---------- Helpers ---------- */
      const fmt = new Intl.NumberFormat('en-US',{style:'currency',currency:'USD'});
      const $ = id => document.getElementById(id);

      const els = {
        type:$('truck-type'), price:$('truck-price'), down:$('down-payment'),
        tax:$('sales-tax'), rate:$('interest-rate'), term:$('term'),
        rateVal:$('interest-val'), termVal:$('term-val'),
        loan:$('loan-amount'), mp:$('monthly-payment'), ti:$('total-interest'),
        tc:$('total-cost'), po:$('payoff-date'), results:$('results')
      };

      /* ---------- Persist last inputs ---------- */
      const LS_KEY = 'towCalcV2';
      function saveState(){
        const s = {
          t:els.type.value, p:els.price.value, d:els.down.value,
          tx:els.tax.value, r:els.rate.value, n:els.term.value
        };
        localStorage.setItem(LS_KEY,JSON.stringify(s));
      }
      function loadState(){
        const s = JSON.parse(localStorage.getItem(LS_KEY)||'{}');
        if(s.t) els.type.value = s.t;
        if(s.p) els.price.value = s.p;
        if(s.d) els.down.value = s.d;
        if(s.tx) els.tax.value = s.tx;
        if(s.r) els.rate.value = s.r;
        if(s.n) els.term.value = s.n;
        els.rateVal.textContent = els.rate.value+'%';
        els.termVal.textContent = els.term.value;
      }
      loadState();

      /* ---------- Auto‑fill price when type changes ---------- */
      els.type.addEventListener('change',()=>{
        const sel = els.type.options[els.type.selectedIndex];
        const price = sel.dataset.price;
        if(price){
          els.price.value = price;
          els.price.readOnly = true;
        }else{
          els.price.readOnly = false;
          els.price.value = '';
        }
        runCalc();
      });

      /* ---------- Live slider readouts ---------- */
      ['rate','term'].forEach(k=>{
        els[k].addEventListener('input',()=>{
          if(k==='rate') els.rateVal.textContent = els.rate.value+'%';
          if(k==='term') els.termVal.textContent = els.term.value;
          runCalc();
        });
      });

      /* ---------- Recalculate on all inputs ---------- */
      ['price','down','tax'].forEach(k=>{
        els[k].addEventListener('input',runCalc);
      });

      /* ---------- Chart setup ---------- */
      let chart;
      function drawChart(balances){
        const ctx = $('balance-chart').getContext('2d');
        if(chart) chart.destroy();
        chart = new Chart(ctx,{
          type:'line',
          data:{
            labels:balances.map((_,i)=>i),
            datasets:[{
              label:'Remaining Balance',
              data:balances,
              borderColor:'#1976d2',
              backgroundColor:'rgba(25,118,210,0.1)',
              tension:0.1
            }]
          },
          options:{
            plugins:{legend:{display:false}},
            scales:{x:{display:false},y:{ticks:{callback:v=>fmt.format(v)}}}
          }
        });
      }

      /* ---------- CSV download ---------- */
      $('download-csv').addEventListener('click',()=>{
        if(!schedule.length) return;
        let csv = 'Month,Payment,Principal,Interest,Balance\n';
        schedule.forEach(r=>csv+=`${r.m},${r.pay},${r.pri},${r.int},${r.bal}\n`);
        const blob = new Blob([csv],{type:'text/csv'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href=url;a.download='tow-truck-amortization.csv';
        a.click();URL.revokeObjectURL(url);
      });

      /* ---------- Main calculation ---------- */
      let schedule = [];
      function runCalc(){
        saveState();
        const price = parseFloat(els.price.value)||0;
        const down  = parseFloat(els.down.value)||0;
        const tax   = parseFloat(els.tax.value)||0;
        const rate  = parseFloat(els.rate.value)||0;
        const term  = parseInt(els.term.value,10)||0;
        if(!price || !term){ els.results.style.display='none'; return; }

        const taxAmt = price*(tax/100);
        const principal = price+taxAmt-down;
        const r = rate/100/12;
        const n = term;
        const payment = r===0 ? principal/n : principal*r/(1-Math.pow(1+r,-n));
        const totalPaid = payment*n;
        const totalInt = totalPaid-principal;

        /* Build amortization schedule + balance array */
        schedule = [];
        let bal = principal;
        const balances=[bal];
        for(let i=1;i<=n;i++){
          const int = bal*r;
          const pri = payment-int;
          bal -= pri;
          schedule.push({m:i,pay:payment.toFixed(2),pri:pri.toFixed(2),int:int.toFixed(2),bal:Math.max(bal,0).toFixed(2)});
          balances.push(Math.max(bal,0));
        }

        /* Pay‑off date */
        const payoffDate = new Date();
        payoffDate.setMonth(payoffDate.getMonth()+n);

        /* Update DOM */
        els.loan.textContent = fmt.format(principal);
        els.mp.textContent   = fmt.format(payment);
        els.ti.textContent   = fmt.format(totalInt);
        els.tc.textContent   = fmt.format(down+totalPaid);
        els.po.textContent   = payoffDate.toLocaleDateString();
        els.results.style.display='block';

        drawChart(balances);
      }

      /* Initial calc */
      runCalc();
    })();
  </script>
</div>