<div class="position-fixed top-0 end-0 mt-2 me-3 py-2">
  <span id="weather"></span>
  <img id="weather-icon" class="weather-icon" alt="Weather Icon" />
  <p id="location"></p>
</div>

<div class="container mt-5 pt-5 ">
  <div class="text-center  pt-5 mt-5">
    <p id="current-day"></p>

    <h1 id="current-time"></h1>
  </div>

  <div class="row justify-content-center align-items-center w-100 mt-5 pt-5">
    <div class="col-12 col-md-8 col-lg-6">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Google" height="24" />
          </span>
        </div>
        <input type="text" id="search" class="form-control outline-none" placeholder="Search the web..." />
        <div class="input-group-append">
          <button id="search-btn" class="btn btn-primary">Search</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="fixed-bottom text-center bg-light py-2 pt-3" id="quote-container">
  <p id="random-quote" class="mb-3"></p>
</div>

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
.input-group-text {
  background-color: white;
  border-radius: 30px 0 0 30px;
  border-right: none;
}
body {
  font-family: "DM Mono", monospace;
}
.form-control {
  border-radius: 0 30px 30px 0;
  border-left: none;
}

.weather-icon {
  width: 60px;
  height: 60px;
}

document.addEventListener("DOMContentLoaded", function () {
  const quotes = [
    "The best way to get started is to quit talking and begin doing. - Walt Disney",
    "The pessimist sees difficulty in every opportunity. The optimist sees opportunity in every difficulty. - Winston Churchill",
    "Don’t let yesterday take up too much of today. - Will Rogers",
    "You learn more from failure than from success. Don’t let it stop you. Failure builds character. - Unknown",
    "It’s not whether you get knocked down, it’s whether you get up. - Vince Lombardi",
    "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you. - Steve Jobs",
    "People who are crazy enough to think they can change the world, are the ones who do. - Rob Siltanen",
    "Failure will never overtake me if my determination to succeed is strong enough. - Og Mandino",
    "Entrepreneurs are great at dealing with uncertainty and also very good at minimizing risk. That’s the classic entrepreneur. - Mohnish Pabrai",
    "We may encounter many defeats but we must not be defeated. - Maya Angelou"
  ];
  const searchButton = document.getElementById("search-btn");
  const searchInput = document.getElementById("search");

  const currentTimeElement = document.getElementById("current-time");
  const currentDay = document.getElementById("current-day");
  const weatherElement = document.getElementById("weather");
  const weatherIcon = document.getElementById("weather-icon");
  const locationElement = document.getElementById("location");

  async function getWeather() {
    try {
      const locationResponse = await fetch("https://ipapi.co/json/");
      const location = await locationResponse.json();
      locationElement.textContent = location.city;

      const ApiKey = "04419024fb0f20edd3f1abd06e46dd6d";
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${location.city}&units=metric&appid=${ApiKey}`;

      const response = await fetch(url);
      const weatherData = await response.json();
      console.log(weatherData);

      const temperature = weatherData.main.temp;
      const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherData.weather[0].icon}.png`;

      weatherElement.textContent = `${Math.round(temperature)}°C`;
      weatherIcon.src = weatherIconUrl;
    } catch (error) {
      console.error("Error fetching weather data:", error);
      locationElement.textContent = "Error fetching weather";
    }
  }

  getWeather();

  searchButton.addEventListener("click", function () {
    const query = searchInput.value;
    const url = `https://www.google.com/search?q=${query}`;
    window.open(url, "_blank");
  });

  searchInput.addEventListener("keydown", (e) => {
    if (e.key == "Enter") {
      const query = e.target.value;
      const url = `https://www.google.com/search?q=${query}`;
      window.open(url, "_blank");
    }
  });

  function updateTime() {
    const now = new Date();
    const options = {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric"
    };
    const formattedTime = now.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit"
    });
    currentTimeElement.textContent = ` ${formattedTime}`;

    const formattedDate = now.toLocaleDateString("en-US", options);
    currentDay.textContent = `${formattedDate} `;
  }

  setInterval(updateTime, 1000);
  updateTime();

  function getQuote() {
    const quoteIndex = Math.floor(Math.random() * quotes.length);
    const randomQuote = quotes[quoteIndex];
    document.getElementById("random-quote").textContent = randomQuote;
  }
  getQuote();
});

// manifext.json
// {
//   "manifest_version": 3,
//   "name": "Minimalistic homepage",
//   "version": "1.0",
//   "description": "A Minimalistic homepage for my Chrome browser",
//   "chrome_url_overrides": {
//     "newtab": "home.html"
//   }
// }