<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>

  <script>
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }

    function loadData(date, today) {
      let prefix = today ? 'today' : 'tomorrow';

      if(prefix == 'today') {
        document.getElementById(prefix).innerText = "Dnes ("+date+")";
      } else {
        document.getElementById(prefix).innerText = "Zítra ("+date+")";
      }

      fetch('/price/day/'+date+'?num_cheapest_hours=8')
        .then(response => response.json())
        .then(data => {
          if(data.detail == "prices not found") {
            for (let i = 0; i < 24; i++) {
              document.getElementById(prefix + i).innerText = "-";
            }
            return;
          }
            
          for (let i = 0; i < 24; i++) {
            let extra_class = "";
            if(today && i == new Date().getHours()) {
              extra_class = " border-solid border-4 border-gray-900 font-bold";
            }

            if(data.cheapest_hours_by_average.hours.includes(i)) {
                document.getElementById(prefix + i).className = "px-1 bg-green-500" + extra_class;
            } else if (data.most_expensive_hours_by_average.hours.includes(i)) {
                document.getElementById(prefix + i).className = "px-1 bg-rose-400" + extra_class;
            } else {
                document.getElementById(prefix + i).className = "px-1 bg-amber-100" + extra_class;
            }
            document.getElementById(prefix + i).innerText = Math.round(data.total.hours[i]*100)/100;
          }
        })
    }

    function loadAllData() {
      const currentDate = new Date();
      const tomorrowDate = new Date(currentDate);
      tomorrowDate.setDate(currentDate.getDate() + 1);

      const currentDateString = formatDate(currentDate);
      const tomorrowDateString = formatDate(tomorrowDate);

      loadData(currentDateString, true);
      loadData(tomorrowDateString, false);
    }

    window.onload = function() {
      loadAllData();
      // Reload data every hour (3600000 milliseconds)
      setInterval(loadAllData, 3600000);
    };
  </script>
</head>
<body class="bg-neutral-800">
    <table class="table border-collapse border border-slate-500 text-center w-full">
        <tr class="bg-neutral-400">
            <th class="px-1"></th>
            <th class="px-1">00</th>
            <th class="px-1">01</th>
            <th class="px-1">02</th>
            <th class="px-1">03</th>
            <th class="px-1">04</th>
            <th class="px-1">05</th>
            <th class="px-1">06</th>
            <th class="px-1">07</th>
            <th class="px-1">08</th>
            <th class="px-1">09</th>
            <th class="px-1">10</th>
            <th class="px-1">11</th>
            <th class="px-1">12</th>
            <th class="px-1">13</th>
            <th class="px-1">14</th>
            <th class="px-1">15</th>
            <th class="px-1">16</th>
            <th class="px-1">17</th>
            <th class="px-1">18</th>
            <th class="px-1">19</th>
            <th class="px-1">20</th>
            <th class="px-1">21</th>
            <th class="px-1">22</th>
            <th class="px-1">23</th>
        </tr>
        <tr>
            <td id="today" class="px-1 bg-neutral-200 w-16">Dnes</td>
            <td id="today0" class="px-1">-</td>
            <td id="today1" class="px-1">-</td>
            <td id="today2" class="px-1">-</td>
            <td id="today3" class="px-1">-</td>
            <td id="today4" class="px-1">-</td>
            <td id="today5" class="px-1">-</td>
            <td id="today6" class="px-1">-</td>
            <td id="today7" class="px-1">-</td>
            <td id="today8" class="px-1">-</td>
            <td id="today9" class="px-1">-</td>
            <td id="today10" class="px-1">-</td>
            <td id="today11" class="px-1">-</td>
            <td id="today12" class="px-1">-</td>
            <td id="today13" class="px-1">-</td>
            <td id="today14" class="px-1">-</td>
            <td id="today15" class="px-1">-</td>
            <td id="today16" class="px-1">-</td>
            <td id="today17" class="px-1">-</td>
            <td id="today18" class="px-1">-</td>
            <td id="today19" class="px-1">-</td>
            <td id="today20" class="px-1">-</td>
            <td id="today21" class="px-1">-</td>
            <td id="today22" class="px-1">-</td>
            <td id="today23" class="px-1">-</td>
        </tr>
        <tr>
            <td id="tomorrow" class="px-1 bg-neutral-200 w-16">Zítra</td>
            <td id="tomorrow0" class="px-1">-</td>
            <td id="tomorrow1" class="px-1">-</td>
            <td id="tomorrow2" class="px-1">-</td>
            <td id="tomorrow3" class="px-1">-</td>
            <td id="tomorrow4" class="px-1">-</td>
            <td id="tomorrow5" class="px-1">-</td>
            <td id="tomorrow6" class="px-1">-</td>
            <td id="tomorrow7" class="px-1">-</td>
            <td id="tomorrow8" class="px-1">-</td>
            <td id="tomorrow9" class="px-1">-</td>
            <td id="tomorrow10" class="px-1">-</td>
            <td id="tomorrow11" class="px-1">-</td>
            <td id="tomorrow12" class="px-1">-</td>
            <td id="tomorrow13" class="px-1">-</td>
            <td id="tomorrow14" class="px-1">-</td>
            <td id="tomorrow15" class="px-1">-</td>
            <td id="tomorrow16" class="px-1">-</td>
            <td id="tomorrow17" class="px-1">-</td>
            <td id="tomorrow18" class="px-1">-</td>
            <td id="tomorrow19" class="px-1">-</td>
            <td id="tomorrow20" class="px-1">-</td>
            <td id="tomorrow21" class="px-1">-</td>
            <td id="tomorrow22" class="px-1">-</td>
            <td id="tomorrow23" class="px-1">-</td>
        </tr>
    </table>

</body>
</html>