<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Instellingen - 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 class="settings-page">
  <div class="app">
    <!-- Dark/Light toggle -->
    <button id="themeToggle" title="Schakel modus"><span id="themeIcon" class="material-icons">brightness_6</span></button>

    <div class="settings-container">
      <div class="settings-header">
        <a href="/" class="back-link" title="Terug naar hoofdpagina">
          <span class="material-icons">arrow_back</span>
          Terug naar hoofdpagina
        </a>
        <h1>Instellingen</h1>
      </div>

      <form method="POST" class="settings-form">
        <div class="settings-section">
          <div class="form-group">
            <label>
              <span class="material-icons">info</span>
              Volume Instellingen:
            </label>
            <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
              Stel verschillende volumes in voor overdag en 's avonds. Het systeem wisselt automatisch tussen deze volumes op basis van de ingestelde tijden.
            </p>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="volume_day">
                <span class="material-icons">volume_up</span>
                Volume Overdag (0–100):
              </label>
              <input type="number" name="volume_day" value="{{ settings.volume_day or settings.volume }}" min="0" max="100" />
            </div>

            <div class="form-group">
              <label for="volume_night">
                <span class="material-icons">volume_down</span>
                Volume Avond (0–100):
              </label>
              <input type="number" name="volume_night" value="{{ settings.volume_night or (settings.volume // 2) }}" min="0" max="100" />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="day_start">
                <span class="material-icons">wb_sunny</span>
                Dag begint om:
              </label>
              <input type="time" name="day_start" value="{{ settings.day_start or '07:00' }}" />
            </div>

            <div class="form-group">
              <label for="night_start">
                <span class="material-icons">nightlight</span>
                Avond begint om:
              </label>
              <input type="time" name="night_start" value="{{ settings.night_start or '20:00' }}" />
            </div>
          </div>

          <div class="form-group">
            <label>
              <span class="material-icons">speaker_group</span>
              Sonos Zones:
            </label>
            <div class="checkboxes">
              {% for zone in alle_zones %}
                <div class="checkbox-item">
                  <input type="checkbox" name="zones" value="{{ zone }}" id="zone_{{ loop.index }}"
                    {% if zone in settings.zones %}checked{% endif %}>
                  <label for="zone_{{ loop.index }}">{{ zone }}</label>
                </div>
              {% endfor %}
            </div>
          </div>

          <div class="form-row audio-row">
            <div class="form-group audio-section">
              <label for="audio_clip">
                <span class="material-icons">music_note</span>
                Adhaan Audio Bestand:
              </label>
              <select name="audio_clip" id="audioSelect">
                {% for clip in clips %}
                  <option value="{{ clip }}" {% if clip == settings.audio_clip %}selected{% endif %}>
                    {% if clip == 'adhan1.mp3' %}Klassieke Adhaan
                    {% elif 'mekka' in clip %}Mekka Stijl
                    {% elif 'medina' in clip %}Medina Stijl
                    {% elif 'kort' in clip %}Korte Versie
                    {% elif 'traditioneel' in clip %}Traditioneel
                    {% else %}{{ clip }}
                    {% endif %}
                  </option>
                {% endfor %}
              </select>
            </div>
            
            <div class="form-group audio-preview-section">
              <label>
                <span class="material-icons">play_circle</span>
                Audio Voorbeeld:
              </label>
              <div class="audio-preview">
                <button type="button" class="preview-btn" onclick="previewAudio()">
                  <span class="material-icons">play_arrow</span>
                  Voorbeeld afspelen
                </button>
                <audio id="previewAudio" preload="none"></audio>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>
              <span class="material-icons">schedule</span>
              Gebedstijd Aanpassingen:
            </label>
            <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0;">
              Voeg minuten toe (+) of haal af (-) van de VUMG gebedstijden. Bijvoorbeeld: +30 voor 30 minuten later, -15 voor 15 minuten eerder.
            </p>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="fajr_offset">
                <span class="material-icons">wb_twilight</span>
                Fajr Aanpassing (minuten):
              </label>
              <input type="number" name="fajr_offset" value="{{ settings.fajr_offset or 0 }}" min="-120" max="120" step="5" />
            </div>

            <div class="form-group">
              <label for="zuhr_offset">
                <span class="material-icons">wb_sunny</span>
                Zuhr Aanpassing (minuten):
              </label>
              <input type="number" name="zuhr_offset" value="{{ settings.zuhr_offset or 0 }}" min="-120" max="120" step="5" />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="asr_offset">
                <span class="material-icons">brightness_low</span>
                Asr Aanpassing (minuten):
              </label>
              <input type="number" name="asr_offset" value="{{ settings.asr_offset or 0 }}" min="-120" max="120" step="5" />
            </div>

            <div class="form-group">
              <label for="maghrib_offset">
                <span class="material-icons">brightness_3</span>
                Maghrib Aanpassing (minuten):
              </label>
              <input type="number" name="maghrib_offset" value="{{ settings.maghrib_offset or 0 }}" min="-120" max="120" step="5" />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="isha_offset">
                <span class="material-icons">brightness_2</span>
                Isha Aanpassing (minuten):
              </label>
              <input type="number" name="isha_offset" value="{{ settings.isha_offset or 0 }}" min="-120" max="120" step="5" />
            </div>

            <div class="form-group">
              <!-- Lege ruimte voor symmetrie -->
            </div>
          </div>

          <div class="button-group">
            <button type="submit" name="test_clip" class="btn-secondary">
              <span class="material-icons">speaker</span>
              Test op Sonos
            </button>
            <button type="submit" class="btn-primary">
              <span class="material-icons">save</span>
              Instellingen Opslaan
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <script>
    function previewAudio() {
      const select = document.getElementById('audioSelect');
      const audio = document.getElementById('previewAudio');
      const selectedClip = select.value;
      
      audio.src = `/static/clips/${selectedClip}`;
      audio.play().catch(e => {
        console.log('Audio afspelen mislukt:', e);
        alert('Kon audio niet afspelen. Controleer of het bestand bestaat.');
      });
    }

    // Auto-update preview audio source when selection changes
    document.getElementById('audioSelect').addEventListener('change', function() {
      const audio = document.getElementById('previewAudio');
      audio.src = `/static/clips/${this.value}`;
    });

    // Set initial audio source
    window.onload = function() {
      const select = document.getElementById('audioSelect');
      const audio = document.getElementById('previewAudio');
      audio.src = `/static/clips/${select.value}`;
      
      // Setup theme toggle
      setupThemeToggle();
      updateThemeIcon();
    };

    // Theme toggle functionaliteit (gekopieerd van index.html)
    function setupThemeToggle() {
      const toggleBtn = document.getElementById("themeToggle");
      if (!toggleBtn) return;

      const currentTheme = localStorage.getItem("theme") || "dark";
      document.documentElement.className = currentTheme;

      toggleBtn.addEventListener("click", function () {
        const html = document.documentElement;
        const newTheme = html.className === "light" ? "dark" : "light";
        html.className = newTheme;
        localStorage.setItem("theme", newTheme);
        updateThemeIcon();
      });
    }

    function updateThemeIcon() {
      const html = document.documentElement;
      const icon = document.getElementById('themeIcon');
      if (icon) {
        if (html.className === 'light') {
          icon.textContent = 'dark_mode';
        } else {
          icon.textContent = 'light_mode';
        }
      }
    }
  </script>
</body>
</html>
