/* Add custom Js styles below */ 
window.addEventListener("load", (event) => {
  const navbar = document.querySelector('#mainnav .inner .container > div div:first-child');
  const storName = `
    <div class="flex items-center">
      <a href='https://aiyd-jewelry.com/' style='font-weight:700;'>
        <span>
          مجوهرات عايد
        </span>
      </a>
    </div>
  `;
  const mQuery = window.matchMedia("(width <= 1024px)");  
  if(mQuery.matches) {
    navbar.insertAdjacentHTML('afterend', storName);
  }

(function () {

  if (document.getElementById("store-map")) return;

  // تحميل CSS
  const css = document.createElement("link");
  css.rel = "stylesheet";
  css.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
  document.head.appendChild(css);

  // تحميل JS
  const leafletJs = document.createElement("script");
  leafletJs.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";

  leafletJs.onload = function () {

    // إنشاء عنصر الخريطة
    const mapDiv = document.createElement("div");
    mapDiv.id = "store-map";
    mapDiv.style.cssText = `
      width:100%;
      height:400px;
      border-radius:12px;
      margin:20px 0;
    `;

    // مكان الإضافة
    const target =
      document.querySelector("section#best-offers-10-slider") || document.body;

    target.appendChild(mapDiv);

    // إنشاء الخريطة
    const map = L.map("store-map", {
      scrollWheelZoom: true,
    });

    // Locations
    const locations = [
      {
        name: "الفرع الرئيسي - اسواق طيبة - محل رقم 80",
        lat: 24.7136,
        lng: 46.6753
      },
      {
        name: "فرع رويال مول - الملك فهد - محل رقم 1164",
        lat: 24.783896704438533,
        lng: 46.73148089093212
      },
    ];

    // إضافة Layer
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "&copy; OpenStreetMap"
    }).addTo(map);

    // حدود تلقائية لكل الماركرز
    const bounds = [];

    locations.forEach(loc => {
      const marker = L.marker([loc.lat, loc.lng])
        .addTo(map)
        .bindPopup(loc.name);

      bounds.push([loc.lat, loc.lng]);
    });

    map.fitBounds(bounds, {
      padding: [30, 30]
    });
  };

  document.body.appendChild(leafletJs);

})();
})