<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  <title>МАНАЙ ХАМТ ОЛОН</title>
  <style>
        body {
          margin: 0;
          height: 100vh;
          overflow: hidden;
          font-family: "Roboto Condensed", sans-serif;
          background-color: black;
          background-image: url(/images/school.jpg);
          background-size: cover;
          box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.55);
        }
        
        .carousel-container {
          width: 100%; /* тохируулж болно */
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          perspective: 3000px;
          position: relative;
          margin-top: -300px;
        }
        
        .carousel {
          position: absolute;
          transform-style: preserve-3d;
          transform: rotateX(-10deg) rotateY(0deg);
        }
        
        .carousel img {
          position: absolute;
          width: 100px;
          height: 100px;
          object-fit: cover;
          border-radius: 10px;
          box-shadow: 0 0 5px #fff;
        }
        
        .modal {
          display: none; /* анх харагдахгүй */
          position: fixed;
          z-index: 1000;
          padding-top: 60px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.9);
        }
        
        .modal-content {
          margin: auto;
          display: block;
          max-width: 30%;
          max-height: 90%;
          border-radius: 10px;
          box-shadow: 0 0 15px #fff;
          background-color: white;
          text-align: center;
        }
        
        .close {
          position: absolute;
          top: 30px;
          right: 50px;
          color: #fff;
          font-size: 40px;
          font-weight: bold;
          cursor: pointer;
          z-index: 1001;
        }
        .image {
            cursor: pointer;
        }
        .head {
            color: #07559b;
            padding: 30px;
        }
        #name {
            font-weight: bold;
            font-size: 30px;
        }
        
        #meta {
            font-weight: 300;
            font-size: 20px;
        }
        .title {
            font-weight: bold;
            font-size: 40px;
            text-align: center;
            color: white;
            padding-top: 10px;
        }
        .container {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
  </style>
</head>
<body>
  <div class="title">
    ӨВӨРХАНГАЙ ПК - МАНАЙ ХАМТ ОЛОН
  </div>
  <div class="container">
      <div class="carousel-container">
        <div class="carousel" id="carousel">
          <?php
          _selectNoParam(
            $st,
            $co,
            "SELECT id, concat(fname, ' ', UPPER(lname)) as name, at, phone FROM `teacher` WHERE tuluv = 1",
            $id, $lname, $at, $phone);
    
            while(_fetch($st)){ ?>
                <img class="image" onclick="openModal('<?=$id?>', '<?=$lname?>', '<?=$at?>', '<?=$phone?>')" src="/images/users/<?=$id?>.jpg" alt="<?=$lname?>">
            <?php } ?>
        </div>
      </div>
  </div>
    <div id="imageModal" class="modal">
      <span class="close">&times;</span>
      <div class="modal-content">
          <div class="head">
              <div id="name">
                  sadfsadf
              </div>
              <div id="meta">
                  sadfasdf
              </div>
          </div>
          <img id="modalImage" style="border-radius: 10px;">
      </div>
    </div>
  <script>
    const carousel = document.getElementById('carousel');
    const totalPerRow = 43;
    const rows = 3;
    const radius = 850;
    const verticalSpacing = 120; // мөр хоорондын зай
    
    const images = carousel.getElementsByTagName('img');
    console.log(images);
    const totalImages = images.length;

    // Байршуулах
    for (let i = 0; i < totalImages; i++) {
      const row = Math.floor(i / totalPerRow);
      const indexInRow = i % totalPerRow;
      const angle = (360 / totalPerRow) * indexInRow;
      const y = (row - 1) * verticalSpacing; // 3 мөрт төвөөс дээш, доош зай
    
      images[i].style.transform = `
        rotateY(${angle}deg) 
        translateZ(${radius}px) 
        translateY(${y}px)
      `;
    }
    
    // Хөдөлгөөн
    let rotationY = 0;
    let dragging = false;
    let lastX = 0;
    let autoRotateSpeed = 0.03;
    
    document.addEventListener('mousedown', (e) => {
      dragging = true;
      lastX = e.clientX;
    });
    
    document.addEventListener('mousemove', (e) => {
      if (dragging) {
        const deltaX = e.clientX - lastX;
        rotationY += deltaX * 0.5;
        lastX = e.clientX;
      }
    });
    
    document.addEventListener('mouseup', () => {
      dragging = false;
    });
    
    function animate() {
      if (!dragging) {
        rotationY += autoRotateSpeed;
      }
      carousel.style.transform = `rotateX(-10deg) rotateY(${rotationY}deg)`;
      requestAnimationFrame(animate);
    }
    
    animate();
    
    // Modal open/close
    const modal = document.getElementById("imageModal");
    const modalImg = document.getElementById("modalImage");
    const closeBtn = document.querySelector(".close");
    
    function openModal(id, name, at, phone) {
      modal.style.display = "block";
      modalImg.src = "/images/users/"+id+".jpg";
      document.getElementById("name").innerHTML = name;
      document.getElementById("meta").innerHTML = at + ",  " + phone;
    }
    
    closeBtn.onclick = function () {
      modal.style.display = "none";
    }
    
    // Хаах: modal доторх хоосон хэсэг дарвал хаах
    modal.onclick = function (e) {
      if (e.target === modal) {
        modal.style.display = "none";
      }
    }

  </script>
</body>
</html>