<?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>Organisasi & Ekstrakulikuler | 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{
            font-size: 60px;
            font-weight: 700;
            text-transform: capitalize;
        }
        .hero-caption p{
            color: #666;
            line-height: 1.5;
            width: 90%;
            text-align: center;
            text-transform: capitalize;
        }
        .card-organisasi{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            text-transform: capitalize;
            gap:20px;
            padding: 20px 0;
            padding-left: 5%;
            padding-right: 5%;
        }
        .organisasi-card{
            background:white ;
            border-radius: 10px;
            box-shadow: 13px 30px 0 0 rgba(60,172,222,0.2);
            padding: 20px;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .card-nama{
            text-align: left;
            text-transform: uppercase;
        }
        .card-image{
            margin-bottom: 15px;
        }
        .card-image img{
            width: 200px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* 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%;
            }
            .hero-caption h1 {
                font-size: 32px;
                text-align: left;
                padding-left: 5%;
                padding-right: 5%;
                margin-bottom: 20px;
            }
            .hero-caption p {
                font-size: 16px;
                text-align: justify;
            }
            .card-organisasi {
                padding-left: 5%;
                padding-right: 5%;
                padding-bottom: 5%;
                gap: 10px;
            }
            .organisasi-card {
                flex: 0 0 48%;
                max-width: 40%;
                padding: 15px;
                margin: 5px;
                box-shadow: 13px 15px 0 0 rgba(60,172,222,0.2);
            }
            .card-image img {
                width: 100%;
                max-width: 200px;
            }
            .card-nama h3 {
                font-size: 18px;
            }
            .card-nama p {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .hero-caption h1 {
                font-size: 24px;
            }
            .hero-caption p {
                font-size: 14px;
            }
            .card-organisasi {
                padding-left: 10%;
                padding-right: 10%;
                box-shadow: 13px 15px 0 0 rgba(60,172,222,0.2);
            }
            .organisasi-card {
                padding: 10px;
            }
            .card-image img {
                width: 100%;
                max-width: 150px;
            }
            .card-nama h3 {
                font-size: 16px;
            }
            .card-nama p {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <?php require 'navbar.php'; ?>
    <div class="hero-caption">
        <h1>Organisasi & Ekstrakulikuler</h1>
        <p>Kegiatan penunjang siswa yang wajib diikuti adalah minimal 1 kegiatan. Sekolah kami memiliki organisasi dan ekskul yang berprestasi pada bidangnya masing-masing</p>
    </div>
     <div class="card-organisasi">
        <?php
        $query = "SELECT * FROM tb_organisasi ORDER BY kategori ASC";
        $results = mysqli_query($host,$query);
        if ($results && mysqli_num_rows($results) > 0){
            while ($row = mysqli_fetch_assoc($results)){
                $nama = htmlspecialchars($row['nama']);
                $kategori = htmlspecialchars($row['kategori']);
                $imgSrc = !empty($row['gambar']) ? "upload/" . htmlspecialchars($row['gambar']) : "upload/default.jpg";
                echo "<hr>";
                echo "<div class='organisasi-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>" . $kategori . "</p>";
                echo "</div>";
                echo "</div>";
            }
        }
        ?>
     </div>
     <?php require 'footer.php'; ?>
</body>
</html>
