<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kamera Stream</title>
    <link rel="stylesheet" href="/static/styles.css" />
    <script>
      async function updateSetting(name, value) {
        const data = {};
        data[name] = value;
        try {
          const response = await fetch("/settings", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams(data),
          });
          if (!response.ok) {
            throw new Error("Failed to update setting");
          }
        } catch (error) {
          console.error("Error updating setting:", error);
        }

        if (name === "camera_index") {
          window.location.reload();
        }
      }

      async function resetSettings() {
        const defaultSettings = {
          rotate: 0,
          brightness: 1.0,
          grayscale: false,
          mirror: false,
          filter_name: "none",
          camera_index: 0,
        };

        try {
          for (const [key, value] of Object.entries(defaultSettings)) {
            await updateSetting(key, value);
          }
          const elements = {
            rotate: "0",
            brightness: "1.0",
            grayscale: false,
            mirror: false,
            filter_name: "none",
            camera_index: "0",
          };

          for (const [id, value] of Object.entries(elements)) {
            const element = document.getElementById(id);
            if (element.type === "checkbox") {
              element.checked = value;
            } else {
              element.value = value;
            }
          }
        } catch (error) {
          console.error("Error resetting settings:", error);
        }
      }
    </script>
  </head>
  <body>
    <section id="video-feed">
      <h1>Kamera Stream</h1>
      <p>
        Video streaming is available at:
        <strong
          ><a href="/video_feed">http://localhost:4141/video_feed</a></strong
        >
      </p>
      <img
        src="/video_feed"
        width="640"
        height="480"
        alt="Video Feed"
        aria-label="Video feed display"
      />
    </section>

    <section id="settings">
      <h2>Camera Settings</h2>
      <label for="camera_index">Camera Index:</label>
      <select
        id="camera_index"
        name="camera_index"
        onchange="updateSetting('camera_index', this.value)"
      >
        <option value="0">Camera 0</option>
        <option value="1">Camera 1</option>
        <option value="2">Camera 2</option>
      </select>

      <label for="rotate">Rotate:</label>
      <select
        id="rotate"
        name="rotate"
        onchange="updateSetting('rotate', this.value)"
      >
        <option value="0">0°</option>
        <option value="90">90°</option>
        <option value="180">180°</option>
        <option value="270">270°</option>
      </select>

      <label for="mirror">Mirror:</label>
      <input
        type="checkbox"
        id="mirror"
        name="mirror"
        onchange="updateSetting('mirror', this.checked ? 'true' : 'false')"
      />

      <label for="brightness">Brightness:</label>
      <input
        type="range"
        id="brightness"
        name="brightness"
        min="0.1"
        max="2.0"
        step="0.1"
        value="1.0"
        oninput="updateSetting('brightness', this.value)"
        aria-label="Adjust brightness"
      />

      <label for="grayscale">Grayscale:</label>
      <input
        type="checkbox"
        id="grayscale"
        name="grayscale"
        onchange="updateSetting('grayscale', this.checked ? 'true' : 'false')"
      />

      <label for="filter_name">Filter:</label>
      <select
        id="filter_name"
        name="filter_name"
        onchange="updateSetting('filter_name', this.value)"
      >
        <option value="none">None</option>
        <option value="sepia">Sepia</option>
        <option value="blur">Blur</option>
        <option value="edges">Edges</option>
      </select>

      <button type="button" onclick="resetSettings()">Reset to Default</button>
    </section>
  </body>
</html>
