<?php
require 'db2.php';

// Check if 'list' parameter is passed and assign it to $list
$list = isset($_GET["list"]) ? $_GET["list"] : "";

// Prepare the SQL query based on the value of $list
if ($list == "") {
    $stmt = $conn->prepare("SELECT * FROM my_updates");
} else {
    $stmt = $conn->prepare("SELECT * FROM my_updates WHERE type = ?");
    $stmt->bind_param("s", $list);
}

// Execute the prepared statement and check for errors
if ($stmt->execute()) {
    // Get the result of the executed statement
    $result = $stmt->get_result();
} else {
    echo "Error: " . $stmt->error;
    exit();
}

// Close the statement
$stmt->close();

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Records in Grid</title>
    <link rel="stylesheet" href="assets/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        .card h2 {
            margin: 0 0 10px;
            font-size: 1.25em;
        }
        .card p {
            margin: 5px 0;
            color: #555;
        }
        .card p strong {
            color: #333;
        }
                .gallery {
                display: grid;
                /* min-height: 500px; */
    
                }
                .gallery img, .videoc {
                max-width: 200px;
                aspect-ratio: 1;
                display: grid;
                /* grid-column: span 2; */
                object-fit: cover;
                clip-path: path("M 80 20 C 100 0 100 0 120 20 C 140 40 160 60 180 80 C 200 100 200 100 180 120 C 160 140 140 160 120 180 C 100 200 100 200 80 180 C 60 160 40 140 20 120 C 0 100 0 100 20 80 Z");
                transition: transform 0.3s ease, filter 0.3s ease, clip-path 0.3s ease;
                filter: blur(2px) saturate(138%) contrast(175%) invert(13%);
                }

                .gallery img:hover, .videoc:hover {
                clip-path: path("M 0 0 C 100 0 100 0 200 0 C 200 50 200 50 200 80 C 200 100 200 100 200 120 C 200 150 200 150 200 200 C 100 200 100 200 0 200 C 0 150 0 150 0 120 C 0 100 0 100 0 80 Z");
                filter: blur(0) saturate(100%) contrast(100%) invert(0);
                transform: scale(1.1);
                border:2px solid orange;
                z-index: 3;
                }
                .gallery img:not(:hover), .videoc:not(:hover) {
                animation: Index 0.2s ease;
                }
                button {
                    float:right;
                    color:white;
                    background: red;
                }
    </style>

</head>
<body>
    <main>
        <input id='ty' value='<?php echo htmlspecialchars($list); ?>' type='hidden'>
        <h1><?php echo htmlspecialchars($list); ?> Records</h1>
        <div class="container">
            <?php
            if ($result && $result->num_rows > 0) {
                // Output data of each row
                while ($row = $result->fetch_assoc()) {
                    echo "<div class='card'>
                        <div>
                            <span class='price z2 brd-rd5 text-center scndry-bg position-absolute'><small></small>" . htmlspecialchars($row["type"]) . "</span>
                            <button class='delete' value='" . htmlspecialchars($row["id"]) . "'>X</button>
                            <div class='gallery'>
                            <img src='uploads/" . htmlspecialchars($row["filename"]) . "' alt='Image'>
                            </div>
                            <em>Subject:" . htmlspecialchars($row["Subject"]) . "</em><br>
                            <em>Details: " . htmlspecialchars($row["details"]) . "</em><br>
                            <em>Source:" . htmlspecialchars($row["Source"]) . "</em><br>
                            <em>Dated:" . htmlspecialchars($row["date_stamp"]) . "</em>
                        </div>
                    </div>";
                }
            } else {
                echo "<p>No records found</p>";
            }

            // Close the database connection
            $conn->close();
            ?>
        </div>
    </main>
    <script src="assets/js/jquery.min.js"></script>
    <script>
        $(".delete").click(function() {
            let yid = $(this).attr("value");
            $.post('upload.php', {delete: 1, id: yid}, function(data, status, Xhr) {
                alert(status);
                window.location.reload();
            });
        });
    </script>
</body>
</html>
