// 地図を作成し、表示する位置を設定
var map = L.map('mymap').setView([38.891, 139.821], 16);

// 国土地理院のタイルレイヤーを追加
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).addTo(map);

// カスタムアイコンを定義
var customIcon = L.icon({
    iconUrl: 'q.png', // カスタムアイコン画像のパスを指定
    iconSize: [20, 30], // アイコンのサイズ
    iconAnchor: [10, 30] // アイコンの基準位置（底部中央）
});

// 落とし物マーカーのデータ
var items = [
    {
        lat: 38.891,
        lng: 139.821,
  name:"落とし物1",
        hint: "自動販売機の数",
        img: "1.png", // 写真のファイル名
        password: "3", // 合言葉
        comment: "「た」を拾った。"
    },
    {
        lat: 38.892,
        lng: 139.820,
       name:"落とし物2",
        hint: "206教室、207教室の間にある共同研究室のアルファベット",
        img: "2.png", // 写真のファイル名
        password: "E", // 合言葉
        comment: "「ん」を拾った。"
    },
    {
        lat: 38.890,
        lng: 139.822,
       
        hint: "今まで拾ってきた落とし物1,2を合体させよう。",
       
        password: "たん", // 合言葉
        comment: "「た」と「ん」を合体させたら「い」が出てきた。あの頃落とした単位を拾った！"
    }
];

// マーカーを地図に追加
items.forEach(function(item) {
    var popupContent = `
        <div class="popup-content">
            <img src="${item.img}" alt="${item.name}">
            <p><b>${item.name}</b></p>
            <p>ヒント: ${item.hint}</p>
            <input type="text" id="password-${item.name}" placeholder="合言葉を入力">
            <button onclick="checkPassword('${item.name}', '${item.password}', '${item.comment}')">送信</button>
            <p id="comment-${item.name}" style="display: none; color: green; margin-top: 10px;"></p>
        </div>
    `;

    var marker = L.marker([item.lat, item.lng], { icon: customIcon }).addTo(map);
    marker.bindPopup(popupContent);
});

// 合言葉をチェックする関数
function checkPassword(name, correctPassword, commentText) {
    var input = document.getElementById(`password-${name}`).value;
    var comment = document.getElementById(`comment-${name}`);

    if (input === correctPassword) {
        comment.style.display = "block";
        comment.style.color = "green";
        comment.textContent = commentText; // マーカーごとのコメントを表示
    } else {
        comment.style.display = "block";
        comment.style.color = "red";
        comment.textContent = "不正解！もう一度お試しください。";
    }
}