<?php
    require_once('source/session.php');
    require_once('source/error.php');
    require_once('source/dbconfig.php');
    require_once('source/function.php');

// Get admin name from session if logged in
$adminName = $_SESSION['SESS_FULLNAME_ADMIN'] ?? '';
$userName = $_SESSION['SESS_FULLNAME_USER'] ?? '';

// School information
$schoolName = "Henzy Royal International School";
$schoolAddress = "No 17 Amadi Street, Amakohia, Uratta Owerri Imo State Nigeria";
$supportPhone = "+234 803 292 9756";
$supportEmail = "support@hris.com.ng";
$website = "www.hris.com.ng";

$msg = '';
if($SESS_FULLNAME_USER){
    $msg = "Welcome back, $SESS_FULLNAME_USER!";
}
else if(isset($_SESSION['msg']) && $_SESSION['msg'] == "activated"){
    $msg = "Account activated successfully!";
    unset($_SESSION['msg']);
}
else if(isset($_GET['msg']) && $_GET['msg'] == "inactive"){
    $msg = "Account not active. Please contact support.";
}
else if(isset($_SESSION['msg']) && $_SESSION['msg'] == "failed") {
    $msg = "Invalid registration number";
    unset($_SESSION['msg']);
}
else if(isset($_GET['timeout']) && $_GET['timeout'] == 1) {
    $msg = "Session expired due to inactivity. Please login again.";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Student Portal - Henzy Royal International School</title>
    <link rel="icon" type="image/png" href="../coll_logo.png">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 5 CSS (minimal for grid) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-blue: #1a4b8c;    /* Royal Blue */
            --secondary-gold: #FFD700;    /* Gold */
            --dark-blue: #0f2b4f;         /* Dark Blue */
            --light-blue: #4a7db5;         /* Medium Blue */
            --light-gold: #FFF1B8;          /* Light Gold */
            --bg-light: #f5f9ff;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }
        
        /* Animated background */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23FFD700" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,170.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
            opacity: 0.3;
            pointer-events: none;
        }
        
        .login-container {
            width: 100%;
            max-width: 480px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }
        
        .login-header {
            background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
            color: white;
            padding: 40px 30px 30px;
            text-align: center;
            position: relative;
            border-bottom: 3px solid var(--secondary-gold);
        }
        
        .login-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--secondary-gold), var(--primary-blue));
        }
        
        .school-logo {
            width: 100px;
            height: 100px;
            object-fit: contain;
            margin-bottom: 20px;
            background: white;
            padding: 10px;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            border: 3px solid var(--secondary-gold);
            transition: all 0.3s ease;
        }
        
        .school-logo:hover {
            transform: rotate(360deg);
        }
        
        .login-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
        }
        
        .school-name {
            font-size: 1.1rem;
            color: var(--secondary-gold);
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .login-body {
            padding: 40px 30px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .input-group {
            position: relative;
        }
        
        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-blue);
            z-index: 10;
            font-size: 1.1rem;
        }
        
        .input-field {
            width: 100%;
            padding: 15px 15px 15px 45px;
            border: 2px solid #e0e0e0;
            border-radius: 50px;
            font-size: 1rem;
            transition: all 0.3s;
            background: white;
        }
        
        .input-field:focus {
            border-color: var(--secondary-gold);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
            outline: none;
        }
        
        .input-field::placeholder {
            color: #999;
            font-weight: 300;
        }
        
        .btn-login {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--secondary-gold);
        }
        
        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }
        
        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(26, 75, 140, 0.4);
        }
        
        .btn-login:hover::before {
            left: 100%;
        }
        
        .btn-login i {
            margin-right: 10px;
        }
        
        .support-links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 2px dashed rgba(255, 215, 0, 0.3);
        }
        
        .support-link {
            color: var(--primary-blue);
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .support-link:hover {
            color: var(--secondary-gold);
            transform: translateY(-2px);
        }
        
        .support-link i {
            color: var(--secondary-gold);
        }
        
        .copyright {
            text-align: center;
            margin-top: 25px;
            font-size: 0.85rem;
            color: #666;
        }
        
        .copyright a {
            color: var(--primary-blue);
            text-decoration: none;
            font-weight: 500;
        }
        
        .copyright a:hover {
            color: var(--secondary-gold);
        }
        
        .alert-message {
            padding: 15px 20px;
            margin-bottom: 25px;
            border-radius: 50px;
            text-align: center;
            background: linear-gradient(135deg, #f8f9fa, #ffffff);
            border-left: 4px solid var(--secondary-gold);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            font-weight: 500;
            color: var(--dark-blue);
            position: relative;
            animation: slideDown 0.5s ease;
        }
        
        .alert-message i {
            color: var(--secondary-gold);
            margin-right: 8px;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .alert-success {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            color: #155724;
            border-left-color: #28a745;
        }
        
        .alert-danger {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            color: #721c24;
            border-left-color: #dc3545;
        }
        
        .alert-warning {
            background: linear-gradient(135deg, #fff3cd, #ffeaa7);
            color: #856404;
            border-left-color: #ffc107;
        }
        
        .alert-info {
            background: linear-gradient(135deg, #d1ecf1, #bee5eb);
            color: #0c5460;
            border-left-color: #17a2b8;
        }
        
        .floating-shape {
            position: absolute;
            background: rgba(255, 215, 0, 0.1);
            border-radius: 50%;
            z-index: 0;
        }
        
        .shape1 {
            width: 200px;
            height: 200px;
            top: -50px;
            right: -50px;
        }
        
        .shape2 {
            width: 150px;
            height: 150px;
            bottom: -30px;
            left: -30px;
        }
        
        /* Info note */
        .info-note {
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border-radius: 10px;
            padding: 10px 15px;
            margin-top: 20px;
            font-size: 0.85rem;
            color: var(--dark-blue);
            border-left: 3px solid var(--secondary-gold);
        }
        
        .info-note i {
            color: var(--secondary-gold);
            margin-right: 8px;
        }
        
        /* Responsive */
        @media (max-width: 576px) {
            .login-container {
                max-width: 100%;
            }
            
            .login-header {
                padding: 30px 20px 20px;
            }
            
            .login-body {
                padding: 30px 20px;
            }
            
            .login-title {
                font-size: 1.5rem;
            }
            
            .school-logo {
                width: 80px;
                height: 80px;
            }
            
            .support-links {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>

<body>
    <!-- Decorative shapes -->
    <div class="floating-shape shape1"></div>
    <div class="floating-shape shape2"></div>

    <div class="login-container">
        <div class="login-header">
            <img src="../coll_logo.png" alt="Henzy Royal International School" class="school-logo">
            <h1 class="login-title">Student Portal</h1>
            <div class="school-name">Henzy Royal International School</div>
            <p class="mb-0" style="font-size: 0.9rem; opacity: 0.9;">JSS 1 - SSS 3 Students</p>
        </div>
        
        <div class="login-body">
            <?php if(!empty($msg)): ?>
                <div class="alert-message 
                    <?php 
                    if(strpos($msg, 'Welcome') !== false) echo 'alert-success';
                    else if(strpos($msg, 'Invalid') !== false) echo 'alert-danger';
                    else if(strpos($msg, 'inactive') !== false) echo 'alert-warning';
                    else if(strpos($msg, 'expired') !== false) echo 'alert-info';
                    ?>">
                    <i class="fas 
                        <?php 
                        if(strpos($msg, 'Welcome') !== false) echo 'fa-smile-wink';
                        else if(strpos($msg, 'Invalid') !== false) echo 'fa-exclamation-circle';
                        else if(strpos($msg, 'inactive') !== false) echo 'fa-exclamation-triangle';
                        else if(strpos($msg, 'expired') !== false) echo 'fa-clock';
                        else echo 'fa-info-circle';
                        ?>">
                    </i>
                    <?= htmlspecialchars($msg) ?>
                </div>
            <?php endif; ?>
            
            <form method="post" action="exe_signin.php">
                <div class="form-group">
                    <div class="input-group">
                        <i class="fas fa-graduation-cap input-icon"></i>
                        <input type="text" name="username" class="input-field" placeholder="Enter Registration Number" required autofocus>
                    </div>
                </div>
                
                <!-- Hidden password field with default value "3333" -->
                <input type="hidden" name="password" value="3333">
                
                <button type="submit" name="signin" class="btn-login">
                    <i class="fas fa-sign-in-alt"></i> Access Results
                </button>
            </form>
            
            <!-- Quick info note -->
            <div class="info-note">
                <i class="fas fa-info-circle"></i>
                Enter your registration number to view your results. Contact support if you need assistance.
            </div>
            
            <div class="support-links">
                <a href="tel:<?= $supportPhone ?>" class="support-link">
                    <i class="fas fa-phone-alt"></i> Call Support
                </a>
                <a href="mailto:<?= $supportEmail ?>" class="support-link">
                    <i class="fas fa-envelope"></i> Email Support
                </a>
            </div>
            
            <?php if(!empty($adminName)): ?>
                <div class="text-center mt-3">
                    <a href="../admin/cbt_admin_home.php" class="btn btn-sm" style="color: var(--primary-blue);">
                        <i class="fas fa-tachometer-alt"></i> Go to Admin Dashboard
                    </a>
                </div>
            <?php endif; ?>
            
            <div class="copyright">
                © <?= date('Y') ?> <a href="<?= $website ?>" target="_blank">Henzy Royal International School</a>. All rights reserved.<br>
                <small>Powered by <a href="https://dataswift.com.ng" target="_blank">DataSwift Coders</a></small>
            </div>
        </div>
    </div>

    <!-- JavaScript for auto-dismiss alerts -->
    <script>
        // Auto dismiss success messages after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const alertMessage = document.querySelector('.alert-message');
            if (alertMessage && alertMessage.classList.contains('alert-success')) {
                setTimeout(function() {
                    alertMessage.style.transition = 'all 0.5s ease';
                    alertMessage.style.opacity = '0';
                    alertMessage.style.transform = 'translateY(-20px)';
                    setTimeout(function() {
                        alertMessage.remove();
                    }, 500);
                }, 5000);
            }
        });
    </script>
</body>
</html>