P(d¾Aåó†‰iDc;dßu~ÕøÅ.Ž«!gØË}å¨Ù‚Ã™¤á¹@‚ì‡Aõì¡Èz•eaì™‚ÀÇ¼»R®‹ol&é¯ÒÚ›–"5û'T¦ñ¤Ð	5€tˆ²é­çœIØé¬¦r1—‰@ŽµTh2jÞÖæX†êíß)µ«tÞº‹ðòO‰òk&ÿ®Ÿ?~g6¯îŸ¡©…{FÅi¶ú‰¶. DHøü¬ÿ¼gŠµì˜@‘ ïó ôe®ÿ¡ekzÁ˜"Ì›ÅtðËÎÂ§;2u{/AVáR•]’ººÙ{ëIq0^´©X\¯¼¡XzÉz/½eîk½ýÚÌµÊN¬½ÆÙÿ½b™Ù.5X)ïüè`v ™Ñbf-…Ò’É4¯V…Æ´&Š±A.{¨’àjrN;ç)YƒiéØ4NèâŸ#³Nùó	ç8·´:Ödak;ü qéo­œ‡¬~ó¦Vžg	gwyTpÎÎWË¨°Ø½H×)K„ÕÃUŒ+œz½ÏöN·ç•áPƒY¤J9ëëç˜@m×'ú7@Ä¡;¶mNí<<l¡Ðol&
·‹p€Þ ÊÝ3 _œðrTm#ï£°ãf”·Àÿ„]FÅÒF„fnÓ(ïe 36•¨ïÀ#ŒþœŽ[—Ñãl‚Çš}$Ç®:´2
¼Ä9¯O—wê¼ž‚>®©wFúLójYÙ"áÊ<ölñ|ªÿà-¬‚lâo|u=6ï¥ƒ³â¦}Ã¡ÐG–Æô‰BW¢ð` GøÅLÐ¿¸ù+Úm¸hŸÞEwº[\|(étJTHÃÝ{†á”Ue`”„=!¯“ñÇ®ŸžëŠ5à¹í¡Xá¿çt9µÿ @ë†þ€2¦=yÁµ³é„óghX>Å^éQÝ2ð)ÏŠŽ@í’¼Kâ:˜Ï7ìIZâÆ2¼—ê5§ä-ÛqKLÈé±…Þ>–UGT§÷Âq”Ùë§ø‰¤¬ÛæÖiôbË_Å~Sü‚¬Pjºd}‡5ŠØgó¼«øŠ^#AÈ4=×JæIêãB¡j:bdë> ß!¥Ì@†5C }.hR¹:"‡rÓÙãÜ8N¼ d˜JGSÐQÁrða„ÕÞÍØ*UwO+ù®Ã¿QTp‘þQçäÅÓ¯gÿœÏš°p£œj3ô"´'Oˆ…JEé*ç*‰
ÈhY9ƒDKIgÔ‹/vòáFùjïd“™Ò×Ä©S„GC>ÙkÊ:ðCûT€¶†"E>½†KõVc{UÁË…aé–øó\C¢è‚H@eåý-ú¢Ö¦­®Iˆ&ªÇ‰s¡Utß«†{˜žë]1rATE‚~¼(¥©•ßrÒê³µçy‡bk™Û‚ªâ"I:’ø¿æ õ{µNpªÇõžŠþ³+ÔQ	§èÉù€ËUÇ‘ÝýzÀ¥dpðCfHqÓ¦'¤áÍ‚Hc‰ÏÑ2Ã«”‰>|øÁ,jèìfïí­ì§¥"¢¹$,³üG‚ÚULÈ=.°cX«™ndÇþÖ\I®ä<ŠV‘çö“T'ï‚¦jªBŸ{˜·×	Ð½dÂÍ	åÏþa‹OëÙ… Á¸Ñ&Rà™‘ôadtGýðED@¼g2=Sê™C;•6¾ >>kKg=._;™#Å<$÷…ÚvçJÍïY½n@!±-‰6ìÂ!È}
pÒÊJZµPXÛƒ%vË8RÈû9œáÚñ˜â¿ÊÆ}¦i-9C/öµ€8ô†è7ØfQûõ	.sµW
<¾Õ™cBv£Eecx
¼‚ƒÎw+Ä!ˆyŽû‚´«¨Fh-¡éÈ^ŠmB—‰å)ÚáMá,½6kìoY»ÚBÂˆÅN¬kQÁ}ŒÞ±Ç'ÍíLZ†åôN7†ÿ*SPr
ëy€tr ËÍ§vÛXZêÞ>·dû%8ÒÁ6õýÐö†jvÀÂ-—Å6ÁpÍ»OôÎ×š9ÈðYGîãŒsöÏ78ú7•[÷[–B‹©v}3ü@Q]ÝßýïÑ&‰ÜU,ðG(É.'ÄVYðvæ%V’b0ãg“°R'ùËe‹¼Gvhêj%mÆMïb;Q&jsF±&ÅpƒŽ¶’³—¤Ô?ºsn¼»õÖ¾äžÃ¸GßÖ„:lv ÿjM¯JÃ©&Á¦Þú¹/¾ƒ!ÜL.Ú³‰
U8JìÎØÙˆ–cÓg‚ØrjÿkòãôC2»¡ÔÌÕ8`Ýû)¥1¶úh+Qó»!yXn’ÐB535>Zmè«y~~,ÐöÔ ¿?|Q®’m¸Îé:™~µIRo‹ö°m¥°ô4ËÏ_ð	2ÿy;Û(€›ý³å'5®eT´Oº·Sï;÷20ÏÄH@2 ùI¯¥”§¼üØ,‚|8SwÊ|Ó4h»3VÉùÇ>GO§!
}»—F‹ˆ‰ð7L©»“MMÌLrøUQM§ y¼éðt’©ÔS(* ¼ç„E¹x/74\/›0²>äôR¦$tûóVê{pCU¢EúRjgaÒìœŸ×oe8çÎÀÌo@ÖTòvÓÛô=1±+«p&‹hvE:!#Ö	sBKqÑßC¡·½Ñ‡µ>§¦à5ÏÚE†]&o»ffjÅÂë‰"¼ªO}n¨¯ƒsy–iÀ$\éoC”¡UÀ*¸3Mj²òôç<N}$ªñyÑ×Ñ6q¶9wÆê‹ÓÈ7>Á}]ï>ÈùVÊçpÒw|Ä¼Ž¬6OËÙ.~ Æôå>À³/<Èç^‹+íßâ6åÇî"6Ýb{¢N=²Ð·Œê©&}(¢¶‘šr±
Å;>ù™r¨fS¬¨º¨«%/gèòÝf¨:î:B¦üRú½ôV¼aû¨ÿ0;´7OÛ”€ê¼Ž‹UÏkE§±}îÌ;×ð©gÅZá5ƒz×èwáùXv$!yŒæÈü	ù¼£ä¤œÒeøæ{:Brœ½ >m+@	7¼#ùÐ–˜*‰
XI’Ä/”OfvªXî|ëc…ÅvwåÕãÿsÂ/D”½ŸÚ¼þ„pL¨\‘/þ$TI0°êÀ}¸ï
EÄ7¡gmÆMÂ;Rm$µ5¯&!Õ6ÿª-úîu£a¡Eîæt“kZ–ô»‡çg` ¼1Ôhƒ]6\§D'å”#SnæN#tèê´ hÍóì—vÏefE©c oké£â9™ÎÌ…Þ…%×Õ+¾Íj@ÀfœIv²ù²ÙÝHzlþc&Ûz2vo“¢&úvB& ôSÔrþOaÍn·û¹&Š ®¬iØ‘»E|æ?:9ƒûóM"|‡:÷Á&c²óüþ #T§ú¢2×Iä+g%ÒAÂ
'b×Î'Ðe2s;€¿ðÐñ•ößƒæ±SÒ÷ða¬%—xOÑrAN|U˜Gx$°üòƒQ8(R¢<¡œIg~"ç,T—”­S¶¿œ5G„
š¾ÛiˆÞ0õs5•ÚÝ#øçMå	k…ÙŽM'èOZ®Ç¿hp˜£¥†CõmÊ‡«íÀü§(Ö[éÚ,û2á¶EÅù8ýãsWO>I3²î Ô„Hu“â3¢*O…þgO¤oO8ÑåÐ§oÂ	^ØÆ+ævwô±¾°Æ¶Hâ&7%lka.$í¡UÒ´—vÀ1e×äw˜Ë]­äöL|mk9‡ÌkFè™Ç7ÃoBŽ”Ïu†ÒÐVcÊõ^ÝYAtŽÐvU÷çpÖÞx×öõ“e‡hJi=	Í‹™ßÿì[(«Š±{•S¤'sóªÄÌNMê®•¦˜£0ñ£°…"UC6‘2”¡Hµé{ìe'Ë…Žº¬îÑpB´3»åÈ©ðY²òDéŒ»'"¢ç@“úïÛ+u›Š?Ö	­êàIeá1CbÛ5J#¬AhFÁXµ\¶ÿZŒ¸¶{¯¦i™•oŠ•h\=zSÎ£†i•ÞÅHN®Žþ™mðMxËGÍÞóüæ·ü|<‡`p‚ÞŒ‚÷¬ÌêrƒK‰·5•§¼£ÎÞpÁ/^íŽZß¯ÒêÃ«KH&gV–c…ÐªDQAŠô ÈÈýdŒi™wSéa¤©f­rõ°¦Eoù•Øñ4ç·y…:CÎûTÖy2TâÌ;ëQ”qîù¬nàÄ`Y­3Tç’ôx£Ó»4÷›™FþüK„[d\Jæ)gßÍe»Šð•Õ‹ÞµœrA£9gÔ÷ñBÀ\Ú¥Eù8#´‡{é÷[ã¡#¿Oš0X  ®ô õâ[ým?ðWNÝæå ×.•aØëXžKsó	šO(TnþØ:×Î/tŸC~"oƒ„ZóA[ÕªÝ.¾PÉaÐÍ9A÷Mé†ùO–C64jîRUªé[¼
&»íN•; ?® \¥Øež.õzÓºÁ_¥CÀ"—ÛÔr4óå–¼ÑËtÑÀlrƒPEùë]`û¦è4þÓú€÷|WŸšÄt‰q×ÙXŸ¾ô $;˜kÍ´ÍŒÌgaFMpß^5Ñ‰·5•§¼£ÎÞpÁ/^íŽZß¯ÒêÃ«KH&gV–â&âÐûGQI‘8«@ªÁ7õÀú‘Ý2ž4¿8š9U¼Þ »‘ö´6sÛ˜õ3Û.JÞºRxÝßÈ’~º4ŸG±Åû%ÝoøûÞc Ë­í(¬o„ÚÙÕN7XrYqË•ŽÇ²NíuÐŠÎJétÄO£þ2Y¨ÓVRaÛjgd0ÚQ¯>¡Ø%Ö—AK®˜‰ª”õH°*Ý4ˆ,J­CïD]kÚÇ'6^©˜À0Ò'†ÚÑˆ²7¥	6ßÓ5 ¼î]žöäõÎ‘6{Ð¿’ëm A OO#0jé¬z+8":’´G‰¸Ý™hõóC«;Ø3âU=2"Ö+\uªç2ä4ñ"äk äXÃ¯ÌañoBS/Ù¸é—ÆÆ'l<½Ð.™&ss±©÷xT'µLj™üÚÝqCëîËïºjÑ„áÈ­oÒÙh0ž\V·/wƒšóuy£IÂóx:evógàqkjž? 
ž¥Ï€Â´>P"Û¿Ê<§×H«ÓÒÀ¦6lÂ;ˆ‘¡%l0€QiŽhèæëŠ©_[5ëÕ¥?°
!^3Ÿ8Ã$C
ŠZÛÕhÎsÐ›Ti/é³]ñ…sÑ“Y
ð¶Ì”ùºx/'y`ÙÄ¶=õV¡%€aQhI+U5ÇðBÉÛ?›²ëiz	QRíqäMavÑÍ4MÅýžE˜§*ˆ	Š¾<Ó×›t€áO$)ÆÍýlˆí—K£t€áO$)ÆÍýlˆí—K£°+œ²èaÔýÿË‰˜+ÚÏfjR¨X²Ú7¨IIB¶xOhref="/" class="text-blue-600 mt-6 block">â† Back to Dashboard</a>
  </div>

  <div id="cameraModal" class="fixed inset-0 bg-black bg-opacity-60 hidden flex items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-lg mx-4 shadow-2xl max-h-[90vh] overflow-y-auto">
      <h3 class="text-xl font-bold mb-4">Add Security Camera</h3>
      <form id="cameraForm">
        <div class="step active" data-step="1">
          <label class="block mb-1 font-medium">Camera Number/ID *</label>
          <input type="text" name="cam_number" required class="w-full p-2 border rounded mb-3">
          <label class="block mb-1 font-medium">Camera Name/Description *</label>
          <input type="text" name="name" required class="w-full p-2 border rounded mb-4">
          <div class="flex justify-end gap-3">
            <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-300 rounded">Cancel</button>
            <button type="button" onclick="nextStep(2)" class="bg-blue-600 text-white px-4 py-2 rounded">Next</button>
          </div>
        </div>
        <div class="step hidden" data-step="2">
          <label class="block mb-1 font-medium">Physical Location/Position</label>
          <input type="text" name="position" class="w-full p-2 border rounded mb-3">
          <label class="block mb-1 font-medium">IP Address</label>
          <input type="text" name="ip_address" class="w-full p-2 border rounded mb-3">
          <label class="block mb-1 font-medium">Model Number</label>
          <input type="text" name="model" class="w-full p-2 border rounded mb-4">
          <div class="flex justify-between gap-3">
            <button type="button" onclick="nextStep(1)" class="px-4 py-2 bg-gray-300 rounded">Back</button>
            <button type="button" onclick="nextStep(3)" class="bg-blue-600 text-white px-4 py-2 rounded">Next</button>
          </div>
        </div>
        <div class="step hidden" data-step="3">
          <label class="block mb-1 font-medium">Username</label>
          <input type="text" name="username" class="w-full p-2 border rounded mb-3">
          <label class="block mb-1 font-medium">Password</label>
          <input type="password" name="password" class="w-full p-2 border rounded mb-3">
          <label class="block mb-1 font-medium">Port</label>
          <input type="text" name="port" value="80" class="w-full p-2 border rounded mb-3">
          <label class="block mb-1 font-medium">Notes</label>
          <textarea name="notes" rows="3" class="w-full p-2 border rounded mb-4"></textarea>
          <div class="flex justify-between gap-3">
            <button type="button" onclick="nextStep(2)" class="px-4 py-2 bg-gray-300 rounded">Back</button>
            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded">Save Camera</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    const id = location.pathname.split('/').pop();
    let map, marker;

    async function load() {
      const res = await fetch(`/api/customers/${id}`);
      if (!res.ok) return alert('Location not found');
      const loc = await res.json();

      document.getElementById('title').textContent = loc.name;
      document.getElementById('addr').textContent = 'ðŸ“ ' + loc.address;
      document.getElementById('nt').textContent = loc.notes ? 'ðŸ“ ' + loc.notes : '';

      const gallery = document.getElementById('files');
      gallery.innerHTML = JSON.parse(loc.files || '[]').map(file => `
        <div class="gallery-item">
          ${file.match(/\.(jpg|jpeg|png|gif|webp)$/i) 
            ? `<img src="${file}" alt="Photo" loading="lazy">` 
            : `<a href="${file}" target="_blank" class="flex items-center justify-center h-full bg-gray-100 dark:bg-gray-700">${file.split('/').pop()}</a>`}
        </div>
      `).join('') || '<p class="text-gray-500">No files yet</p>';

      map = L.map('map').setView([loc.lat || 41.5, loc.lng || -83.5], loc.lat ? 16 : 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Â© OpenStreetMap'
      }).addTo(map);

      marker = L.marker([loc.lat || 41.5, loc.lng || -83.5], { draggable: true }).addTo(map);

      marker.on('dragend', async () => {
        const pos = marker.getLatLng();
        await fetch(`/api/customers/${id}/location`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ lat: pos.lat, lng: pos.lng })
        });
      });

      await loadCameras();
    }

    async function loadCameras() {
      const res = await fetch(`/api/locations/${id}/cameras`);
      if (!res.ok) {
        console.error('Failed to load cameras');
        return;
      }
      const cameras = await res.json();
      const container = document.getElementById('cameraList');
      const noCamerasMsg = document.getElementById('noCameras');

      if (cameras.length === 0) {
        container.innerHTML = '';
        noCamerasMsg.classList.remove('hidden');
        return;
      }

      noCamerasMsg.classList.add('hidden');
      container.innerHTML = cameras.map(cam => `
        <div class="camera-card">
          <div class="camera-title">${cam.cam_number} â€“ ${cam.name}</div>
          ${cam.position ? `<div class="camera-detail">Position: ${cam.position}</div>` : ''}
          ${cam.ip_address ? `<div class="camera-detail">IP: ${cam.ip_address}${cam.port && cam.port !== '80' ? ':' + cam.port : ''}</div>` : ''}
          ${cam.model ? `<div class="camera-detail">Model: ${cam.model}</div>` : ''}
          ${cam.username ? `<div class="camera-detail">Username: ${cam.username}</div>` : ''}
          ${cam.notes ? `<div class="camera-detail mt-2 italic">${cam.notes}</div>` : ''}
        </div>
      `).join('');
    }

    document.getElementById('uploadFrm').addEventListener('submit', async e => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const res = await fetch(`/api/customers/${id}/files`, { method: 'POST', body: formData });
      if (res.ok) {
        alert('Files uploaded');
        load();
      } else {
        alert('Upload failed');
      }
    });

    const modal = document.getElementById('cameraModal');
    function openModal() {
      modal.classList.remove('hidden');
      modal.classList.add('show');
      document.querySelector('[data-step="1"]').classList.add('active');
      document.querySelectorAll('.step:not([data-step="1"])').forEach(el => el.classList.remove('active'));
      document.getElementById('cameraForm').reset();
    }
    function closeModal() {
      modal.classList.remove('show');
      modal.classList.add('hidden');
    }
    function nextStep(step) {
      document.querySelectorAll('.step').forEach(el => el.classList.remove('active'));
      document.querySelector(`[data-step="${step}"]`).classList.add('active');
    }

    document.getElementById('addCameraBtn').addEventListener('click', openModal);

    document.getElementById('cameraForm').addEventListener('submit', async e => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      const res = await fetch(`/api/locations/${id}/cameras`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      if (res.ok) {
        alert('Camera added successfully');
        closeModal();
        loadCameras();
      } else {
        alert('Failed to save camera');
      }
    });

    load();
  </script>
</body>
</html>