templates/seller/apply.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Become a Seller — Julico</title>
  7. <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css"/>
  9. <link rel="stylesheet" href="/css/julico-home.css">
  10. <style>
  11. *, *::before, *::after { box-sizing:border-box; }
  12. body { font-family:'Plus Jakarta Sans',-apple-system,sans-serif; background:var(--gray-50); margin:0; min-height:100vh; }
  13. .s-nav { background:var(--white); border-bottom:1px solid var(--gray-200); padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; }
  14. .s-link { font-size:14px; font-weight:700; color:var(--brand); text-decoration:none; }
  15. .s-wrap { max-width:680px; margin:0 auto; padding:32px 18px 60px; }
  16. .s-hero { text-align:center; margin-bottom:26px; }
  17. .s-hero h1 { font-size:28px; font-weight:800; color:var(--gray-900); margin:0 0 8px; letter-spacing:-0.02em; }
  18. .s-hero p { font-size:14px; color:var(--gray-500); margin:0; line-height:1.6; }
  19. .s-card { background:var(--white); border:1.5px solid var(--gray-100); border-radius:var(--rlg); padding:26px; box-shadow:var(--shadow-sm); }
  20. .s-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  21. .fld { margin-bottom:15px; }
  22. .fld label { display:block; font-size:12px; font-weight:800; color:var(--gray-700); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
  23. .fld .opt { color:var(--gray-400); font-weight:600; text-transform:none; letter-spacing:0; }
  24. .fld input, .fld textarea, .fld select { width:100%; font-family:inherit; font-size:14px; padding:11px 13px; border:1.5px solid var(--gray-200); border-radius:var(--rsm); color:var(--gray-900); background:#fff; }
  25. .fld input:focus, .fld textarea:focus, .fld select:focus { outline:none; border-color:var(--brand); }
  26. .fld textarea { min-height:96px; resize:vertical; }
  27. .fld input[type=file] { padding:9px 11px; background:var(--gray-50); cursor:pointer; }
  28. .fld-hint { font-size:11px; color:var(--gray-400); margin-top:4px; line-height:1.5; }
  29. .logo-preview { margin-top:8px; }
  30. .logo-preview img { width:64px; height:64px; border-radius:12px; object-fit:cover; border:1.5px solid var(--gray-200); display:none; }
  31. .req { color:#dc2626; }
  32. .sec-label { font-size:12px; font-weight:800; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.04em; margin:22px 0 10px; padding-top:18px; border-top:1.5px solid var(--gray-100); }
  33. .loc-search-row { display:flex; gap:8px; margin-bottom:10px; }
  34. .loc-search-wrap { position:relative; flex:1; }
  35. .loc-search-wrap input { width:100%; font-family:inherit; font-size:14px; padding:11px 13px; border:1.5px solid var(--gray-200); border-radius:var(--rsm); color:var(--gray-900); }
  36. .loc-search-wrap input:focus { outline:none; border-color:var(--brand); }
  37. .loc-suggest { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1.5px solid var(--gray-200); border-radius:var(--rsm); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1000; max-height:240px; overflow-y:auto; display:none; }
  38. .loc-suggest.open { display:block; }
  39. .loc-suggest-item { padding:10px 12px; font-size:13px; color:var(--gray-800); cursor:pointer; border-bottom:1px solid var(--gray-100); line-height:1.4; }
  40. .loc-suggest-item:last-child { border-bottom:none; }
  41. .loc-suggest-item:hover, .loc-suggest-item.active { background:var(--brand-light); }
  42. .loc-search-btn { position:static !important; top:auto !important; right:auto !important; left:auto !important; bottom:auto !important; font-size:13px; font-weight:700; color:#fff; background:var(--brand); border:none; border-radius:var(--rsm); padding:0 16px; cursor:pointer; white-space:nowrap; }
  43. .loc-search-btn:hover { background:var(--brand-dark); }
  44. .locate-btn { font-size:13px; font-weight:700; color:var(--brand-dark); background:var(--brand-light); border:1.5px solid var(--brand-mid); border-radius:var(--rsm); padding:9px 14px; cursor:pointer; margin-bottom:10px; }
  45. .locate-btn:hover { background:var(--brand); color:#fff; }
  46. #map { height:240px; border-radius:var(--rsm); border:1.5px solid var(--gray-200); margin-bottom:8px; }
  47. .map-status { font-size:12px; font-weight:600; min-height:18px; margin-bottom:10px; }
  48. .map-status.loading { color:#92400e; }
  49. .map-status.success { color:#047857; }
  50. .map-status.error { color:#b91c1c; }
  51. .map-filled { border-color:var(--brand) !important; background:#f0fdfa; }
  52. .map-hint { font-size:11px; color:var(--gray-400); margin-bottom:10px; }
  53. .agree-fld { margin:20px 0 6px; padding-top:16px; border-top:1.5px solid var(--gray-100); }
  54. .agree-check { display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:600; color:var(--gray-700); line-height:1.55; }
  55. .agree-check input { width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--brand); cursor:pointer; }
  56. .agree-check a { color:var(--brand); font-weight:700; text-decoration:underline; cursor:pointer; }
  57. .s-btn { width:100%; font-size:15px; font-weight:800; color:#fff; background:var(--brand); border:none; border-radius:var(--rsm); padding:14px; cursor:pointer; margin-top:6px; }
  58. .s-btn:hover { background:var(--brand-dark); }
  59. .s-errors { background:#fef2f2; border:1.5px solid #fecaca; color:#b91c1c; border-radius:var(--rsm); padding:12px 14px; font-size:13px; font-weight:600; margin-bottom:14px; }
  60. .s-errors ul { margin:6px 0 0; padding-left:18px; }
  61. .s-suggest { background:#f0fdfa; border:1.5px solid var(--brand-mid); border-radius:var(--rsm); padding:12px 14px; margin-bottom:18px; }
  62. .s-suggest-h { font-size:12px; font-weight:800; color:var(--brand-dark); margin-bottom:8px; }
  63. .s-suggest-chips { display:flex; flex-wrap:wrap; gap:8px; }
  64. .s-chip { font-family:inherit; font-size:13px; font-weight:700; color:var(--brand-dark); background:#fff; border:1.5px solid var(--brand-mid); border-radius:999px; padding:7px 13px; cursor:pointer; }
  65. .s-chip:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
  66. .s-ok { background:var(--white); border:1.5px solid var(--gray-100); border-radius:var(--rlg); padding:40px 26px; box-shadow:var(--shadow-sm); text-align:center; }
  67. .s-ok .ic { font-size:46px; }
  68. .s-ok h2 { font-size:22px; font-weight:800; color:var(--gray-900); margin:14px 0 8px; }
  69. .s-ok p { color:var(--gray-500); font-size:14px; line-height:1.6; margin:0 0 20px; }
  70. .legal-modal { display:none; position:fixed; inset:0; z-index:3000; align-items:center; justify-content:center; padding:3vh 3vw; }
  71. .legal-modal.open { display:flex; }
  72. .legal-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.55); }
  73. .legal-modal-card { position:relative; width:min(780px,96vw); height:92vh; background:#fff; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,0.35); }
  74. .legal-modal-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1.5px solid var(--gray-100); flex-shrink:0; }
  75. .legal-modal-title { font-size:14px; font-weight:800; color:var(--gray-900); }
  76. .legal-modal-close { font-size:15px; font-weight:800; color:var(--gray-500); background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:var(--rsm); width:34px; height:34px; cursor:pointer; }
  77. .legal-modal-close:hover { background:var(--gray-100); color:var(--gray-800); }
  78. .legal-modal-frame { flex:1; width:100%; border:0; }
  79. @media (max-width:560px){ .s-row{ grid-template-columns:1fr; } }
  80. </style>
  81. </head>
  82. <body>
  83. <nav class="s-nav">
  84.   <a href="{{ path('app_home') }}"><img src="/images/julico-logo.png" alt="Julico" style="height:42px;object-fit:contain"></a>
  85.   <a href="{{ path('app_home') }}" class="s-link">← Back to store</a>
  86. </nav>
  88. <div class="s-wrap">
  89.   {% if sent %}
  90.     <div class="s-ok">
  91.       <div class="ic">🎉</div>
  92.       <h2>Application received!</h2>
  93.       <p>Thanks for your interest in selling on Julico. Our team will review your application and get in touch. Approved sellers get their own shop on a flat monthly plan — no commission, and you handle your own delivery.</p>
  94.       <a href="{{ path('app_home') }}" class="s-link">← Back to store</a>
  95.     </div>
  96.   {% else %}
  97.     <div class="s-hero">
  98.       <h1>Sell on Julico</h1>
  99.       <p>Reach wholesale buyers across Lebanon. Flat monthly subscription, zero commission — you keep 100% of every sale.</p>
  100.     </div>
  101.     <div class="s-card">
  102.       {% if errors|length > 0 %}
  103.         <div class="s-errors">Please fix the following:<ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul></div>
  104.       {% endif %}
  105.       {% if suggestions is defined and suggestions|length > 0 %}
  106.         <div class="s-suggest">
  107.           <div class="s-suggest-h">✨ These names are available — tap to use one:</div>
  108.           <div class="s-suggest-chips">
  109.             {% for name in suggestions %}
  110.               <button type="button" class="s-chip" data-name="{{ name }}">{{ name }}</button>
  111.             {% endfor %}
  112.           </div>
  113.         </div>
  114.       {% endif %}
  115.       <form method="post" action="{{ path('seller_apply') }}" enctype="multipart/form-data">
  116.         <div class="fld">
  117.           <label>Business / shop name <span class="req">*</span></label>
  118.           <input type="text" id="field-business" name="business_name" value="{{ old.business_name ?? '' }}" required>
  119.         </div>
  121.         <div class="fld">
  122.           <label>Shop logo <span class="opt">(optional)</span></label>
  123.           <input type="file" name="logo" id="logo-input" accept="image/png,image/jpeg,image/webp">
  124.           <div class="logo-preview"><img id="logo-preview-img" alt="Logo preview"></div>
  125.           <div class="fld-hint">A square image works best — it becomes your shop's icon across Julico. PNG, JPG or WEBP, up to 4&nbsp;MB. You can also add or change it later from your dashboard.</div>
  126.         </div>
  128.         <div class="s-row">
  129.           <div class="fld">
  130.             <label>Your name <span class="req">*</span></label>
  131.             <input type="text" name="contact_name" value="{{ old.contact_name ?? prefill.contact_name }}" required>
  132.           </div>
  133.           <div class="fld">
  134.             <label>Phone <span class="req">*</span></label>
  135.             <input type="text" name="phone" value="{{ old.phone ?? '' }}" required>
  136.           </div>
  137.         </div>
  138.         <div class="s-row">
  139.           <div class="fld">
  140.             <label>Email <span class="opt">(optional)</span></label>
  141.             <input type="email" name="email" value="{{ old.email ?? prefill.email }}">
  142.             <div class="fld-hint">No email? Leave it blank — we'll set up your login when your shop is approved.</div>
  143.           </div>
  144.           <div class="fld">
  145.             <label>What do you sell?</label>
  146.             <select name="category">
  147.               <option value="">— Select a category —</option>
  148.               {% for c in categories ?? [] %}
  149.                 <option value="{{ c.nom }}"{{ (old.category ?? '') == c.nom ? ' selected' }}>{{ c.nom }}</option>
  150.               {% endfor %}
  151.             </select>
  152.           </div>
  153.         </div>
  155.         <div class="sec-label">📍 Your location</div>
  156.         <div class="loc-search-row">
  157.           <div class="loc-search-wrap">
  158.             <input type="text" id="loc-search" autocomplete="off" placeholder="Search a place — e.g. Tripoli, Lebanon">
  159.             <div id="loc-suggest" class="loc-suggest"></div>
  160.           </div>
  161.           <button type="button" id="search-btn" class="loc-search-btn">🔍 Search</button>
  162.         </div>
  163.         <button type="button" id="locate-btn" class="locate-btn">📡 Use my location</button>
  164.         <div id="map"></div>
  165.         <div id="map-status" class="map-status"></div>
  166.         <div class="map-hint">Start typing a place and pick a suggestion, use your location, or drop a pin on the map. Country, region and city fill in automatically — you can edit them after.</div>
  168.         <div class="fld">
  169.           <label>Country</label>
  170.           <input type="text" id="field-country" name="country" value="{{ old.country ?? '' }}">
  171.         </div>
  172.         <div class="s-row">
  173.           <div class="fld">
  174.             <label>Region</label>
  175.             <input type="text" id="field-region" name="region" value="{{ old.region ?? '' }}" placeholder="e.g. Beirut, South">
  176.           </div>
  177.           <div class="fld">
  178.             <label>City</label>
  179.             <input type="text" id="field-city" name="city" value="{{ old.city ?? '' }}">
  180.           </div>
  181.         </div>
  182.         <input type="hidden" id="field-lat" name="latitude" value="{{ old.latitude ?? '' }}">
  183.         <input type="hidden" id="field-lng" name="longitude" value="{{ old.longitude ?? '' }}">
  185.         <div class="fld" style="margin-top:6px">
  186.           <label>Tell us about your business</label>
  187.           <textarea name="description" placeholder="Product range, number of SKUs, current sales channels — anything that helps us review.">{{ old.description ?? '' }}</textarea>
  188.         </div>
  190.         <div class="sec-label">🪪 Identity verification</div>
  191.         <div class="fld">
  192.           <label>Owner's government ID <span class="req">*</span></label>
  193.           <input type="file" name="id_document" accept=".jpg,.jpeg,.png,.webp,.pdf,image/*,application/pdf" required>
  194.           <div class="fld-hint">A clear photo or scan of the owner's valid government-issued ID — National ID, Iqama, or Passport. JPG, PNG, WEBP or PDF, up to 8&nbsp;MB. By uploading your ID you confirm it is genuine and belongs to you, and you reconfirm your agreement to Julico's Seller Agreement and Privacy Policy.</div>
  195.         </div>
  197.         <div class="agree-fld">
  198.           <div class="agree-check">
  199.             <input type="checkbox" name="agree" value="1"{{ (old.agree ?? '') ? ' checked' }} required>
  200.             <span>I have read and agree to the
  201.               <a href="{{ path('legal_seller_agreement') }}" class="legal-open" data-title="Seller Agreement">Seller Agreement</a>
  202.               and the
  203.               <a href="{{ path('legal_privacy') }}" class="legal-open" data-title="Privacy Policy">Privacy Policy</a>.</span>
  204.           </div>
  205.         </div>
  207.         <button type="submit" class="s-btn">Submit application</button>
  208.       </form>
  209.     </div>
  210.   {% endif %}
  211. </div>
  213. <div id="legal-modal" class="legal-modal" aria-hidden="true">
  214.   <div class="legal-modal-backdrop" data-close></div>
  215.   <div class="legal-modal-card">
  216.     <div class="legal-modal-bar">
  217.       <span class="legal-modal-title">Document</span>
  218.       <button type="button" class="legal-modal-close" data-close aria-label="Close">✕</button>
  219.     </div>
  220.     <iframe class="legal-modal-frame" title="Document"></iframe>
  221.   </div>
  222. </div>
  224. <script>
  225. document.addEventListener('DOMContentLoaded',function(){
  226.   var biz=document.getElementById('field-business');
  227.   document.querySelectorAll('.s-chip').forEach(function(ch){
  228.     ch.addEventListener('click',function(){
  229.       if(biz){ biz.value=ch.getAttribute('data-name'); biz.focus(); window.scrollTo({top:0,behavior:'smooth'}); }
  230.     });
  231.   });
  233.   // Live logo preview before upload
  234.   var logoInput = document.getElementById('logo-input');
  235.   var logoImg   = document.getElementById('logo-preview-img');
  236.   if (logoInput && logoImg) {
  237.     logoInput.addEventListener('change', function(){
  238.       var f = this.files && this.files[0];
  239.       if (f) { logoImg.src = URL.createObjectURL(f); logoImg.style.display = 'block'; }
  240.       else { logoImg.style.display = 'none'; }
  241.     });
  242.   }
  244.   // Open legal documents in a pop-up over the form, so nothing typed is lost.
  245.   var modal = document.getElementById('legal-modal');
  246.   var frame = modal.querySelector('.legal-modal-frame');
  247.   var titleEl = modal.querySelector('.legal-modal-title');
  248.   frame.addEventListener('load', function(){
  249.     try {
  250.       var d = frame.contentDocument;
  251.       if (d) {
  252.         var nav = d.querySelector('.l-nav, .s-nav');
  253.         if (nav) nav.style.display = 'none';
  254.       }
  255.     } catch(e){}
  256.   });
  257.   function openDoc(src, title){
  258.     titleEl.textContent = title || 'Document';
  259.     frame.src = src;
  260.     modal.classList.add('open');
  261.     modal.setAttribute('aria-hidden','false');
  262.     document.body.style.overflow = 'hidden';
  263.   }
  264.   function closeDoc(){
  265.     modal.classList.remove('open');
  266.     modal.setAttribute('aria-hidden','true');
  267.     document.body.style.overflow = '';
  268.     setTimeout(function(){ frame.src = 'about:blank'; }, 200);
  269.   }
  270.   document.querySelectorAll('.legal-open').forEach(function(a){
  271.     a.addEventListener('click', function(e){
  272.       e.preventDefault();
  273.       openDoc(a.getAttribute('href'), a.getAttribute('data-title'));
  274.     });
  275.   });
  276.   modal.querySelectorAll('[data-close]').forEach(function(el){
  277.     el.addEventListener('click', closeDoc);
  278.   });
  279.   document.addEventListener('keydown', function(e){ if(e.key==='Escape' && modal.classList.contains('open')) closeDoc(); });
  280. });
  281. </script>
  283. <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
  284. <script>
  285. (function(){
  286.   var DEFAULT=[33.8938,35.5018];
  287.   var map, marker;
  288.   var suggestTimer=null, suggestXhr=null, suggestions=[];
  290.   function makeIcon(){
  291.     var c=document.createElement('canvas');
  292.     c.width=30; c.height=38;
  293.     var ctx=c.getContext('2d');
  294.     ctx.fillStyle='#00a7b5';
  295.     ctx.beginPath(); ctx.arc(15,15,13,0,Math.PI*2); ctx.fill();
  296.     ctx.strokeStyle='white'; ctx.lineWidth=3; ctx.stroke();
  297.     ctx.beginPath(); ctx.moveTo(9,24); ctx.lineTo(15,38); ctx.lineTo(21,24); ctx.fill();
  298.     return L.icon({iconUrl:c.toDataURL(),iconSize:[30,38],iconAnchor:[15,38]});
  299.   }
  300.   function setLatLng(lat,lng){
  301.     var la=document.getElementById('field-lat'), lo=document.getElementById('field-lng');
  302.     if(la) la.value=Number(lat).toFixed(7);
  303.     if(lo) lo.value=Number(lng).toFixed(7);
  304.   }
  305.   function setField(id,val){
  306.     var el=document.getElementById(id);
  307.     if(el&&val){ el.value=val; el.classList.add('map-filled'); }
  308.   }
  309.   function fillAddress(a){
  310.     if(!a) return;
  311.     setField('field-country', a.country||'');
  312.     setField('field-region', a.state||a.region||a.county||a.state_district||'');
  313.     setField('field-city', a.city||a.town||a.village||a.municipality||a.suburb||'');
  314.   }
  315.   function showStatus(type,msg){
  316.     var el=document.getElementById('map-status');
  317.     if(el){ el.className='map-status '+type; el.textContent=msg; }
  318.   }
  319.   function geocode(lat,lng){
  320.     showStatus('loading','🔍 Looking up address…');
  321.     var xhr=new XMLHttpRequest();
  322.     xhr.open('GET','https://nominatim.openstreetmap.org/reverse?lat='+lat+'&lon='+lng+'&format=json&addressdetails=1');
  323.     xhr.setRequestHeader('Accept-Language','en');
  324.     xhr.onload=function(){
  325.       if(xhr.status!==200){showStatus('error','❌ Could not find address');return;}
  326.       var d=JSON.parse(xhr.responseText);
  327.       if(!d||!d.address){showStatus('error','❌ No address found');return;}
  328.       fillAddress(d.address);
  329.       showStatus('success','✅ Location set — review the fields below.');
  330.     };
  331.     xhr.onerror=function(){showStatus('error','❌ Network error');};
  332.     xhr.send();
  333.   }
  334.   function hideSuggest(){
  335.     var d=document.getElementById('loc-suggest');
  336.     if(d){ d.classList.remove('open'); d.innerHTML=''; }
  337.     suggestions=[];
  338.   }
  339.   function chooseSuggestion(s){
  340.     var lat=parseFloat(s.lat), lng=parseFloat(s.lon);
  341.     map.setView([lat,lng],14);
  342.     marker.setLatLng([lat,lng]);
  343.     setLatLng(lat,lng);
  344.     if(s.address){ fillAddress(s.address); }
  345.     else { geocode(lat,lng); }
  346.     var si=document.getElementById('loc-search');
  347.     if(si){ si.value=s.display_name||''; }
  348.     hideSuggest();
  349.     showStatus('success','✅ Location set — review the fields below.');
  350.   }
  351.   function renderSuggest(list){
  352.     var d=document.getElementById('loc-suggest');
  353.     if(!d) return;
  354.     suggestions=list||[];
  355.     if(!suggestions.length){ hideSuggest(); return; }
  356.     d.innerHTML='';
  357.     suggestions.forEach(function(s){
  358.       var it=document.createElement('div');
  359.       it.className='loc-suggest-item';
  360.       it.textContent=s.display_name;
  361.       it.addEventListener('mousedown',function(e){ e.preventDefault(); chooseSuggestion(s); });
  362.       d.appendChild(it);
  363.     });
  364.     d.classList.add('open');
  365.   }
  366.   function fetchSuggest(q){
  367.     if(suggestXhr){ try{ suggestXhr.abort(); }catch(e){} }
  368.     suggestXhr=new XMLHttpRequest();
  369.     suggestXhr.open('GET','https://nominatim.openstreetmap.org/search?q='+encodeURIComponent(q)+'&format=json&addressdetails=1&limit=5');
  370.     suggestXhr.setRequestHeader('Accept-Language','en');
  371.     suggestXhr.onload=function(){
  372.       if(suggestXhr.status!==200){ return; }
  373.       var r;
  374.       try { r=JSON.parse(suggestXhr.responseText||'[]'); } catch(e){ r=[]; }
  375.       renderSuggest(Array.isArray(r)? r : []);
  376.     };
  377.     suggestXhr.onerror=function(){};
  378.     suggestXhr.send();
  379.   }
  380.   function searchLocation(){
  381.     var q=(document.getElementById('loc-search').value||'').trim();
  382.     if(!q){ showStatus('error','Type a place to search.'); return; }
  383.     showStatus('loading','🔍 Searching…');
  384.     var xhr=new XMLHttpRequest();
  385.     xhr.open('GET','https://nominatim.openstreetmap.org/search?q='+encodeURIComponent(q)+'&format=json&addressdetails=1&limit=1');
  386.     xhr.setRequestHeader('Accept-Language','en');
  387.     xhr.onload=function(){
  388.       if(xhr.status!==200){showStatus('error','❌ Search failed');return;}
  389.       var r=JSON.parse(xhr.responseText);
  390.       if(!r||!r.length){showStatus('error','❌ No place found — try a different search');return;}
  391.       chooseSuggestion(r[0]);
  392.     };
  393.     xhr.onerror=function(){showStatus('error','❌ Network error');};
  394.     xhr.send();
  395.   }
  396.   function initMap(lat,lng){
  397.     map=L.map('map').setView([lat,lng],11);
  398.     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© OpenStreetMap',maxZoom:19}).addTo(map);
  399.     marker=L.marker([lat,lng],{draggable:true,icon:makeIcon()}).addTo(map);
  400.     setLatLng(lat,lng);
  401.     marker.on('dragend',function(e){var p=e.target.getLatLng();setLatLng(p.lat,p.lng);geocode(p.lat,p.lng);});
  402.     map.on('click',function(e){marker.setLatLng(e.latlng);setLatLng(e.latlng.lat,e.latlng.lng);geocode(e.latlng.lat,e.latlng.lng);});
  403.   }
  404.   function locate(){
  405.     var btn=document.getElementById('locate-btn');
  406.     if(!navigator.geolocation){showStatus('error','❌ Not supported by your browser');return;}
  407.     btn.disabled=true; btn.textContent='⏳ Locating…';
  408.     showStatus('loading','📡 Getting your location…');
  409.     navigator.geolocation.getCurrentPosition(
  410.       function(p){
  411.         map.setView([p.coords.latitude,p.coords.longitude],16);
  412.         marker.setLatLng([p.coords.latitude,p.coords.longitude]);
  413.         setLatLng(p.coords.latitude,p.coords.longitude);
  414.         geocode(p.coords.latitude,p.coords.longitude);
  415.         btn.disabled=false; btn.textContent='📡 Use my location';
  416.       },
  417.       function(){ btn.disabled=false; btn.textContent='📡 Use my location'; showStatus('error','❌ Could not get your location'); }
  418.     );
  419.   }
  420.   document.addEventListener('DOMContentLoaded',function(){
  421.     if(!document.getElementById('map')||!window.L){return;}
  422.     initMap(DEFAULT[0],DEFAULT[1]);
  424.     var lb=document.getElementById('locate-btn');
  425.     if(lb) lb.addEventListener('click',locate);
  427.     var sb=document.getElementById('search-btn');
  428.     if(sb) sb.addEventListener('click',function(){ hideSuggest(); searchLocation(); });
  430.     var si=document.getElementById('loc-search');
  431.     if(si){
  432.       si.addEventListener('input',function(){
  433.         var q=(si.value||'').trim();
  434.         if(suggestTimer){ clearTimeout(suggestTimer); }
  435.         if(q.length<3){ hideSuggest(); return; }
  436.         suggestTimer=setTimeout(function(){ fetchSuggest(q); },350);
  437.       });
  438.       si.addEventListener('keydown',function(e){
  439.         if(e.key==='Enter'){
  440.           e.preventDefault();
  441.           if(suggestions.length){ chooseSuggestion(suggestions[0]); }
  442.           else { searchLocation(); }
  443.         } else if(e.key==='Escape'){
  444.           hideSuggest();
  445.         }
  446.       });
  447.       si.addEventListener('blur',function(){ setTimeout(hideSuggest,150); });
  448.     }
  450.     var hasLoc = (document.getElementById('field-country').value
  451.                || document.getElementById('field-region').value
  452.                || document.getElementById('field-city').value);
  453.     if(!hasLoc && navigator.geolocation){
  454.       navigator.geolocation.getCurrentPosition(
  455.         function(p){
  456.           map.setView([p.coords.latitude,p.coords.longitude],16);
  457.           marker.setLatLng([p.coords.latitude,p.coords.longitude]);
  458.           setLatLng(p.coords.latitude,p.coords.longitude);
  459.           geocode(p.coords.latitude,p.coords.longitude);
  460.         },
  461.         function(){}
  462.       );
  463.     }
  464.   });
  465. }());
  466. </script>
  467. </body>
  468. </html>