document.addEventListener('DOMContentLoaded', () => {
  const map = L.map('map').setView([38.9175, 139.8353], 16);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

// カスタムアイコンを定義
  const customIcon = L.icon({
    iconUrl: 'images/marker-icon.png', // カスタムマーカー画像のパス
    iconSize: [32, 32], // マーカーのサイズ
    iconAnchor: [16, 32], // アイコンの「足」の位置
    popupAnchor: [0, -32] // ポップアップの表示位置
  });

// 店舗データ
const snacks = [
    { name: "スナック緑",
      lat: 38.91784466465069,
      lng: 139.83580858552295,
      description1: "定休日:月曜日 営業時間 19:00〜0:00",
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
      
    { name: "スナックLink",
      lat: 38.918328820566366,
      lng: 139.83473570196918,
      description1: "定休日:なし 営業時間 20:00〜1:00",
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックCherir",
      lat: 38.91731041980675,
      lng: 139.8348859056667,
      description1: "定休日:日曜日 営業時間 20:00〜0:00",
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
   
    { name: "スナック待夢里",
      lat: 38.9161682,
      lng: 139.8227986,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },

    { name: "アモーレ",
      lat: 38.8956124,
      lng: 139.8075298,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックRJ",
      lat: 38.9162182,
      lng: 139.826661,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナック美麗",
      lat: 38.9162182,
      lng: 139.826661,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックエミ",
      lat: 38.8956124,
      lng: 139.8075298,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナック・ジャスミン",
      lat: 38.8956124,
      lng: 139.8075298,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "ラボンヌ",
      lat: 38.9198029,
      lng: 139.830132,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "セブンマキ",
      lat: 38.9188466,
      lng: 139.8328239,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },

    { name: "ドルフィン",
      lat: 38.9176609,
      lng: 139.8336603,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "パラダイス。",
      lat: 38.9180537,
      lng: 139.8313297,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナック志保",
      lat: 38.9178898,
      lng: 139.8349414,
      description1: "定休日：日、月",
      description2: "営業時間：20:30〜0:30",
      description3: "店内情報：店内は落ち着いた雰囲気で、スナックには窓がない、置いてるお酒はママの好みで年齢層はやや高め。",
      mama: "ママメモ：ママはワインがすき。",
      img1: 'images/siho1.jpg',
      img2: 'images/siho2.jpg',
      icon: 'images/favicon-32x32.png' // 個別アイコンのパス
    },
    
    { name: "スナック+マーブル",
      lat: 38.918994,
      lng: 139.8341698,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックCline",
      lat: 38.9180537,
      lng: 139.8313297,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "セレナーデ",
      lat: 38.9177181,
      lng: 139.834623,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナック バタフライ",
      lat: 38.9180537,
      lng: 139.8313297,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックゆーみん",
      lat: 38.9180537,
      lng: 139.8313297,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックKa・Na・De",
      lat: 38.91762,
      lng: 139.83947,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックわかな",
      lat: 38.9203849,
      lng: 139.8388024,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "ゆーとぴあ〔夢想郷〕",
      lat: 38.9214027,
      lng: 139.8432495,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナック+暖",
      lat: 38.9203021,
      lng: 139.8343288,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナックべに花",
      lat: 38.91796,
      lng: 139.83456,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "スナック・プルメリア",
      lat: 38.9175525,
      lng: 139.8314215,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "ふらっと",
      lat: 38.9213477,
      lng: 139.8433158,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "シーズ",
      lat: 38.9196868,
      lng: 139.8277188,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "Glossy★",
      lat: 38.9179889,
      lng: 139.8310129,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "Snack+Roppongi",
      lat: 38.9214815,
      lng: 139.8244913,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "OPENHEART",
      lat: 38.9201247,
      lng: 139.8341646,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "リヨン2",
      lat: 38.918098668221646,
      lng: 139.83401441368036,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "K",
      lat: 38.909465506993946,
      lng: 139.83573882021062,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "シャングリラ",
      lat: 38.918024,
      lng: 139.8134354,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "サラ",
      lat: 38.9196951473271,
      lng: 139.8321927134644,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "CAROL",
      lat: 38.918024,
      lng: 139.8134354,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "クオーレ",
      lat: 38.9176328,
      lng: 139.8341622,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    },
    
    { name: "ブルーローズ",
      lat: 38.8956124,
      lng: 139.8075298,
      icon: 'images/snack-icon.png' // 個別アイコンのパス
    }, 
];

let markers = [];

  // マーカーを追加し、ポップアップを設定
  snacks.forEach(snack => {
    const markerIcon = L.icon({
      iconUrl: snack.icon || 'images/marker-icon.png', // 個別アイコンまたはデフォルトアイコン
      iconSize: [32, 32],
      iconAnchor: [16, 32],
      popupAnchor: [0, -32]
    });
    
// モーダルの開閉操作
function openModal(imageSrc) {
  const modal = document.getElementById('image-modal');
  const modalImage = document.getElementById('modal-image');
  modalImage.src = imageSrc; // クリックした画像のソースを設定
  modal.style.display = 'block'; // モーダルを表示
}

function closeModal() {
  const modal = document.getElementById('image-modal');
  modal.style.display = 'none'; // モーダルを非表示
}

// モーダル外をクリックして閉じる
window.onclick = function (event) {
  const modal = document.getElementById('image-modal');
  if (event.target === modal) {
    modal.style.display = 'none';
  }
};

const marker = L.marker([snack.lat, snack.lng], { icon: markerIcon }).addTo(map);
   const popupContent = `
  <div class="popup-content">
    <h3>${snack.name}</h3>
    <p>${snack.description1 || ''}</p>
    <p>${snack.description2 || ''}</p>
    <p>${snack.description3 || ''}</p>
    <p>${snack.mama || ''}</p>
    <img src="${snack.img1}" width="106" height="73" onclick="openModal('${snack.img1}')" style="cursor: pointer;" />
    <img src="${snack.img2}" width="106" height="73" onclick="openModal('${snack.img2}')" style="cursor: pointer;" />
    <button onclick="addToFavorites('${snack.name}')">気になるお店リストに追加</button>
  </div>
`;

    marker.bindPopup(popupContent);
    markers.push({ marker, name: snack.name });
  });

// リスト追加機能
window.addToFavorites = function(name){
  const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
  favorites.push({ name, addedAt: new Date().toISOString() });
  localStorage.setItem('favorites', JSON.stringify(favorites));
  alert(`${name}を気になるお店リストに追加しました！`);
  };
});