‚úæå›ð¤‡V™¬¼÷äÈ:/—o8Úß³¾H¬O iuaÏŠ›&à±°ËºBz?&Ðµ/vr¹Öaãh¾_ÇFÔÃo9L|¶eµB÷3"¦i){Á+÷Ë˜l–J;[‰ÄL†§C:ü5óziH­Ò.¢/dlV“4%CòûàR"#Ó/þ
C.­›{³˜‡¸~ÕIP}Û	…F‚s€X»ÛiBÏ’[žž¥¾ ï÷8Æü$D£È<q¼brÙ;ÅÂÂóáMZÆ¬È¨yn)ÃÌ|WÎÚ.×y4YžmÆàÑgäN¢[v¶õl‚&ÚÃ@º>„;=EPtl„£ÉPãb{h¿¸!.žÈöHò–ordndeE¨RÈÄO ³á$õ>ŽzY"ˆÇx¤ä®ç±…}S®Ÿ>o Ãpä&ãBp˜YH_[}NÀJüÞyOúP+‚—®¯‚?±¸U
V~š\óß{m<âL²^ÒâÙUnsÏº¬Ü¡h‡%‹4KÝ/Õ»xTf*j”3qŽø>`®é—~°™zOÇ±´umŽKÕýlœù™+ž4_n&òÒE‹ÂPÊ0÷seI;4;"V¾%ˆ(¶±Gú'81É˜†œ¡F”Ÿiýú¸x6Àœ^G3zÝuÿ›SìÕÑÐþí(œôKÂ$Á;À>±+eêkþS½˜ ',kýê[¸øü7³ã^ž9f“ÅcÙÝÍ2žRË‹O‰à€)Šú’¹'þlûQ¡ç¡&qûv÷Ž`LŒ½¹¿«u@DÃyyö3‡ÇWVáQ¡2÷ÂeöŒLèHoD9t²ƒZ^Ÿ$¹5?*XH©ç¡ª§ëgg ÝŠ=¤ømJƒ”:Q±³
ÔybxCäµ£'¢%hÔÜË€YKã>Kèm”!(;Ž1z›ä®'2±T
·. ,ÄS±nç¬Ò~’åÒy>\ë¯ðò†þ(û?}#†Ýôk% :e©fŒBâ©/¡^|&¯¬2bS“µÀ’c‹)ý¦f"¬ËžIN
J>SÏ<~î{ËslsÎÈêÎ‰A(á)ìÊð‘ §Æ“ÙÍ)®0oõÉ'ºW1šÄ‰›yÚþ-bOwàA,é¿Ò²]IF¥/ab’£k|aG	R?w·hô.ì¤.QL¬óHÍ˜uéÃÚëÜæ&dÜ'œ`ÝdÁêh‘…ï¼9:£-Ôÿcçn6š/ëŒ«»_Åd&sI:¿á¼Éaädj>.gk¢\±F5ÄêIY–4~HY'ß^z@bMvJmÝ…¨Ë9úø¯ã'ë>Ü‰8éƒ¢´¢@ûy…ÀTqê­RþÆžTÀ~ÕÃ,ÒƒÞ%eÍß»Îmä ‚äžÜÚ¨’çs˜›Sæ|J‡ÅÇp€xì£Ô¶Ž7ÂØqÊ§±²§#Â~jŽ?N9Z’XÊ©™ä€ÍkåÞ+œ)ÃsPŒnŠUëÖd_è×Ñëï©"Q}éFACÌÞ“îJ£Â¯_$ò£B×ŒùT {ìšën’=/¹Î©²gê¡¨ Î
(‘”Âaµ¥LS^&+QøzÖƒçt®0Ž¾+­¤‰nÚ‘Ï÷ ©Ö)‹_tžs/ÍO)ôðˆô©"Àxq-»£œ<X¥ô|tD´åkèaŸy–º<;3Mi.øO¸ø€BX»Pj9Vß½rhuÓTM¨6Uq„b58¢
Wì†ø,{âB-¶zœEêÞi×¢×LßjFÈ½ZëüÙ8ñà±1l|fz$ºóFqzÀ=¸”?æ%gvŽòÎnq¬Ú)k£ý¬ƒôHò‘*îÕ`EÊ/MÿŽ#NÃäY²€Íª A-©#è.~ÎpØ„(55lŒ>V`CüÕX’ {-óÏÚ˜'%—?h|dÂ»9–]¯66ÇÈ{T½Až!ìƒiªæºñB—‰å)ÚáMá,½6kìoY`Y\3…ñøyÚ;'öp^ÈÕwOK<˜]—"…Pwöƒ+™ìóIñ0†ÿõ² ÔnÃ ºØEŒíÃ`¹ÇöÌÔÆ¢Lu§™áÂ‹Ûy á²g×©ÖFD,ô>9ÕZ–Q_$ò£B×ŒùT {ìš4ª3@/•à°£ì»'+ÅzÅ…1KÓ]hû<U%Þô¥W$·"0&ê¤ªì‹4øX’‰ÄG~%6
©•gD„éðÇWÑiÆ#ÑYKqPÈëG8vQ“>&í4ÞØÐ3àB
5m	%9è‘Ü^áfÖ¥L$I_kNb9<&á_h¼ú·¹¬R¼6!Ètôk²Ü#–“W—oe[Í*,qŒç%¹nK?¡Ï ‡#pJÎn¼ú0!“©¶F}¯WIÈ+ò1¶pÐž‚ˆ‘0€+WÈæ”ákœ2Éªy74æ»èÕ„Gx.¯ÁÛNãSžoMê¯B=©å5si7:épÈ…?¹ç­â’ÈZzƒž wËg[ü(6øë¦t+'Fyài“|(Zv§F`hÝ%n®îIhC0ößœ¥aÄí©!ÛZvinç~…ù~o nŸmÊGË ÖöO&w•¿ÿËØ(AÔÆ¢Lu§™áÂ‹Ûy á²g×©ÖFD,ô>9ÕZ–QÅzÅ…1KÓ]hû<U%Þô¥W$·"0&ê¤ªì‹4øÛ€¸Ö^&×÷­<®ê—Of¡ú®3íÿ²”Ñ|h i½|YZäqË¹Ýkì)x˜óÝ(iÚêX†”¡Í$È?ó€N›ö¾!4U~NÏ-hûµ„G{¢:žÅõÍá¼/ª*gtG&üDóxF:ÍJ`¥Z¸wbÍsO¸•máyÇYKÁm~Z‡vgŽ˜q”ìˆûPˆÉÝcÑþ[ó`hÝ%n®îIhC0ö]lešzô¦ý[EOJ'võ`EÊ/MÿŽ#NÃäY²ñ‰¯a`rƒ÷é.^EÃtÍ§›‹Ðä‹L9+‚ë­ètÔ…D¼+!øÓ™iJp”=¡9î¶»ˆ¥¨‚kß…Çu¿ñ©6,½§^UB¥´)ÎbÈ|»º‚þUS=¶6Ÿ8mAÚ?»(èl2ôÂîØ·Ì‘øW¢\spæzŸöì
@ù?/Ô;ª/hŒ´›Œâƒ¹•+PÈž‹³O8hY@„\í™Bàîö×°uÜî	bô0¼„–wÞ2 Tå§Ök7]ÑúŽ„dÁ¨…~Œ.å`†§ œ½a6›\©Œˆ‚ÏÊ Eª·ÙŽeÙ£ƒÐÔ:«aÚ°-æ†0†ÓÿY|W›Ð’Ï^L2øy½jäu„¦jG‹UhU#î¤;ògË¶¸ýž´t$»>b7U…4‚ÔëW¡î%§Œ°oŠ¾t7´ñu–Ôá‰§íÁ(,S¾g1ð£ÒT\èw¬ïŠ›šKŸË„æJÅË¡›*™×-ÊPÆ½÷sk;ÚùsÊ}ïrýõJŸIâ
ØxQëmÕduŒÚúÄK®ŒC¾1’UâpDOØníÅx6žäôo7tsýgÏ9±I¦ÀWŸK*Ûö`hAÒmÀ/*„óNï—·Ù/¤zá¹õ¿çª€»G‰ï=r‰lÄ_PÑªÉADÃ•p;`àÈ,EãÏÉÐÕÓèeˆs^üg]G7×¶ÑÃtxW‚NÄ‚dØ¢à€ù”¥‚Ÿ’q„´¦Š÷$¥z«W©â}ž-ˆ$w»ev¼2›ô!.aù1‘P™ ZíºÖK‚Ë¥G…ª“x:Ï.À¥,4_ÁáNá_Ã<d6½g(éWg2*ÑäJçê¿²˜Š²¨YÊ+õi*Ô,æÉîúŸî·™îÜw7ºhæØŸCdÃ×ržî›À°Nšã‡ª6¯ž!©ècaŒö	<\/.Ûm‚öÖê>¸”m;ÇõSñ"˜…ÃiãÀ¯]ïl©1)²]ßÚg0p<Õ>,càþq˜p|H´X}’¿¹0k‹/ä ª9,@–ŽíJ…i=±Ïhä;ƒ}môhB—dŒ TðõŠ‹N”ÌoHdÔ×„±tôlˆJ‚ÞÝ+ÌÌ¿.y¤ ÌI²‹zÑ¬ŠRµ‚óšV™`0Ç¬!£[÷2õÍ(Ò·I4[	ôLiµ9èÎIA·3‘)-ˆDèâ†çJ8]DÍqvŒê%´¡Ûë|=2,]ü]ª’ŸJ3¤œºU.J?EÄ
.;(7ú‡®ðûÿ"‹/ä ª9,@–ŽíJ…i=«Ñþ/6NýÃöL| 7Èø‚÷L…º4P	
Ò‚ Æ Õ$¶&ß4Ðèr>Ä’ÂêÌJŸ½CóOÕ†vÐê€–¿†çUgæEõl!ïÃTîšiFâ…€ÖÃtêGÜ}ð^š»jDê¼esÌi${ÑØØN¬ùõ€yÔ¾hìOŸØk±v™™ÖvœH¿ó2«nýû¹öìÌ-¼	S°ÿcTsáþ<ÎF–³ÛñŒ¥%j¡\êPÚöxuUÊ	Å9±¸NiÔ‘ÎÝÈGÉj¶órç‰¡
QïLô¾(&8%ÆÚ@hc<ì¿âtÂ°÷^ç­h~ÂÊ{ KÛ79uy£IÂóx:evógàqkí`ù~Ÿs„IÛ×wké²‡Ù¾ ÙÒå)j¦Ò™cv+ä<†KŒ¸‹}^m Dq+ú=Í£©Þ¾ÿ^ØXòÁµ¦˜ûÍKŽ2W½ÚØ…µ„v16)²¼
ÀÜ…½ÊAAÆqæx·™ÚÐL­¤@}ÏfÎuäÜÊéáþ)¨ê#|imå“^9€ÄÄYWt¼ã^D;|ØáŠ“kì_€â;ƒÁ‹FãÖ§CïÌ{?½çý‚€@Øþy=*¨K›×·yRv™Ý2	_íõWËÜçø [Îr*á<Ðvª–r±¶&,)ùµóÓÄQ±Õ^z—ßþòýÇi¾¥§$9ÔJ©»Ò3ùõÍÂœåv=q%äÐîÅÉ9g*íò·	O/`Ôœ08%“*¸2öLHºGûîÏaéßjÊ¦$µ“•Z¨J ¾=SM‹YQÏ×è`¿Ä¯sŒž0u¯nØz©’ÉKÎÇóÌîâ¤’ª îl¿üq}1¾ç H£®ï’Žj,½Íb»â	LOeÖ¡/4×‹ã'yé`aXïõ‹F[Îr*á<Ðvª–r±1Y¿Ž	çëü`c<¶fVˆ¡ªvŠÆÌ;íŠcv/Ï"‚Å—@ëHOd¾‚ÀªÆ+] ÉE"}ô‹á¿,ÌHE³·Ð
òñ§|øÚ`?M±ùgE6Œ¶Øšk ò¦Ùå_á§µþ§ì5j	ý deRXo%ü–Q8Ô|—áþártTransform = [1,0,0,1,0,0]; canvas.renderAll();">Reset View</button>
      <button onclick="deleteSelectedObject()">Delete Selected</button>
    </div>

    <div id="save-section">
      <input type="text" id="design-title" placeholder="Design Name (e.g. Main Floor)" style="width:250px;">
      <button onclick="saveDesign()">Save Design</button>

      <select id="load-select" onchange="loadSelectedDesign()">
        <option value="">-- Load a Saved Design --</option>
      </select>
      <button id="delete-selected" onclick="deleteSelectedDesign()">Delete Saved Design</button>

      <button onclick="refreshDesignList()">Refresh List</button>
    </div>

    <div id="canvas-wrapper">
      <canvas id="c" width="1400" height="900"></canvas>
    </div>
    <p style="color:#555; margin-top:10px; text-align:center;">
      Zoom: mouse wheel + Ctrl/Cmd or buttons. Pan: hold left mouse and drag (when zoomed).  
      Move icons/cones: click and drag. Resize cones: drag corners. Delete: select + Delete key or toolbar button.
    </p>
  </div>
</div>

<script type="module">
import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.mjs';
window.pdfjsLib = pdfjsLib;
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.mjs';
</script>

<script>
// Main non-module script
const canvas = new fabric.Canvas('c', {
  selection: true,
  preserveObjectStacking: true,
  allowTouchScrolling: true,
  interactive: true,
  defaultCursor: 'grab'
});
let floorplan = null;
let isDragging = false;
let lastPosX, lastPosY;

// Panning
canvas.on('mouse:down', opt => {
  const evt = opt.e;
  const target = canvas.findTarget(evt);
  if (!target) {
    isDragging = true;
    lastPosX = evt.clientX;
    lastPosY = evt.clientY;
    canvas.setCursor('grabbing');
    canvas.requestRenderAll();
  }
});

canvas.on('mouse:move', opt => {
  if (isDragging) {
    const evt = opt.e;
    const vpt = canvas.viewportTransform;
    vpt[4] += evt.clientX - lastPosX;
    vpt[5] += evt.clientY - lastPosY;
    canvas.requestRenderAll();
    lastPosX = evt.clientX;
    lastPosY = evt.clientY;
  }
});

canvas.on('mouse:up', () => {
  isDragging = false;
  canvas.setCursor('grab');
});

// Zoom
canvas.on('mouse:wheel', opt => {
  const delta = opt.e.deltaY;
  let zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  zoom = Math.max(0.01, Math.min(20, zoom));
  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

// Upload floorplan to user-specific folder + load from URL
document.getElementById('upload-floorplan').addEventListener('change', async e => {
  const file = e.target.files[0];
  if (!file) return;

  document.getElementById('upload-status').textContent = 'Uploading ' + file.name + '...';
  document.getElementById('upload-status').className = '';

  const formData = new FormData();
  formData.append('floorplan', file);

  try {
    const res = await fetch('/NewSite/upload_floorplan.php', {
      method: 'POST',
      body: formData
    });

    const data = await res.json();
    console.log('Server response:', data);

    if (!data.success) {
      document.getElementById('upload-status').textContent = 'Upload failed: ' + (data.message || 'Unknown error');
      document.getElementById('upload-status').className = 'error';
      alert('Upload failed: ' + (data.message || 'Unknown error'));
      return;
    }

    document.getElementById('upload-status').textContent = 'Loading floorplan...';

    fabric.Image.fromURL(data.url, img => {
      if (floorplan) canvas.remove(floorplan);
      floorplan = img;

      img.set({
        selectable: false,
        evented: false,
        originX: 'center',
        originY: 'center',
        crossOrigin: 'anonymous'
      });

      const canvasWidth  = canvas.getWidth();
      const canvasHeight = canvas.getHeight();

      let newScale = Math.min(canvasWidth / img.width, canvasHeight / img.height) * 0.98;

      img.scaleX = newScale;
      img.scaleY = newScale;

      img.left = canvasWidth / 2;
      img.top  = canvasHeight / 2;

      canvas.sendToBack(img);
      canvas.requestRenderAll();

      document.getElementById('upload-status').textContent = 'Floorplan loaded successfully!';
      console.log('Floorplan loaded from:', data.url);
    }, { crossOrigin: 'anonymous' });
  } catch (err) {
    console.error('Upload error:', err);
    document.getElementById('upload-status').textContent = 'Upload error: ' + err.message;
    document.getElementById('upload-status').className = 'error';
    alert('Upload error: ' + err.message);
  }
});

// Add device functions
function addDevice(fill, radius = 18) {
  const obj = new fabric.Circle({
    radius,
    fill,
    left: 100 + Math.random()*200,
    top: 100 + Math.random()*200,
    originX: 'center',
    originY: 'center',
    selectable: true,
    hasControls: true,
    hasBorders: true,
    lockScalingFlip: true
  });
  canvas.add(obj);
}

function addCamera() {
  fabric.Image.fromURL('/NewSite/assets/Images/Camera_Icon.png', img => {
    img.set({
      left: 100 + Math.random()*200,
      top: 100 + Math.random()*200,
      scaleX: 0.5,
      scaleY: 0.5,
      originX: 'center',
      originY: 'center',
      selectable: true,
      hasControls: true,
      hasBorders: true
    });
    canvas.add(img);
  });
}

function addSensor() { addDevice('blue', 16); }
function addDoor()   { addDevice('green', 22); }

function addText() {
  const t = new fabric.IText('Label', {
    left: 150,
    top: 150,
    fontSize: 20,
    fill: '#000',
    editable: true,
    selectable: true,
    hasControls: true,
    hasBorders: true,
    enterEditing: true
  });

  t.on('editing:entered', function() {
    t.onKeyDown = function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        t.exitEditing();
        canvas.renderAll();
      }
      if (e.key === 'Escape') {
        e.preventDefault();
        t.exitEditing();
        canvas.renderAll();
      }
    };
  });

  canvas.add(t);
  canvas.setActiveObject(t);
  t.enterEditing();
  canvas.requestRenderAll();
}

// Add Coverage Cone (separate, resizable)
function addCoverageCone() {
  let fov = prompt("Enter camera field of view in degrees (typical 60-120):", "90");
  if (!fov) return;
  fov = parseFloat(fov);
  if (isNaN(fov) || fov <= 0) fov = 90;

  const coneLength = 350;
  const halfAngle = (fov / 2) * (Math.PI / 180);
  const points = [
    { x: 0, y: 0 },
    { x: coneLength * Math.cos(-halfAngle), y: coneLength * Math.sin(-halfAngle) },
    { x: coneLength * Math.cos(halfAngle),  y: coneLength * Math.sin(halfAngle) }
  ];

  const cone = new fabric.Polygon(points, {
    fill: 'rgba(0, 255, 0, 0.18)',
    stroke: '#00aa00',
    strokeWidth: 2,
    left: 500,
    top: 400,
    originX: 'center',
    originY: 'center',
    selectable: true,
    hasControls: true,
    hasBorders: true,
    lockScalingFlip: true
  });

  canvas.add(cone);
  canvas.setActiveObject(cone);
  canvas.requestRenderAll();
}

function exportPNG() {
  const data = canvas.toDataURL({ format: 'png', multiplier: 2 });
  const link = document.createElement('a');
  link.download = 'design.png';
  link.href = data;
  link.click();
}

// Delete selected object(s)
function deleteSelectedObject() {
  const active = canvas.getActiveObjects();
  if (active.length === 0) return alert("Select an item first (click it)");
  if (confirm(`Delete ${active.length} item(s)?`)) {
    canvas.remove(...active);
    canvas.discardActiveObject();
    canvas.renderAll();
  }
}

// Keyboard delete
document.addEventListener('keydown', e => {
  if ((e.key === 'Delete' || e.key === 'Backspace') && 
      !e.target.matches('input, textarea, select') &&
      canvas.getActiveObjects().length > 0) {
    e.preventDefault();
    deleteSelectedObject();
  }
});

// Save design
async function saveDesign() {
  const title = document.getElementById('design-title').value.trim();
  if (!title) return alert('Enter a name!');

  const json = JSON.stringify(canvas.toJSON(['src']));

  let saveData = { title, json };
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('site_id')) saveData.site_id = urlParams.get('site_id');

  try {
    const res = await fetch('/NewSite/save_design.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(saveData)
    });
    const data = await res.json();
    alert(data.message);
    if (data.success) {
      document.getElementById('design-title').value = '';
      refreshDesignList();
    }
  } catch (err) {
    alert('Error saving: ' + err.message);
  }
}

// Load / delete functions
let allDesigns = [];

async function refreshDesignList() {
  try {
    const res = await fetch('/NewSite/load_designs.php');
    if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);

    const data = await res.json();
    console.log('load_designs response:', data);

    if (!data.success) {
      alert('Error loading designs list: ' + (data.message || 'Unknown error'));
      return;
    }

    allDesigns = data.designs || [];
    renderDesignList(allDesigns);
  } catch (err) {
    console.error('Refresh designs error:', err);
    alert('Failed to load designs list: ' + err.message);
  }
}

function renderDesignList(designs) {
  const select = document.getElementById('load-select');
  select.innerHTML = '<option value="">-- Load a Saved Design --</option>';

  designs.forEach(d => {
    const opt = document.createElement('option');
    opt.value = d.id;
    opt.textContent = `${d.title} (${new Date(d.updated_at).toLocaleDateString()})`;
    select.appendChild(opt);

    const del = document.createElement('span');
    del.className = 'delete-btn';
    del.textContent = ' [Delete]';
    del.onclick = e => {
      e.stopPropagation();
      if (confirm(`Delete "${d.title}"?`)) deleteDesign(d.id);
    };
    opt.appendChild(del);
  });
}

async function deleteDesign(id) {
  if (!confirm('Delete this design permanently?')) return;

  try {
    const res = await fetch('/NewSite/delete_design.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id })
    });
    const data = await res.json();
    alert(data.message);
    if (data.success) {
      refreshDesignList();
    }
  } catch (err) {
    alert('Delete error: ' + err);
  }
}

function deleteSelectedDesign() {
  const id = document.getElementById('load-select').value;
  if (!id) return alert('Select a design first');
  deleteDesign(id);
}

async function loadDesignById(id) {
  try {
    const res = await fetch(`/NewSite/load_design.php?id=${id}`);
    if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);

    const data = await res.json();
    console.log('load_design response:', data);

    if (!data.success) {
      alert('Error loading design: ' + (data.message || 'Unknown error'));
      return;
    }

    canvas.clear();
    canvas.loadFromJSON(data.json, () => {
      canvas.renderAll();
      canvas.setZoom(1);
      canvas.viewportTransform = [1,0,0,1,0,0];
      canvas.requestRenderAll();
      console.log('Design loaded successfully');
      document.getElementById('design-title').value = data.title || '';
    }, (err) => {
      console.error('loadFromJSON error:', err);
      alert('Failed to parse design JSON: ' + err.message);
    });
  } catch (err) {
    console.error('Load design error:', err);
    alert('Load error: ' + err.message);
  }
}

async function loadSelectedDesign() {
  const id = document.getElementById('load-select').value;
  if (!id) return;
  await loadDesignById(id);
}

// Initial load
window.onload = () => {
  refreshDesignList();
  <?php if ($initialJson): ?>
    canvas.loadFromJSON(<?=json_encode($initialJson)?>, () => canvas.renderAll());
  <?php endif; ?>
};
</script>
</body>
</html>