/*
Author       : Dreamguys
Template Name: Dream Salon - Bootstrap Template
Version      : 1.0
*/

google.maps.visualRefresh = true;
let slider;
let infowindow = null;
let bounds = new google.maps.LatLngBounds(); // never changes
let map;
let current = 0;

let locations = [
  {
    "id": 1,
    "lat": 53.470692,
    "lng": -2.220328,
    "rent_prize": "$1,100 ",
    "rent_bed": "4",
    "rent_baths": "4",
    "rent_sqft": "1900",
    "rent_listedon": "17 Jan 2023",
    "rent_Category": "Condos",
    "rent_name": "The Cleanup",
    "total_review": "17",
    "rent_address": "2046 Spinnaker, IL 601",
    "image": "assets/img/listing-grid/grid/listing-img-01.jpg",
    "profile_image": "assets/img/listing-grid/brand-img-01.jpg"
  },
  {
    "id": 2,
    "lat": 53.469189,
    "lng": -2.199262,
    "rent_prize": "$1,700 ",
    "rent_bed": "4",
    "rent_baths": "4",
    "rent_sqft": "1100",
    "rent_listedon": "17 Jan 2023",
    "rent_Category": "Condos",
    "rent_name": "Hair Artistry",
    "total_review": "17",
    "rent_address": "1892 Westwood, NY 111",
    "image": "assets/img/listing-grid/grid/listing-img-04.jpg",
    "profile_image": "assets/img/listing-grid/brand-img-02.jpg"
  },
  // ... other entries (same format with corrected IDs)
];

// Optional: define icons if you want custom marker icons
const icons = {
  default: null // replace with 'path/to/icon.png' if needed
};

function initialize() {
  bounds = new google.maps.LatLngBounds();

  const mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(53.470692, -2.220328),
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  map.slide = true;
  map.markers = [];

  infowindow = new google.maps.InfoWindow({
    content: "loading..."
  });

  google.maps.event.addListener(infowindow, 'closeclick', function () {
    infowindow.close();
  });

  setMarkers(map, locations);
  slider = window.setTimeout(show, 3000);
}

function setMarkers(map, markers) {
  for (const item of markers) {
    const latlng = new google.maps.LatLng(item.lat, item.lng);
    const marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title: item.rent_name,
      profile_image: item.profile_image,
      rent_Category: item.rent_Category,
      rent_listedon: item.rent_listedon,
      rent_sqft: item.rent_sqft,
      rent_baths: item.rent_baths,
      rent_bed: item.rent_bed,
      rent_address: item.rent_address,
      rent_prize: item.rent_prize,
      rent_name: item.rent_name,
      total_review: item.total_review,
      image: item.image,
      animation: google.maps.Animation.DROP,
      icon: icons.default
    });

    bounds.extend(marker.position);
    map.markers.push(marker);

    google.maps.event.addListener(marker, "click", function () {
      setInfo(this);
      infowindow.open(map, this);
      window.clearTimeout(slider);
    });
  }

  map.fitBounds(bounds);

  google.maps.event.addListener(map, 'zoom_changed', function () {
    if (map.zoom > 16) map.slide = false;
  });
}


function show() {
  if (!map.slide || map.markers.length === 0) return;

  let next;
  function getSecureRandomInt(max) {
    // Returns a random integer from 0 to max-1 using crypto
    const array = new Uint32Array(1);
    crypto.getRandomValues(array);
    return array[0] % max;
  }

  if (map.markers.length === 1) {
    next = 0;
  } else {
    do {
      next = getSecureRandomInt(map.markers.length);
    } while (next === current);
  }

  current = next;
  let marker = map.markers[next];
  setInfo(marker);
  infowindow.open(map, marker);
}

function setInfo(marker) {
  let content =`
      <div class="listing-item listing-map-item mb-0 overflow-hidden">
      <div class="listing-item-img mb-0 rounded-0 shiny position-relative overflow-hidden">
          <a href="listing-details.html" class="w-100 d-block">
              <img class="img-fluid" src="${marker.image}" alt="${marker.image}" class="w-100 d-block">
          </a>
      </div> 
      <div class="listing-item-content">
          <div class="d-flex align-items-center justify-content-between mb-3">
              <div class="d-flex align-items-center justify-content-start gap-1 flex-wrap fs-16 fw-normal">
                  <i class="ti ti-star-filled text-warning"></i>
                  <i class="ti ti-star-filled text-warning"></i>
                  <i class="ti ti-star-filled text-warning"></i>
                  <i class="ti ti-star-filled text-warning"></i>
                  <i class="ti ti-star-filled text-warning"></i>
                  <p class="fs-15 mb-0"><span class="text-dark">5.0</span> (20 Reviews)</p>
              </div>
          </div>
          <div class="d-flex align-items-center justify-content-between">
              <div>
                  <h3 class="title mb-1">
                      <a href="listing-details.html" class="d-flex align-items-center gap-2 flex-wrap">${marker.rent_name} <i class="ti ti-circle-check-filled text-success fs-16"></i> </a> 
                  </h3>
                  <p class="d-flex align-items-center fs-16 fw-normal mb-0"><i class="ti ti-map-pin-filled text-primary me-1"></i> ${marker.rent_address} </p>
              </div>
          </div>
      </div>
    </div>
  `;

  infowindow.setContent(content);
}

google.maps.event.addDomListener(window, 'load', initialize);