script.js

let businessData = [];
let markers = [];
let map;

async function init() {
  const res = await fetch('businesses.json');
  businessData = await res.json();

  setupMap();
  populateCategoryFilter();
  renderBusinessList(businessData);
  setupEventListeners();

  if (businessData.length) showBusinessOnMap(businessData[0]);
}

function setupMap() {
  map = L.map('map').setView([36.1699, -115.1398], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
  }).addTo(map);
}

function clearMarkers() {
  markers.forEach((m) => map.removeLayer(m));
  markers = [];
}

function renderBusinessList(data) {
  const container = document.getElementById('businessList');
  container.innerHTML = '';
  clearMarkers();

  data.forEach((biz, index) => {
    const card = document.createElement('div');
    card.className = 'business-card';
    card.innerHTML = `
      <strong>${biz.name}</strong><br>
      <em>${biz.category}</em><br>
      ${biz.address}
    `;
    card.addEventListener('click', () => showBusinessOnMap(biz));
    container.appendChild(card);

    const marker = L.marker([biz.lat, biz.lng])
      .bindPopup(`<b>${biz.name}</b><br>${biz.category}<br>${biz.address}`)
      .addTo(map);

    markers.push(marker);
  });
}

function showBusinessOnMap(biz) {
  map.setView([biz.lat, biz.lng], 15);
  const marker = markers.find(
    (m) => m.getLatLng().lat === biz.lat && m.getLatLng().lng === biz.lng
  );
  if (marker) marker.openPopup();
}

function populateCategoryFilter() {
  const select = document.getElementById('categoryFilter');
  const categories = ['All', ...new Set(businessData.map((b) => b.category))];

  categories.forEach((cat) => {
    const option = document.createElement('option');
    option.value = cat;
    option.textContent = cat;
    select.appendChild(option);
  });
}

function setupEventListeners() {
  document
    .getElementById('searchInput')
    .addEventListener('input', filterBusinesses);
  document
    .getElementById('categoryFilter')
    .addEventListener('change', filterBusinesses);
}

function filterBusinesses() {
  const search = document.getElementById('searchInput').value.toLowerCase();
  const category = document.getElementById('categoryFilter').value;

  const filtered = businessData.filter((biz) => {
    const matchesSearch = [biz.name, biz.category, biz.address].some((field) =>
      field.toLowerCase().includes(search)
    );
    const matchesCategory = category === 'All' || biz.category === category;
    return matchesSearch && matchesCategory;
  });

  renderBusinessList(filtered);
  if (filtered.length) showBusinessOnMap(filtered[0]);
}

init();