<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Tổng số</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #1f69f3;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      position: relative;
      text-align: center;
    }

    h1 {
      font-size: 2.5rem;
      margin: 0;
    }

    #count {
      font-size: 4rem;
      font-weight: bold;
      margin-top: 20px;
    }

    canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }

    #particles-js {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }



    /* ===== CONTAINER NÚT ===== */
    .admin-actions {
      margin-top: 20px;
      display: flex;
      gap: 15px;
      justify-content: center;
    }

    /* ===== STYLE CHUNG ===== */
    .btn {
      padding: 12px 22px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      transition: all 0.25s ease;
      min-width: 120px;
      letter-spacing: 0.5px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    }

    /* ===== NÚT +1 ===== */
    .btn-primary {
      background: linear-gradient(135deg, #00c6ff, #0072ff);
      color: white;
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0, 114, 255, 0.4);
    }

    .btn-primary:active {
      transform: scale(0.95);
    }

    /* ===== NÚT KẾT THÚC ===== */
    .btn-danger {
      background: linear-gradient(135deg, #ff4e50, #b31217);
      color: white;
    }

    .btn-danger:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(255, 78, 80, 0.4);
    }

    .btn-danger:active {
      transform: scale(0.95);
    }
  </style>
</head>

<body>
  <div id="particles-js"></div>

  <h1>Tổng số hiện tại:</h1>
  <div id="count">
    <%= total %>
  </div>

  <div class="admin-actions">
    <button id="btnAddOne" class="btn btn-primary">+1 Người</button>
    <button id="btnFinish" class="btn btn-danger">Kết thúc</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script>
    particlesJS('particles-js', {
      "particles": {
        "number": { "value": 60 },
        "size": { "value": 3 },
        "color": { "value": "#ffffff" },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 1
        },
        "move": { "speed": 2 }
      },
      "interactivity": {
        "events": {
          "onhover": { "enable": true, "mode": "grab" }
        }
      }
    });
  </script>
  <!-- Polling 3s -->
  <script>
    async function fetchCount() {
      try {
        const res = await fetch('/record/count');
        const data = await res.json();
        document.getElementById('count').textContent = data.total;
      } catch (err) {
        console.error('Lỗi khi fetch count:', err);
      }
    }
    //setInterval(fetchCount, 3000);
    window.onload = fetchCount;


    document.getElementById("btnAddOne").addEventListener("click", async () => {
      try {
        const response = await fetch("/record/create-manual", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            agency: "manual",
            name: "manual"
          })
        });
        if (!response.ok) throw new Error("Create manual failed");
        console.log("Đã cộng +1");
      } catch (err) {
        console.error(err);
        alert("Lỗi khi cộng +1");
      }
    });

    document.getElementById("btnFinish").addEventListener("click", async () => {
      try {
        const response = await fetch("/record/create-all", {
          method: "POST"
        });
        if (!response.ok) throw new Error("Create all failed");
        console.log("Đã cộng đủ đến MAXUSER");
      } catch (err) {
        console.error(err);
        alert("Lỗi khi kết thúc");
      }
    });
  </script>

  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
  <script>
    const socket = io();
    socket.on("countUpdate", (count) => {
      document.getElementById("count").textContent = count;
    });
  </script>
</body>

</html>