{% extends "op_zz_frame.html" %}
{% block centercontent %}

<h1>Manual Odometer Entry</h1>

  <style>
:root{--bg:#006B52;--panel:#FFFFFF;--border:#D5D5D5;--text:#0b110f;--muted:#3a4a46;--accent:#008143}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
.header{display:flex;align-items:center;gap:10px;padding:14px 20px;background:linear-gradient(180deg,#006B52,#008143);color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}
.header .brand{font-weight:800}
.container{max-width:1100px;margin:0 auto;padding:20px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:14px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0}
label{font-size:14px;color:var(--muted)}
input[type='text'],input[type='datetime-local'],input[type='number'],select,textarea{padding:8px;border:1px solid var(--border);border-radius:8px}
textarea{min-width:320px;min-height:60px}
.btn{display:inline-block;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#f5f8f7;color:#0f2b23;font-size:14px;text-decoration:none;cursor:pointer}
.btn:hover{border-color:#b8d2c5}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.bad{background:#fff1e8;border:1px solid #f3c7a6}
.warn{background:#fff9e6;border:1px solid #f5e6a2}
.good{background:#e8f5e5;border:1px solid #cfead0}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi .box{background:#f5f8f7;border:1px solid var(--border);border-radius:10px;padding:10px}
.kpi .box .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.kpi .box .val{font-size:20px;font-weight:800;margin-top:4px}
.small{font-size:12px;color:var(--muted)}
</style>

  <div class="header">
    <div class="brand">DEKRA – Manual odometer entry</div>
    <div style="margin-left:auto">
      <a class="btn" href="bhi_dashboard.html">Dashboard</a>
      <a class="btn" href="manual_soh_entry.html">Manual SoH entry</a>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <h3 style="margin:0 0 8px 0">API configuration</h3>
      <div class="row">
        <label>Base URL <input id="apiBase" type="text" placeholder="https://api.example.com" style="width:260px"/></label>
        <label>Endpoint <input id="apiEndpoint" type="text" value="/odometer/manual" style="width:180px"/></label>
        <label>Auth header <input id="apiAuthName" type="text" value="Authorization" style="width:160px"/></label>
        <label>Token <input id="apiAuthVal" type="text" placeholder="Bearer XYZ…" style="width:240px"/></label>
        <label><input id="dryRun" type="checkbox" checked/> Dry‑run (no POST)</label>
      </div>
    </div>

    <div class="card">
      <h3 style="margin:0 0 8px 0">Add odometer reading</h3>
      <div class="row">
        <label>Vehicle
          <select id="vehSel"></select>
        </label>
        <label>Measured at
          <input id="measuredAt" type="datetime-local"/>
        </label>
        <label>Odometer km
          <input id="odo" type="number" step="1" min="0" value="0"/>
        </label>
        <label>Source
          <select id="source"><option>Manual</option><option>OBD</option><option>Workshop</option><option>Other</option></select>
        </label>
        <label>Notes
          <input id="notes" type="text" style="width:320px" placeholder="after service…"/>
        </label>
        <button class="btn" id="addBtn">Add to batch</button>
      </div>
      <div class="small">Monotonicity check per vehicle (must not decrease); Δ vs baseline shown.</div>
    </div>

    <div class="card">
      <div class="kpi">
        <div class="box"><div class="lbl">Rows</div><div class="val" id="kRows">0</div></div>
        <div class="box"><div class="lbl">Vehicles affected</div><div class="val" id="kVehs">0</div></div>
        <div class="box"><div class="lbl">Anomalies</div><div class="val" id="kAnom">0</div></div>
      </div>
      <table class="table" id="tbl">
        <thead>
          <tr><th>Vehicle</th><th>Measured at</th><th>Odometer km</th><th>Δ vs baseline</th><th>Monotonic</th><th>Source</th><th>Notes</th><th></th></tr>
        </thead>
        <tbody></tbody>
      </table>
      <div class="row">
        <button class="btn" id="exportCSV">Export CSV</button>
        <button class="btn" id="exportJSON">Export JSON</button>
        <label>Import CSV <input id="importCSV" type="file" accept=".csv"/></label>
        <button class="btn" id="submit">Submit</button>
      </div>
    </div>
  </div>

  <script>
  
  const vehicles = [{"id": "DEK-001", "alias": "Vehicle 1", "cap_nom": 62.0, "odometer_km": 48526, "consumption_kwh_per_100km": 24.7, "last_ref_soh": 94.4, "last_ref_type": "OEM"}, {"id": "DEK-002", "alias": "Vehicle 2", "cap_nom": 72.0, "odometer_km": 100239, "consumption_kwh_per_100km": 19.8, "last_ref_soh": 94.2, "last_ref_type": "OEM"}, {"id": "DEK-003", "alias": "Vehicle 3", "cap_nom": 62.0, "odometer_km": 186116, "consumption_kwh_per_100km": 15.7, "last_ref_soh": 93.7, "last_ref_type": "Manual"}, {"id": "DEK-004", "alias": "Vehicle 4", "cap_nom": 62.0, "odometer_km": 205668, "consumption_kwh_per_100km": 23.5, "last_ref_soh": 87.5, "last_ref_type": "Manual"}, {"id": "DEK-005", "alias": "Vehicle 5", "cap_nom": 55.0, "odometer_km": 166421, "consumption_kwh_per_100km": 18.5, "last_ref_soh": 83.3, "last_ref_type": "OEM"}];
  const vehSel = document.getElementById('vehSel');
  const measuredAt = document.getElementById('measuredAt');
  const odo = document.getElementById('odo');
  const source = document.getElementById('source');
  const notes = document.getElementById('notes');
  const tblBody = document.querySelector('#tbl tbody');
  const kRows = document.getElementById('kRows');
  const kVehs = document.getElementById('kVehs');
  const kAnom = document.getElementById('kAnom');

  function nowLocalISO(){ const d = new Date(); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); return d.toISOString().slice(0,16); }
  function fmt(x){ return Number(x).toLocaleString(); }

  // Fill vehicles
  vehicles.forEach(v=>{ const o=document.createElement('option'); o.value=v.id; o.textContent=v.id+' – '+v.alias; vehSel.appendChild(o); });
  // Preselect via ?vid=
  const params = new URLSearchParams(window.location.search);
  const qvid = params.get('vid');
  if(qvid && vehicles.some(v=>v.id===qvid)) vehSel.value = qvid;
  measuredAt.value = nowLocalISO();

  function baselineOdo(id){ const v=vehicles.find(x=>x.id===id); return v? (v.odometer_km||0) : 0; }

  const batch = [];
  function render(){
    tblBody.innerHTML='';
    let anom=0;
    const seenVeh = new Set();
    const grouped = {};
    batch.forEach(r=>{ grouped[r.vehicle_id] = grouped[r.vehicle_id] || []; grouped[r.vehicle_id].push(r); });
    Object.keys(grouped).forEach(vid=>{ grouped[vid].sort((a,b)=> new Date(a.measured_at) - new Date(b.measured_at)); });

    batch.forEach((r,idx)=>{
      seenVeh.add(r.vehicle_id);
      const base = baselineOdo(r.vehicle_id);
      const delta = r.odometer_km - base;
      let mono = true;
      const arr = grouped[r.vehicle_id];
      for(let i=1;i<arr.length;i++){ if(arr[i].odometer_km < arr[i-1].odometer_km){ mono=false; break; } }
      if(!mono) anom++;

      const tr=document.createElement('tr');
      if(!mono || delta<0) tr.classList.add('warn');
      tr.innerHTML = '<td>'+r.vehicle_id+'</td>'+
        '<td>'+r.measured_at+'</td>'+
        '<td>'+fmt(r.odometer_km)+'</td>'+
        '<td>'+(delta>=0? '+'+fmt(delta): fmt(delta))+' km</td>'+
        '<td>'+(mono? 'yes':'NO')+'</td>'+
        '<td>'+(r.source||'')+'</td>'+
        '<td>'+(r.notes||'')+'</td>'+
        '<td><button class="btn" data-idx="'+idx+'">Delete</button></td>';
      tr.querySelector('button').onclick = ()=>{ batch.splice(idx,1); render(); };
      tblBody.appendChild(tr);
    });
    kRows.textContent = batch.length;
    kVehs.textContent = seenVeh.size;
    kAnom.textContent = anom;
  }

  document.getElementById('addBtn').onclick = ()=>{
    const r = {
      vehicle_id: vehSel.value,
      measured_at: measuredAt.value ? new Date(measuredAt.value).toISOString() : new Date().toISOString(),
      odometer_km: Number(odo.value),
      source: source.value,
      notes: notes.value||''
    };
    batch.push(r);
    render();
  };

  function toCSV(rows){
    const cols = ["vehicle_id","measured_at","odometer_km","source","notes"];
    const esc = v => (v==null? "": (''+v).replace(/"/g,'""'));
    return [cols.join(','), ...rows.map(r=>cols.map(c=>'"'+esc(r[c])+'"' ).join(','))].join('\n');
  }
  document.getElementById('exportCSV').onclick = ()=>{
    const blob=new Blob([toCSV(batch)],{type:'text/csv'});
    const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='manual_odometer.csv'; a.click();
  };
  document.getElementById('exportJSON').onclick = ()=>{
    const blob=new Blob([JSON.stringify(batch,null,2)],{type:'application/json'});
    const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='manual_odometer.json'; a.click();
  };
  document.getElementById('importCSV').onchange = (e)=>{
    const file=e.target.files[0]; if(!file) return;
    const reader=new FileReader();
    reader.onload = ()=>{
      const lines=reader.result.split(/\r?\n/).filter(x=>x.trim().length>0);
      const hdr=lines[0].split(',').map(s=>s.trim());
      const idx = {};
      ["vehicle_id","measured_at","odometer_km","source","notes"].forEach(k=>idx[k]=hdr.indexOf(k));
      for(let i=1;i<lines.length;i++){ const parts=lines[i].split(','); if(parts.length<3) continue;
        const r = {
          vehicle_id: parts[idx.vehicle_id],
          measured_at: parts[idx.measured_at],
          odometer_km: Number(parts[idx.odometer_km]),
          source: idx.source>=0? parts[idx.source]:"",
          notes: idx.notes>=0? parts[idx.notes]:""
        };
        batch.push(r);
      }
      render();
    };
    reader.readAsText(file);
    e.target.value = "";
  };

  document.getElementById('submit').onclick = async ()=>{
    const base = document.getElementById('apiBase').value||'';
    const ep = document.getElementById('apiEndpoint').value||'/odometer/manual';
    const hdr = document.getElementById('apiAuthName').value||'Authorization';
    const tok = document.getElementById('apiAuthVal').value||'';
    const dry = document.getElementById('dryRun').checked;
    if(!base){ alert('Please set Base URL'); return; }
    for(const r of batch){
      const payload = r;
      if(dry){ console.log('DRY POST', base+ep, payload); continue; }
      try{
        const res = await fetch(base+ep,{method:'POST',headers:{'Content-Type':'application/json',[hdr]:tok},body:JSON.stringify(payload)});
        if(!res.ok) throw new Error(await res.text());
      }catch(err){ console.error('POST failed', err); alert('Error posting one record: '+err); return; }
    }
    alert('Done.');
  };
  </script>




<form method="post">
  <label>Station ID:<input type="text" name="station_id"></label>
  <label>Odometer (km):<input type="number" name="odometer"></label>
  <button type="submit" class="pipelet-btn">Save</button>
</form>
<table border="1" cellspacing="0" cellpadding="5">
  <tr><th>Station</th><th>Odometer</th><th>Timestamp</th></tr>
  {% for e in entries %}
  <tr>
    <td>{{ e.station_id }}</td>
    <td>{{ e.value }}</td>
    <td>{{ e.created_at }}</td>
  </tr>
  {% endfor %}
</table>



{% endblock %}