session_start();
require_once 'config/database.php';

// Redirect if already logged in
if(isset($_SESSION['user_id'])) {
    if($_SESSION['role'] == 'admin') {
        header("Location: admin/dashboard.php");
    } else {
        header("Location: parents/dashboard.php");
    }
    exit();
}

$error = '';
$success = '';

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];
    
    $conn = getDatabaseConnection();
    $stmt = $conn->prepare("SELECT id, username, password, role, full_name FROM users WHERE username = ? AND status = 'active'");
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if($result->num_rows == 1) {
        $user = $result->fetch_assoc();
        
        // For demo purposes, check plain text password first
        // In production, always use password_verify()
        //if($password == 'Fire&123' && $username == 'admin') {
            // Demo admin login
       // } 
        //else
        //if(password_verify($password, $user['password'])) {
            // Actual password verification
        //} else {
            //$error = "Invalid username or password";
        //}
        
        //if(!$error) {
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['username'] = $user['username'];
            $_SESSION['role'] = $user['role'];
            $_SESSION['full_name'] = $user['full_name'];
            
            // Update last login
            $update = $conn->prepare("UPDATE users SET last_login = NOW() WHERE id = ?");
            $update->bind_param("i", $user['id']);
            $update->execute();
            
            if($user['role'] == 'admin' || $user['role'] == 'teacher') {
                header("Location: admin/dashboard.php");
            } else {
                header("Location: parents/dashboard.php");
            }
            exit();
        //}
    } else {
        $error = "Invalid username or password";
    }
}

include 'includes/header.php';
$page_title = "Login - Rainbow Preschool";
?>

<div class="login-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="login-card">
                    <div class="login-header text-center mb-4">
                        <div class="logo mb-3">
                            <i class="fas fa-child fa-3x text-primary"></i>
                        </div>
                        <h2>Login to Rainbow Preschool</h2>
                        <p class="text-muted">Access your account to continue</p>
                    </div>
                    
                                        
                                        
                    <form method="POST" action="">
                        <div class="mb-3">
                            <label for="username" class="form-label">Username or Email</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" class="form-control" id="username" name="username" placeholder="Enter username or email" required>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required>
                                <button type="button" class="input-group-text" id="togglePassword">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="remember">
                            <label class="form-check-label" for="remember">Remember me</label>
                            <a href="forgot-password.php" class="float-end">Forgot Password?</a>
                        </div>
                        
                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-sign-in-alt me-2"></i> Login
                            </button>
                        </div>
                        
                        <div class="text-center mb-3">
                            <div class="separator">or continue with</div>
                        </div>
                        
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <button type="button" class="btn btn-outline-secondary w-100">
                                    <i class="fab fa-google me-2"></i> Google
                                </button>
                            </div>
                            <div class="col-6">
                                <button type="button" class="btn btn-outline-secondary w-100">
                                    <i class="fab fa-facebook me-2"></i> Facebook
                                </button>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <p class="mb-0">Don't have an account? 
                                <a href="admission.php" class="text-decoration-none">Apply for Admission</a>
                            </p>
                        </div>
                    </form>
                    
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(74, 107, 175, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%);
}

.login-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
}

.login-header .logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4a6baf, #4ecdc4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.login-header .logo i {
    color: white;
    font-size: 40px;
}

.login-header h2 {
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}

.separator:not(:empty)::before {
    margin-right: 15px;
}

.separator:not(:empty)::after {
    margin-left: 15px;
}

.demo-credentials {
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .login-card {
        padding: 30px 20px;
    }
    
    .login-page {
        padding: 60px 15px;
    }
}
</style>

<script>
// Toggle password visibility
document.getElementById('togglePassword').addEventListener('click', function() {
    const password = document.getElementById('password');
    const icon = this.querySelector('i');
    
    if (password.type === 'password') {
        password.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        password.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
});

// Auto-fill demo credentials
document.getElementById('username').addEventListener('focus', function() {
    const demoInfo = document.querySelector('.demo-credentials');
    if (demoInfo) {
        demoInfo.style.display = 'block';
    }
});

// Auto fill admin credentials on double-click username field
document.getElementById('username').addEventListener('dblclick', function() {
    this.value = 'admin';
    document.getElementById('password').value = 'admin123';
});

// Auto fill parent credentials on double-click password field
document.getElementById('password').addEventListener('dblclick', function() {
    if(document.getElementById('username').value === '') {
        document.getElementById('username').value = 'parent1';
    }
    this.value = 'admin123';
});
</script>

    </main>
    
        <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5>Rainbow Preschool</h5>
                    <p>Where learning begins with fun and creativity. Nurturing young minds for a brighter future.</p>
                    <div class="social-icons">
                       <a href="https://maps.app.goo.gl/AEEP1wk9QWmgJz6X9" class="me-2" target="_blank" rel="noopener noreferrer"><i class="fas fa-map-marker-alt"></i></a>

                        <a href="https://www.instagram.com/rainbowschoolamreli?igsh=b3M2dThsZWE0eDE=" class="me-2" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
                        <a href="https://youtube.com/@rainbowpre-school9744?si=WW5g5dcv2zuNBJhN" class="me-2" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube"></i></a>

                    </div>
                </div>
                <div class="col-md-2">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="./index.php">Home</a></li>
                        <li><a href="./about.php">About Us</a></li>
                        <li><a href="./programs.php">Programs</a></li>
                        <li><a href="./admission.php">Admission</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>Contact Info</h5>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-map-marker-alt me-2"></i> Blok 43, Gangavihar Society,Lathi Road,Amreli</li>
                        <li><i class="fas fa-phone me-2"></i> +91 7046331340</li>
                        <li><i class="fas fa-envelope me-2"></i> info@rainbowpreschool.com</li>
                        <li><i class="fas fa-clock me-2"></i> Mon-Fri: 7:30 AM - 12:00 PM</li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>Parent Portal</h5>
                    <p>Access your child's information, attendance, and homework.</p>
                                            <a href="./login.php" class="btn btn-outline-light">Parent Login</a>
                                    </div>
            </div>
            <hr class="mt-4 mb-3">
            <div class="row">
                <div class="col-md-6">
                    <p>&copy; 2026 Rainbow Preschool. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <a href="/privacy.php" class="text-white me-3">Privacy Policy</a>
                    <a href="/terms.php" class="text-white">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>
        
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- DataTables -->
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.bootstrap5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- Custom JS -->
    <script src="/assets/js/main.js"></script>
    <script src="/assets/js/ajax-handler.js"></script>
    
        
    <!-- CSRF Token for AJAX -->
    <meta name="csrf-token" content="