<?php include 'koneksi.php' ?>
<!DOCTYPE html>
<html lang="en">
    <head><link rel="icon" href="upload/bn2.png" type="image/png">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tenaga pendidikan | Smk Budiniah 2</title>
        <style>
        body{
            margin: 0;
            font-family: 'Times New Roman', Times, serif;
        }
        body a{
            cursor: pointer;
        }
        .hero-caption{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin: 10% 0 10% 0;
            padding-left: 5%;
            padding-right: 5%;
        }
        .hero-caption h1{
            margin-bottom: 20px;
            font-size: 50px;
            font-weight: 700;
            text-transform: capitalize;
        }
        .hero-caption p{
            color: #666;
            line-height: 1.5;
        }
        .card-guru{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 20px;
            padding: 20px 0;
            padding-left: 2%;
            padding-right: 2%;
        }
        .guru-card{
            background:white ;
            border-radius:10px;
            box-shadow: 13px 30px 0 0 rgba(60,172,222,0.2);
            padding: 20px;
            max-width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 10px;
        }
        .card-nama{
            text-align: center;
            text-transform: uppercase;
        }
        .card-nama p{
            text-align: center;
            text-transform: capitalize;
            font-size: 15px;
            color: #666;
        }
        .card-image{
            margin-bottom: 15px;
        }
        .guru-card img{
            width: 200px;
            height: auto;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-caption h1 {
                font-size: 30px;
            }
            .hero-caption {
                margin: 5% 0 5% 0;
                padding-left: 10%;
                padding-right: 10%;
            }
            .card-guru {
                padding-left: 5%;
                padding-right: 5%;
                gap: 10px;
            }
            .guru-card {
                flex: 0 0 48%;
                max-width: 48%;
                padding: 15px;
                margin: 5px;
            }
            .guru-card img {
                width: 100%;
                max-width: 200px;
            }
        }

        @media (max-width: 480px) {
            .hero-caption h1 {
                font-size: 24px;
            }
            .hero-caption p {
                font-size: 14px;
            }
            .card-guru {
                padding-left: 10%;
                padding-right: 10%;
            }
            .guru-card {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="navigasi">
        <?php require 'navbar.php' ?>
    </div>
    <div class="hero-caption">
        <h1>Tenaga Kependidikan</h1>
        <p>Sekolah kami memiliki banyak tenaga kependidikan dengan berbagai jenis lulusan yang handal dan berkompeten dibidangnya masing-masing.</p>
    </div>
    <div class="card-guru">
        <?php 
        $query = "SELECT * FROM tb_guru WHERE jabatan='tenaga_pendidikan'";
        $results = mysqli_query($host,$query);
        if ($results && mysqli_num_rows($results) > 0){
            while ($row = mysqli_fetch_assoc($results)){
                $imgSrc = !empty($row['gambar_guru']) ? "upload/" . htmlspecialchars($row['gambar_guru']) : "upload/default.jpg";
                $nama = htmlspecialchars($row['nama_guru']);
                $mapel = htmlspecialchars($row['matapelajaran']);
                echo "<hr>";
                echo "<div class='guru-card'>";
                echo "<div class='card-image'>";
                echo "<img src='" . $imgSrc . "' alt='" . $nama . "'>";
                echo "</div>";
                echo "<div  class='card-nama'>";
                echo "<h3>" . $nama . "</h3>";
                echo "<p>$mapel</p>";
                echo "</div>";
                echo "</div>";
            }
        }else{
            echo "<div class='guru-card'>";
            echo "<p>Tidak ada data tenaga pendidikan tersedia.</p>";
            echo "</div>";
        }
        ?>
    </div>
    <footer>
        <?php require 'footer.php'; ?>
    </footer>
</body>
</html>
