<?php

include 'includes/header.php';

$slug = mysqli_real_escape_string(
    $conn,
    $_GET['slug'] ?? ''
);

$result = mysqli_query(
    $conn,
    "SELECT
        a.*,
        c.name AS category_name,
        c.slug AS category_slug,
        t.name AS author_name

    FROM articles a

    LEFT JOIN categories c
        ON a.category_id = c.id

    LEFT JOIN team_members t
        ON a.author_id = t.id

    WHERE a.slug='$slug'

    LIMIT 1"
);

$currentArticle = mysqli_fetch_assoc($result);

if (!$currentArticle) {

    header("Location:index.php");
    exit;
}

$latestNews = [];

$result = mysqli_query(
    $conn,
    "SELECT *
    FROM articles
    ORDER BY created_at DESC
    LIMIT 5"
);

while ($row = mysqli_fetch_assoc($result)) {

    $latestNews[] = $row;
}

$relatedArticles = [];

$result = mysqli_query(
    $conn,
    "SELECT
        a.*,
        c.name AS category_name,
        c.slug AS category_slug

    FROM articles a

    LEFT JOIN categories c
        ON a.category_id = c.id

    WHERE a.category_id='" . $currentArticle['category_id'] . "'
    AND a.id!='" . $currentArticle['id'] . "'

    ORDER BY a.created_at DESC

    LIMIT 6"
);

while ($row = mysqli_fetch_assoc($result)) {

    $relatedArticles[] = $row;
}

$categoryCounts = [];

$countResult = mysqli_query(
    $conn,
    "SELECT
        c.slug,
        COUNT(a.id) AS total

    FROM categories c

    LEFT JOIN articles a
        ON a.category_id = c.id

    GROUP BY c.id"
);

while ($row = mysqli_fetch_assoc($countResult)) {

    $categoryCounts[$row['slug']] = $row['total'];
}

$pageTitle = $currentArticle ? $currentArticle['title'] : 'खबर';

?>


<!-- =========================================
     ARTICLE HERO SECTION START
========================================= -->

<section class="article-hero-section">

    <img src="admin/uploads/articles/<?php echo $currentArticle['image']; ?>">

    <div class="article-hero-overlay"></div>

    <div class="container">

        <div class="article-hero-content">

            <!-- BREADCRUMB -->
            <div class="article-breadcrumb">

                <a href="index.php">होम</a>

                <span>/</span>

                <a href="category.php?slug=<?php echo $currentArticle['category_slug']; ?>">

                    <?php echo $currentArticle['category_name']; ?>

                </a>

                <span>/</span>

                <span>खबर</span>

            </div>

            <!-- CATEGORY -->
            <span class="article-category">

                <?php echo $currentArticle['category_name']; ?>

            </span>

            <!-- TITLE -->
            <h1 class="article-main-title">

                <?php echo $currentArticle['title']; ?>

            </h1>

            <!-- META -->
            <div class="article-meta">

                <div class="article-meta">

                    <div>

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

                        <?php echo date(
                            'd M Y',
                            strtotime(
                                $currentArticle['created_at']
                            )
                        ); ?>

                    </div>

                    <div>

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

                        <?php echo $currentArticle['author_name']; ?>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<!-- =========================================
     ARTICLE CONTENT SECTION START
========================================= -->

<section class="article-page-section">

    <div class="container">

        <div class="row g-4">

            <!-- LEFT CONTENT -->
            <div class="col-lg-8">

                <div class="article-content-box">

                    <!-- HIGHLIGHT -->
                    <div class="article-highlight">

                        <?php echo $currentArticle['excerpt']; ?>

                    </div>

                    <!-- ARTICLE CONTENT -->
                    <div class="article-content">

                        <p>

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

                        </p>

                    </div>

                    <!-- TAGS -->
                    <div class="article-tags">

                        <strong>🏷 टैग:</strong>

                        <a href="#">

                            <?php echo $currentArticle['category_name']; ?>

                        </a>

                        <a href="#">
                            खबर
                        </a>

                        <a href="#">
                            अपडेट
                        </a>

                    </div>

                    <!-- SHARE -->
                    <div class="article-share">

                        <strong>📡 शेयर करें:</strong>

                        <a href="https://wa.me/?text=<?php echo urlencode($currentArticle['title']); ?>"

                            class="whatsapp-share"
                            target="_blank">
                            <i class="bi bi-whatsapp"></i>
                            WhatsApp
                        </a>

                    </div>

                </div>

            </div>

            <!-- SIDEBAR -->
            <div class="col-lg-4">

                <!-- LATEST NEWS -->
                <div class="sidebar-box">

                    <h3 class="sidebar-title">
                        ताजा खबरें
                    </h3>

                    <!-- ITEM -->
                    <?php foreach ($latestNews as $article): ?>

                        <?php if ($article['slug'] != $currentArticle['slug']): ?>

                            <div class="sidebar-news-item">

                                <div class="sidebar-news-image">

                                    <img src="admin/uploads/articles/<?php echo $article['image']; ?>">

                                </div>

                                <div class="sidebar-news-content">

                                    <a href="article.php?slug=<?php echo $article['slug']; ?>">

                                        <h4>

                                            <?php echo $article['title']; ?>

                                        </h4>

                                    </a>

                                    <span>

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

                                        <?php
                                        echo date(
                                            'd M Y',
                                            strtotime($article['created_at'])
                                        );
                                        ?>

                                    </span>

                                </div>

                            </div>

                        <?php endif; ?>

                    <?php endforeach; ?>

                </div>

                <!-- CATEGORIES -->
                <div class="sidebar-box">

                    <h3 class="sidebar-title">
                        श्रेणियाँ
                    </h3>

                    <ul class="category-sidebar-list">

                        <?php $colors = ['pink', 'orange', 'blue', 'green', 'purple', 'orange-dark', 'cyan', 'pink-light', 'red', 'health']; ?>

                        <?php
                        foreach ($categories as $index => $category):
                            $color = $colors[$index % count($colors)];
                        ?>
                            <li>

                                <a href="category.php?slug=<?php echo $category['slug']; ?>">

                                    <div>

                                        <span class="cat-icon <?php echo $color; ?>-bg">

                                            <i class="bi <?php echo $category['icon']; ?>"></i>

                                        </span>

                                        <?php echo $category['name']; ?>

                                    </div>

                                    <span class="cat-count">

                                        <?php

                                        echo $categoryCounts[$category['slug']] ?? 0;

                                        ?>

                                    </span>

                                </a>

                            </li>

                        <?php endforeach; ?>

                    </ul>

                </div>

                <!-- WHATSAPP -->
                <div class="sidebar-whatsapp">

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

                    <h4>

                        WhatsApp पर जुड़ें

                    </h4>

                    <p>

                        अजमेर और राजस्थान की हर बड़ी खबर सबसे पहले पाने के लिए हमारे WhatsApp चैनल से जुड़ें।

                    </p>

                    <a href="https://wa.me/<?php echo $contactDetails[5]['subtitle'] ?? ''; ?>" target="_blank" rel="noopener">
                        Join Channel
                    </a>

                </div>

            </div>

        </div>

    </div>

</section>

<!-- =========================================
     RELATED NEWS SECTION START
========================================= -->

<section class="related-news-section">

    <div class="container">

        <!-- TITLE -->
        <h2 class="section-title">
            <span></span>
            संबंधित खबरें
        </h2>

        <div class="row g-4">

            <!-- CARD -->
            <?php foreach ($relatedArticles as $article): ?>

                <div class="col-lg-4 col-md-6">

                    <div class="related-news-card">

                        <div class="related-news-image">

                            <img src="admin/uploads/articles/<?php echo $article['image']; ?>" alt="">

                        </div>

                        <div class="related-news-content">

                            <span class="related-tag">

                                <?php echo $article['category_name']; ?>

                            </span>

                            <a href="article.php?slug=<?php echo $article['slug']; ?>">

                                <h3>

                                    <?php echo $article['title']; ?>

                                </h3>

                            </a>

                            <div class="related-time">

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

                                <?php echo date(
                                    'd M Y',
                                    strtotime($article['created_at'])
                                ); ?>

                            </div>

                        </div>

                    </div>

                </div>

            <?php endforeach; ?>

        </div>

    </div>

</section>

<style>
    body {
        background: #f3f4f6;
    }

    /* =========================================
       HERO SECTION
    ========================================= */

    .article-hero-section {
        position: relative;
        height: 500px;
        overflow: hidden;
    }

    .article-hero-section img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .article-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.92),
                rgba(0, 0, 0, 0.35),
                rgba(0, 0, 0, 0.1));
    }

    .article-hero-content {
        position: absolute;
        bottom: 60px;
        z-index: 2;
        max-width: 850px;
    }

    .article-breadcrumb {
        margin-bottom: 18px;
        color: #fff;
        font-size: 14px;
    }

    .article-breadcrumb a {
        color: #fff;
        text-decoration: none;
    }

    .article-breadcrumb span {
        margin: 0 6px;
    }

    .article-category {
        display: inline-block;
        background: #e11d48;
        color: #fff;
        padding: 7px 18px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .article-main-title {
        color: #fff;
        font-size: 48px;
        font-weight: 800;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        color: #dbe4ee;
        font-size: 14px;
    }

    .article-meta i {
        margin-right: 7px;
    }

    /* =========================================
       ARTICLE SECTION
    ========================================= */

    .article-page-section {
        padding: 70px 0;
    }

    .article-content-box {
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    }

    .article-highlight {
        background: #fff3f5;
        border-left: 4px solid #e11d48;
        padding: 22px;
        border-radius: 10px;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.8;
        margin-bottom: 35px;
        color: #111827;
    }

    .article-content p {
        font-size: 18px;
        line-height: 2;
        color: #374151;
        margin-bottom: 25px;
    }

    /* TAGS */

    .article-tags {
        margin-top: 35px;
        padding-top: 25px;
        border-top: 1px solid #e5e7eb;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .article-tags a {
        background: #f3f4f6;
        color: #111827;
        padding: 7px 15px;
        border-radius: 30px;
        font-size: 13px;
        text-decoration: none;
        font-weight: 600;
    }

    /* SHARE */

    .article-share {
        margin-top: 30px;
        padding-top: 25px;
        border-top: 1px solid #e5e7eb;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .article-share a {
        padding: 10px 18px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
    }

    .whatsapp-share {
        background: #25D366;
    }

    /* =========================================
       SIDEBAR
    ========================================= */

    .sidebar-box {
        background: #fff;
        border-radius: 18px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    }

    .sidebar-title {
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 25px;
        padding-bottom: 12px;
        border-bottom: 2px solid #f1f5f9;
        position: relative;
    }

    .sidebar-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 70px;
        height: 2px;
        background: #e11d48;
    }

    .sidebar-news-item {
        display: flex;
        gap: 14px;
        padding-bottom: 18px;
        margin-bottom: 18px;
        border-bottom: 1px solid #ececec;
    }

    .sidebar-news-image {
        width: 95px;
        min-width: 95px;
        height: 75px;
        border-radius: 10px;
        overflow: hidden;
    }

    .sidebar-news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sidebar-news-content h4 {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
        margin-bottom: 8px;
        color: #111827;
    }

    .sidebar-news-content span {
        color: #94a3b8;
        font-size: 12px;
    }

    /* CATEGORY LIST */

    .category-sidebar-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .category-sidebar-list li {
        margin-bottom: 14px;
    }

    .category-sidebar-list a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        color: #111827;
        font-weight: 600;
    }

    .cat-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-right: 10px;
        font-size: 14px;
    }

    .cat-count {
        background: #f3f4f6;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .pink-bg {
        background: #e11d48;
    }

    .orange-bg {
        background: #f59e0b;
    }

    .blue-bg {
        background: #3b82f6;
    }

    .green-bg {
        background: #10b981;
    }

    .purple-bg {
        background: #8b5cf6;
    }

    .orange-dark-bg {
        background: #f97316;
    }

    .cyan-bg {
        background: #06b6d4;
    }

    .pink-light-bg {
        background: #ec4899;
    }

    .red-bg {
        background: #dc2626;
    }

    .health-bg {
        background: #16a34a;
    }

    /* WHATSAPP */

    .sidebar-whatsapp {
        background: linear-gradient(180deg, #22c55e, #10b981);
        border-radius: 18px;
        padding: 40px 25px;
        text-align: center;
        color: #fff;
    }

    .sidebar-whatsapp i {
        font-size: 46px;
        margin-bottom: 15px;
    }

    .sidebar-whatsapp h4 {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .sidebar-whatsapp p {
        opacity: 0.9;
        margin-bottom: 25px;
    }

    .sidebar-whatsapp a {
        background: #fff;
        color: #111827;
        text-decoration: none;
        padding: 12px 24px;
        border-radius: 30px;
        font-weight: 700;
        font-size: 14px;
        display: inline-block;
    }

    /* =========================================
       RELATED NEWS
    ========================================= */

    .related-news-section {
        padding: 20px 0 80px;
    }

    .related-news-card {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        transition: 0.35s;
        height: 100%;
    }

    .related-news-card:hover {
        transform: translateY(-5px);
    }

    .related-news-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .related-news-content {
        padding: 22px;
    }

    .related-tag {
        display: inline-block;
        color: #e11d48;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .related-news-content h3 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.7;
        color: #111827;
        margin-bottom: 15px;
    }

    .related-time {
        color: #94a3b8;
        font-size: 13px;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */

    @media(max-width:991px) {

        .article-hero-section {
            height: 420px;
        }

        .article-main-title {
            font-size: 38px;
        }

        .sidebar-box,
        .sidebar-whatsapp {
            margin-top: 20px;
        }
    }

    @media(max-width:576px) {

        .article-hero-section {
            height: 380px;
        }

        .article-hero-content {
            bottom: 35px;
        }

        .article-main-title {
            font-size: 28px;
        }

        .article-meta {
            gap: 12px;
            font-size: 12px;
        }

        .article-page-section {
            padding: 45px 0;
        }

        .article-content-box {
            padding: 25px;
        }

        .article-highlight {
            font-size: 18px;
            padding: 18px;
        }

        .article-content p {
            font-size: 16px;
            line-height: 1.9;
        }

        .related-news-section {
            padding-bottom: 50px;
        }

        .related-news-image img {
            height: 200px;
        }

        .related-news-content h3 {
            font-size: 17px;
        }
    }
</style>



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