addings details and map to modal

frontend/app.js

@@ -35,6 +35,7 @@ const state = {
 // Charts
 let comparisonChart = null;
 let schoolDetailChart = null;
+let modalMap = null;
 
 // Chart colors
 const CHART_COLORS = [
@@ -94,7 +95,10 @@ const elements = {
   modalClose: document.getElementById("modal-close"),
   modalSchoolName: document.getElementById("modal-school-name"),
   modalMeta: document.getElementById("modal-meta"),
+  modalDetails: document.getElementById("modal-details"),
   modalStats: document.getElementById("modal-stats"),
+  modalMapContainer: document.getElementById("modal-map-container"),
+  modalMap: document.getElementById("modal-map"),
   schoolDetailChart: document.getElementById("school-detail-chart"),
   addToCompare: document.getElementById("add-to-compare"),
 };
@@ -1174,12 +1178,35 @@ async function openSchoolModal(urn) {
   state.currentSchoolData = data;
 
   elements.modalSchoolName.textContent = data.school_info.school_name;
+
+  // Build meta tags including faith if applicable
+  const faithDenom = data.school_info.religious_denomination;
+  const showFaith = faithDenom &&
+    faithDenom !== "None" &&
+    faithDenom !== "Does not apply" &&
+    faithDenom !== "";
+  const faithTag = showFaith
+    ? `<span class="school-tag faith">${escapeHtml(faithDenom)}</span>`
+    : "";
+
   elements.modalMeta.innerHTML = `
         <span class="school-tag">${escapeHtml(data.school_info.local_authority || "")}</span>
         <span class="school-tag type">${escapeHtml(data.school_info.school_type || "")}</span>
-        <span class="school-tag">Primary</span>
+        ${faithTag}
     `;
 
+  // Build details section (address and age range)
+  const ageRange = data.school_info.age_range;
+  const address = data.school_info.address;
+  let detailsHtml = "";
+  if (address) {
+    detailsHtml += `<div class="modal-address">${escapeHtml(address)}</div>`;
+  }
+  if (ageRange) {
+    detailsHtml += `<div class="modal-age-range">Ages ${escapeHtml(ageRange)}</div>`;
+  }
+  elements.modalDetails.innerHTML = detailsHtml;
+
   // Get latest year data with actual results
   const sortedData = data.yearly_data.sort((a, b) => b.year - a.year);
   const latest =
@@ -1327,6 +1354,46 @@ async function openSchoolModal(urn) {
     ? "Remove from Compare"
     : "Add to Compare";
   elements.addToCompare.dataset.urn = data.school_info.urn;
+
+  // Initialize modal map if coordinates available
+  const lat = data.school_info.latitude;
+  const lng = data.school_info.longitude;
+
+  if (lat && lng && typeof L !== "undefined") {
+    elements.modalMapContainer.style.display = "block";
+
+    // Destroy existing map if any
+    if (modalMap) {
+      modalMap.remove();
+      modalMap = null;
+    }
+
+    // Create map after a brief delay to ensure container is visible
+    setTimeout(() => {
+      try {
+        modalMap = L.map(elements.modalMap, {
+          scrollWheelZoom: false,
+        }).setView([lat, lng], 15);
+
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+          attribution: "&copy; OpenStreetMap contributors",
+          maxZoom: 19,
+        }).addTo(modalMap);
+
+        L.marker([lat, lng]).addTo(modalMap);
+
+        // Handle click to open fullscreen map
+        elements.modalMap.addEventListener("click", () => {
+          openMapModal(lat, lng, data.school_info.school_name);
+        });
+      } catch (err) {
+        console.error("Error initializing modal map:", err);
+        elements.modalMapContainer.style.display = "none";
+      }
+    }, 100);
+  } else {
+    elements.modalMapContainer.style.display = "none";
+  }
 }
 
 function closeModal() {
@@ -1334,6 +1401,12 @@ function closeModal() {
   document.body.style.overflow = "";
   state.currentSchoolData = null;
 
+  // Clean up modal map
+  if (modalMap) {
+    modalMap.remove();
+    modalMap = null;
+  }
+
   // Restore visibility of school maps
   document.querySelectorAll('.school-map').forEach(el => {
     el.style.visibility = 'visible';