<?php 
session_start();
include "include/config.php";
include "../color.php";

// Security: Prevent session fixation
session_regenerate_id(true);

if (isset($_SESSION['studentid'])) {
    header("location:login/dashboard.php");
    exit(); // Add exit after header redirect
}

// CSRF token generation for login form
if (!isset($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Login | Secure Access</title>
  
  <!-- SEO Meta Tags -->
  <meta name="description" content="Secure staff login portal">
  <meta name="robots" content="noindex, nofollow">
  
  <!-- Bootstrap 5 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- Favicon (add your own favicon) -->
  <link rel="icon" type="image/x-icon" href="logo.png">

  <style>
    :root {
      
      --primary-dark: #3a56d7;
      --text-dark: #2d3748;
      --text-light: #718096;
      --shadow: 0 10px 30px rgba(0,0,0,0.08);
      --shadow-hover: 0 15px 40px rgba(0,0,0,0.12);
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Josefin Sans", sans-serif;
      color: var(--text-dark);
      min-height: 100vh;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      position: relative;
      overflow-x: hidden;
    }

    /* Background decorative elements */
    body::before {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(74, 108, 247, 0.1) 0%, rgba(74, 108, 247, 0.05) 100%);
      top: -150px;
      right: -150px;
      z-index: 0;
    }

    body::after {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(74, 108, 247, 0.08) 0%, rgba(74, 108, 247, 0.03) 100%);
      bottom: -100px;
      left: -100px;
      z-index: 0;
    }

    .login-container {
      width: 100%;
      max-width: 420px;
      position: relative;
      z-index: 1;
    }

    .login-card {
      background: white;
      border-radius: 20px;
      padding: 40px 35px;
      box-shadow: var(--shadow);
      transition: var(--transition);
      border: 1px solid rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
    }

    .login-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-5px);
    }
.btn-login:hover{
    
    background: var(--primary) !important;
    color:white !important;
}
    .logo-container {
      text-align: center;
      margin-bottom: 30px;
    }

    .logo-circle {
      
      margin: 0 auto 20px;
   
      
      display: flex;
      align-items: center;
      justify-content: center;
     
      position: relative;
      overflow: hidden;
    }

    

    .logo-circle img {
      width: 100px !important;
      
      
    }

    .login-title {
      text-align: center;
      margin-bottom: 30px;
      color: var(--text-dark);
      font-weight: 700;
      font-size: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .login-title i {
      color: var(--primary);
      font-size: 1.5rem;
    }

    .form-group {
      margin-bottom: 20px;
      position: relative;
    }

    .form-control {
      border-radius: 12px;
      padding: 14px 20px;
      border: 2px solid #e2e8f0;
      background: #f8fafc;
      color: var(--text-dark);
      font-size: 15px;
      transition: var(--transition);
      font-weight: 500;
    }

    .form-control:focus {
      border-color: var(--primary);
      background: white;
      box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
      outline: none;
    }

    .form-control::placeholder {
      color: #a0aec0;
      font-weight: 400;
    }

    .password-toggle {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #a0aec0;
      cursor: pointer;
      
      padding: 5px;
    }

    .password-toggle:hover {
      color: var(--primary);
    }

    .checkbox-container {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 25px;
      cursor: pointer;
      user-select: none;
      font-size: 14px;
      color: var(--text-light);
    }

    .checkbox-container input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--primary);
    }

    .btn-login {
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      border: none;
      font-weight: 600;
      font-size: 16px;
      background:  var(--primary);
      color: white;
      transition: var(--transition);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      letter-spacing: 0.5px;
    }

    

    

    .links {
      margin-top: 25px;
      text-align: center;
      padding-top: 25px;
      border-top: 1px solid #e2e8f0;
    }

    .links a {
      color: var(--primary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0 10px;
    }

    .links a:hover {
      color: var(--primary-dark);
      text-decoration: underline;
    }

    .alert {
      border-radius: 12px;
      border: none;
      padding: 12px 16px;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: 500;
    }

    .alert-success {
      background-color: #d1fae5;
      color: #065f46;
      
    }

    .alert-danger {
      background-color: #fee2e2;
      color: #991b1b;
      
    }

    .alert-info {
      background-color: #dbeafe;
      color: #1e40af;
      border-left: 4px solid #3b82f6;
    }

    .loading-spinner {
      display: none;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .login-card {
      animation: fadeIn 0.6s ease-out;
    }

    /* Responsive Design */
    @media (max-width: 576px) {
      .login-card {
        padding: 30px 25px;
      }
      
      
      
      
      
      body {
        padding: 15px;
      }
      
      body::before,
      body::after {
        display: none;
      }
    }

    /* Input focus label effect */
    .input-label {
      position: absolute;
      left: 15px;
      top: -8px;
      background: white;
      padding: 0 8px;
      font-size: 12px;
      color: var(--primary);
      font-weight: 600;
      opacity: 0;
      transition: var(--transition);
    }

    .form-control:focus + .input-label {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="login-container">
    <div class="login-card">
      <div class="logo-container">
        <div class="logo-circle">
          <img width="120px" src="logo.png" alt="Company Logo">
        </div>
        <h1 class="login-title">
          <i class="fas fa-graduation-cap"></i> Student Login
        </h1>
      </div>

      <?php if (isset($_GET['success'])): ?>
        <div class="alert alert-success p-3"><?php echo htmlspecialchars($_GET['success']); ?></div>
      <?php endif; ?>
      
      <?php if (isset($_GET['error'])): ?>
        <div class="alert alert-danger p-3"><?php echo htmlspecialchars($_GET['error']); ?></div>
      <?php endif; ?>
      
      <?php if (isset($_GET['regi'])): ?>
        <div class="alert alert-info p-3"><?php echo htmlspecialchars($_GET['regi']); ?></div>
      <?php endif; ?>

      <form action="login/login.php" method="post" id="loginForm">
        <!-- CSRF Protection -->
        <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
        
        <div class="form-group">
          <input type="text" 
                 name="studentid" 
                 placeholder="Student ID" 
                 class="form-control" 
                 required
                 autocomplete=""
                 autofocus>
          <span class="input-label">Student ID</span>
        </div>
        
        <div class="form-group">
          <input type="password" 
                 name="pass" 
                 id="pass" 
                 placeholder="Password" 
                 class="form-control" 
                 required
                 autocomplete="current-password">
          <span class="input-label">Password</span>
          <button type="button" class="password-toggle" onclick="togglePass()" aria-label="Toggle password visibility">
            <i class="far fa-eye"></i>
          </button>
        </div>

        <div hidden class="checkbox-container">
          <input type="checkbox" id="showPassword" onclick="togglePass()">
          <label for="showPassword">Show Password</label>
        </div>

        <button type="submit" class="btn btn-login" name="login" >
          <span id="btnText">LOGIN</span>
          <i class="fas fa-arrow-right"></i>
          <div class="loading-spinner" id="loadingSpinner"></div>
        </button>

        <div class="links">
          <a href="login/forgot_password.php">
            <i class="fas fa-key"></i> Forgot Password?
          </a>
          <a href="#" onclick="alert('Please contact administrator for support')">
            <i class="fas fa-headset"></i> Support
          </a>
        </div>
      </form>
    </div>
    
    
  </div>

 <script>
  // Function to toggle password visibility
  function togglePassword() {
    const passwordInput = document.getElementById('pass');
    const toggleIcon = document.querySelector('.password-toggle i');
    const showPasswordCheckbox = document.getElementById('showPassword');
    
    if (passwordInput.type === 'password') {
      passwordInput.type = 'text';
      toggleIcon.classList.remove('fa-eye');
      toggleIcon.classList.add('fa-eye-slash');
      if (showPasswordCheckbox) showPasswordCheckbox.checked = true;
    } else {
      passwordInput.type = 'password';
      toggleIcon.classList.remove('fa-eye-slash');
      toggleIcon.classList.add('fa-eye');
      if (showPasswordCheckbox) showPasswordCheckbox.checked = false;
    }
  }

  // Function for the eye button toggle
  function togglePass() {
    // Simply call the same function
    togglePassword();
  }

  // Form submission handling
  document.getElementById('loginForm').addEventListener('submit', function(e) {
    const loginBtn = document.getElementById('loginBtn');
    const btnText = document.getElementById('btnText');
    const arrowIcon = document.querySelector('.btn-login i');
    const spinner = document.getElementById('loadingSpinner');
    
    // Disable button and show loading
    loginBtn.disabled = true;
    btnText.textContent = 'Authenticating...';
    arrowIcon.style.display = 'none';
    spinner.style.display = 'block';
  });

  // Auto-hide alerts after 5 seconds
  document.addEventListener('DOMContentLoaded', function() {
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
      setTimeout(() => {
        alert.style.opacity = '0';
        alert.style.transform = 'translateY(-10px)';
        setTimeout(() => alert.remove(), 300);
      }, 5000);
    });

    // Add floating label effect on focus
    const inputs = document.querySelectorAll('.form-control');
    inputs.forEach(input => {
      input.addEventListener('focus', function() {
        this.parentElement.querySelector('.input-label').style.opacity = '1';
      });
      
      input.addEventListener('blur', function() {
        if (!this.value) {
          this.parentElement.querySelector('.input-label').style.opacity = '0';
        }
      });
      
      // Check on page load
      if (input.value) {
        input.parentElement.querySelector('.input-label').style.opacity = '1';
      }
    });
  });
</script>
</body>
</html>