{% extends "base.html" %}
{% block title %}Bản đồ — Photo Đà Nẵng & Hội An{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<style>
  .map-wrap { position: relative; height: calc(100vh - 52px); width: 100%; }
  #map { height: 100%; width: 100%; }
  .map-user-panel {
    position: absolute;
    z-index: 1000;
    bottom: 1.25rem;
    right: 1rem;
    max-width: min(18rem, calc(100% - 2rem));
    padding: 0.65rem 0.75rem;
    background: rgba(26, 34, 45, 0.95);
    border: 1px solid #2a3542;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: border-radius 0.2s ease, padding 0.2s ease, max-width 0.2s ease;
  }
  .map-user-panel.is-collapsed {
    padding: 0;
    max-width: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .map-user-panel.is-collapsed .map-user-panel-inner {
    display: none;
  }
  .map-user-panel.is-collapsed .btn-fab-expand-loc {
    display: flex;
  }
  .map-user-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .map-user-panel-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9aa7b5;
  }
  .btn-panel-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #3a4553;
    background: #243040;
    color: #9aa7b5;
    cursor: pointer;
    line-height: 1;
  }
  .btn-panel-icon:hover {
    border-color: #3d9cf5;
    color: #3d9cf5;
  }
  .btn-fab-expand-loc {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #22c55e;
    cursor: pointer;
  }
  .btn-fab-expand-loc:hover {
    color: #4ade80;
  }
  .btn-fab-expand-loc svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
  }
  .btn-my-location {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: 1px solid #3a4553;
    background: #243040;
    color: var(--text, #e8eef5);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }
  .btn-my-location:hover:not(:disabled) {
    border-color: #3d9cf5;
    color: #3d9cf5;
  }
  .btn-my-location:disabled {
    opacity: 0.55;
    cursor: wait;
  }
  .user-loc-text {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #9aa7b5;
    word-break: break-word;
  }
  .user-loc-text a { color: #3d9cf5; }
  .leaflet-popup-content-wrapper { border-radius: 10px; }
  .leaflet-popup-content { margin: 10px 12px; min-width: 160px; }
  .popup-name { font-weight: 700; margin-bottom: 4px; }
  .popup-meta { font-size: 0.8rem; color: #5a6570; margin-bottom: 8px; }
  /* Marker nhiếp ảnh gia: avatar tròn + phóng nhẹ khi hover */
  .leaflet-div-icon.photo-map-marker-root {
    border: none !important;
    background: transparent !important;
  }
  .photo-map-marker-root .photo-marker {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    will-change: transform;
  }
  .photo-map-marker-root.photo-map-marker--pro .photo-marker {
    border: 3px solid #f5c542;
  }
  .photo-map-marker-root.photo-map-marker--free .photo-marker {
    border: 3px solid #3d9cf5;
  }
  .photo-map-marker-root .photo-marker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }
  .photo-map-marker-root .photo-marker-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #e8eef5;
    background: linear-gradient(145deg, #2d3a4a 0%, #1a222d 100%);
    pointer-events: none;
  }
  .photo-map-marker-root.photo-map-marker--pro .photo-marker-fallback {
    background: linear-gradient(145deg, #5c4a1a 0%, #2a2310 100%);
  }
  .leaflet-div-icon.photo-map-marker-root:hover {
    z-index: 8000 !important;
  }
  .leaflet-div-icon.photo-map-marker-root:hover .photo-marker {
    transform: scale(1.12);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  }
</style>
{% endblock %}
{% block content %}
<div class="map-wrap">
  <div id="map" role="application" aria-label="Bản đồ nhiếp ảnh gia Đà Nẵng và Hội An"></div>
  <div class="map-user-panel" id="map-user-loc-panel" aria-live="polite">
    <button type="button" class="btn-fab-expand-loc" id="btn-expand-loc-panel" aria-expanded="false" aria-label="Mở bảng vị trí" title="Mở bảng vị trí">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
    </button>
    <div class="map-user-panel-inner">
      <div class="map-user-panel-top">
        <span class="map-user-panel-title">Vị trí</span>
        <button type="button" class="btn-panel-icon" id="btn-collapse-loc-panel" aria-expanded="true" aria-label="Thu nhỏ xuống góc" title="Thu nhỏ">&#8722;</button>
      </div>
      <button type="button" class="btn-my-location" id="btn-my-location">Hiển thị vị trí của tôi</button>
      <p class="user-loc-text" id="user-loc-text">Nhấn để xin quyền truy cập vị trí từ trình duyệt (GPS / mạng).</p>
    </div>
  </div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
(function () {
  /* Trung điểm giữa Đà Nẵng (~16.05) và Hội An (~15.88) */
  const regionCenter = [15.965, 108.265];
  const regionBounds = [[15.72, 107.82], [16.28, 108.48]];
  let userHasLocated = false;
  const map = L.map("map", {
    maxBounds: regionBounds,
    maxBoundsViscosity: 0.85,
  }).setView(regionCenter, 10);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "&copy; OpenStreetMap",
  }).addTo(map);

  function initialsFromName(name) {
    var parts = String(name).trim().split(/\s+/).filter(Boolean);
    if (parts.length >= 2) {
      return (parts[0].charAt(0) + parts[1].charAt(0)).toUpperCase().slice(0, 2);
    }
    return String(name).slice(0, 2).toUpperCase();
  }

  function photographerDivIcon(m) {
    var planClass = m.plan === "pro" ? "photo-map-marker--pro" : "photo-map-marker--free";
    var inner;
    if (m.avatar_url) {
      inner = '<img class="photo-marker-img" src="' + escapeAttr(m.avatar_url) + '" alt="" loading="lazy" width="44" height="44">';
    } else {
      inner = '<span class="photo-marker-fallback">' + escapeHtml(initialsFromName(m.name)) + "</span>";
    }
    return L.divIcon({
      className: "leaflet-div-icon photo-map-marker-root " + planClass,
      html: '<div class="photo-marker">' + inner + "</div>",
      iconSize: [44, 44],
      iconAnchor: [22, 22],
      popupAnchor: [0, -20],
    });
  }

  fetch("{% url 'map_markers' %}")
    .then((r) => r.json())
    .then((data) => {
      const markers = data.markers || [];
      const group = L.featureGroup();
      markers.forEach((m) => {
        const mk = L.marker([m.lat, m.lng], { icon: photographerDivIcon(m) });
        const planLabel = m.plan === "pro" ? "Pro" : "Free";
        mk.bindPopup(
          '<div class="popup-name">' + escapeHtml(m.name) + '</div>' +
          '<div class="popup-meta">Gói: ' + planLabel + ' — vị trí trên map đã làm mờ</div>' +
          '<a href="' + escapeAttr(m.detail_url) + '">Xem portfolio &amp; thông tin</a>'
        );
        mk.addTo(group);
      });
      group.addTo(map);
      if (markers.length && !userHasLocated) {
        map.fitBounds(group.getBounds().pad(0.15));
      }
    })
    .catch(() => {
      console.error("Không tải được markers");
    });

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, (c) => ({
      "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
    }[c]));
  }
  function escapeAttr(s) {
    return String(s).replace(/"/g, "%22");
  }

  const btnMyLoc = document.getElementById("btn-my-location");
  const userLocText = document.getElementById("user-loc-text");
  const locPanel = document.getElementById("map-user-loc-panel");
  const btnCollapsePanel = document.getElementById("btn-collapse-loc-panel");
  const btnExpandPanel = document.getElementById("btn-expand-loc-panel");
  const LOC_PANEL_COLLAPSED_KEY = "mapLocPanelCollapsed";

  function setLocPanelCollapsed(collapsed) {
    locPanel.classList.toggle("is-collapsed", collapsed);
    var expanded = !collapsed;
    btnCollapsePanel.setAttribute("aria-expanded", expanded ? "true" : "false");
    btnExpandPanel.setAttribute("aria-expanded", expanded ? "true" : "false");
    try {
      sessionStorage.setItem(LOC_PANEL_COLLAPSED_KEY, collapsed ? "1" : "0");
    } catch (e) { /* ignore */ }
  }

  btnCollapsePanel.addEventListener("click", function () {
    setLocPanelCollapsed(true);
  });
  btnExpandPanel.addEventListener("click", function () {
    setLocPanelCollapsed(false);
  });
  try {
    if (sessionStorage.getItem(LOC_PANEL_COLLAPSED_KEY) === "1") {
      setLocPanelCollapsed(true);
    }
  } catch (e) { /* ignore */ }

  let userMarker = null;
  let userAccuracyCircle = null;

  const userLocIcon = L.divIcon({
    className: "marker-user-loc",
    html: '<div style="width:16px;height:16px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);"></div>',
    iconSize: [16, 16],
    iconAnchor: [8, 8],
  });

  function setUserLocMessage(html) {
    userLocText.innerHTML = html;
  }

  btnMyLoc.addEventListener("click", function () {
    if (!navigator.geolocation) {
      setUserLocMessage("Trình duyệt không hỗ trợ định vị.");
      return;
    }
    btnMyLoc.disabled = true;
    setUserLocMessage("Đang lấy vị trí…");

    navigator.geolocation.getCurrentPosition(
      function (pos) {
        btnMyLoc.disabled = false;
        userHasLocated = true;
        const lat = pos.coords.latitude;
        const lng = pos.coords.longitude;
        const acc = pos.coords.accuracy;

        if (userMarker) {
          userMarker.setLatLng([lat, lng]);
        } else {
          userMarker = L.marker([lat, lng], { icon: userLocIcon }).addTo(map);
          userMarker.bindPopup("Bạn đang ở đây (theo thiết bị).");
        }
        if (userAccuracyCircle) {
          map.removeLayer(userAccuracyCircle);
        }
        userAccuracyCircle = L.circle([lat, lng], {
          radius: acc,
          color: "#22c55e",
          fillColor: "#22c55e",
          fillOpacity: 0.12,
          weight: 1,
        }).addTo(map);

        map.setView([lat, lng], Math.max(map.getZoom(), 13));
        const mapsUrl = "https://www.openstreetmap.org/?mlat=" + lat + "&mlon=" + lng + "#map=15/" + lat + "/" + lng;
        setUserLocMessage(
          "<strong>Vĩ độ:</strong> " + lat.toFixed(5) + "<br>" +
          "<strong>Kinh độ:</strong> " + lng.toFixed(5) + "<br>" +
          "<strong>Độ chính xác ~</strong> " + Math.round(acc) + " m<br>" +
          '<a href="' + escapeAttr(mapsUrl) + '" target="_blank" rel="noopener">Mở trên OpenStreetMap</a>'
        );
      },
      function (err) {
        btnMyLoc.disabled = false;
        const msg = {
          1: "Bạn đã từ chối quyền vị trí.",
          2: "Không lấy được vị trí (thiết bị / mạng).",
          3: "Hết thời gian chờ khi lấy vị trí.",
        }[err.code] || "Không lấy được vị trí.";
        setUserLocMessage(msg);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
    );
  });
})();
</script>
{% endblock %}