Subversion Repositories SmartDukaan

  /* Across the top rather than down a narrow column, so the nine-column table gets the full width. */

  .attstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}

  .attstrip .att{margin-bottom:0}

  .attstrip .atitle{font-size:12.5px;line-height:1.25}

  .attstrip .adet{font-size:11.5px;margin-top:1px}

  /* Wide content scrolls inside its own card, never the page body. */

  .pipewrap{overflow-x:auto}

  /* table-layout:fixed + a colgroup so the columns keep sane proportions on a wide screen instead

     of the browser handing City and Created-by a third of the table each. Business/Retailer takes

     the slack because it is the column people actually read. */

  .pipewrap table{min-width:1040px;table-layout:fixed}

  .pipewrap td{vertical-align:middle;overflow:hidden;text-overflow:ellipsis}

  .pipewrap td.wrapok{white-space:normal}

  .pipewrap td.nowrap{white-space:nowrap}

  th.sortable{cursor:pointer;user-select:none;white-space:nowrap}

  th.sortable:hover{color:var(--brand2)}

  th.sortable.on{color:var(--brand2)}

  /* Triangle drawn with borders — no glyph, so it cannot fall back to a tofu box the way U+2195 did. */

  th.sortable .arrow{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;

    border-left:4px solid transparent;border-right:4px solid transparent}

  th.sortable .arrow.up{border-bottom:5px solid currentColor}

  th.sortable .arrow.down{border-top:5px solid currentColor}

  /* Field label outside the filter bar (.ctl .lbl is scoped to it) + the record-action modals. */

  .lbl{display:block;font-size:12px;font-weight:600;color:var(--soft);margin:10px 0 4px}

  .modal{position:fixed;inset:0;z-index:90;background:rgba(14,18,40,.44);display:flex;align-items:flex-start;

         justify-content:center;padding:6vh 16px;overflow:auto}

  .modal .box{background:#fff;border-radius:14px;width:min(640px,100%);box-shadow:0 26px 70px rgba(10,15,40,.3)}

  .modal .mh{padding:18px 22px 0}

  .modal .mh h2{margin:0;font-size:17px;color:var(--brand)}

  .modal .mb{padding:4px 22px 18px}

  .modal .mf{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

  .dispgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:6px}

  /* When the trail scrolls, bleed it out to the card's edge (.card padding is 17px 19px) and put

     that 19px back as padding — the scrollbar then sits flush against the card border instead of

     floating in a gutter, and the entries stay where they were. */

  .trail.scrolls{margin-right:-19px;padding-right:19px}

  .tevt .trec{display:flex;align-items:center;gap:8px;margin-top:6px}

  .tevt .trec audio{height:30px;max-width:230px}

      <h2>Needs attention now</h2>

      <p class="desc">Actionable queues · click to work them.</p>

      <div id="ccAttention" class="attstrip"></div>

    </div>

        <h2 style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap">Lead pipeline

          <span style="display:flex;gap:6px;align-items:center">

            <input id="pipeQ" class="inp" style="width:230px;font-size:12.5px;padding:7px 10px"

                   placeholder="Name, outlet, mobile, city, created by">

            <button class="btn ghost sm" onclick="pipeSearch()">Search</button>

            <button class="btn ghost sm hide" id="pipeClear" onclick="pipeClearSearch()">Clear</button>

          </span>

        <div class="pipewrap">

          <colgroup>

            <col style="width:130px"><col style="width:130px"><col style="width:130px">

            <col style="width:104px"><col style="width:84px">

          </colgroup>

          <thead><tr>

            <th class="sortable" data-sort="created">LMS ID</th>

            <th class="sortable" data-sort="name">Business / Retailer</th>

            <th>Path</th>

            <th class="sortable" data-sort="stage">Stage</th>

            <th>Owner</th>

            <th class="sortable" data-sort="city">City</th>

            <th class="sortable" data-sort="createdBy">Created by</th>

            <th class="sortable" data-sort="sla">SLA</th>

            <th class="sortable num" data-sort="value">Value</th>

          </tr></thead>

        <div id="pipeFoot" style="display:flex;align-items:center;justify-content:space-between;gap:10px;

            <button class="btn ghost sm" id="pipePrev" onclick="pipePage(-1)">&larr; Prev</button>

            <button class="btn ghost sm" id="pipeNext" onclick="pipePage(1)">Next &rarr;</button>

          </span>

<!-- Record actions: edit the record, and log a call outcome. Both write to the same endpoints

     the in-app lead record uses. -->

<div class="modal hide" id="editModal">

  <div class="box">

    <div class="mh"><h2>Edit record</h2>

      <p class="desc">Every change is written to the trail against your name.</p></div>

    <div class="mb" id="editBody"></div>

    <div class="mf"><button class="btn ghost" onclick="closeEdit()">Cancel</button>

      <button class="btn" style="background:#1f2a5e;color:#fff" onclick="saveEdit()">Save changes</button></div>

  </div>

</div>

<div class="modal hide" id="dispModal">

  <div class="box">

    <div class="mh"><h2>Call disposition</h2>

      <p class="desc">Structured outcome on every interaction (SOP &sect;12.2).</p></div>

    <div class="mb">

      <label class="lbl">Outcome (required)</label>

      <div class="dispgrid" id="dispGrid"></div>

      <div id="dispExtra"></div>

      <label class="lbl">Note (attaches to the trail)</label>

      <textarea id="dispNote" class="inp" rows="2" style="width:100%;resize:vertical"></textarea>

    </div>

    <div class="mf"><button class="btn ghost" onclick="closeDisp()">Cancel</button>

      <button class="btn coral" onclick="saveDisp()">Save disposition</button></div>

  </div>

</div>

<!-- Manual geo verification (SOP §6: geo-pin). Same endpoints the Leads screen uses:

     /lead-geo/geocode-address, /lead-geo/upload-image, /lead-geo/manual-verify. -->

<div class="modal hide" id="geoModal">

  <div class="box">

    <div class="mh"><h2>Verify location manually</h2>

      <p class="desc">For when the retailer will not tap the capture link — confirm the coordinates

        over the phone, or read them off a Maps link they shared. Saved as approved, against your name.</p></div>

    <div class="mb">

      <label class="lbl">Address</label>

      <div style="display:flex;gap:6px">

        <input id="geoAddress" class="inp" style="flex:1" placeholder="Shop address with city, state, pincode">

        <button class="btn ghost sm" id="geoFindBtn" onclick="geoGeocode()">Find on map</button>

      </div>

      <label class="lbl">Latitude, longitude</label>

      <div style="display:flex;gap:6px">

        <input id="geoLatLng" class="inp" style="flex:1" placeholder="28.6139,77.2090 — or paste a Google Maps link">

        <button class="btn ghost sm" onclick="geoPreview()">Show on map</button>

      </div>

      <div id="geoMapWrap" class="hide" style="margin-top:10px">

        <iframe id="geoMapFrame" style="width:100%;height:220px;border:1px solid var(--line);border-radius:10px" loading="lazy"></iframe>

        <a id="geoOpenMap" class="note" target="_blank" rel="noopener" href="#">Open in Google Maps &rarr;</a>

      </div>

      <label class="lbl">Store-board photo (required)</label>

      <input id="geoPhoto" type="file" accept="image/jpeg,image/png" class="inp" onchange="geoPickPhoto()">

      <div class="note">The only evidence that someone actually saw the store-board.</div>

      <img id="geoPhotoImg" class="hide" style="margin-top:8px;max-height:130px;border-radius:8px;border:1px solid var(--line)">

      <label class="lbl">Remark</label>

      <input id="geoRemark" class="inp" placeholder="Optional — how the location was confirmed">

      <div id="geoErr" class="hide" style="margin-top:10px;color:#e03131;font-size:12.5px"></div>

    </div>

    <div class="mf"><button class="btn ghost" onclick="closeGeo()">Cancel</button>

      <button class="btn" style="background:#1f2a5e;color:#fff" id="geoSaveBtn" onclick="geoSave()">Save &amp; verify</button></div>

  </div>

</div>

  /**

   * Business value in lakhs.

   *

   * Two conventions live in user.lead.potential: the form captures LAKHS (rows hold 1–99), but

   * ~1,355 older rows were entered in RUPEES (1,000 – 2,00,00,000). Nothing between 100 and 999

   * exists, so the gap is a safe separator: 1000 and above is read as rupees and brought onto the

   * lakh scale. Normalised on read only — no stored value is rewritten.

   */

  var LAKH_CUTOFF=1000;

  function toLakh(v){ v=Number(v); return v>=LAKH_CUTOFF ? v/100000 : v; }

    var l=toLakh(v);

    // ₹0L — the same information loss the old scaling caused, just at the other end.

    return '&#8377;'+(n%1===0?n:n.toFixed(l<1?2:1))+'L'; }

  // ---- Lead pipeline: filtered, sorted and paged on the server ------------------------------

  // PIPE.q is the search term. While it is set the date filter does not apply — a search hunts for

  // one known retailer, and quietly scoping it to the selected month would report "not found" for a

  // lead that exists. The caption says which mode is in force so that is never a surprise.

  var PIPE = { q:'', sort:'created', dir:'desc', page:1, pageSize:50, pages:1, total:0 };

  function loadPipeline(){

          '&sort='+encodeURIComponent(PIPE.sort)+'&dir='+encodeURIComponent(PIPE.dir);

    if(PIPE.q){ p+='&q='+encodeURIComponent(PIPE.q);

                if(STATE.regionId) p+='&regionId='+encodeURIComponent(STATE.regionId); }

    else { p+=qs(); }

    getJSON(p,function(d){

      d=d||{}; var rows=d.rows||[];

      PIPE.total=d.total||0; PIPE.pages=d.pages||1; PIPE.page=d.page||1;

      renderPipeHead();

      if(!rows.length){

          (PIPE.q?('No lead matches “'+esc(PIPE.q)+'”.'):'No leads in scope.')+'</div></td></tr>';

      } else {

        var h='';

        rows.forEach(function(l){

            // title= so a name clipped by the fixed width is still readable on hover.

            '<td class="nowrap" title="'+esc(l.city||'')+'">'+esc(l.city||'—')+'</td>'+

            '<td class="nowrap" title="'+esc(l.createdBy||'')+'">'+esc(l.createdBy||'—')+'</td>'+

        });

      }

      // Say how many there actually are, not how many were drawn.

      var shown=rows.length, first=(PIPE.page-1)*PIPE.pageSize+(shown?1:0), last=(PIPE.page-1)*PIPE.pageSize+shown;

      byId('pipeCount').textContent=PIPE.total

        ? ('Showing '+first+'–'+last+' of '+fmtInt(PIPE.total)+(PIPE.q?' matching leads (all dates)':' leads in the selected period'))

        : '';

      byId('pipePageLbl').textContent='Page '+PIPE.page+' / '+Math.max(PIPE.pages,1);

      byId('pipePrev').disabled=(PIPE.page<=1);

      byId('pipeNext').disabled=(PIPE.page>=PIPE.pages);

      byId('pipeDesc').innerHTML=PIPE.q

        ? 'Searching every lead for “<b>'+esc(PIPE.q)+'</b>” — the date filter is ignored while a search is active.'

        : 'Click any row → full LMS record & trail. Rows shaded by SLA urgency.';

      byId('pipeClear').classList.toggle('hide', !PIPE.q);

  }

  /**

   * Mark the active column and its direction.

   *

   * The label is captured once into data-label and re-read from there. Deriving it from

   * textContent instead re-read the arrow this function had just appended, so every sort click

   * stacked another one onto the header.

   */

  function renderPipeHead(){

    document.querySelectorAll('th.sortable').forEach(function(th){

      if(!th.hasAttribute('data-label')) th.setAttribute('data-label', th.textContent.trim());

      var on=(th.getAttribute('data-sort')===PIPE.sort);

      th.classList.toggle('on',on);

      th.innerHTML=esc(th.getAttribute('data-label'))+

        (on?'<span class="arrow '+(PIPE.dir==='asc'?'up':'down')+'"></span>':'');

    });

  }

  function pipeSort(col){

    // Same column toggles direction; a new column starts descending, which is what people expect

    // from value and dates and is harmless for the text columns.

    if(PIPE.sort===col){ PIPE.dir=(PIPE.dir==='asc'?'desc':'asc'); }

    else { PIPE.sort=col; PIPE.dir='desc'; }

    PIPE.page=1; loadPipeline();

  }

  function pipeSearch(){

    var v=(byId('pipeQ').value||'').trim();

    if(v && v.length<2){ toast('Type at least 2 characters'); return; }

    PIPE.q=v; PIPE.page=1; loadPipeline();

  }

  function pipeClearSearch(){ byId('pipeQ').value=''; PIPE.q=''; PIPE.page=1; loadPipeline(); }

  function pipePage(step){

    var n=PIPE.page+step;

    if(n<1||n>PIPE.pages) return;

    PIPE.page=n; loadPipeline();

  }

  byId('pipeQ').addEventListener('keydown',function(e){

    if(e.key==='Enter'){ e.preventDefault(); pipeSearch(); }

    else if(e.key==='Escape'){ pipeClearSearch(); } });

    var th=e.target.closest('th.sortable'); if(th){ pipeSort(th.getAttribute('data-sort')); return; }

  /** Trail entries shown before the list starts scrolling. */

  var TRAIL_VISIBLE=5;

  /**

   * Cap the trail at TRAIL_VISIBLE entries and scroll the rest.

   *

   * Measured from the 6th entry's own offset rather than assumed from a row height — entries vary a

   * lot (a one-line note, a wrapped remark, one carrying an audio player), so any fixed px guess

   * would cut an entry in half on most leads.

   */

  function capTrail(){

    var box=byId('trailScroll'); if(!box) return;

    var items=box.children;

    if(items.length<=TRAIL_VISIBLE){ box.style.maxHeight=''; box.style.overflowY=''; box.classList.remove('scrolls'); return; }

    var cut=items[TRAIL_VISIBLE];

    box.style.maxHeight=Math.round(cut.offsetTop-box.firstElementChild.offsetTop)+'px';

    box.style.overflowY='auto';

    box.classList.add('scrolls');

  }

    REC=d; CALL.id=null;

    // A terminal lead has no stepper to draw, and a whole card repeating what the header pill and

    // the Record card's Current stage already say is just a band of empty space. Omit it.

    var step='';

    if(!d.terminal){

    }

      '<button class="btn ghost sm" onclick="openEdit()">&#9998; Edit</button></h2>'+

      '<p class="desc">ID, dates &amp; auto-assignment are system-set and immutable. Everything else is correctable.</p>'+

    else { trail+='<div class="trail" id="trailScroll">'; d.trail.forEach(function(t){

      // The recording of the call this entry came from, so the agent's account of the conversation

      // and the conversation itself sit together instead of in two separate lists.

      if(t.callId){

        trail+='<div class="trec"><audio controls preload="none" src="'+CTX+'/lms/recording/'+t.callId+'"></audio>'+

          (t.durationSeconds?('<span class="note">'+t.durationSeconds+'s</span>'):'')+

          (t.archived?'':'<span class="note">archiving…</span>')+'</div>';

      }

      trail+='</div>'; }); trail+='</div>'; }

    // ---- Click-to-call (SOP §12). VBC places the call server-side: our own device rings first,

    // then the retailer. A blocked number never gets a button at all — the refusal belongs in

    // front of the agent, not in the response to a dial they already started.

    var call='<div class="card"><h2>Click-to-call</h2>';

    if(d.dnd){ call+='<p class="desc" style="color:#e03131"><b>Do-not-call.</b> '+esc(d.dndReason||'This retailer asked not to be contacted.')+'</p>'; }

    else if(!d.contact){ call+='<p class="desc">No contact number on this lead.</p>'; }

    else { call+='<p class="desc">Bridged call &middot; disposition required on disconnect.</p>'+

      '<button class="btn coral" id="callBtn" onclick="startCall()">&#9742; Call retailer (C2C)</button>'+

      '<div id="callBar" class="hide" style="margin-top:12px;padding:12px;border:1px solid #e6e9f2;border-radius:10px;background:#f8f9fc">'+

        '<div style="display:flex;align-items:center;justify-content:space-between;gap:10px">'+

          '<span id="callState" style="font-weight:700;color:#1f2a5e">Starting&hellip;</span>'+

          '<span id="callTimer" class="mono" style="color:#69748c">00:00</span></div>'+

        '<div style="margin-top:10px;display:flex;gap:8px">'+

          '<button class="btn ghost sm" onclick="endCall()">Hang up</button>'+

          '<button class="btn ghost sm" onclick="openDisp()">Disposition&hellip;</button></div>'+

        '<div id="callErr" class="hide" style="margin-top:8px;color:#e03131;font-size:12px"></div></div>'; }

    // ---- Beat plan. Read-only on purpose: adding a stop belongs to the beat planner, and the

    // gate that matters (an approved geo-pin) is what this card exists to report.

    // The card used to state the geo gate and leave the agent to go and find the Leads screen.

    // The action that clears the gate now lives on it.

    var mapLink=(d.geoLat!=null&&d.geoLng!=null)

      ? ' <a class="btn ghost sm" target="_blank" rel="noopener" href="https://www.google.com/maps?q='+d.geoLat+','+d.geoLng+'">View on map</a>' : '';

    var photoLink=(d.geoPhotoId>0)

      ? ' <a class="btn ghost sm" target="_blank" rel="noopener" href="'+CTX+'/open-attachment?documentId='+d.geoPhotoId+'">Store photo</a>' : '';

    var beat='<div class="card"><h2>Beat plan</h2>'+

      (d.geoApproved

        ? '<p class="desc"><span class="stage st-visited">Geo verified</span> &mdash; this lead can be added to a beat.</p>'

        : '<p class="desc" style="color:#a9720a">Geo-pin not yet approved'+

          (d.geoStatus?(' ('+esc(d.geoStatus.toLowerCase())+')'):'')+

          '. Verify the location before adding this lead to a beat.</p>')+

      '<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px">'+

        '<button class="btn ghost sm" onclick="openGeo()">'+(d.geoApproved?'Re-verify location':'Verify manually')+'</button>'+

        mapLink+photoLink+'</div>'+

      '<div class="note">Check-in at the retailer moves the stage to Visited.</div></div>';

    // ---- Advance stage. Forward-only and comment-mandatory, same rules the endpoint enforces.

    var adv='';

    if(!d.terminal){

      var opts='<option value="" selected disabled>Move to&hellip;</option>';

      STEPS.forEach(function(st,i){ if(i>idx) opts+='<option value="'+st[0]+'">'+esc(st[1])+'</option>'; });

      ['NOT_INTERESTED','DROPPED'].forEach(function(t){ opts+='<option value="'+t+'">'+t.replace('_',' ')+'</option>'; });

      adv='<div class="card"><h2>Advance stage</h2><p class="desc">Forward-only. The comment becomes the trail entry.</p>'+

        '<select id="advStage" class="inp" style="width:100%;margin-bottom:8px">'+opts+'</select>'+

        '<input id="advComment" class="inp" style="width:100%;margin-bottom:10px" placeholder="Comment (required)">'+

        '<button class="btn" style="background:#1f2a5e;color:#fff" onclick="advance()">Advance</button></div>';

    } else {

      adv='<div class="card"><h2>Advance stage</h2><p class="desc">'+esc(d.stageLabel)+' is terminal — this lead cannot be moved on.</p></div>';

    }

    byId('recordHost').innerHTML=head+step+

    capTrail();

  }

  // ====================== RECORD ACTIONS (edit · call · disposition · stage) =================

  // Every control here drives the SAME endpoints the in-app record uses, so the two screens cannot

  // drift into disagreeing about what a disposition or a stage move means.

  var REC = null;                 // the record currently rendered, for the action panels

  var CALL = { id:null, poll:null, tick:null, startedAt:0 };

  /** POST form-encoded (advanceStage / dialer take @RequestParam, not a JSON body). */

  function postForm(path, params, cb, onErr){

    var body = Object.keys(params).map(function(k){

      return encodeURIComponent(k)+'='+encodeURIComponent(params[k]==null?'':params[k]); }).join('&');

    fetch(CTX+path,{method:'POST',credentials:'same-origin',

      headers:{'Content-Type':'application/x-www-form-urlencoded','X-Requested-With':'XMLHttpRequest'},body:body})

      .then(function(r){ return r.text(); })

      .then(function(t){ var d=null; try{ d=JSON.parse(t); }catch(e){}

        var res=(d&&d.response!==undefined)?d.response:d; cb(res); })

      .catch(function(e){ console.error('LMS post failed',path,e);

        if(typeof onErr==='function') onErr(e); else toast('Request failed'); });

  }

  /** POST JSON (disposition / updateLead take @RequestBody). */

  function postJSON(path, payload, cb, onErr){

    fetch(CTX+path,{method:'POST',credentials:'same-origin',

      headers:{'Content-Type':'application/json','X-Requested-With':'XMLHttpRequest'},body:JSON.stringify(payload)})

      .then(function(r){ return r.text(); })

      .then(function(t){ var d=null; try{ d=JSON.parse(t); }catch(e){}

        var res=(d&&d.response!==undefined)?d.response:d; cb(res); })

      .catch(function(e){ console.error('LMS post failed',path,e);

        if(typeof onErr==='function') onErr(e); else toast('Request failed'); });

  }

  /** A refusal comes back as a bare string under `response`; success is an object. */

  function refusal(res){ return (typeof res==='string' && res) ? res : null; }

  function reloadRecord(){ if(REC) injectRecord(REC.id); }

  // ---- stage --------------------------------------------------------------------------------

  function advance(){

    var to=byId('advStage').value, c=(byId('advComment').value||'').trim();

    if(!to){ toast('Choose a stage'); return; }

    if(!c){ toast('A comment is required'); return; }

    postForm('/lms/advanceStage',{leadId:REC.id,toStage:to,comment:c},function(res){

      var why=refusal(res); if(why){ toast(why); return; }

      toast('Stage advanced to '+to.replace('_',' '),1); reloadRecord(); refresh();

    });

  }

  // ---- edit ---------------------------------------------------------------------------------

  function openEdit(){

    if(!REC) return;

    var regionOpts='<option value="">&mdash; Not set &mdash;</option>';

    // Same region list the Create tab renders, so the two forms cannot offer different regions.

    byId('cRegion').querySelectorAll('option').forEach(function(o){

      if(!o.value) return;

      regionOpts+='<option value="'+esc(o.value)+'"'+(String(REC.regionId)===String(o.value)?' selected':'')+'>'+esc(o.textContent)+'</option>';

    });

    byId('editBody').innerHTML=

      '<div class="kv" style="margin-bottom:14px">'+

        kvRow('LMS ID','<span class="mono">'+esc(REC.lmsCode||('#'+REC.id))+'</span> <span class="note" style="display:inline">locked</span>')+

        kvRow('Created', fmtDT(REC.created)+' <span class="note" style="display:inline">locked</span>')+

      '</div>'+

      '<div class="grid g2" style="gap:12px">'+

        fld('eName','Retailer name (required)',REC.name)+

        fld('eBusiness','Business name',REC.outlet)+

        fld('eContact','Contact number (required)',REC.contact)+

        fld('eValue','Business value (₹ lakh / month)',(REC.value>0?Math.round(toLakh(REC.value)*10)/10:''))+

      '</div>'+

      fld('eAddress','Address',REC.address)+

      '<div class="grid g2" style="gap:12px">'+fld('eCity','City',REC.city)+fld('eState','State',REC.state)+'</div>'+

      '<label class="lbl">Region</label><select id="eRegion" class="inp" style="width:100%">'+regionOpts+'</select>'+

      '<div class="note">Changing the region re-runs auto-assignment. A lead already mapped to a named owner keeps that owner.</div>';

    byId('editModal').classList.remove('hide');

  }

  function fld(id,label,val){

    return '<div><label class="lbl">'+label+'</label><input id="'+id+'" class="inp" style="width:100%" value="'+esc(val==null?'':val)+'"></div>';

  }

  function closeEdit(){ byId('editModal').classList.add('hide'); }

  function saveEdit(){

    var name=(byId('eName').value||'').trim();

    if(!name){ toast('Retailer name is required'); return; }

    var mob=(byId('eContact').value||'').replace(/\D/g,'');

    if(mob.length<10){ toast('A valid 10-digit contact number is required'); return; }

    var v=parseFloat(byId('eValue').value), r=byId('eRegion').value;

    postJSON('/lms/updateLead',{leadId:REC.id,retailerName:name,businessName:byId('eBusiness').value,

      mobile:mob,address:byId('eAddress').value,city:byId('eCity').value,state:byId('eState').value,

      regionId:r?parseInt(r,10):null,potential:isNaN(v)?null:v},function(res){

        var why=refusal(res); if(why){ toast(why); return; }

        closeEdit(); toast('Record updated · '+(res&&res.changes||0)+' change(s) logged',1); reloadRecord();

      });

  }

  // ---- call ---------------------------------------------------------------------------------

  function callErr(msg){ var e=byId('callErr'); if(!e) return; e.textContent=msg; e.classList.remove('hide'); }

  function callState(t){ var e=byId('callState'); if(e) e.textContent=t; }

  function startCall(){

    if(!REC || CALL.id) return;

    byId('callBtn').disabled=true;

    // Pre-check server-side: DND and the 09:00-21:00 calling window. A check that only lives in

    // the browser is not a check, which is why this endpoint exists at all.

    postForm('/lms/dialer/precheck',{leadId:REC.id},function(res){

      var why=refusal(res);

      if(why || !res || res.ok!==true){ byId('callBtn').disabled=false; toast(why||(res&&res.reason)||'Cannot place the call'); return; }

      byId('callBar').classList.remove('hide'); callState('Ringing your device…');

      postForm('/lms/dialer/dial',{leadId:REC.id},function(r2){

        var w2=refusal(r2);

        if(w2 || !r2 || r2.ok!==true){ byId('callBtn').disabled=false; byId('callBar').classList.add('hide');

          toast(w2||'Could not place the call'); return; }

        CALL.id=r2.leadCallId; CALL.startedAt=Date.now();

        CALL.tick=setInterval(function(){ var s=Math.floor((Date.now()-CALL.startedAt)/1000);

          byId('callTimer').textContent=('0'+Math.floor(s/60)).slice(-2)+':'+('0'+(s%60)).slice(-2); },1000);

        // click2dial has no event webhook, so the browser has to ask.

        CALL.poll=setInterval(pollCall,3000);

      });

    });

  }

  function pollCall(){

    if(!CALL.id) return;

    getJSON('/lms/dialer/state?leadCallId='+CALL.id,function(st){

      if(!st) return;

      if(st.status) callState(String(st.status).replace(/_/g,' ').toLowerCase());

      if(st.terminal){ stopCall(); callState('Call ended'); openDisp(); }

    },function(){ /* a dropped poll is not a dropped call — keep waiting */ });

  }

  function stopCall(){ if(CALL.poll) clearInterval(CALL.poll); if(CALL.tick) clearInterval(CALL.tick);

    CALL.poll=CALL.tick=null; var b=byId('callBtn'); if(b) b.disabled=false; }

  function endCall(){

    if(!CALL.id){ stopCall(); return; }

    postForm('/lms/dialer/hangup',{leadCallId:CALL.id},function(){ stopCall(); callState('Call ended'); openDisp(); });

  }

  // ---- disposition --------------------------------------------------------------------------

  var DISPS=[['INTERESTED','Interested'],['CALLBACK','Callback'],['NOT_REACHABLE','Not reachable'],

             ['WRONG_NUMBER','Wrong number'],['FOLLOW_UP','Follow-up'],['NOT_INTERESTED','Not interested'],

             ['DO_NOT_CALL','Do not call']];

  var DISP=null;

  function openDisp(){

    if(!REC) return;

    DISP=null;

    byId('dispGrid').innerHTML=DISPS.map(function(d){

      return '<button class="btn ghost sm dispopt" data-d="'+d[0]+'" onclick="pickDisp(\''+d[0]+'\')">'+d[1]+'</button>'; }).join('');

    byId('dispExtra').innerHTML=''; byId('dispNote').value='';

    byId('dispModal').classList.remove('hide');

  }

  function closeDisp(){ byId('dispModal').classList.add('hide'); }

  function pickDisp(d){

    DISP=d;

    document.querySelectorAll('.dispopt').forEach(function(b){

      b.className='btn '+(b.getAttribute('data-d')===d?'coral':'ghost')+' sm dispopt'; });

    // Contextual sub-fields, mirroring SOP §12.2 and the in-app modal.

    var x='';

    if(d==='INTERESTED')        x=fld('dxValue','Business value (₹ lakh / month) — required','');

    else if(d==='CALLBACK')     x='<label class="lbl">Callback date &amp; time — required</label><input id="dxCallback" type="datetime-local" class="inp" style="width:100%">';

    else if(d==='NOT_REACHABLE')x=fld('dxRetry','Retry schedule (optional)','');

    else if(d==='WRONG_NUMBER') x=fld('dxCorrected','Corrected number (blank closes the lead)','');

    else if(d==='FOLLOW_UP')    x='<label class="lbl">Follow-up type</label><select id="dxFuType" class="inp" style="width:100%"><option value="CALL">Call</option><option value="MEETING">Meeting / visit</option></select>'+

                                  '<label class="lbl">Follow-up date &amp; time — required</label><input id="dxFollowUp" type="datetime-local" class="inp" style="width:100%">';

    else if(d==='NOT_INTERESTED')x='<label class="lbl">Sub-reason</label><select id="dxSub" class="inp" style="width:100%">'+

                                  ['Price','Terms','Already partnered','Category mismatch','Other'].map(function(o){return '<option>'+o+'</option>';}).join('')+'</select>';

    else if(d==='DO_NOT_CALL')  x='<div class="note" style="color:#e03131">Blocks this number permanently across every lead, not just this one.</div>';

    byId('dispExtra').innerHTML=x;

  }

  function saveDisp(){

    if(!DISP){ toast('Pick a disposition'); return; }

    var p={leadId:REC.id,disposition:DISP,note:byId('dispNote').value,leadCallId:CALL.id||null};

    if(DISP==='INTERESTED'){ var v=parseFloat(byId('dxValue').value);

      if(!v||v<=0){ toast('Business value is required'); return; } p.value=v; }

    else if(DISP==='CALLBACK'){ if(!byId('dxCallback').value){ toast('Callback date/time is required'); return; }

      p.callbackAt=byId('dxCallback').value; }

    else if(DISP==='NOT_REACHABLE') p.retrySchedule=byId('dxRetry').value;

    else if(DISP==='WRONG_NUMBER')  p.correctedNumber=byId('dxCorrected').value;

    else if(DISP==='FOLLOW_UP'){ if(!byId('dxFollowUp').value){ toast('Follow-up date/time is required'); return; }

      p.followUpType=byId('dxFuType').value; p.followUpAt=byId('dxFollowUp').value; }

    else if(DISP==='NOT_INTERESTED') p.subReason=byId('dxSub').value;

    postJSON('/lms/disposition',p,function(res){

      var why=refusal(res); if(why){ toast(why); return; }

      closeDisp(); CALL.id=null; toast('Disposition saved: '+DISP.replace(/_/g,' '),1); reloadRecord(); refresh();

    });

  }

  // ---- manual geo verification ---------------------------------------------------------------

  function geoErr(msg){ var e=byId('geoErr'); e.textContent=msg; e.classList.remove('hide'); }

  function geoClearErr(){ byId('geoErr').classList.add('hide'); }

  function openGeo(){

    if(!REC) return;

    geoClearErr();

    // Seed from what the record already knows, so a nudge is an edit rather than a re-entry.

    byId('geoAddress').value=[REC.address,REC.city,REC.state].filter(function(x){return x;}).join(', ');

    byId('geoLatLng').value=(REC.geoLat!=null&&REC.geoLng!=null)?(REC.geoLat+','+REC.geoLng):'';

    byId('geoRemark').value='';

    byId('geoPhoto').value='';

    byId('geoPhotoImg').classList.add('hide');

    byId('geoMapWrap').classList.add('hide');

    byId('geoModal').classList.remove('hide');

    if(REC.geoLat!=null&&REC.geoLng!=null) geoShowMap(REC.geoLat,REC.geoLng);

  }

  function closeGeo(){ byId('geoModal').classList.add('hide'); }

  /** Accepts "lat,lng" or a Maps URL: /@lat,lng, ?q=lat,lng, ?ll=, ?destination=. */

  function parseLatLng(raw){

    if(!raw) return null;

    var m=String(raw).match(/(-?\d{1,3}\.\d+)\s*,\s*(-?\d{1,3}\.\d+)/);

    return m?{lat:parseFloat(m[1]),lng:parseFloat(m[2])}:null;

  }

  function geoShowMap(lat,lng){

    byId('geoMapFrame').src='https://www.google.com/maps?q='+lat+','+lng+'&z=17&output=embed';

    byId('geoOpenMap').href='https://www.google.com/maps?q='+lat+','+lng;

    byId('geoMapWrap').classList.remove('hide');

  }

  function geoPreview(){

    var p=parseLatLng(byId('geoLatLng').value);

    if(!p){ geoErr('Enter latitude,longitude first — like 28.6139,77.2090.'); return; }

    geoClearErr(); geoShowMap(p.lat,p.lng);

  }

  function geoGeocode(){

    var a=(byId('geoAddress').value||'').trim();

    if(!a){ geoErr('Enter an address first.'); return; }

    geoClearErr();

    var b=byId('geoFindBtn'); b.disabled=true; b.textContent='Finding…';

    postForm('/lead-geo/geocode-address',{address:a},function(r){

      b.disabled=false; b.textContent='Find on map';

      if(!r||!r.success){ geoErr((r&&r.message)||'Could not geocode that address.'); return; }

      byId('geoLatLng').value=r.latitude+','+r.longitude;

      geoShowMap(r.latitude,r.longitude);

    },function(){ b.disabled=false; b.textContent='Find on map'; geoErr('Geocode request failed.'); });

  }

  function geoPickPhoto(){

    var f=byId('geoPhoto').files&&byId('geoPhoto').files[0];

    if(!f){ byId('geoPhotoImg').classList.add('hide'); return; }

    var fr=new FileReader();

    fr.onload=function(ev){ byId('geoPhotoImg').src=ev.target.result; byId('geoPhotoImg').classList.remove('hide'); };

    fr.readAsDataURL(f);

  }

  function geoSave(){

    var p=parseLatLng(byId('geoLatLng').value);

    if(!p){ geoErr('Could not read latitude/longitude. Paste like 28.6139,77.2090.'); return; }

    if(p.lat<-90||p.lat>90||p.lng<-180||p.lng>180||(p.lat===0&&p.lng===0)){ geoErr('Latitude/longitude out of range.'); return; }

    var f=byId('geoPhoto').files&&byId('geoPhoto').files[0];

    if(!f){ geoErr('Attach a store-board photo — the server requires one.'); return; }

    geoClearErr();

    var b=byId('geoSaveBtn'); b.disabled=true; b.textContent='Uploading photo…';

    // Upload first: manual-verify needs the document id, and uploading only on save means a

    // cancelled dialog never orphans a document.

    var fd=new FormData(); fd.append('file',f,f.name||'store-photo.jpg');

    fetch(CTX+'/lead-geo/upload-image',{method:'POST',credentials:'same-origin',

        headers:{'X-Requested-With':'XMLHttpRequest'},body:fd})

      .then(function(r){ return r.text(); })

      .then(function(t){

        var d=null; try{ d=JSON.parse(t); }catch(e){}

        var r=(d&&d.response!==undefined)?d.response:d;

        var docId=r&&(r.document_id||r.documentId||r.id);

        if(!docId){ b.disabled=false; b.textContent='Save & verify'; geoErr('Photo upload failed. Try again.'); return; }

        b.textContent='Verifying…';

        postForm('/lead-geo/manual-verify',

          {leadId:REC.id,latitude:p.lat,longitude:p.lng,remark:byId('geoRemark').value,imageDocumentId:docId},

          function(res){

            b.disabled=false; b.textContent='Save & verify';

            var why=refusal(res);

            if(why){ geoErr(why); return; }

            closeGeo(); toast('Location verified — this lead can now go on a beat',1); reloadRecord();

          },

          function(){ b.disabled=false; b.textContent='Save & verify'; geoErr('Could not save the verification.'); });

      })

      .catch(function(){ b.disabled=false; b.textContent='Save & verify'; geoErr('Photo upload failed. Try again.'); });