{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Vehicle History{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
<style>
:root{--c-bg:#f2f2f7;--c-card:#fff;--c-border:#d1d1d6;--c-accent:#007aff;
  --c-text:#000000;--c-sub:#000000;--c-success:#34c759;--c-purple:#5856d6;
  --c-orange:#ff9f0a;--c-blue:#0dcaf0;
  --r-card:14px;--r-inp:9px;
  --shadow:0 2px 14px rgba(0,0,0,.08);--shadow-h:0 4px 22px rgba(0,0,0,.13);}
body{background:var(--c-bg)!important;}

.sf-page-hd{background:linear-gradient(135deg,#eaf3ff,#dbe9ff);border-radius:var(--r-card);
  padding:.9rem 1.3rem;color:#000000;margin-bottom:1rem;box-shadow:var(--shadow);border:1px solid #b7d1ff;}

.sf-card{background:var(--c-card);border-radius:var(--r-card);box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:1rem;}
.sf-card-hd{padding:.6rem 1.1rem;border-bottom:1px solid var(--c-border);
  font-size:.86rem;font-weight:800;color:#000000;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(0,0,0,.02);display:flex;
  justify-content:space-between;align-items:center;}
.sf-lbl{font-size:.72rem;font-weight:700;color:#000000;margin-bottom:2px;
  display:block;text-transform:uppercase;letter-spacing:.03em;}
.sf-val{font-size:.92rem;font-weight:700;color:#000000;}

.select2-container .select2-selection--single{border:1px solid var(--c-border)!important;
  border-radius:var(--r-inp)!important;height:42px!important;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:40px!important;font-size:.9rem;color:#000000;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px!important;}

.veh-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem;padding:1rem 1.2rem;}

.sf-btn{height:38px;border:none;border-radius:var(--r-inp);font-size:.85rem;font-weight:700;
  padding:0 1.1rem;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.4rem;
  text-decoration:none;}
.sf-btn-outline{background:#fff;color:var(--c-accent);border:1.5px solid var(--c-accent);}
.sf-btn-outline:hover{background:#eef6ff;color:var(--c-accent);}

.job-card{background:var(--c-card);border-radius:12px;box-shadow:var(--shadow);
  padding:1rem 1.2rem;transition:box-shadow .2s,transform .15s;cursor:pointer;
  border-left:4px solid var(--c-accent);}
.job-card:hover{box-shadow:var(--shadow-h);transform:translateY(-2px);}
.jc-no{font-weight:800;color:var(--c-accent);font-size:1rem;}
.jc-date{font-weight:700;font-size:.83rem;color:#000000;}
.jc-line{font-size:.8rem;color:#000000;margin-top:2px;}
.jc-line b{font-weight:700;}
.jc-svc{font-size:.76rem;color:#000000;background:#f2f2f7;border-radius:8px;
  padding:2px 8px;display:inline-block;margin:2px 4px 0 0;}
.jc-amt{font-weight:800;font-size:1.05rem;color:var(--c-success);}

.st-badge{font-size:.64rem;font-weight:700;border-radius:10px;padding:1px 7px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.02em;}
.st-draft,.st-in_progress{background:#fff2df;color:#8a5a00;border:1px solid var(--c-orange);}
.st-parts_requested{background:#ece9ff;color:#3b3899;border:1px solid var(--c-purple);}
.st-ready{background:#e0f7fc;color:#046a80;border:1px solid var(--c-blue);}
.st-invoiced{background:#e3f8ec;color:#0a6634;border:1px solid var(--c-success);}

.bb-cash{background:#f0f0f0;color:#000;}
.bb-credit{background:#e8f0ff;color:#000;}
.bb-corporate{background:#e8f8ff;color:#000;}
.bb-insurance{background:#edf9ee;color:#000;}
.bb-complimentary{background:#fff8e1;color:#000;}
.sf-badge{display:inline-flex;align-items:center;border-radius:20px;font-size:.66rem;
  font-weight:700;padding:1px 8px;white-space:nowrap;border:1px solid rgba(0,0,0,.15);}

.empty-pane{padding:3rem 1.5rem;text-align:center;color:#000000;}
.empty-pane i{font-size:2.6rem;opacity:.18;display:block;margin-bottom:.8rem;}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3 px-4">

  {% for m in messages %}
  <div class="alert alert-{{ m.tags }} alert-dismissible fade show border-0 shadow-sm py-2">
    {{ m }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  <div class="sf-page-hd d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
      <h5 class="mb-0 fw-bold">
        <i class="bi bi-clock-history me-2" style="color:#0a58ca;"></i>
        Vehicle History
      </h5>
      <small style="color:#000000;font-weight:500;">Search by reg no, chassis no, engine no or owner — see every job ever done</small>
    </div>
    <a href="{% url 'workshop:job_list' %}" class="sf-btn sf-btn-outline">
      <i class="bi bi-list-ul"></i> All Jobs
    </a>
  </div>

  <div class="sf-card">
    <div style="padding:1rem 1.2rem;">
      <label class="sf-lbl mb-1">Search Vehicle</label>
      <select id="vehicleSel" style="width:100%" autofocus></select>
    </div>
  </div>

  <div id="resultsWrap">
    <div class="empty-pane">
      <i class="bi bi-search"></i>
      Search a vehicle above to see its full job history.
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
const AJAX_VEHICLE_SEARCH_URL = "{% url 'workshop:ajax_vehicle_search' %}";

function esc(s){ return String(s||"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;"); }
function fmt(n){ return Math.round(parseFloat(n)||0).toLocaleString("en-PK"); }
function historyUrl(vehicleId){ return "/workshop/ajax/vehicle-history/" + vehicleId + "/"; }
function jobDetailUrl(jobNo){ return "/workshop/jobs/" + jobNo + "/"; }

$(document).ready(function(){
  $('#vehicleSel').select2({
    ajax:{
      url: AJAX_VEHICLE_SEARCH_URL, dataType:'json', delay:250,
      data:function(p){ return {q:p.term}; },
      processResults:function(d){ return {results:d.results}; },
      cache:true,
    },
    placeholder:'Reg no / chassis no / engine no / owner…',
    minimumInputLength:2, width:'100%',
    templateResult:function(v){
      if(v.loading) return v.text;
      return $(`<div>
        <b>${esc(v.reg_no)}</b> — ${esc(v.make)} ${esc(v.model)} <span style="color:#000;">(${esc(v.owner_name)})</span>
        <div style="font-size:.72rem;color:#000;">Chassis: ${esc(v.frame_no||'—')} · Engine: ${esc(v.engine_no||'—')}</div>
      </div>`);
    },
  });
  $('#vehicleSel').on('select2:select', function(e){
    loadVehicleHistory(e.params.data.id);
  });
});

function loadVehicleHistory(vehicleId){
  const wrap = document.getElementById('resultsWrap');
  wrap.innerHTML = `<div class="empty-pane"><i class="bi bi-hourglass-split"></i>Loading vehicle history…</div>`;

  fetch(historyUrl(vehicleId))
    .then(r => r.json())
    .then(data => {
      if(!data.ok){
        wrap.innerHTML = `<div class="empty-pane"><i class="bi bi-exclamation-triangle"></i>${esc(data.error||'Could not load vehicle.')}</div>`;
        return;
      }
      renderResults(data.vehicle, data.jobs);
    })
    .catch(() => {
      wrap.innerHTML = `<div class="empty-pane"><i class="bi bi-exclamation-triangle"></i>Network error loading vehicle history.</div>`;
    });
}

function infoBlock(label, val){
  return `<div><span class="sf-lbl">${esc(label)}</span><span class="sf-val">${esc(val||'—')}</span></div>`;
}

function renderResults(v, jobs){
  const wrap = document.getElementById('resultsWrap');

  let html = `
    <div class="sf-card">
      <div class="sf-card-hd">
        <span><i class="bi bi-car-front-fill me-1"></i>${esc(v.reg_no)} — ${esc(v.make)} ${esc(v.model)}</span>
        <span style="font-size:.74rem;font-weight:600;color:#000;text-transform:none;">${jobs.length} job${jobs.length===1?'':'s'} on record</span>
      </div>
      <div class="veh-info-grid">
        ${infoBlock('Color', v.color)}
        ${infoBlock('Year', v.year)}
        ${infoBlock('Chassis No', v.frame_no)}
        ${infoBlock('Engine No', v.engine_no)}
        ${infoBlock('Owner', v.owner_name)}
        ${infoBlock('Mobile', v.owner_mobile)}
        ${infoBlock('Phone', v.owner_phone)}
        ${infoBlock('City', v.owner_city)}
        ${infoBlock('Address', v.owner_address)}
        ${infoBlock('Total Visits', v.total_visits)}
        ${infoBlock('Last Job', v.last_job_date)}
      </div>
    </div>

    <div class="sf-card-hd" style="border-radius:12px;margin-bottom:.8rem;">
      <span><i class="bi bi-card-checklist me-1"></i>Job History</span>
    </div>
  `;

  if(!jobs.length){
    html += `<div class="empty-pane"><i class="bi bi-inbox"></i>No jobs found for this vehicle yet.</div>`;
    wrap.innerHTML = html;
    return;
  }

  html += `<div class="row g-3">`;
  jobs.forEach(j => {
    const svcHtml = j.services.length
      ? j.services.map(s => `<span class="jc-svc">${esc(s.name)}${s.technician ? ' · '+esc(s.technician) : ''}</span>`).join('')
      : `<span class="jc-svc" style="opacity:.6;">No services logged</span>`;

    html += `
      <div class="col-md-6 col-xl-4">
        <div class="job-card" onclick="window.open('${jobDetailUrl(j.job_no)}','_blank')">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <span class="jc-no">#${j.job_no}</span>
              <span class="jc-date ms-2">${esc(j.job_date)}</span>
            </div>
            <span class="st-badge st-${j.status}">${esc(j.status_label)}</span>
          </div>

          <div class="jc-line mt-2">
            <span class="sf-badge bb-${j.billing_type}">${esc(j.billing_label)}</span>
            ${j.advisor ? '<span class="ms-2">Advisor: <b>'+esc(j.advisor)+'</b></span>' : ''}
            ${j.pit ? '<span class="ms-2">Pit: <b>'+esc(j.pit)+'</b></span>' : ''}
          </div>

          <div class="mt-2">${svcHtml}</div>

          <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="jc-line">
              Parts: <b>Rs. ${fmt(j.parts_net)}</b> · Services: <b>Rs. ${fmt(j.services_net)}</b>
              ${j.invoice_no ? '<br>Invoice #'+esc(j.invoice_no) : ''}
            </div>
            <span class="jc-amt">Rs. ${fmt(j.net_amount)}</span>
          </div>
        </div>
      </div>`;
  });
  html += `</div>`;

  wrap.innerHTML = html;
}
</script>
{% endblock %}