const axiosScript = document.createElement('script');
axiosScript.src = 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';
document.head.appendChild(axiosScript);

document.write(`
  <style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
  }

  #weatherContainer {
    display: flex;
    justify-content: space-around;
    width: 80%;
  }

  .weather-card,
  .weather-card1 {
    width: 80%;
    background-color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .weather-card1 {
    background-color: lightblue;
  }

  h1 {
    text-align: center;
    color: #333;
  }

  #weatherForm {
    background-color: white;
    padding: 20px;
    margin: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 25%;
  }

  #compareWeather,
  #fetchWeather {
    background-color: #328fa8;
    color: white;
    padding: 10px 20px; 
    font-size: 16px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer;
    margin-top: 10px;
  }

  #compareWeather:hover,
  #fetchWeather:hover {
    background-color: #3283a8;
  }
</style>


  <h1>Weather Information</h1>
  <div id="weatherForm">
    <form id="form">
      <label for="apiKey"><b>Enter API key:</b></label>
      <input type="text" id="apiKey" name="apiKey" required><br><br>
      
      <label for="locationName"><b>Enter A City:</b></label>
      <input type="text" id="locationName" name="locationName" required><br><br>
      

      
      <div id="locationTwoInput" style="display: none;">
        <label for="locationTwo"><b>Enter Another City:</b></label>
        <input type="text" id="locationTwo" name="locationTwo"><br><br>
      </div>
      
            <input type="submit" value="Fetch Weather" id="fetchWeather">
      <button id="compareWeather">Compare Weather</button>
    </form>
  </div>

  <div id="weatherContainer"></div>
`);

    async function fetchWeather(apiKey, locationName, locationNumber) {
      const headers = {
        'X-RapidAPI-Key': apiKey,
        'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
      };

      try {
        const response = await axios.get('https://weatherapi-com.p.rapidapi.com/current.json', {
          params: { q: locationName },
          headers: headers
        });

        const weatherData = extractWeatherInfo(response.data);
        displayWeatherData(weatherData, locationNumber);

        document.getElementById('compareWeather').style.display = 'block';
      } catch (error) {
        console.error(error);
        alert('Failed to fetch weather information. Please check your API key or location.');
      }
    }

    async function fetchAstronomy(apiKey, locationName, locationNumber) {
      const headers = {
        'X-RapidAPI-Key': apiKey,
        'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
      };

      try {
        const response = await axios.get('https://weatherapi-com.p.rapidapi.com/astronomy.json', {
          params: { q: locationName },
          headers: headers
        });

        const astronomyData = extractAstronomyInfo(response.data);
        displayAstronomyData(astronomyData, locationNumber);
      } catch (error) {
        console.error(error);
        alert('Failed to fetch astronomy information. Please check your API key or location.');
      }
    }

    document.getElementById('form').addEventListener('submit', function(event) {
      event.preventDefault();

      const apiKey = document.getElementById('apiKey').value;
      const locationName = document.getElementById('locationName').value;

      fetchWeather(apiKey, locationName, 1); 
      fetchAstronomy(apiKey, locationName, 1);
    });

    document.getElementById('compareWeather').addEventListener('click', function(event) {
  event.preventDefault();

  this.style.visibility = 'hidden';

  document.getElementById('locationTwoInput').style.display = 'block';

  document.getElementById('fetchWeather').addEventListener('click', function(event) {
    event.preventDefault();
    const apiKey = document.getElementById('apiKey').value;
    const locationTwo = document.getElementById('locationTwo').value;
    fetchWeather(apiKey, locationTwo, 2); 
    fetchAstronomy(apiKey, locationTwo, 2); 

    document.getElementById('compareWeather').style.visibility = 'hidden';
    document.getElementById('fetchWeather').style.display = 'none';
  });
});


function extractWeatherInfo(data) {
  const weatherInfo = {
    name: data.location.name,
    country: data.location.country,
    temp_c: data.current.temp_c,
    temp_f: data.current.temp_f,
    wind_mph: data.current.wind_mph,
    wind_dir: data.current.wind_dir,
    cloud: data.current.cloud,
    feelslike_c: data.current.feelslike_c,
    icon: `https:${data.current.condition.icon}`,
    localtime: data.location.localtime.split(' ')[1], 
    uv: data.current.uv,
    humidity: data.current.humidity,
    precip_mm: data.current.precip_mm,
    precip_in: data.current.precip_in,
    gust_mph: data.current.gust_mph,
    gust_kph: data.current.gust_kph
  };

  return weatherInfo;
}


function displayWeatherData(weatherData, locationNumber) {
  const weatherContainer = document.getElementById('weatherContainer');
  let locationDiv = document.getElementById(`location${locationNumber}`);

  if (!locationDiv) {
    locationDiv = document.createElement('div');
    locationDiv.id = `location${locationNumber}`;
    locationDiv.classList.add('location-div');
    weatherContainer.appendChild(locationDiv);
  } else {
      
    locationDiv.innerHTML = '';
  }

  const weatherCard = document.createElement('div');
  const uniqueWeatherCardId = `weatherCard${locationNumber}`; 
  weatherCard.classList.add('weather-card');
  weatherCard.id = uniqueWeatherCardId;
  locationDiv.appendChild(weatherCard);

  weatherCard.innerHTML = `
    <h3>${weatherData.name}, ${weatherData.country}</h3>
    <p>${weatherData.localtime}</p>
    <img src="${weatherData.icon}" alt="Weather Icon">
    <p><b>Temperature:</b> ${weatherData.temp_c}°C / ${weatherData.temp_f}°F</p>
    <p><b>Wind:</b> ${weatherData.wind_mph} mph, ${weatherData.wind_dir}</p>
    <p><b>Cloudiness:</b> ${weatherData.cloud}</p>
    <p><b>Feels Like:</b> ${weatherData.feelslike_c}°C</p>
    <p><b>UV Index:</b> ${weatherData.uv}</p>
    <p><b>Humidity:</b> ${weatherData.humidity}%</p>
    <p><b>Precipitation:</b> ${weatherData.precip_mm}mm / ${weatherData.precip_in}in</p>
    <p><b>Gust:</b> ${weatherData.gust_mph} mph / ${weatherData.gust_kph} kph</p>
  `;
}

  
  
    function extractAstronomyInfo(data) {
      return {
        sunrise: data.astronomy.astro.sunrise,
        sunset: data.astronomy.astro.sunset,
        moonrise: data.astronomy.astro.moonrise,
        moonset: data.astronomy.astro.moonset,
        moon_phase: data.astronomy.astro.moon_phase,
        moon_illumination: data.astronomy.astro.moon_illumination
      };
    }

  function displayAstronomyData(astronomyData, locationNumber) {
  const weatherContainer = document.getElementById('weatherContainer');
  let locationDiv = document.getElementById(`location${locationNumber}`);

  if (!locationDiv) {
    locationDiv = document.createElement('div');
    locationDiv.id = `location${locationNumber}`;
    locationDiv.classList.add('location-div');
    weatherContainer.appendChild(locationDiv);
  }

  let astronomyCard = document.getElementById(`astronomyCard${locationNumber}`);

  if (!astronomyCard) {
    astronomyCard = document.createElement('div');
    astronomyCard.id = `astronomyCard${locationNumber}`;
    astronomyCard.classList.add('weather-card1');
    locationDiv.appendChild(astronomyCard);
  } else {
    astronomyCard.innerHTML = '';
  }

  astronomyCard.innerHTML = `
    <h3>Astronomy Information</h3>
    <p><b>Sunrise:</b> ${astronomyData.sunrise}</p>
    <p><b>Sunset:</b> ${astronomyData.sunset}</p>
    <p><b>Moonrise:</b> ${astronomyData.moonrise}</p>
    <p><b>Moonset:</b> ${astronomyData.moonset}</p>
    <p><b>Moon Phase:</b> ${astronomyData.moon_phase}</p>
    <p><b>Moon Illumination:</b> ${astronomyData.moon_illumination}</p>
  `;
}