{% extends "pos/base.html" %}
{% block title %}Step 1 — Vehicle Check-in{% if job %} #{{ job.job_no }}{% endif %}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
<style>
/* ══ Apple/Mac design system ══════════════════════════════ */
:root{
  --c-bg:#f2f2f7; --c-card:#fff; --c-border:#d1d1d6;
  --c-accent:#007aff; --c-accent-d:#005ecb;
  --c-text:#1c1c1e; --c-sub:#6e6e73; --c-danger:#ff3b30;
  --c-success:#34c759; --c-warn:#ff9f0a; --c-purple:#5856d6;
  --r-card:14px; --r-input: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;}

/* Cards */
.sf-card{background:var(--c-card);border-radius:var(--r-card);
  box-shadow:var(--shadow);margin-bottom:1.1rem;overflow:hidden;
  transition:box-shadow .2s;}
.sf-card:hover{box-shadow:var(--shadow-h);}
.sf-card-hd{padding:.6rem 1.2rem;border-bottom:1px solid var(--c-border);
  font-size:.76rem;font-weight:700;color:#222;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(0,0,0,.02);}
.sf-card-bd{padding:1rem 1.2rem;}

/* Inputs */
.sf-lbl{font-size:.74rem;font-weight:600;color:#000;
  margin-bottom:3px;display:block;letter-spacing:.02em;}
.sf-inp{height:38px;border:1px solid var(--c-border);
  border-radius:var(--r-input)!important;font-size:.87rem;
  color:var(--c-text);padding:0 .75rem;background:#fff;
  width:100%;outline:none;transition:border-color .15s,box-shadow .15s;}
.sf-inp:focus{border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(0,122,255,.13);}
.sf-inp[readonly]{background:#f9f9f9;color:#aaa;}
textarea.sf-inp{height:auto;padding:.5rem .75rem;resize:vertical;}
select.sf-inp{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px!important;}

/* Billing pills */
.bp-wrap{display:flex;flex-wrap:wrap;gap:.4rem;}
.bp-radio{display:none;}
.bp-lbl{border:1.5px solid var(--c-border);border-radius:20px;
  padding:.28rem .9rem;font-size:.78rem;font-weight:600;
  color:var(--c-sub);cursor:pointer;background:#fff;
  transition:all .15s;user-select:none;display:flex;align-items:center;gap:.3rem;}
.bp-lbl:hover{border-color:var(--c-accent);color:var(--c-accent);}
.bp-radio:checked+.bp-lbl{background:var(--c-accent);border-color:var(--c-accent);
  color:#fff;box-shadow:0 2px 8px rgba(0,122,255,.35);}

/* Slide panels */
.sf-slide{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s ease,opacity .25s ease;}
.sf-slide.open{max-height:900px;opacity:1;}

/* Toggle switch */
.sf-toggle-row{display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 0;border-bottom:1px solid #f0f0f0;}
.sf-toggle-row:last-child{border:none;}

/* Page header */
.sf-page-hd{background:linear-gradient(135deg,#eef4ff,#e0eaff);border-radius:var(--r-card);padding:.9rem 1.3rem;color:#1c1c1e;margin-bottom:1rem;box-shadow:var(--shadow);border:1px solid #c5d8ff;}

/* Vehicle search */
.sf-vsearch .select2-container .select2-selection--single{
  border:1.5px solid var(--c-border)!important;border-radius:var(--r-input)!important;
  height:44px!important;display:flex;align-items:center;}
.sf-vsearch .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:42px!important;font-size:.9rem;padding-left:38px!important;color:var(--c-sub);}
.sf-vsearch .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px!important;}
.sf-vsearch .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--c-accent)!important;box-shadow:0 0 0 3px rgba(0,122,255,.13)!important;}
.search-icon-abs{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--c-sub);font-size:1rem;pointer-events:none;}

/* Customer select2 */
.select2-container--default .select2-selection--single{
  border:1px solid var(--c-border)!important;border-radius:var(--r-input)!important;
  height:38px!important;}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px!important;font-size:.87rem;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px!important;}
.select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--c-accent)!important;box-shadow:0 0 0 3px rgba(0,122,255,.13)!important;}
.select2-results__option{font-size:.84rem;}

/* Dep preview */
.dep-box{border-radius:10px;padding:.7rem 1rem;font-size:.8rem;
  background:linear-gradient(135deg,rgba(0,122,255,.06),rgba(88,86,214,.06));
  border:1px solid rgba(0,122,255,.18);display:none;}
.dep-box.show{display:block;}

/* Save button */
.sf-btn{height:40px;border:none;border-radius:var(--r-input);
  font-size:.88rem;font-weight:700;padding:0 1.4rem;cursor:pointer;
  transition:all .15s;display:inline-flex;align-items:center;gap:.4rem;}
.sf-btn-primary{background:var(--c-accent);color:#fff;}
.sf-btn-primary:hover{background:var(--c-accent-d);box-shadow:0 3px 12px rgba(0,122,255,.35);}
.sf-btn-outline{background:#fff;color:var(--c-accent);border:1.5px solid var(--c-accent);}
.sf-btn-outline:hover{background:rgba(0,122,255,.05);}

/* Pit highlight */
.pit-inp{font-weight:700;color:var(--c-purple);}

/* kbd hint */
.kbd-hint{font-size:.7rem;color:#333;}
kbd{font-size:.68rem;padding:1px 4px;border-radius:3px;
  border:1px solid #bbb;background:#f5f5f5;color:#333;}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3 px-4" style="max-width:1080px;">

  {% 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">
    <div>
      <h5 class="mb-0 fw-bold">
        <span class="badge me-2" style="background:rgba(0,0,0,.07);color:#007aff;font-size:.75rem;font-weight:700;">Step 1 / 3</span>
        Vehicle Check-in
        {% if job %}<span class="fw-normal ms-2 fs-6" style="color:#555;">Job #{{ job.job_no }}</span>{% endif %}
      </h5>
      <small style="color:#444;">Enter all vehicle and job details &nbsp;·&nbsp; <kbd style="background:rgba(0,0,0,.07);border-color:#bbb;color:#333;">Ctrl+S</kbd> to save</small>
    </div>
    <a href="{% url 'workshop:job_list' %}" class="sf-btn sf-btn-outline"
       style="background:rgba(0,0,0,.06);color:#1c1c1e;border-color:rgba(0,0,0,.15);">
      <i class="bi bi-list-ul"></i> All Jobs
    </a>
  </div>

  <div class="sf-card sf-vsearch">
    <div class="sf-card-bd">
      <div class="position-relative">
        <i class="bi bi-search search-icon-abs"></i>
        <select id="vehicleSearchSelect" style="width:100%"
                placeholder="Search by Reg. No. or Owner Name to load existing vehicle..."></select>
      </div>
      <div class="kbd-hint mt-1">
        <i class="bi bi-info-circle me-1"></i>
        Search existing vehicle → all fields auto-filled &nbsp;·&nbsp; or enter new vehicle data manually below
      </div>
    </div>
  </div>

  <form method="POST" id="step1Form" novalidate>
    {% csrf_token %}
    {% if job %}<input type="hidden" name="job_no" value="{{ job.job_no }}">{% endif %}
    <input type="hidden" name="customer_id" id="customerId" value="{{ job.customer_id|default:'' }}">

    <div class="row g-3">

      <div class="col-lg-8">

        {# ─── Vehicle Details ─── #}
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-car-front me-1"></i>Vehicle Information</div>
          <div class="sf-card-bd">
            <div class="row g-2">
              <div class="col-md-4 col-6">
                <label class="sf-lbl">Reg. No. <span class="text-danger">*</span></label>
                <input type="text" name="reg_no" id="fRegNo" class="sf-inp text-uppercase fw-bold"
                       value="{{ job.vehicle.reg_no|default:'' }}"
                       placeholder="ASP-920" required>
              </div>
              <div class="col-md-4 col-6">
                <label class="sf-lbl">Make / Brand</label>
                <input type="text" name="make" id="fMake" class="sf-inp"
                       value="{{ job.vehicle.make|default:'' }}" placeholder="Honda, Toyota…">
              </div>
              <div class="col-md-4 col-6">
                <label class="sf-lbl">Model</label>
                <input type="text" name="model" id="fModel" class="sf-inp"
                       value="{{ job.vehicle.model|default:'' }}" placeholder="Civic, Corolla…">
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Year</label>
                <input type="number" name="year" id="fYear" class="sf-inp"
                       value="{{ job.vehicle.year|default:'' }}" placeholder="2020">
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Color</label>
                <input type="text" name="color" id="fColor" class="sf-inp"
                       value="{{ job.vehicle.color|default:'' }}" placeholder="White, Silver…">
              </div>
              <div class="col-md-6 col-12">
                <label class="sf-lbl">Frame / Chassis No.</label>
                <input type="text" name="frame_no" id="fFrame" class="sf-inp font-monospace"
                       value="{{ job.vehicle.frame_no|default:'' }}" placeholder="Chassis number">
              </div>
              <div class="col-md-6 col-6">
                <label class="sf-lbl">Engine No.</label>
                <input type="text" name="engine_no" id="fEngine" class="sf-inp font-monospace"
                       value="{{ job.vehicle.engine_no|default:'' }}" placeholder="Engine no.">
              </div>
              <div class="col-md-6 col-6">
                <label class="sf-lbl">Owner Name</label>
                <input type="text" name="owner_name" id="fOwnerName" class="sf-inp"
                       value="{{ job.vehicle.owner_name|default:'' }}" placeholder="Vehicle owner's name">
              </div>
              <div class="col-md-6 col-6">
                <label class="sf-lbl">Owner Mobile</label>
                <input type="text" name="owner_mobile" id="fOwnerMobile" class="sf-inp"
                       value="{{ job.vehicle.owner_mobile|default:'' }}" placeholder="03XX-XXXXXXX">
              </div>
            </div>
          </div>
        </div>

        {# ─── Job Details ─── #}
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-clipboard-check me-1"></i>Job Details</div>
          <div class="sf-card-bd">
            <div class="row g-2">
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Job Date <span class="text-danger">*</span></label>
                <input type="date" name="job_date" id="fJobDate" class="sf-inp"
                       value="{{ job.job_date|date:'Y-m-d'|default:today }}" required>
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl"><i class="bi bi-geo-alt me-1" style="color:var(--c-purple);"></i>Pit / Terminal</label>
                <input type="text" name="pit" id="fPit" class="sf-inp pit-inp"
                       value="{{ job.pit|default:'' }}" placeholder="e.g. Pit 3 / Bay A">
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Odometer (KM)</label>
                <input type="number" name="odometer_in" id="fOdo" class="sf-inp"
                       value="{{ job.odometer_in|default:'' }}" placeholder="85,000">
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Job Type</label>
                <select name="job_type" id="fJobType" class="sf-inp">
                  {% for val, lbl in job_types %}
                  <option value="{{ val }}" {% if job.job_type == val %}selected{% endif %}>{{ lbl }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Job Group</label>
                <select name="job_group" id="fJobGroup" class="sf-inp">
                  {% for val, lbl in job_groups %}
                  <option value="{{ val }}" {% if job.job_group == val %}selected{% endif %}>{{ lbl }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">RB No.</label>
                <input type="text" name="rb_no" id="fRbNo" class="sf-inp"
                       value="{{ job.rb_no|default:'' }}" placeholder="Repair bill no.">
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">QIC No.</label>
                <input type="text" name="qic_no" id="fQicNo" class="sf-inp"
                       value="{{ job.qic_no|default:'' }}" placeholder="QIC no.">
              </div>
              <div class="col-12">
                <label class="sf-lbl">Remarks / Job Description</label>
                <input type="text" name="remarks" id="fRemarks" class="sf-inp"
                       value="{{ job.remarks|default:'' }}" placeholder="Job description or special notes">
              </div>
            </div>
            {% if job %}
            <div class="mt-2" style="font-size:.74rem;color:#888;">
              <i class="bi bi-clock-history me-1"></i>
              Checked in: {{ job.time_in|time:"H:i"|default:"—" }}
              {% if job.time_out %}&nbsp;→ Invoiced: {{ job.time_out|time:"H:i" }}{% endif %}
              <span class="ms-1">(auto-recorded — not editable)</span>
            </div>
            {% endif %}
          </div>
        </div>

        {# ─── Staff Assignment ─── #}
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-people me-1"></i>Staff Assignment</div>
          <div class="sf-card-bd">
            <div class="row g-2">
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Service Advisor</label>
                <select name="advisor_id" id="fAdvisor" class="sf-inp">
                  <option value="">— Select —</option>
                  {% for s in staff_list %}
                  <option value="{{ s.t_id }}" {% if job.advisor_id == s.t_id %}selected{% endif %}>{{ s.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Technician</label>
                <select name="technician_id" id="fTech" class="sf-inp">
                  <option value="">— Select —</option>
                  {% for s in staff_list %}
                  <option value="{{ s.t_id }}" {% if job.technician_id == s.t_id %}selected{% endif %}>{{ s.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Labour 1 (Helper)</label>
                <select name="helper_1_id" id="fHelper1" class="sf-inp">
                  <option value="">— Select —</option>
                  {% for s in staff_list %}
                  <option value="{{ s.t_id }}" {% if job.helper_1_id == s.t_id %}selected{% endif %}>{{ s.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-3 col-6">
                <label class="sf-lbl">Labour 2 (Helper)</label>
                <select name="helper_2_id" id="fHelper2" class="sf-inp">
                  <option value="">— Select —</option>
                  {% for s in staff_list %}
                  <option value="{{ s.t_id }}" {% if job.helper_2_id == s.t_id %}selected{% endif %}>{{ s.name }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>

      </div>{# /col-lg-8 #}

      <div class="col-lg-4">

        {# ─── Billing Type ─── #}
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-credit-card me-1"></i>Billing Type</div>
          <div class="sf-card-bd">
            <div class="bp-wrap">
              {% for val, lbl in billing_types %}
              <div>
                <input type="radio" name="billing_type" value="{{ val }}"
                       id="bt_{{ val }}" class="bp-radio"
                       {% if job.billing_type == val %}checked{% elif not job and val == 'cash' %}checked{% endif %}>
                <label for="bt_{{ val }}" class="bp-lbl">
                  {% if val == 'cash' %}<i class="bi bi-cash"></i>
                  {% elif val == 'credit' %}<i class="bi bi-person-lines-fill"></i>
                  {% elif val == 'corporate' %}<i class="bi bi-briefcase"></i>
                  {% elif val == 'insurance' %}<i class="bi bi-shield-check"></i>
                  {% elif val == 'complimentary' %}<i class="bi bi-gift"></i>
                  {% endif %}
                  {{ lbl }}
                </label>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>

        {# ─── Billing Company / Customer (slide-in) ─── #}
        <div class="sf-card sf-slide" id="custSection">
          <div class="sf-card-hd" id="custSectionLabel">
            <i class="bi bi-building me-1"></i>Billing Company
          </div>
          <div class="sf-card-bd">
            <label class="sf-lbl" id="custLabel">Company <span class="text-danger">*</span></label>
            <select id="customerSelect" style="width:100%" placeholder="Search company…"></select>
            <div id="custInfo" class="mt-2 rounded p-2 d-none"
                 style="background:rgba(0,122,255,.06);font-size:.76rem;">
              <span >Selected: </span>
              <span id="custInfoName" class="fw-semibold"></span>
              <span id="custInfoBal" class="ms-2 text-danger"></span>
            </div>
          </div>
        </div>

        {# ─── Insurance Fields (slide-in) ─── #}
        <div class="sf-card sf-slide" id="insSection">
          <div class="sf-card-hd" style="color:var(--c-warn);">
            <i class="bi bi-shield-check me-1"></i>Insurance Details
          </div>
          <div class="sf-card-bd">
            <div class="row g-2">
              <div class="col-12">
                <label class="sf-lbl">Loss No.</label>
                <input type="text" name="loss_no" id="fLossNo" class="sf-inp"
                       value="{{ job.loss_no|default:'' }}" placeholder="Loss / Claim reference">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Claim No.</label>
                <input type="text" name="claim_no" id="fClaimNo" class="sf-inp"
                       value="{{ job.claim_no|default:'' }}" placeholder="Claim #">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Policy No.</label>
                <input type="text" name="policy_no" id="fPolicyNo" class="sf-inp"
                       value="{{ job.policy_no|default:'' }}" placeholder="Policy #">
              </div>

              <div class="col-12"><hr class="my-1"></div>

              <div class="col-6">
                <label class="sf-lbl">Surveyor Name</label>
                <input type="text" name="surveyor" id="fSurveyor" class="sf-inp"
                       value="{{ job.surveyor|default:'' }}" placeholder="Surveyor full name">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Surveyor Company</label>
                <input type="text" name="surveyor_company" id="fSurveyorCompany" class="sf-inp"
                       value="{{ job.surveyor_company|default:'' }}" placeholder="Surveyor's company">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Surveyor Number</label>
                <input type="text" name="surveyor_number" id="fSurveyorNumber" class="sf-inp"
                       value="{{ job.surveyor_number|default:'' }}" placeholder="Contact #">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Surveyor Address</label>
                <input type="text" name="surveyor_address" id="fSurveyorAddress" class="sf-inp"
                       value="{{ job.surveyor_address|default:'' }}" placeholder="Address">
              </div>

              <div class="col-12"><hr class="my-1"></div>

              <div class="col-6">
                <label class="sf-lbl" style="color:var(--c-accent);">
                  <i class="bi bi-percent me-1"></i>
                  Depreciation % <span class="fw-normal text-muted">(on Parts only)</span>
                </label>
                <input type="number" name="dep_per" id="fDepPer" class="sf-inp"
                       value="{{ job.dep_per|default:0 }}"
                       placeholder="e.g. 20" min="0" max="100" step="0.1"
                       oninput="calcDep()">
              </div>
              <div class="col-6">
                <label class="sf-lbl" style="color:var(--c-accent);">
                  <i class="bi bi-percent me-1"></i>
                  Under Insurance %
                </label>
                <input type="number" name="under_insurance_per" id="fUiPer" class="sf-inp"
                       value="{{ job.under_insurance_per|default:0 }}"
                       placeholder="e.g. 80" min="0" max="100" step="0.1"
                       oninput="calcDep()">
              </div>
              <div class="col-12">
                <div class="sf-lbl mt-1" style="font-weight:400;">
                  Depreciation applies only to Parts. Under Insurance % is then applied on the
                  remaining Parts value to work out what the insurer actually pays; the customer
                  pays the rest of the invoice.
                </div>
              </div>

              <div class="col-12">
                <div class="dep-box" id="depBox">
                  <div class="d-flex justify-content-between">
                    <span>Parts Net (incl. GST)</span>
                    <span id="depPartsNet">—</span>
                  </div>
                  <div class="d-flex justify-content-between mt-1">
                    <span>Depreciation (<span id="depPct">0</span>% on Parts)</span>
                    <strong class="text-danger" id="depAmt">—</strong>
                  </div>
                  <div class="d-flex justify-content-between mt-1">
                    <span>Under Insurance (<span id="uiPct">0</span>%)</span>
                    <strong class="text-primary" id="uiAmt">—</strong>
                  </div>
                  <hr class="my-1">
                  <div class="d-flex justify-content-between mb-1">
                    <span class="fw-semibold">Customer pays</span>
                    <strong id="depCustAmt">—</strong>
                  </div>
                  <div class="d-flex justify-content-between text-muted">
                    <span class="fw-semibold">Insurance Company billed</span>
                    <strong id="depInsAmt">—</strong>
                  </div>
                  <div class="text-muted mt-1" style="font-size:.7rem;">
                    Based on current Net Amount: Rs. <span id="depTotal">{{ job.net_amount|default:0|floatformat:0 }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {# ─── Corporate Fields (slide-in) ─── #}
        <div class="sf-card sf-slide" id="corpSection">
          <div class="sf-card-hd" style="color:var(--c-purple);">
            <i class="bi bi-briefcase me-1"></i>Corporate Details
          </div>
          <div class="sf-card-bd">
            <label class="sf-lbl">W.O. Ref. No.</label>
            <input type="text" name="co_no" id="fCoNo" class="sf-inp"
                   value="{{ job.co_no|default:'' }}" placeholder="Work Order reference #">
          </div>
        </div>

        {# ─── Options (Complimentary) ─── #}
        <div class="sf-card">
          <div class="sf-card-hd"><i class="bi bi-toggles me-1"></i>Discount / Complimentary</div>
          <div class="sf-card-bd" style="padding-top:.5rem;padding-bottom:.5rem;">
            <div class="sf-toggle-row">
              <label class="sf-lbl mb-0">Services Complimentary</label>
              <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="services_complimentary"
                       {% if job.services_complimentary %}checked{% endif %}>
              </div>
            </div>
            <div class="sf-toggle-row">
              <label class="sf-lbl mb-0">Parts Complimentary</label>
              <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="parts_complimentary"
                       {% if job.parts_complimentary %}checked{% endif %}>
              </div>
            </div>
            <div class="row g-2 mt-1">
              <div class="col-6">
                <label class="sf-lbl">Services Discount %</label>
                <input type="number" name="services_discount_per" class="sf-inp"
                       value="{{ job.services_discount_per|default:0 }}"
                       min="0" max="100" step="0.01" placeholder="0">
              </div>
              <div class="col-6">
                <label class="sf-lbl">Parts Discount %</label>
                <input type="number" name="parts_discount_per" class="sf-inp"
                       value="{{ job.parts_discount_per|default:0 }}"
                       min="0" max="100" step="0.01" placeholder="0">
              </div>
            </div>
            <div class="mt-1" style="font-size:.7rem;color:#999;">
              <i class="bi bi-info-circle me-1"></i>Cash Counter can also apply an extra flat Rs. discount at settlement.
            </div>
          </div>
        </div>

        {# ─── Save / Next ─── #}
        <div class="d-flex gap-2 mt-1">
          <button type="submit" id="saveBtn" class="sf-btn sf-btn-primary flex-grow-1">
            <i class="bi bi-check-circle"></i>
            {% if job %}Update{% else %}Create Job{% endif %}
          </button>
          {% if job %}
          <a href="{% url 'workshop:step2_services' job.job_no %}"
             class="sf-btn sf-btn-outline">
            Services <i class="bi bi-arrow-right"></i>
          </a>
          {% endif %}
        </div>
        <div class="text-center kbd-hint mt-2">
          <kbd>Enter</kbd> = next field &nbsp;·&nbsp; <kbd>Ctrl+S</kbd> = save
        </div>

      </div>{# /col-lg-4 #}
    </div>{# /row #}
  </form>
</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_URL  = "{% url 'workshop:ajax_vehicles' %}";
const AJAX_CUST_URL     = "{% url 'workshop:ajax_customers' %}";
const INIT_CUST_ID      = "{{ job.customer_id|default:'' }}";
const INIT_CUST_NAME    = "{{ job.owner_name_snapshot|default:''|escapejs }}";
const JOB_NET           = {{ job.net_amount|default:0|floatformat:2 }};
const JOB_PARTS_NET     = {{ job.parts_net|default:0|floatformat:2 }};

// ══ 1. ENTER KEY → NEXT INPUT (never submit) ════════════════════════
function getFocusable(){
  return Array.from(document.querySelectorAll(
    '#step1Form input:not([type="hidden"]):not([disabled]):not(.select2-search__field),' +
    '#step1Form select:not([disabled]),' +
    '#step1Form textarea:not([disabled])'
  )).filter(el => el.offsetParent !== null && !el.classList.contains('sf-pill-radio'));
}

document.getElementById('step1Form').addEventListener('keydown', function(e){
  if(e.key !== 'Enter') return;
  if(e.target.type === 'submit') return;
  if(e.target.classList.contains('select2-search__field')) return;
  e.preventDefault();
  const inputs = getFocusable();
  const idx    = inputs.indexOf(e.target);
  if(idx >= 0 && idx < inputs.length - 1) inputs[idx + 1].focus();
});

// ══ 2. CTRL+S → SAVE ════════════════════════════════════════════════
document.addEventListener('keydown', function(e){
  if(e.ctrlKey && e.key.toLowerCase() === 's'){
    e.preventDefault();
    document.getElementById('step1Form').submit();
  }
});

// ══ 3. VEHICLE SEARCH SELECT2 ════════════════════════════════════════
$(document).ready(function(){
  $('#vehicleSearchSelect').select2({
    ajax:{
      url: AJAX_VEHICLE_URL,
      dataType: 'json',
      delay: 250,
      data:function(p){ return { q: p.term }; },
      processResults:function(d){ return { results: d.results }; },
      cache: true,
    },
    placeholder: '🔍  Search by Reg. No., Owner Name, or Frame No. to load vehicle...',
    minimumInputLength: 2,
    width: '100%',
    templateResult: function(v){
      if(v.loading) return v.text;
      return $(`<div class="d-flex justify-content-between align-items-center">
        <div>
          <strong>${v.reg_no}</strong>
          <span class="text-muted ms-2">${v.make} ${v.model} ${v.year || ''}</span>
        </div>
        <span class="text-muted small">${v.owner_name}</span>
      </div>`);
    },
  });

  // On vehicle selected → fill all fields
  $('#vehicleSearchSelect').on('select2:select', function(e){
    const v = e.params.data;
    const set = (id, val) => { const el = document.getElementById(id); if(el) el.value = val; };
    set('fRegNo',       v.reg_no);
    set('fMake',        v.make);
    set('fModel',       v.model);
    set('fYear',        v.year);
    set('fColor',       v.color);
    set('fFrame',       v.frame_no);
    set('fEngine',      v.engine_no);
    set('fOwnerName',   v.owner_name);
    set('fOwnerMobile', v.owner_mobile);
    if(v.last_km) set('fOdo', v.last_km);
    // Clear selection so bar is ready for next search
    $(this).val(null).trigger('change');
    // Focus odometer
    document.getElementById('fOdo').focus();
  });
});

// ══ 4. BILLING TYPE → SHOW/HIDE SECTIONS ════════════════════════════
function applyBillingType(val){
  const needsCust = ['credit','corporate','insurance'].includes(val);
  document.getElementById('custSection').classList.toggle('open', needsCust);
  document.getElementById('insSection').classList.toggle('open', val === 'insurance');
  document.getElementById('corpSection').classList.toggle('open', val === 'corporate');

  const lbl = {'credit':'Customer','corporate':'Corporate Company','insurance':'Insurance Company'}[val] || 'Company';
  document.getElementById('custLabel').innerHTML = lbl + ' <span class="text-danger">*</span>';

  initCustomerSelect2(val);
}

document.querySelectorAll('input[name="billing_type"]').forEach(r=>{
  r.addEventListener('change', ()=> applyBillingType(r.value));
});

// ══ 5. CUSTOMER SELECT2 ══════════════════════════════════════════════
let custSelectInit = false;
function initCustomerSelect2(btype){
  try{ $('#customerSelect').select2('destroy'); }catch(e){}
  $('#customerSelect').select2({
    ajax:{
      url: AJAX_CUST_URL,
      dataType:'json',
      delay:250,
      data:function(p){ return { q: p.term, type: btype }; },
      processResults:function(d){ return { results: d.results }; },
      cache:true,
    },
    placeholder: btype === 'corporate' ? 'Search corporate company...' :
                 btype === 'insurance' ? 'Search insurance company...' : 'Search customer...',
    minimumInputLength: 2,
    width:'100%',
    templateResult:function(p){
      if(p.loading) return p.text;
      const bal = parseFloat(p.balance||0);
      return $(`<div class="d-flex justify-content-between">
        <span>${p.text}</span>
        ${bal ? `<span class="text-${bal>0?'danger':'success'} small">${Math.abs(bal).toLocaleString()}</span>` : ''}
      </div>`);
    },
  });

  $('#customerSelect').on('select2:select', function(e){
    const d = e.params.data;
    document.getElementById('customerId').value = d.id;
    document.getElementById('custInfoName').textContent = d.text;
    const bal = parseFloat(d.balance||0);
    document.getElementById('custInfoBal').textContent = bal ? 'Bal: '+Math.round(bal).toLocaleString() : '';
    document.getElementById('custInfo').classList.remove('d-none');
  });

  // Restore
  if(INIT_CUST_ID && !custSelectInit){
    const opt = new Option(INIT_CUST_NAME || 'Customer #'+INIT_CUST_ID, INIT_CUST_ID, true, true);
    $('#customerSelect').append(opt).trigger('change');
    document.getElementById('customerId').value = INIT_CUST_ID;
    custSelectInit = true;
  }
}

// ══ 6. DEPRECIATION / UNDER-INSURANCE PREVIEW ══════════════════════════
// Depreciation Amount    = Parts Net × dep% / 100
// Under Insurance Amount = (Parts Net − Depreciation Amount) × ui% / 100
// Customer Share          = Net Amount − Under Insurance Amount
function calcDep(){
  const dep  = parseFloat(document.getElementById('fDepPer').value || 0);
  const ui   = parseFloat(document.getElementById('fUiPer').value || 0);
  const net  = JOB_NET || 0;
  const partsNet = JOB_PARTS_NET || 0;
  const box  = document.getElementById('depBox');

  if(!dep && !ui){ box.classList.remove('show'); return; }

  const depAmt = Math.round(partsNet * dep / 100);
  const uiAmt  = Math.round((partsNet - depAmt) * ui / 100);
  const cust   = Math.round(net - uiAmt);

  document.getElementById('depPartsNet').textContent = 'Rs. '+Math.round(partsNet).toLocaleString();
  document.getElementById('depPct').textContent      = dep.toFixed(1);
  document.getElementById('uiPct').textContent       = ui.toFixed(1);
  document.getElementById('depAmt').textContent      = 'Rs. '+depAmt.toLocaleString();
  document.getElementById('uiAmt').textContent        = 'Rs. '+uiAmt.toLocaleString();
  document.getElementById('depCustAmt').textContent  = 'Rs. '+cust.toLocaleString();
  document.getElementById('depInsAmt').textContent   = 'Rs. '+uiAmt.toLocaleString();
  box.classList.add('show');
}

// ══ INIT ══════════════════════════════════════════════════════════════
$(document).ready(function(){
  const currentBt = document.querySelector('input[name="billing_type"]:checked');
  if(currentBt) applyBillingType(currentBt.value);
  calcDep();
});
</script>
{% endblock %}