<?php 
session_start(); 
include 'config.php'; // make sure your DB connection is here

// Fetch branch list
$branches = mysqli_query($conn, "SELECT id, branch_name,branchcode FROM branches ORDER BY branch_name ASC");
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login & Signup Form</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
  <link rel="manifest" href="manifest.json">
  <style>
    /* ----------- Existing Modal Styles ----------- */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .modal-box {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.3);
      position: relative;
    }

    .modal-box h2 { margin-top: 0; }

    .modal-box input, .modal-box textarea, .modal-box button {
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    .modal-box button {
      background: #28a745;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    .modal-close {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 20px;
      cursor: pointer;
      color: #666;
    }

    .modal-close:hover { color: #000; }

    .password-container { position: relative; width: 100%; }
    .password-container input { width: 100%; padding-right: 40px; box-sizing: border-box; }

    .toggle-eye {
      position: absolute;
      right: 10px;
      top: 50%;                   /* 🔥 Vertical center */
      transform: translateY(-50%);/* 🔥 Correct alignment */
      cursor: pointer;
      font-size: 16px;
      color: #333;
    }


    /* ✅ Make branch dropdown match input style */
    select.form_control {
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin-top: 10px;
      box-sizing: border-box;
      font-size: 14px;
      background-color: #fff;
      color: #333;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M2 4l4 4 4-4z"/></svg>');
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px;
    }

    select.form_control:focus {
      outline: none;
      border-color: #28a745;
      box-shadow: 0 0 3px rgba(40, 167, 69, 0.5);
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <div class="form-container signup-container">
      <form action="signup.php" method="POST">
        <h1>Create Account</h1>
        <input type="text" name="name" placeholder="Name" required>
        <input type="text" name="username" placeholder="Username" required>
        <div class="password-container">
          <input type="password" id="signup_password" name="password" placeholder="Enter password" required />
          <span class="toggle-eye" onclick="togglePassword('signup_password', this)">
            <i class="fa-solid fa-eye"></i>
          </span>
        </div>
        <button type="submit" name="signup">Sign up</button>
      </form>
    </div>

    <div class="form-container login-container">
      <form action="login.php" method="POST">
        <h1>Login</h1>

        <!-- ✅ Branch Dropdown Styled Like Inputs -->
        <select name="branch_id" class="form_control" required>
            <option value="">Select Branch</option>
            <?php
            if (mysqli_num_rows($branches) > 0) {
                while ($row = mysqli_fetch_assoc($branches)) {
        
                    // Branch name + code
                    $display = htmlspecialchars($row['branch_name'] . ' (' . $row['branchcode'] . ')');
        
                    echo '<option value="'.$row['id'].'">'.$display.'</option>';
                }
            } else {
                echo '<option value="">No branches found</option>';
            }
            ?>
        </select>


        <input type="text" name="username" class="form_control" placeholder="Username" required>
        <div class="password-container">
          <input type="password" id="login_password" class="form_control" name="password" placeholder="Enter password" required />
          <span class="toggle-eye" onclick="togglePassword('login_password', this)">
            <i class="fa-solid fa-eye"></i>
          </span>
        </div>
        <span style="text-align:right!important;">
          <a href="#" onclick="event.preventDefault(); openModal();" style="text-align:right!important;">Forgot Password?</a>
        </span>
        <button type="submit" name="login">Login</button>
      </form>
    </div>

    <div class="overlay-container">
      <div class="overlay">
        <div class="overlay-panel overlay-left">
          <h1>Welcome Back</h1>
          <p>To keep connected with us please login with your personal info</p>
          <button class="ghost" id="login">Login</button>
        </div>
        <div class="overlay-panel overlay-right">
          <h1>Hello Friend</h1>
          <p>Enter your personal details and start journey with us</p>
          <!--<button class="ghost" id="signup">Signup</button>-->
        </div>
      </div>
    </div>
  </div>

  <!-- JS for password toggle -->
  <script>
    function togglePassword(fieldId, iconSpan) {
      const passwordInput = document.getElementById(fieldId);
      const icon = iconSpan.querySelector('i');
      if (passwordInput.type === "password") {
        passwordInput.type = "text";
        icon.classList.remove("fa-eye");
        icon.classList.add("fa-eye-slash");
      } else {
        passwordInput.type = "password";
        icon.classList.remove("fa-eye-slash");
        icon.classList.add("fa-eye");
      }
    }
  </script>

  <!-- Forgot Password Modal -->
  <script>
    function openModal() {
      const modal = document.createElement('div');
      modal.className = 'modal-overlay';
      modal.innerHTML = `
        <div class="modal-box">
          <span class="modal-close" onclick="closeModal(this)">&times;</span>
          <h2>Password Reset</h2>
          <form action="forgot_password.php" method="POST" onsubmit="submitModalForm(event, this)">
            <input type="text" name="username" placeholder="Username" required>
            
            <div class="password-container">
              <input type="password" id="modal_new_password" name="new_password" placeholder="New Password" required />
              <span class="toggle-eye" onclick="togglePassword('modal_new_password', this)">
                <i class="fa-solid fa-eye"></i>
              </span>
            </div>

            <div class="password-container">
              <input type="password" id="modal_confirm_password" name="confirm_password" placeholder="Re-enter New Password" required />
              <span class="toggle-eye" onclick="togglePassword('modal_confirm_password', this)">
                <i class="fa-solid fa-eye"></i>
              </span>
            </div>

            <button type="submit">Submit</button>
          </form>
        </div>
      `;
      document.body.appendChild(modal);
      modal.addEventListener('click', function(e) {
        if (e.target === modal) modal.remove();
      });
    }

    function closeModal(btn) {
      const modal = btn.closest('.modal-overlay');
      modal.remove();
    }

    function submitModalForm(event, form) {
      event.preventDefault();
      form.submit();
    }
  </script>

  <script src="main.js"></script>
  <script src="pwabuilder-sw.js"></script>
</body>
</html>
