<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Gebedstijden Display</title>
  <link rel="stylesheet" href="/static/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="app">
    <!-- Dark/Light toggle -->
    <button id="themeToggle" title="Schakel modus"><span id="themeIcon" class="material-icons">brightness_6</span></button>

    <div class="left">
      <div class="overlay">
        <div class="tijdstip">
          <div id="current-time">--:--</div>
          <div class="datum-sectie">
            <div class="gregorian-datum">{{ date_info.gregorian_full }}</div>
            <div class="hijri-datum-arabic">{{ date_info.hijri_arabic }}</div>
            <div class="hijri-datum-dutch">{{ date_info.hijri_dutch }}</div>
          </div>
        </div>
        <div class="huidig-gebed">
          <div class="naam">{{ next_name }}</div>
          <div id="countdown">--:--:--</div>
        </div>
      </div>
    </div>

    <div class="right new-layout">
      <div class="hadith-tijden-row">
        <div class="hadith-center">
          <blockquote>
            "{{ hadith.text }}"
            <footer>— {{ hadith.bron }}</footer>
          </blockquote>
        </div>
        <div class="vertical-tijden">
          <ul class="tijden-en-icoontjes">
            {% for naam, tijd in gebedstijden.items() %}
              <li class="tijden-rij">
                <span class="naam">{{ naam }}</span>
                <span class="tijd">{{ tijd[:5] }}</span>
              </li>
            {% endfor %}
            <li><a href="/instellingen" title="Instellingen" class="icoon-link"><span class="material-icons">settings</span></a></li>
            <li><a href="#" id="muteBtn" title="Mute" class="icoon-link"><span id="muteIcon" class="material-icons">volume_off</span></a></li>
            <li><a href="/debug" title="Debug Mode" class="icoon-link"><span class="material-icons">bug_report</span></a></li>
            <li><a href="/quran" title="Quran Speler" class="icoon-link"><span class="material-icons">menu_book</span></a></li>
          </ul>
        </div>
      </div>
      
      <!-- Weer sectie -->
      <div class="weather-section">
        <div class="weather-info">
          <div class="weather-main">
            <span class="weather-temp">{{ weather.temperature }}°C</span>
            <span class="weather-desc">{{ weather.description }}</span>
          </div>
          <div class="weather-details">
            <span class="weather-detail">Voelt als {{ weather.feels_like }}°C</span>
            <span class="weather-detail">Vochtigheid {{ weather.humidity }}%</span>
            <span class="weather-detail">Wind {{ weather.wind_speed }} km/h</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <audio id="adhanAudio" src="/static/clips/{{ settings['audio_clip'] }}" preload="auto"></audio>

  <script>
    // Prayer times data from server
    window.prayerTimes = [
      {% for naam, tijd in gebedstijden.items() %}
        "{{ tijd[:5] }}"{% if not loop.last %},{% endif %}
      {% endfor %}
    ];
    window.prayerNames = [
      {% for naam, tijd in gebedstijden.items() %}
        "{{ naam }}"{% if not loop.last %},{% endif %}
      {% endfor %}
    ];
    const nextPrayerTime = "{{ next_time }}";
  </script>
  <script src="/static/countdown.js"></script>
  <script>
    window.onload = function () {
      updateCurrentTime();
      setInterval(updateCurrentTime, 60000);
      setupThemeToggle();
      startCountdowns(window.prayerTimes, window.prayerNames);
      
      // Update weerdata elke 10 minuten
      updateWeather();
      setInterval(updateWeather, 600000); // 10 minuten
      
      // Update hadith elke 30 seconden
      updateHadith();
      setInterval(updateHadith, 30000); // 30 seconden
    };

    // Functie om weerdata bij te werken
    function updateWeather() {
      fetch('/api/weather')
        .then(response => response.json())
        .then(data => {
          document.querySelector('.weather-temp').textContent = data.temperature + '°C';
          document.querySelector('.weather-desc').textContent = data.description;
          document.querySelector('.weather-detail:nth-child(1)').textContent = `Voelt als ${data.feels_like}°C`;
          document.querySelector('.weather-detail:nth-child(2)').textContent = `Vochtigheid ${data.humidity}%`;
          document.querySelector('.weather-detail:nth-child(3)').textContent = `Wind ${data.wind_speed} km/h`;
        })
        .catch(error => {
          console.log('Fout bij bijwerken weerdata:', error);
        });
    }

    // Functie om hadith bij te werken
    function updateHadith() {
      fetch('/api/hadith')
        .then(response => response.json())
        .then(data => {
          const hadithTextElement = document.querySelector('.hadith-center blockquote');
          const hadithFooterElement = document.querySelector('.hadith-center blockquote footer');
          
          if (hadithTextElement && hadithFooterElement) {
            // Update de tekst en bron
            hadithTextElement.innerHTML = `"${data.text}"<footer>— ${data.bron}</footer>`;
          }
        })
        .catch(error => {
          console.log('Fout bij bijwerken hadith:', error);
        });
    }

    // Theme toggle icon dynamisch aanpassen
    function updateThemeIcon() {
      const html = document.documentElement;
      const icon = document.getElementById('themeIcon');
      if (html.className === 'light') {
        icon.textContent = 'dark_mode';
      } else {
        icon.textContent = 'light_mode';
      }
    }
    updateThemeIcon();
    document.getElementById('themeToggle').addEventListener('click', updateThemeIcon);

    // Mute functionaliteit
    let muteStatus = false;
    function setMuteIcon() {
      const icon = document.getElementById('muteIcon');
      icon.textContent = muteStatus ? 'volume_off' : 'volume_up';
    }
    function toggleMute(e) {
      e.preventDefault();
      muteStatus = !muteStatus;
      setMuteIcon();
      fetch('/api/mute', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ mute: muteStatus })
      });
    }
    document.getElementById('muteBtn').addEventListener('click', toggleMute);
    setMuteIcon();
  </script>
</body>
</html>
