<?php 
include("include/connection.php");
include("include/header.php"); 
?>

<style>
.story-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.story-card:hover {
    transform: translateY(-6px);
}
.story-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}
.story-title {
    color: #e67e22;
    font-weight: 700;
    font-size: 18px;
}
.story-content {
    flex-grow: 1;
}
</style>

<section class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Success Stories</h2>
<ol>
<li><a href="index.php">Home</a></li>
<li>Success Stories</li>
</ol>
</div>
</div>
</section>

<section class="py-5" style="background:#f8f9fa;">
<div class="container-fluid px-5">
<div class="row">

<?php
$getStories = mysqli_query($con,"SELECT * FROM business_stories WHERE status='Approved' ORDER BY id DESC");

if(mysqli_num_rows($getStories) > 0){

while($story = mysqli_fetch_assoc($getStories)){

$attachment = $story['attachment'];
$filePath = "uploads/business_story/".$attachment;
$fileExt = strtolower(pathinfo($attachment, PATHINFO_EXTENSION));

$hasImage = (!empty($attachment) && file_exists($filePath) && in_array($fileExt,['jpg','jpeg','png']));
?>

<div class="col-lg-3 col-md-6 mb-4">
<div class="story-card">

<?php if($hasImage){ ?>
    <img src="<?= $filePath ?>" class="story-img mb-2">
<?php } else { ?>
    <img src="image/default-story.jpg" class="story-img mb-2">
<?php } ?>

<div class="story-content">

<h5 class="story-title"><?= htmlspecialchars($story['business_name']); ?></h5>

<p><strong><?= htmlspecialchars($story['name']); ?></strong></p>

<p>
<?= substr(strip_tags($story['success_story']),0,120); ?>...
</p>

</div>

<a href="story-detail.php?id=<?= $story['id']; ?>" class="btn btn-sm btn-primary mt-2">
Read More
</a>

</div>
</div>

<?php } 

}else{
echo "<div class='col-12 text-center'><h5>No approved stories available yet.</h5></div>";
}
?>

</div>
</div>
</section>

<?php include("include/footer.php"); ?>