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

$slug = $_GET['slug'] ?? 'sabhi';

if ($slug == 'sabhi') {

    $currentCategory = [
        'name' => 'सभी खबरें',
        'icon' => 'bi-grid-fill'
    ];
} else {

    $currentCategory = null;

    foreach ($categories as $category) {

        if ($category['slug'] == $slug) {

            $currentCategory = $category;
        }
    }

    if (!$currentCategory) {

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

$articles = [];

if ($slug == 'sabhi') {

    $sql = "
    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

    ORDER BY a.created_at DESC
    ";
} else {

    $sql = "
    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 c.slug='$slug'

    ORDER BY a.created_at DESC
    ";
}

$result = mysqli_query($conn, $sql);

while ($row = mysqli_fetch_assoc($result)) {
    $articles[] = $row;
}


$pageTitle = $currentCategory ? $currentCategory['name'] : 'श्रेणी';

$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'];
}


$latestNews = [];

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

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

    $latestNews[] = $row;
}





?>


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

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

    <div class="container">

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

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

            <span>/</span>

            <span>

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

            </span>

        </div>

        <!-- HERO CONTENT -->
        <div class="category-hero-content">

            <!-- ICON -->
            <div class="category-hero-icon">
                <i class="bi <?php echo $currentCategory['icon']; ?>"></i>
            </div>

            <!-- TEXT -->
            <div class="category-hero-text">

                <h1>

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

                </h1>

                <p>

                    <?php #echo $currentCategory['name']; 
                    ?>

                    <?php
                    if ($slug == 'sabhi') {
                        echo "ताजा और विश्वसनीय खबरें";
                    } else {
                        echo $currentCategory['name'];
                        echo " की हर छोटी-बड़ी खबर";
                    }
                    ?>


                </p>

                <div class="category-meta">

                    <span>
                        <i class="bi bi-file-earmark-text"></i>

                        <?php echo count($articles); ?>

                        खबरें
                    </span>

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

                        अंतिम अपडेट:

                        <?php
                        if (!empty($articles)) {
                            echo date(
                                'd M Y',
                                strtotime($articles[0]['created_at'])
                            );
                        }
                        ?>
                    </span>

                </div>

            </div>

        </div>

    </div>

</section>

<!-- =========================================
     CATEGORY NAVIGATION
========================================= -->

<section class="category-nav-section">

    <div class="container">

        <div class="category-nav-wrapper">

            <strong>श्रेणियाँ:</strong>

            <a href="category.php" class="<?php if ($slug == 'sabhi') echo 'active-cat'; ?>">सभी</a>

            <?php foreach ($categories as $category): ?>

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

                    class="<?php if ($slug == $category['slug']) echo 'active-cat'; ?>">

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

                </a>

            <?php endforeach; ?>

        </div>

    </div>

</section>

<!-- =========================================
     CATEGORY PAGE CONTENT START
========================================= -->

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

    <div class="container">

        <div class="row g-4">

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

                <div class="row g-4">

                    <?php foreach ($articles as $article): ?>

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

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

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

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

                                </div>

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

                                    <span class="news-label">

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

                                    </span>

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

                                        <h3>

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

                                        </h3>

                                    </a>

                                    <p>

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

                                    </p>

                                    <div class="category-news-meta">

                                        <span>

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

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

                                        </span>

                                        <span>

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

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

                                        </span>

                                    </div>

                                </div>

                            </div>

                        </div>


                    <?php endforeach; ?>

                </div>

            </div>

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

                <!-- CATEGORY BOX -->
                <div class="category-sidebar-box">

                    <h3 class="sidebar-heading">
                        सभी श्रेणियां
                    </h3>

                    <ul class="sidebar-category-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 class="<?php if ($slug == $category['slug']) echo 'active-sidebar-cat'; ?>">

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

                                    <div>

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

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

                                        </span>

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

                                    </div>

                                    <span class="sidebar-count">

                                        <?php

                                        $total = 0;

                                        foreach ($articles as $article) {

                                            if ($article['category_slug'] == $category['slug']) {

                                                $total++;
                                            }
                                        }

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

                                        ?>

                                    </span>

                                </a>

                            </li>

                        <?php endforeach; ?>

                    </ul>

                </div>

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

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

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

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

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

                            <div>

                                <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 endforeach; ?>

                </div>

                <!-- SOCIAL BOX -->
                <div class="follow-social-box">

                    <h3>
                        हमें फॉलो करें
                    </h3>

                    <div class="social-follow-icons">

                        <a href="<?php echo $contactDetails[7]['subtitle'] ?? ''; ?>" class="facebook-bg" target="_blank" rel="noopener">
                            <i class="bi bi-facebook"></i>
                        </a>

                        <a href="<?php echo $contactDetails[8]['subtitle'] ?? ''; ?>" class="instagram-bg" target="_blank" rel="noopener">
                            <i class="bi bi-instagram"></i>
                        </a>

                        <a href="<?php echo $contactDetails[6]['subtitle'] ?? ''; ?>" class="youtube-bg" target="_blank" rel="noopener">
                            <i class="bi bi-youtube"></i>
                        </a>

                        <a href="https://wa.me/<?php echo $contactDetails[5]['subtitle'] ?? ''; ?>" class="whatsapp-bg" target="_blank" rel="noopener">
                            <i class="bi bi-whatsapp"></i>
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<style>
    body {
        background: #f3f4f6;
    }

    /* =========================================
       CATEGORY HERO
    ========================================= */

    .category-hero-section {
        padding: 40px 0;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
    }

    .category-breadcrumb {
        margin-bottom: 30px;
        font-size: 14px;
        color: #64748b;
    }

    .category-breadcrumb a {
        text-decoration: none;
        color: #e11d48;
    }

    .category-breadcrumb span {
        margin: 0 5px;
    }

    .category-hero-content {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .category-hero-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        background: #e11d48;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 32px;
    }

    .category-hero-text h1 {
        font-size: 54px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 10px;
    }

    .category-hero-text p {
        color: #64748b;
        font-size: 17px;
        margin-bottom: 12px;
    }

    .category-meta {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        color: #64748b;
        font-size: 14px;
    }

    /* =========================================
       CATEGORY NAV
    ========================================= */

    .category-nav-section {
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 20px 0;
    }

    .category-nav-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .category-nav-wrapper strong {
        color: #475569;
    }

    .category-nav-wrapper a {
        padding: 10px 18px;
        border: 1px solid #dbe2ea;
        border-radius: 30px;
        text-decoration: none;
        color: #111827;
        font-size: 14px;
        font-weight: 600;
        transition: 0.3s;
    }

    .category-nav-wrapper a:hover,
    .active-cat {
        background: #e11d48;
        color: #fff !important;
        border-color: #e11d48 !important;
    }

    /* =========================================
       PAGE SECTION
    ========================================= */

    .category-page-section {
        padding: 50px 0 80px;
    }

    /* NEWS CARD */

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

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

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

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

    .news-label {
        display: inline-block;
        background: #e11d48;
        color: #fff;
        padding: 6px 16px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 16px;
    }

    .category-news-content h3 {
        font-size: 29px;
        font-weight: 800;
        line-height: 1.5;
        color: #111827;
        margin-bottom: 15px;
    }

    .category-news-content p {
        color: #64748b;
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 18px;
    }

    .category-news-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        color: #94a3b8;
        font-size: 13px;
    }

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

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

    .sidebar-heading {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 25px;
        position: relative;
        padding-bottom: 14px;
    }

    .sidebar-heading::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 60px;
        height: 3px;
        background: #e11d48;
        border-radius: 10px;
    }

    /* CATEGORY LIST */

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

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

    .sidebar-category-list li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 14px 15px;
        border-radius: 14px;
        text-decoration: none;
        color: #111827;
        font-weight: 600;
        transition: 0.3s;
    }

    .active-sidebar-cat a {
        background: #fff3f5 !important;
    }

    .sidebar-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-right: 12px;
        font-size: 15px;
    }

    .sidebar-count {
        background: #f1f5f9;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #64748b;
    }

    /* COLORS */

    .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;
    }

    /* LATEST NEWS */

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

    .latest-sidebar-news img {
        width: 90px;
        height: 70px;
        border-radius: 10px;
        object-fit: cover;
    }

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

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

    /* SOCIAL */

    .follow-social-box {
        background: #fff;
        border-radius: 20px;
        padding: 35px 25px;
        text-align: center;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    }

    .follow-social-box h3 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 28px;
    }

    .social-follow-icons {
        display: flex;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .social-follow-icons a {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 20px;
        transition: 0.3s;
    }

    .social-follow-icons a:hover {
        transform: translateY(-4px);
    }

    .facebook-bg {
        background: #1877f2;
    }

    .instagram-bg {
        background: #e1306c;
    }

    .youtube-bg {
        background: #ff0000;
    }

    .twitter-bg {
        background: #000;
    }

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

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

    @media(max-width:991px) {

        .category-hero-text h1 {
            font-size: 40px;
        }

        .category-news-content h3 {
            font-size: 23px;
        }
    }

    @media(max-width:576px) {

        .category-hero-content {
            flex-direction: column;
            align-items: flex-start;
        }

        .category-hero-text h1 {
            font-size: 32px;
        }

        .category-news-image img {
            height: 220px;
        }

        .category-news-content {
            padding: 18px;
        }

        .category-news-content h3 {
            font-size: 20px;
        }

        .sidebar-heading {
            font-size: 24px;
        }

        .follow-social-box h3 {
            font-size: 24px;
        }
    }
</style>


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