<?php
 /*require_once '../src/Database.php';
 $conn = Database::getInstance();
 function getBitrix24UsersByDomain($conn) {
  $stmt = $conn->prepare("SELECT * FROM users ");
 
  $stmt->execute();
  $result = $stmt->get_result();
  $users = [];
  while ($row = $result->fetch_assoc()) {
      $users[] = $row;
  }

  $stmt->close();
  return $users;
}
 */
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login/Register/Reset</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5f6fa;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100%;
      max-width: 500px;
      margin: 60px auto;
      position: relative;
    }

    .formBox {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      padding: 30px 20px;
      position: relative;
    }

    .formBox h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .f_row {
      margin-bottom: 15px;
    }

    .f_row label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .input-field {
      width: 95%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      outline: none;
      margin: 10px;
    }

    .btn, .btn-large {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 6px;
      background-color: #3498db;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      margin-top: 10px;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background-color: #2980b9;
    }

    .btn svg {
      margin-left: 10px;
      width: 16px;
      height: 16px;
      fill: white;
    }

    .f_link, .regTag {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }

    .f_link a, .regTag {
      text-decoration: none;
      color: #3498db;
      font-weight: bold;
      cursor: pointer;
    }

    .box {
      display: none;
    }

    .loginBox {
      display: block;
    }

    .icon-back {
      cursor: pointer;
      position: absolute;
      top: 15px;
      left: 15px;
      width: 24px;
      height: 24px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="formBox">
    <!-- Login Box -->
    <div class="box loginBox">
      <h2>LOGIN</h2>
      <form class="form" action="login.php" method="POST">
        <div class="f_row">
          <label>Username</label>
          <input type="text" class="input-field" name="email" placeholder="Enter your username" required>
        </div>
        <div class="f_row">
          <label>Password</label>
          <input type="password" class="input-field" name="password" placeholder="Enter your password" required>
        </div>
        <button class="btn" type="submit">
          <span>GO</span>
          <svg viewBox="0 0 415.582 415.582">
            <path d="M411.47,96.426l-46.319-46.32c-5.482-5.482-14.371-5.482-19.853,0L152.348,243.058l-82.066-82.064
              c-5.48-5.482-14.37-5.482-19.851,0l-46.319,46.32c-5.482,5.481-5.482,14.37,0,19.852l138.311,138.31
              c2.741,2.742,6.334,4.112,9.926,4.112c3.593,0,7.186-1.37,9.926-4.112L411.47,116.277c2.633-2.632,4.111-6.203,4.111-9.925
              C415.582,102.628,414.103,99.059,411.47,96.426z"/>
          </svg>
        </button>
        <div class="f_link">
          <a onclick="showReset()">Forgot your password?</a>
        </div>
        
      </form>
    </div>

    <!-- Reset Password Box -->
    <div class="box forgetbox">
      <a class="icon-back" onclick="showLogin()">
        <svg viewBox="0 0 199.404 199.404">
          <polygon points="199.404,81.529 74.742,81.529 127.987,28.285 99.701,0 0,99.702 99.701,199.404 127.987,171.119 74.742,117.876 199.404,117.876"/>
        </svg>
      </a>
      <h2>Reset Password</h2>
      <form class="form">
        <p>Please enter your email to receive reset instructions.</p>
        <div class="f_row">
          <label>Email</label>
          <input type="email" class="input-field" placeholder="Enter your email" required>
        </div>
        <button class="btn" type="submit">
          <span>Reset</span>
          <svg viewBox="0 0 415.582 415.582">
            <path d="M411.47,96.426l-46.319-46.32c-5.482-5.482-14.371-5.482-19.853,0L152.348,243.058l-82.066-82.064
              c-5.48-5.482-14.37-5.482-19.851,0l-46.319,46.32c-5.482,5.481-5.482,14.37,0,19.852l138.311,138.31
              c2.741,2.742,6.334,4.112,9.926,4.112c3.593,0,7.186-1.37,9.926-4.112L411.47,116.277c2.633-2.632,4.111-6.203,4.111-9.925
              C415.582,102.628,414.103,99.059,411.47,96.426z"/>
          </svg>
        </button>
      </form>
    </div>

    <!-- Registration Box -->
      
  </div>
</div>

<script>
  function showLogin() {
    document.querySelector('.loginBox').style.display = 'block';
    document.querySelector('.forgetbox').style.display = 'none';
    document.querySelector('.registerbox').style.display = 'none';
  }

  function showReset() {
    document.querySelector('.loginBox').style.display = 'none';
    document.querySelector('.forgetbox').style.display = 'block';
    document.querySelector('.registerbox').style.display = 'none';
  }
</script>

</body>
</html>
