<?php
include 'includes/db.php';

if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    header("Location: blogs.php");
    exit;
}

$id = (int)$_GET['id'];

$sql = "SELECT articles.*, admins.fullname AS author_name
        FROM articles
        INNER JOIN admins
        ON articles.author_id = admins.id
        WHERE articles.id='$id'";
$res = mysqli_query($conn, $sql);

if (mysqli_num_rows($res) == 0) {
    header("Location: blogs.php");
    exit;
}

$row = mysqli_fetch_assoc($res);

include 'includes/header.php';

$breadcrumb_title = $row['title'];
$breadcrumb_path = "Blogs / " . $row['title'];

include 'includes/breadcrumb.php';
?>

<section class="blog-single py-5">

    <div class="container">

        <div class="row justify-content-center">

            <div class="col-lg-10">

                <div class="blog-wrapper">

                    <img
                        src="admin/uploads/<?php echo $row['image']; ?>"
                        class="img-fluid blog-image"
                        alt="<?php echo htmlspecialchars($row['title']); ?>">

                    <div class="blog-body">

                        <div class="blog-meta">

                            <span>

                                <i class="bi bi-person-circle"></i>

                                <?php echo htmlspecialchars($row['author_name']); ?>

                            </span>

                            <span>

                                <i class="bi bi-calendar3"></i>

                                <?php echo date("d F Y", strtotime($row['created'])); ?>

                            </span>

                        </div>

                        <h1 class="blog-title">

                            <?php echo htmlspecialchars($row['title']); ?>

                        </h1>

                        <div class="blog-content">

                            <?php echo $row['content']; ?>

                        </div>

                        <div class="text-center mt-5">

                            <a
                                href="blogs.php"
                                class="btn btn-primary btn-lg rounded-pill px-5">

                                <i class="bi bi-arrow-left"></i>

                                Back to Blogs

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<!-- Related Articles -->

<section class="related-section py-5 bg-light">

    <div class="container">

        <h2 class="text-center fw-bold mb-5">

            Related Articles

        </h2>

        <div class="row">

            <?php

            $related = mysqli_query(
                $conn,
                "SELECT * FROM articles
WHERE id!='$id'
ORDER BY RAND()
LIMIT 3"
            );

            while ($r = mysqli_fetch_assoc($related)) {

            ?>

                <div class="col-lg-4 mb-4">

                    <div class="related-card">

                        <img
                            src="admin/uploads/<?php echo $r['image']; ?>"
                            class="img-fluid">

                        <div class="p-4">

                            <h5>

                                <?php echo htmlspecialchars($r['title']); ?>

                            </h5>

                            <p>

                                <?php

                                echo substr(strip_tags($r['content']), 0, 100);

                                ?>...

                            </p>

                            <a
                                href="blog.php?id=<?php echo $r['id']; ?>"
                                class="btn btn-outline-primary">

                                Read More

                            </a>

                        </div>

                    </div>

                </div>

            <?php } ?>

        </div>

    </div>

</section>

<style>
    .blog-single {

        background: #f7f9fc;

    }

    .blog-wrapper {

        background: #fff;

        border-radius: 20px;

        overflow: hidden;

        box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

    }

    .blog-image {

        width: 100%;

        height: 500px;

        object-fit: cover;

    }

    .blog-body {

        padding: 45px;

    }

    .blog-meta {

        display: flex;

        gap: 25px;

        margin-bottom: 20px;

        font-size: 15px;

        color: #666;

    }

    .blog-meta i {

        color: #0d6efd;

        margin-right: 5px;

    }

    .blog-title {

        font-size: 42px;

        font-weight: 700;

        margin-bottom: 30px;

        line-height: 1.4;

    }

    .blog-content {

        font-size: 18px;

        line-height: 2;

        color: #444;

    }

    .blog-content img {

        max-width: 100%;

        height: auto;

        border-radius: 10px;

        margin: 20px 0;

    }

    .blog-content h2,
    .blog-content h3 {

        margin-top: 30px;

        margin-bottom: 15px;

        font-weight: 700;

    }

    .blog-content p {

        margin-bottom: 18px;

    }

    .related-card {

        background: #fff;

        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .3s;

        height: 100%;

    }

    .related-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 20px 35px rgba(0, 0, 0, .15);

    }

    .related-card img {

        width: 100%;

        height: 220px;

        object-fit: cover;

    }

    .related-card h5 {

        font-weight: 700;

        margin-bottom: 15px;

    }

    .related-card p {

        color: #666;

    }

    @media(max-width:768px) {

        .blog-image {

            height: 250px;

        }

        .blog-title {

            font-size: 30px;

        }

        .blog-body {

            padding: 25px;

        }

        .blog-meta {

            flex-direction: column;

            gap: 8px;

        }

        .blog-content {

            font-size: 16px;

            line-height: 1.9;

        }

    }
</style>

<?php include 'includes/footer.php'; ?>