document.addEventListener('DOMContentLoaded', function () {
  const requestOptions = {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
  };

  fetch('/doxme/', requestOptions) //call api
    .then((response) => response.json())
    .then((jsonResponse) => {
      const user_ip = jsonResponse.ip_info.ip;
      const user_country = jsonResponse.ip_info.country;
      const user_region = jsonResponse.ip_info.country_code;

      // Update the HTML elements with the fetched information
      document.getElementById('ip').innerText = `${user_ip}`;
      document.getElementById('country').innerText = `${user_country}`;
      document.getElementById('region').innerText = `${user_region}`;

      console.log('user_ip:', user_ip);
      console.log('couintry:', user_country);
      console.log('region:', user_region);

      // IPIS api
      const city = jsonResponse.ipis.location.city;
      const state = jsonResponse.ipis.location.state;
      const isp = jsonResponse.ipis.company.name;
      const longitude = jsonResponse.ipis.location.longitude;

      console.log('city', city);
      console.log('state', state);
      console.log('isp', isp);
      console.log('longitude', longitude);

      //  innerText
      document.getElementById('isp').innerText = `${isp}`;
      document.getElementById('city').innerText = `${city}`;
    })
    .catch((error) => {
      console.error('Error fetching IP information:', error);
    });
});