<?php
session_start();

if (!isset($_SESSION['email']) || $_SESSION['role'] != 'admin') {
    // If session is not set, redirect to login
    header("Location: login.php");
    exit();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Monitoring Siswa - Home</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-k6RqeWeci5ZR/Lv4MR0sA0FfDOMVgMkj8I6g6rxXZXduA95f/d2OgJcNxnqBFLVTV68kZ3ovHxSYsUz2QXjbg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        body {
            background-color: #f9f9f9;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .header {
            background-color: #4A90E2;
            color: white;
            padding: 15px;
            text-align: center;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }
        .header h2 {
            margin: 0;
            font-size: 22px;
            font-weight: bold;
        }
        .back-button {
            position: absolute;
            left: 10px; /* Position from the left */
            top: 15px; /* Position from the top */
            background: transparent;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            outline: none;
        }
        .carousel-item img {
            width: 100%;
            height: 200px; /* Adjust height as needed */
            object-fit: cover;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
        }
        .menu-container {
            padding: 15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-bottom: 80px; /* Ensure space for footer */
        }
        .menu-item {
            background-color: #ffffff;
            width: 100px; /* Adjusted width */
            height: 100px; /* Adjusted height */
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column; /* Changed to column for image and title */
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease;
            margin: 10px;
            position: relative;
            overflow: hidden;
            text-align: center; /* Center the title text */
        }
        .menu-item img {
            width: 50px; /* Adjust image size */
            height: 40px; /* Adjust image size */
            object-fit: contain; /* Maintain aspect ratio */
            border-radius: 15px;
            margin-bottom: 5px; /* Space between image and title */
        }
        .menu-title {
            font-size: 14px; /* Slightly larger font for better visibility */
            font-weight: 600;
            color: #333;
        }
        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        .bottom-nav {
            background-color: #ffffff;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .bottom-nav a {
            text-decoration: none;
            color: #333;
            text-align: center;
            flex-grow: 1;
            padding: 7px;
            border-radius: 7px;
            transition: background-color 0.3s, color 0.3s;
        }
        .bottom-nav a i {
            font-size: 20px;
        }
        .bottom-nav a span {
            font-size: 12px;
            display: block;
        }
        .bottom-nav a:hover {
            background-color: #4A90E2; /* Hover color */
            color: white; /* Text color on hover */
        }
        .bottom-nav a.active {
            background-color: #4A90E2; /* Active link color */
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <!-- Header -->
    <div class="header">
        <button class="back-button" onclick="window.history.back();">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h2>Sistem Monitoring Siswa</h2>
    </div>

    <!-- Carousel -->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/gambar10.jpeg" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="img/gambar11.jpeg" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="img/gambar13.jpeg" alt="Slide 3">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    

    <!-- Menu Container -->
    <div class="menu-container">
        <div class="menu-item">
            <a href="admin.php">
                <img src="img/aktivitas.png" alt="Manage Students">
                <div class="menu-title">Kelola Profil siswa</div>
            </a>
        </div>
        <div class="menu-item">
            <a href="view_schedule.php">
                <img src="img/schedule.png" alt="View Schedule">
                <div class="menu-title">Jadwal Mengajar</div>
            </a>
        </div>
        <div class="menu-item">
            <a href="pengumuman.php">
                <img src="img/code.png" alt="Pengumuman">
                <div class="menu-title">Pengumuman</div>
            </a>
        </div>
        <div class="menu-item">
            <a href="logout.php">
                <img src="img/logout.png" alt="Logout">
                <div class="menu-title">Logout</div>
            </a>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <a href="manage_students.php" class="active">
            <i class="fas fa-user-graduate"></i>
            <span>Kelola Siswa</span>
        </a>
        <a href="view_schedule.php">
            <i class="fas fa-calendar-alt"></i>
            <span>Jadwal</span>
        </a>
        <a href="profil.php">
            <i class="fas fa-user"></i>
            <span>Profil</span>
        </a>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
