<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Inspection</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
          background: #f8f9fa;
        }

        .model-list {
          padding: 2rem 0;
           display: flex;
          flex-wrap: wrap;
          gap: 5px;
        }

        .model {
          flex: 1 1 calc(33.333% - 10px); /* 3 คอลัมน์ ลบช่องว่าง */
          background: #fff;
          border-radius: 16px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.06);
          padding: 2rem 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.15rem;
          font-weight: 500;
          color: #495057;
          transition: box-shadow 0.2s, transform 0.2s;
          border: 1px solid #e9ecef;
        }

        .model:hover {
          box-shadow: 0 4px 16px rgba(0,0,0,0.12);
          transform: translateY(-4px) scale(1.025);
          border-color: #d0ebff;
          background: #e7f5ff;
          color: #228be6;
        }

        @media (max-width: 576px) {
          .model {
            font-size: 1rem;
            padding: 1.5rem 0.75rem;
          }
        }

    </style>
</head>
<body>
<div class="container">
    <div class="model-list row text-center" id="modelList"></div>
</div>

<button id="fsBtn"
        class="btn btn-primary position-fixed bottom-0 end-0 m-3"
        style="z-index:9999">
    Go Fullscreen
</button>
<script>
    async function enterFullscreen() {
      const el = document.documentElement;
      if (el.requestFullscreen) {
        await el.requestFullscreen({ navigationUI: 'hide' });
      } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullscreen();
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
      }
    }

    async function exitFullscreen() {
      if (document.exitFullscreen) {
        await document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }

    function updateButton() {
      const btn = document.getElementById('fsBtn');
      if (document.fullscreenElement) {
        btn.textContent = 'Exit Fullscreen';
        btn.classList.remove('btn-primary');
        btn.classList.add('btn-danger');
      } else {
        btn.textContent = 'Go Fullscreen';
        btn.classList.remove('btn-danger');
        btn.classList.add('btn-primary');
      }
    }

    // Mark the selected
    function markActiveModel(name) {
      document.querySelectorAll('.model').forEach(el => {
        el.classList.remove('border-primary', 'text-primary', 'bg-light');
        if (el.dataset.name === name) {
          el.classList.add('border-primary', 'text-primary', 'bg-light');
        }
      });
    }

    document.addEventListener('DOMContentLoaded', () => {
      const btn = document.getElementById('fsBtn');

      btn.addEventListener('click', async () => {
        if (document.fullscreenElement) {
          await exitFullscreen();
        } else {
          await enterFullscreen();
        }
        updateButton();
      });

      document.addEventListener('fullscreenchange', updateButton);
      updateButton();

      fetch('/api/get_model')
        .then(res => res.json())
        .then(data => {
          const modelListEl = document.getElementById('modelList');
          modelListEl.innerHTML = '';
          const names = Array.isArray(data.model_names) ? data.model_names : [];
          const current = data.model_name || null;

          names.forEach(name => {
            const div = document.createElement('div');
            div.className = 'model col-12 col-sm-6 col-md-4';
            div.dataset.name = name;
            div.textContent = name;

            // Click to change model
            div.addEventListener('click', async () => {
              const url = '/api/change_model?model_name=' + encodeURIComponent(name);
              try {
                // Prevent repeated pressing
                div.style.pointerEvents = 'none';
                const res = await fetch(url, { method: 'GET' });
                const out = await res.json();
                if (!res.ok || out.status !== 'ok') {
                  console.error('Change model failed:', out);
                  alert(out.message || 'Change model failed');
                } else {
                  markActiveModel(out.model_name);
                }
              } catch (e) {
                console.error(e);
                alert('Network error');
              } finally {
                div.style.pointerEvents = '';
              }
            });

            modelListEl.appendChild(div);
          });

          if (current) markActiveModel(current);
        })
        .catch(err => {
          console.error('Error fetching models:', err);
        });
    });
</script>

</body>
</html>