<?php
include("admin/includes/config.php");

if(isset($_POST['searchQuery'])){
    $searchQuery = "%{$_POST['searchQuery']}%";

    // Secure database query using prepared statements
    $stmt = $conn->prepare("SELECT * FROM blogs WHERE title LIKE ? OR lo_dec LIKE ?");
    $stmt->bind_param("ss", $searchQuery, $searchQuery);
    $stmt->execute();
    $result = $stmt->get_result();

    if($result->num_rows > 0){
        while($row = $result->fetch_assoc()){    
            // Formatting the date
            $date = date_create($row['b_date']); 
            $day = date_format($date, "d"); 
            $month = date_format($date, "M"); 
            
            // Output blog card matching the design
            echo "
            <div class='blog-block col-lg-4 col-md-6 wow fadeInUp'>
                <div class='inner-box'>
                    <div class='image-box'>
                        <figure class='image'>
                            <a href='blogdtls.php?id=".$row['id']."'>
                                <img src='admin/blogs/".$row['photo']."' alt='Image'>
                            </a>
                        </figure>
                        <span class='date'> 
                            <strong>".$day." <span>".$month."</span> </strong> 
                        </span>
                    </div>
                    <div class='content-box'>
                        <h4 class='title'>
                            <a href='blogdtls.php?id=".$row['id']."'>".$row['title']."</a>
                        </h4>
                        <a class='read-more' href='blogdtls.php?id=".$row['id']."'>Read More</a>
                    </div>
                </div>
            </div>";
        }
    } else {
        echo "<p>No results found.</p>";
    }

    $stmt->close();
}
?>



<style>

.blog-block .image-box .image {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    height: 96px;
}
    #searchResults {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}

.blog-block {
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.blog-block:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.image-box {
    position: relative;
}

.image-box img {
    width: 100%;
    height: auto;
    display: block;
}

.date {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff5722;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.content-box {
    padding: 15px;
}

.content-box h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.content-box a {
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    background: #007BFF;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
}

</style>