<?php include('auth_guard.php'); ?><?php
include("config.php"); // Database connection zaroori hai
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Public Gallery - Hamna Sheikh</title>
    <style>
        /* Base Styles */
        body { background-color: #0f172a; color: white; font-family: 'Segoe UI', sans-serif; margin: 0; }
        
        nav {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 50px; background: #1e293b; border-bottom: 1px solid #334155;
        }
        nav h2 { color: #38bdf8; margin: 0; }
        nav a { color: white; text-decoration: none; font-weight: bold; padding: 8px 16px; background: #0284c7; border-radius: 5px; }

        .header-section { text-align: center; margin: 40px 0; }
        .title { color: #38bdf8; font-size: 2.5rem; margin-bottom: 10px; }

        /* GALLERY GRID */
        .gallery-container {
            padding: 0 50px 50px 50px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
            gap: 20px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid #334155;
            background: #1e293b;
            height: 250px;
            transition: 0.4s;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.5s;
        }

        .gallery-item:hover {
            border-color: #38bdf8;
            transform: translateY(-8px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        }

        .gallery-item:hover img { transform: scale(1.1); }

        @media (max-width: 600px) { 
            .gallery-container { padding: 0 20px 50px 20px; }
        }
    </style>
</head>
<body>

    <nav>
        <h2>Hamna Sheikh</h2>
        <a href="index.html">Home</a>
    </nav>

    <div class="header-section">
        <h1 class="title">COMMUNITY GALLERY</h1>
        <p>Viewing all publicly shared pictures</p>
    </div>

    <!-- Upload Form Yahan Se Hata Diya Gaya Hai Taake Publicly Koi Upload Na Kar Sake -->

    <div class="gallery-container">
        <?php
        // Sirf wahi pictures uthayen jo 'public' hain
        // Note: Apne table mein column ka naam check karein (status, visibility, or type)
        $query = "SELECT picname FROM gallery WHERE status='public' ORDER BY id DESC";
        $result = mysqli_query($conn, $query);
        
        if (mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) {
                $imagePath = "upload/" . $row['picname'];
                
                // Check karein ke file waqai folder mein maujood hai
                if (file_exists($imagePath)) {
                    echo '<div class="gallery-item">';
                    echo '<img src="'.$imagePath.'" alt="Public Gallery Image">';
                    echo '</div>';
                }
            }
        } else {
            echo "<p style='grid-column: 1/-1; text-align: center; color: #cbd5e1;'>Abhi tak koi public picture share nahi ki gayi.</p>";
        }
        ?>
    </div>

</body>
</html>