<!-- نقشه -->
<div id="map" style="width:100%; height:600px; border-radius:6px;"></div>

<!-- پاپ‌آپ بزرگ -->
<div id="popup-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;"></div>

<div id="popup-box" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:600px; max-width:90%; background:#fff; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.4); padding:20px; z-index:9999; font-family: Vazirmatn,Tahoma,sans-serif !important; direction: rtl; text-align: right;">
  <button id="popup-close" tabindex="0" aria-label="بستن">×</button>
  <div id="popup-content" style="margin-top:10px;"></div>
  <div id="popup-map-container" style="width:100%; height:250px; margin-top:15px;"></div>
</div>

<!-- دکمه شناور پایین سمت چپ -->
<button id="filter-toggle" style="
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #0b6bd6;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Vazirmatn, Tahoma, sans-serif;
">
  🔍
</button>

<!-- پنل فیلتر کشویی -->
<div id="filter-panel" style="
  position: fixed;
  bottom: 80px;
  left: 20px;
  width: 300px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  padding: 15px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  font-family: Vazirmatn,Tahoma,sans-serif;
">
  <button id="close-filter-panel" style="
    align-self: flex-end;
    background: red;
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 35px;
    height: 35px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  ">×</button>

  <input id="search-city" placeholder="جستجوی شهر..." style="padding:8px 12px; border-radius:6px;" />

  <select id="filter-sector" style="padding:8px 12px; border-radius:6px;">
    <option value="all">بخش سرمایه‌گذاری (همه)</option>
    <option value="کشاورزی">کشاورزی</option>
    <option value="صنعت">صنعت</option>
    <option value="صنایع خلاق">صنایع خلاق</option>
  </select>

  <select id="filter-subsector" style="padding:8px 12px; border-radius:6px;">
    <option value="all">زیر‌بخش سرمایه‌گذاری (همه)</option>
    <option value="کشاورزی">کشاورزی</option>
    <option value="صنعت">صنعت</option>
    <option value="صنایع خلاق">صنایع خلاق</option>
  </select>

  <button id="apply-filters-btn" style="padding:8px 14px; border-radius:6px; background:#0b6bd6; color:#fff; cursor:pointer;">اعمال فیلتر</button>
  <button id="show-all" style="padding:8px 14px; border-radius:6px; background:#0b6bd6; color:#fff; cursor:pointer;">نمایش همه</button>
</div>

<style>
  @import url('https://cdn.jsdelivr.net/npm/vazirmatn@33.003.02/fonts/variable/Vazirmatn-font-face.css');

  #map, .leaflet-popup-content { font-family: Vazirmatn, Tahoma, sans-serif !important; direction: rtl; text-align: center; }

  .more-btn { 
    display:inline-block; padding:8px 14px; margin-top:8px; background:#0b6bd6; color:#fff !important; border-radius:8px; text-decoration:none; font-size:14px; font-weight:500; cursor:pointer; text-align:center; transition: background 0.3s; 
  }
  .more-btn:hover { background:#0955a1; }

  .popup-title { font-weight:700; margin-bottom:12px; display:block; font-size:16px; text-align:center; }
  #popup-box b { color:#111; font-weight:700; position:relative; }
  #popup-box .colon { color:#111; }
  #popup-box p { color:#555; margin:6px 0; line-height:1.8em; }
  #popup-box b.title { font-size:20px; font-weight:900; color:#111; display:block; margin-bottom:15px; }

  /* دکمه بستن پاپ‌آپ در توضیحات شهر سمت چپ با انیمیشن چرخش + بزرگ شدن */
  #popup-close {
    position: absolute;
    top: 15px;
    left: 15px; /* سمت چپ */
    z-index: 10002;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:red;
    color:#fff;
    border:none;
    border-radius:6px;
    width:45px;
    height:38px;
    font-size:24px;
    line-height:38px;
    cursor:pointer;
    transition: all 0.3s ease;
  }
  #popup-close:hover {
    background:#b43c3c;
    transform: rotate(10deg) scale(1.1);
  }

  /* دکمه کاتالوگ دیجیتال */
  #popup-box a {
    display:inline-block; margin-top:15px; padding:8px 14px; border-radius:6px;
    background:#0b6bd6; color:#fff; text-decoration:none; cursor:pointer;
    transition: all 0.3s ease;
  }
  #popup-box a:hover { background:#0955a1; }

  /* دکمه‌های فیلتر و شناور */
  #apply-filters-btn, #show-all, #close-filter-panel, #filter-toggle {
    transition: all 0.3s ease;
  }
  #apply-filters-btn:hover, #show-all:hover, #close-filter-panel:hover, #filter-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  /* فیلد جستجو انیمیشن ندارد */
  #search-city { transition: none; }

  #popup-box { max-height:90vh; overflow-y:auto; }
</style>

<script>
(function(){
  function loadCSS(href){ return new Promise(resolve=>{ var link=document.createElement('link'); link.rel='stylesheet'; link.href=href; link.onload=resolve; document.head.appendChild(link); }); }
  function loadJS(src){ return new Promise(resolve=>{ var script=document.createElement('script'); script.src=src; script.onload=resolve; document.body.appendChild(script); }); }

  Promise.all([ loadCSS('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'), loadJS('https://unpkg.com/leaflet@1.9.4/dist/leaflet.js') ]).then(initMap);

  // ---------------- GeoJSON خراسان شمالی از SimpleMaps ----------------
  var geojsonData = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "source": "https://simplemaps.com",
          "id": "IR28",
          "name": "خراسان شمالی"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [56.6,37.1],[57.9,37.1],[58.0,37.6],[57.0,37.9],[56.7,37.5],[56.6,37.1]
            ]
          ]
        }
      }
    ]
  };
  // -----------------------------------------------------------

  function initMap(){
    var map=L.map('map').setView([37.47,57.33],8);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© OpenStreetMap'}).addTo(map);

    // مرز خراسان شمالی
    var khShomaliGeo = geojsonData.features.filter(f => f.properties.id === "IR28");
    L.geoJSON(khShomaliGeo, {
      style: {
        color: 'blue',
        fillColor: '#ADD8E6',
        fillOpacity: 0.3,
        weight: 2
      }
    }).addTo(map);

    var sharedDescription=`<b>تکثیر و تجاری‌سازی گونه‌های برتر کاکوتی کوهی</b>
      <p><b>نوع پروژه</b> کشاورزی و دارویی</p>
      <p><b>پتانسیل سرمایه‌گذاری</b> بالا</p>
      <p><b>بخش سرمایه گذاری</b> کشاورزی</p>
      <p><b>اطلاعات کامل‌تر</b> پروژه شامل کاشت، برداشت، بسته‌بندی و صادرات گونه‌های برتر کاکوتی کوهی است.</p>
    `;

    var places=[
      {id:'bnj',name:"بجنورد",coords:[37.475,57.33],sector:"کشاورزی",subsector:"کشاورزی",description:sharedDescription,catalogUrl:"https://example.com/catalog/bojnord"},
      {id:'shw',name:"شیروان",coords:[37.406,57.927],sector:"صنعت",subsector:"صنایع خلاق",description:sharedDescription,catalogUrl:"https://example.com/catalog/shirvan"},
      {id:'ash',name:"آشخانه",coords:[37.563,56.923],sector:"صنایع خلاق",subsector:"صنعت",description:sharedDescription,catalogUrl:"https://example.com/catalog/ashkhaneh"}
    ];

    var markers=[];
    places.forEach(function(p){
      var popupHtml='<span class="popup-title">'+p.name+'</span>'+
        '<button class="more-btn" data-id="'+p.id+'" data-desc="'+encodeURIComponent(p.description)+'" data-lat="'+p.coords[0]+'" data-lng="'+p.coords[1]+'">اطلاعات بیشتر</button>';
      var marker=L.marker(p.coords, {dataId: p.id}).bindPopup(popupHtml);
      marker.sector=p.sector;
      marker.subsector=p.subsector;
      marker.city=p.name;
      marker.addTo(map);
      markers.push(marker);
    });

    // فیلتر، پاپ‌آپ و بقیه کدها بدون تغییر
    function applyFilters(){
      var s=document.getElementById('filter-sector').value;
      var sub=document.getElementById('filter-subsector').value;
      var search=document.getElementById('search-city').value.trim().toLowerCase();
      markers.forEach(m=>{
        var matchSector=(s==='all'||m.sector===s);
        var matchSubSector=(sub==='all'||m.subsector===sub);
        var matchSearch=(search===''||m.city.toLowerCase().includes(search));
        if(matchSector && matchSubSector && matchSearch){ if(!map.hasLayer(m)) m.addTo(map); } 
        else { if(map.hasLayer(m)) map.removeLayer(m); }
      });
    }

    const filterToggle=document.getElementById('filter-toggle');
    const filterPanel=document.getElementById('filter-panel');
    const closeFilterPanel=document.getElementById('close-filter-panel');
    const applyFiltersBtn=document.getElementById('apply-filters-btn');
    const showAllBtn=document.getElementById('show-all');

    filterToggle.addEventListener('click',()=>{ filterPanel.style.display=(filterPanel.style.display==='flex')?'none':'flex'; if(filterPanel.style.display==='flex'){ document.getElementById('search-city').focus(); } });
    closeFilterPanel.addEventListener('click',()=>{ filterPanel.style.display='none'; });
    applyFiltersBtn.addEventListener('click',()=>{ applyFilters(); });
    showAllBtn.addEventListener('click',()=>{
      document.getElementById('filter-sector').value='all';
      document.getElementById('filter-subsector').value='all';
      document.getElementById('search-city').value='';
      applyFilters();
    });

    var popupBox=document.getElementById('popup-box');
    var popupContent=document.getElementById('popup-content');
    var popupContainer=document.getElementById('popup-map-container');
    var popupOverlay=document.getElementById('popup-overlay');
    var popupClose=document.getElementById('popup-close');
    var popupMap;

    document.body.addEventListener('click',function(e){
      var btn=e.target.closest('.more-btn');
      if(!btn) return;
      e.preventDefault();
      var desc=decodeURIComponent(btn.getAttribute('data-desc')||'');
      var lat=parseFloat(btn.getAttribute('data-lat'));
      var lng=parseFloat(btn.getAttribute('data-lng'));
      var placeId=btn.getAttribute('data-id');
      var place = places.find(p => p.id === placeId);
      var catalogUrl = place ? place.catalogUrl : '#';

      popupOverlay.style.display='block';
      popupBox.style.display='block';
      popupContent.innerHTML=desc;

      var catalogBtn = document.createElement('a');
      catalogBtn.href = catalogUrl;
      catalogBtn.target = "_blank";
      catalogBtn.textContent = "نمایش کاتالوگ دیجیتال";
      popupContent.appendChild(catalogBtn);

      var bTags=popupContent.querySelectorAll('b');
      bTags.forEach(function(b){ 
        var existingColon=b.querySelector('.colon'); 
        if(existingColon) existingColon.remove(); 
        var colonSpan=document.createElement('span'); 
        colonSpan.textContent=' :'; 
        colonSpan.className='colon'; 
        b.appendChild(colonSpan); 
      });

      popupContainer.innerHTML='';
      var mapDiv=document.createElement('div'); mapDiv.style.width='100%'; mapDiv.style.height='250px'; popupContainer.appendChild(mapDiv);
      if(popupMap){popupMap.remove();popupMap=null;}
      popupMap=L.map(mapDiv,{zoomControl:false,attributionControl:false}).setView([lat,lng],12);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(popupMap);
      popupMap.invalidateSize();
      setTimeout(()=>{ if(popupMap) popupMap.invalidateSize(); },200);
    });

    function closePopup(){ 
      popupBox.style.display='none'; 
      popupOverlay.style.display='none'; 
      if(popupMap){popupMap.remove();popupMap=null;} 
    }
    popupOverlay.addEventListener('click',closePopup);
    popupClose.addEventListener('click',closePopup);

    const cityFromURL = new URLSearchParams(window.location.search).get("city");
    if (cityFromURL) {
      const markerToOpen = markers.find(m => m.options.dataId === cityFromURL);
      if (markerToOpen) {
        markerToOpen.openPopup();
        map.setView(markerToOpen.getLatLng(), 12);
      }
    }
  }
})();
</script>