@extends('front.layouts.app')

@section('content')
    <style>
        /*this css code is for the trending part of the blog main page */
        /* Trending label */
        /* body {
            font-family: 'Rubik', sans-serif;
        } */

        .trending-label {
            background-color: #d6002f;
            color: #fff;
            font-weight: 600;
            padding: 5px 10px;
            font-size: 0.85rem;
            border-radius: 3px;
            display: inline-block;
            margin-bottom: 15px;
        }

        /* Blog Card */
        .blog-card {
            position: relative;
            overflow: hidden;
            border-radius: 0;
            /* perfect square */
        }

        /* Blog Images */
        .blog-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;
            /* remove rounded corners */
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        /* Hover effect on image */
        .blog-card:hover img {
            transform: scale(1.05);
            filter: brightness(0.7);
        }

        /* Dark overlay on image */
        .blog-card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.35);
            pointer-events: none;
            z-index: 1;
            /* below the text */
        }

        /* Overlay text */
        .blog-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            color: #fff;
            /* pure white */
            font-family: Arial, sans-serif;
            /* unified font */
            z-index: 2;
            /* above overlay */
        }

        /* Title (make it prominent and bold) */
        .blog-overlay h5 {
            margin: 0 0 5px;
            font-size: 1.3rem;
            /* bigger for heading feel */
            font-weight: 700;
            /* bold */
            line-height: 1.2;
            color: #fff;
            /* ensure pure white */
        }

        /* Category and Date (slightly bold) */
        .blog-overlay small {
            font-size: 0.85rem;
            /* slightly smaller */
            font-weight: 500;
            /* medium bold */
            display: block;
            /* ensure each is on a separate line if needed */
            color: #fff;
            /* ensure pure white */
        }

        /* Slight gap between columns */
        .row.g-1 {
            --bs-gutter-x: 4px;
            /* horizontal gap */
            --bs-gutter-y: 4px;
            /* vertical gap */
        }

        /*end of css code for trending block*/



        .section-title {
            font-size: 1.1rem;
            letter-spacing: 1px;
        }

        .red-line {
            height: 5px;
            background-color: #d6002f;
        }

        .blue-line {
            height: 5px;
            background-color: #023b7e;
        }

        .featured-post img {
            height: 350px;
            object-fit: cover;
        }

        .small-post img {
            width: 100px;
            height: 80px;
            object-fit: cover;
        }

        .category {
            font-size: 0.8rem;
            font-weight: 600;
            color: #888;
            letter-spacing: 1px;
        }

        .rounded-circle {
            object-fit: cover;
        }


        /*social icons styling*/
        .social-box {
            background: #f8f9fa;
            padding: 15px 5px;
            border-radius: 6px;
            transition: 0.3s ease;
        }

        .social-box i {
            font-size: 22px;
        }

        .social-box h6 {
            font-weight: 700;
        }

        .social-box small {
            color: #666;
            font-size: 0.75rem;
        }

        /* Brand colors */
        .facebook i {
            color: #1877f2;
        }

        .instagram i {
            color: #e1306c;
        }

        .youtube i {
            color: #ff0000;
        }

        /* Hover effect */
        .social-box:hover {
            background: #ffffff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        /* this css is for Academic section */
        .featured-post img {
            height: 300px;
            object-fit: cover;
        }

        .small-post img {
            width: 130px;
            height: 90px;
            object-fit: cover;
        }

        .small-post h6 {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        /* css for academic */

        .image-card {
            position: relative;
            overflow: hidden;
        }

        .image-card img {
            width: 100%;
            height: 320px;
            object-fit: cover;
            display: block;
        }

        /* Dark Gradient Overlay */
        .image-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2));
        }

        /* Text Overlay */
        .overlay {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            z-index: 2;
            color: #ffffff;
            /* PURE WHITE */
        }

        .overlay .category {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
        }

        .overlay h5 {
            font-weight: 800;
            /* EXTRA BOLD */
            font-size: 18px;
            line-height: 1.3;
            margin: 0;
            */
        }


        /*-------------------------Css for featured and random */
        .big-post img {
            height: 260px;
            object-fit: cover;
        }

        .small-post img {
            width: 110px;
            height: 80px;
            object-fit: cover;
        }

        .small-post h6 {
            font-size: 15px;
            line-height: 1.3;
        }

        .category {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        /*-----------------------css for student life---------------------*/
        .horizontal-blog {
            align-items: stretch;
        }

        /* Image Styling */
        .blog-img img {
            width: 260px;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        /* Content area takes remaining space */
        .blog-content {
            flex: 1;
        }

        /* Title */
        .blog-content h5 {
            font-size: 20px;
            line-height: 1.3;
        }

        /* Category + Date */
        .meta {
            font-size: 13px;
            font-weight: 600;
        }

        .meta .category {
            color: #c40000;
            text-transform: uppercase;
        }

        .meta .date {
            color: #666;
        }

        /* Summary limited to image height */
        .summary {
            font-size: 14px;
            color: #555;
            line-height: 1.5;

            display: -webkit-box;
            -webkit-line-clamp: 4;
            /* controls lines */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ----------------------------styling for latest paraller to student life content or in the same box--------*/
        .vertical-blog img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        /* Title */
        .vertical-blog h5 {
            font-size: 18px;
            line-height: 1.3;
        }

        /* Category + Date */
        .meta {
            font-size: 13px;
            font-weight: 600;
        }

        .meta .category {
            color: #c40000;
            text-transform: uppercase;
        }

        .meta .date {
            color: #666;
        }

        /* Summary */
        .summary {
            font-size: 14px;
            color: #555;
            line-height: 1.5;

            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* adjust lines */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Optional clean separation */
        .vertical-blog {
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        /*--------------------styling for youtube videos contents----------------*/
        .main-video iframe {
            border-radius: 8px;
        }

        /* Scrollable container */
        .video-list {
            max-height: 400px;
            /* Same as iframe height */
            overflow-y: auto;
            padding-right: 5px;
        }

        /* Individual video item */
        .video-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            cursor: pointer;
        }

        .video-item img {
            width: 120px;
            height: 80px;
            object-fit: cover;
        }

        .video-item p {
            font-size: 14px;
            font-weight: 600;
            margin: 0;
        }

        .video-item:hover {
            background: #f5f5f5;
        }

        /* ----------------------styling for latest articles and must read----------*/
        .blog-image img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .blog-category {
            font-size: 13px;
            color: #666;
            margin-bottom: 4px;
        }

        .blog-title {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 4px;
        }

        .blog-date {
            font-size: 13px;
            color: #999;
        }

        /* css for the most popular rounded images */
        .popular-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
        }

        /* -------------this styling is for the pagination links in the latest articles section------------*/
        /* Ensure pagination links are vertically centered */
        .pagination {
            display: flex;
            align-items: center;
            /* vertically center numbers and arrows */
            gap: 0.25rem;
            /* small spacing between numbers */
        }

        .pagination .page-link {
            display: flex;
            align-items: center;
            /* center text inside the link */
            justify-content: center;
            line-height: 1.2;
            /* consistent height */
            min-width: 40px;
            /* ensures all numbers have same width */
            height: 40px;
            /* uniform height for pills/buttons */
            border-radius: 0.25rem;
            color: #023b7e;
            transition: background 0.3s, color 0.3s;
        }

        .pagination .page-link:hover {
            color: #fff;
            background-color: #023b7e;
            border-color: #023b7e;
        }

        .pagination .page-item.active .page-link {
            background-color: #023b7e;
            color: #fff;
            border-color: #023b7e;
        }

        /* this css styling is for the headless blogs and for hovering */
        .image-card {
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .image-card img {
            width: 100%;
            transition: transform 0.4s ease;
        }

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

        .image-card:hover img {
            transform: scale(1.05);
        }
    </style>
    <!-- Start of Trending block -->
    @if ($trendingPosts->isNotEmpty())
        <div class="container py-5">
            <!-- Label -->
            <span class="trending-label">TRENDING NOW</span>

            <!-- Blogs -->
            <div class="row g-1">

                @php $first = $trendingPosts->first(); @endphp

                <!-- First Column (BIG POST) -->
                <div class="col-md-6">
                    <a href="{{ route('blog.details-show', $first->id) }}" style="text-decoration:none; color:inherit;">
                        <div class="blog-card" style="height:100%;">
                            <img src="{{ asset('storage/blog-images/featured/' . ($first->featured_image ?? '')) }}"
                                alt="{{ $first->title }}">
                            <div class="blog-overlay">
                                <small>{{ $first->category->name ?? 'Uncategorized' }}</small>
                                <h5>{{ $first->title }}</h5>
                                <small>{{ $first->published_at?->format('M d, Y | h:i A') }}</small>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Second Column -->
                <div class="col-md-3 d-flex flex-column gap-3">
                    @foreach ($trendingPosts->skip(1)->take(2) as $post)
                        <a href="{{ route('blog.details-show', $post->id) }}"
                            style="text-decoration:none; color:inherit; display:flex; flex:1;">
                            <div class="blog-card" style="height:100%; width:100%;">
                                <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                    alt="{{ $post->title }}">
                                <div class="blog-overlay">
                                    <small>{{ $post->category->name ?? 'Uncategorized' }}</small>
                                    <h5>{{ $post->title }}</h5>
                                    <small>{{ $post->published_at?->format('M d, Y | h:i A') }}</small>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
                <!-- Third Column -->
                <div class="col-md-3 d-flex flex-column gap-3">
                    @foreach ($trendingPosts->skip(3)->take(2) as $post)
                        <a href="{{ route('blog.details-show', $post->id) }}"
                            style="text-decoration:none; color:inherit; display:flex; flex:1;">
                            <div class="blog-card" style="height:100%; width:100%;">
                                <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                    alt="{{ $post->title }}">
                                <div class="blog-overlay">
                                    <small>{{ $post->category->name ?? 'Uncategorized' }}</small>
                                    <h5>{{ $post->title }}</h5>
                                    <small>{{ $post->published_at?->format('M d, Y | h:i A') }}</small>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

            </div>
        </div>
    @endif
    <!-- End of Trending block -->


    <div class="container py-4">
        <div class="row">
            <!-- LEFT SIDE (75%) -->
            <div class="col-lg-9">
                <!-- SECTION HEADER -->
                <div class="section-header d-flex align-items-center mb-4">
                    <h5 class="mb-0 fw-bold section-title">
                        UNIVERSITY OF RAWALPINDI
                    </h5>
                    <div class="flex-grow-1 ms-3 red-line"></div>
                </div>
                <div class="row">

                    <!-- Big Featured Post -->
                    <div class="col-md-7">
                        @if ($universityOfRawalpindiPosts->first())
                            @php $featured = $universityOfRawalpindiPosts->first(); @endphp

                            <div class="featured-post">
                                <img src="{{ asset('storage/blog-images/featured/' . ($featured->featured_image ?? '')) }}"
                                    class="img-fluid w-100" alt="">

                                <p class="category mt-1 mb-1">
                                    {{ strtoupper($featured->category->name ?? 'LIFE AT UOR') }}
                                </p>

                                <h5 class="fw-bold mb-1">
                                    <a href="{{ route('blog.details-show', $featured->id) }}" class="text-dark"
                                        style="text-decoration:none; transition:color 0.3s;"
                                        onmouseover="this.style.color='red'"
                                        onmouseout="this.style.color='black'
                                        ">
                                        {{ $featured->title }}
                                    </a>
                                </h5>

                                <p class="text-muted mb-1 small">
                                    {{ $featured->created_at->format('F d, Y') }}
                                </p>

                                <p class="text-muted mb-2 small">
                                    {{ Str::limit($featured->excerpt, 150) }}
                                </p>
                            </div>
                        @endif
                    </div>

                    <!-- Small Posts List -->
                    <div class="col-md-5">

                        @foreach ($universityOfRawalpindiPosts->skip(1) as $post)
                            <div class="d-flex mb-3 small-post">
                                <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                    alt="">
                                <div class="ms-3">
                                    <h6 class="fw-bold mb-1">
                                        <a href="{{ route('blog.details-show', $post->id) }}" class="text-dark"
                                            style="text-decoration: none; transition: color 0.3s;"
                                            onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
                                            {{ $post->title }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">
                                        {{ $post->created_at->format('F d, Y') }}
                                    </small>
                                </div>
                            </div>
                        @endforeach

                    </div>

                </div>
            </div>

            <!-- RIGHT SIDE (25%) -->
            <div class="col-lg-3">
                <div class="row text-center mb-4 g-2">

                    <div class="col-4">
                        <div class="social-box facebook">
                            <i class="bi bi-facebook"></i>
                            <h6 class="mb-0 mt-2">8,334</h6>
                            <small>Followers</small>
                        </div>
                    </div>

                    <div class="col-4">
                        <div class="social-box instagram">
                            <i class="bi bi-instagram"></i>
                            <h6 class="mb-0 mt-2">1,992</h6>
                            <small>Followers</small>
                        </div>
                    </div>

                    <div class="col-4">
                        <div class="social-box youtube">
                            <i class="bi bi-youtube"></i>
                            <h6 class="mb-0 mt-2">{{ $subscribers }}</h6>
                            <small>Subscribers</small>
                        </div>
                    </div>

                </div>

                <div class="section-header d-flex align-items-center mb-4">
                    <h5 class="mb-0 fw-bold section-title">MOST POPULAR</h5>
                    <div class="flex-grow-1 ms-2 red-line"></div>
                </div>

                @foreach ($mostPopular as $blog)
                    <div class="d-flex align-items-center mb-4">
                        <img src="{{ asset('storage/blog-images/featured/' . ($blog->featured_image ?? '')) }}"
                            class="popular-avatar">
                        <div class="ms-3">
                            <small class="text-muted">{{ $blog->category->name ?? '' }}</small>
                            <a href="{{ route('blog.details-show', $blog->id) }}" class="fw-semibold text-dark d-block"
                                style="text-decoration: none; transition: color 0.3s;" onmouseover="this.style.color='red'"
                                onmouseout="this.style.color='inherit'">
                                {{ $blog->title }}
                            </a>
                        </div>
                    </div>
                @endforeach

            </div>

            <div class="col-lg-9 mt-4">
                <!-- SECTION HEADER -->
                <div class="section-header d-flex align-items-center mb-4">
                    <h5 class="mb-0 fw-bold section-title">
                        ACADEMIC
                    </h5>
                    <div class="flex-grow-1 ms-3 red-line"></div>
                </div>
                <div class="row g-3">
                    @foreach ($academicPosts as $post)
                        <div class="col-md-4">
                            <a href="{{ route('blog.details-show', $post->id) }}"
                                style="text-decoration: none; cursor: pointer;">
                                <div class="position-relative">

                                    <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                        class="img-fluid w-100" alt="Blog Image">

                                    <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center"
                                        style="background: rgba(0,0,0,0.6);">

                                        <!-- Category -->
                                        <p class="mb-2 fw-bold text-white small">
                                            {{ strtoupper($post->category->name ?? 'ACADEMIC PROGRAMS') }}
                                        </p>

                                        <!-- Title -->
                                        <h6 class="mb-0 fw-bold text-white">
                                            {{ $post->title }}
                                        </h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="col-lg-9" style="margin-top: 50px;">

                <div class="row">

                    <!-- LEFT SIDE (50%) -->
                    <div class="col-md-6">
                        <!-- SECTION HEADER -->
                        <div class="section-header d-flex align-items-center mb-4">
                            <h5 class="mb-0 fw-bold section-title">
                                FEATURED
                            </h5>
                            <div class="flex-grow-1 ms-3 red-line"></div>
                        </div>
                        @if ($featuredBlogs->isNotEmpty())
                            <!-- BIG POST -->
                            @php $first = $featuredBlogs->first(); @endphp
                            <div class="big-post mb-4">
                                <img src="{{ asset('storage/blog-images/featured/' . ($first->featured_image ?? '')) }}"
                                    class="img-fluid w-100" alt="{{ $first->title }}">

                                <p class="category mb-1" style="margin-top: 0; cursor: pointer; transition: color 0.3s;"
                                    onmouseover="this.style.color='#023b7e'" onmouseout="this.style.color='inherit'">
                                    {{ $first->category->name ?? 'Uncategorized' }}
                                </p>

                                <a href="{{ route('blog.details-show', $first->id) }}"
                                    style="text-decoration: none; color: inherit;">
                                    <h6 class="fw-bold mb-1" style="cursor:pointer; transition:color 0.3s;"
                                        onmouseover="this.style.color='#023b7e'" onmouseout="this.style.color='inherit'">
                                        {{ $first->title }}
                                    </h6>
                                </a>

                                <p class="text-muted mb-1">{{ $first->published_at?->format('F d, Y') }}</p>
                                <p class="text-muted mb-0">
                                    {{ Str::limit($first->excerpt, 80) }}...
                                </p>
                            </div>

                            <!-- SMALL POSTS -->
                            @foreach ($featuredBlogs->skip(1) as $post)
                                <div class="d-flex mb-3 small-post">
                                    <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                        alt="{{ $post->title }}">
                                    <div class="ms-3">
                                        <a href="{{ route('blog.details-show', $post->id) }}"
                                            style="text-decoration: none; color: inherit;">
                                            <h6 class="fw-bold mb-1" style="cursor:pointer; transition:color 0.3s;"
                                                onmouseover="this.style.color='#023b7e'"
                                                onmouseout="this.style.color='inherit'">
                                                {{ $post->title }}
                                            </h6>
                                        </a>
                                        <small class="text-muted">{{ $post->published_at?->format('F d, Y') }}</small>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <!-- RIGHT SIDE (50%) -->
                    <div class="col-md-6">
                        <!-- SECTION HEADER -->
                        <div class="section-header d-flex align-items-center mb-4">
                            <h5 class="mb-0 fw-bold section-title">
                                RANDOM
                            </h5>
                            <div class="flex-grow-1 ms-3 blue-line"></div>
                        </div>
                        <!-- BIG POST -->
                        @php $firstPost = $randomPosts->first(); @endphp

                        @if ($firstPost)
                            <div class="big-post mb-4">
                                <img src="{{ asset('storage/blog-images/featured/' . ($firstPost->featured_image ?? '')) }}"
                                    class="img-fluid w-100" alt="">
                                <p class="category mb-1" style="margin-top:0; cursor:pointer; transition:color 0.3s;"
                                    onmouseover="this.style.color='#023b7e'" onmouseout="this.style.color='inherit'">
                                    {{ $firstPost->category->name }}
                                </p>
                                <a href="{{ route('blog.details-show', $firstPost->id) }}"
                                    style="text-decoration: none; color: inherit;">
                                    <h6 class="fw-bold mb-1" style="cursor:pointer; transition:color 0.3s;"
                                        onmouseover="this.style.color='#023b7e'" onmouseout="this.style.color='inherit'">
                                        {{ $firstPost->title }}
                                    </h6>
                                </a>
                                <p class="text-muted mb-1">
                                    {{ $firstPost->created_at->format('F d, Y') }}
                                </p>
                                <p class="text-muted mb-0">
                                    {{ Str::limit($firstPost->excerpt, 80) }}...
                                </p>
                            </div>
                        @endif
                        <!-- SMALL POSTS -->
                        @foreach ($randomPosts->skip(1) as $post)
                            <div class="d-flex mb-3 small-post">
                                <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                    alt="">

                                <div class="ms-3">
                                    <a href="{{ route('blog.details-show', $post->id) }}"
                                        style="text-decoration: none; color: inherit;">
                                        <h6 class="fw-bold mb-1" style="cursor:pointer; transition:color 0.3s;"
                                            onmouseover="this.style.color='#023b7e'"
                                            onmouseout="this.style.color='inherit'">
                                            {{ $post->title }}
                                        </h6>
                                    </a>

                                    <small class="text-muted">
                                        {{ $post->created_at->format('F d, Y') }}
                                    </small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- start of the pic boxes with no heading -->
    <div class="container py-4 mt-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="row">

                    @foreach ($postsOfDiffCategories as $post)
                        <!-- Blog Item -->
                        <div class="col-md-3">
                            <a href="{{ route('blog.details-show', $post->id) }}"
                                style="text-decoration:none; color:inherit;">

                                <div class="image-card">
                                    <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                        alt="{{ $post->title }}">

                                    <div class="overlay">
                                        <p class="category" style="color:white;">
                                            {{ $post->category->name ?? 'Uncategorized' }}
                                        </p>

                                        <h6 style="color:white;">
                                            {{ $post->title }}
                                        </h6>

                                        <small style="color:white;">
                                            {{ $post->published_at?->format('j F Y') }}
                                        </small>
                                    </div>
                                </div>

                            </a>
                        </div>
                    @endforeach

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

    <!-- start of the student life and latest contents -->
    <div class="container py-4">
        <div class="row">
            <div class="col-lg-8">
                <!-- SECTION HEADER -->
                <div class="section-header d-flex align-items-center mb-4">
                    <h5 class="mb-0 fw-bold section-title">
                        STUDENT LIFE
                    </h5>
                    <div class="flex-grow-1 ms-3 blue-line"></div>
                </div>
                @foreach ($studentLifePosts as $post)
                    <div class="horizontal-blog d-flex mb-4">
                        <div class="blog-img">
                            <img src="{{ asset('storage/blog-images/featured/' . ($post->featured_image ?? '')) }}"
                                alt="">
                        </div>
                        <div class="blog-content ms-4">
                            <h5 class="fw-bold mb-2">
                                <a href="{{ route('blog.details-show', $post->id) }}"
                                    style="text-decoration: none; color: inherit; transition: color 0.3s;"
                                    onmouseover="this.style.color='#023b7e'" onmouseout="this.style.color='inherit'">
                                    {{ $post->title }}
                                </a>
                            </h5>
                            <div class="meta mb-2">
                                <span class="category">
                                    {{ strtoupper($post->category->name ?? 'STUDENT LIFE') }}
                                </span>
                                <span class="date ms-3">
                                    {{ $post->created_at->format('F d, Y') }}
                                </span>
                            </div>
                            <p class="summary">
                                {{ Str::limit($post->excerpt, 150) }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="col-lg-4">
                <!-- SECTION HEADER -->
                <div class="section-header d-flex align-items-center mb-4">
                    <h5 class="mb-0 fw-bold section-title">
                        LATEST
                    </h5>
                    <div class="flex-grow-1 ms-3 red-line"></div>
                </div>
                <div class="vertical-blog mb-4">
                    <!-- Image -->
                    <div class="blog-img">
                        <img src="{{ asset('storage/blog-images/featured/' . $latest->featured_image) }}" alt="">
                    </div>
                    <!-- Content Below Image -->
                    <div class="blog-content mt-3">
                        <h5 class="fw-bold mb-2">
                            <a href="{{ route('blog.details-show', $latest->id) }}"
                                style="text-decoration: none; color: inherit; transition: color 0.3s;"
                                onmouseover="this.style.color='#023b7e'" onmouseout="this.style.color='inherit'">
                                {{ $latest->title }}
                            </a>
                        </h5>
                        <!-- Category + Date -->
                        <div class="meta mb-2">
                            <span class="category">{{ $latest->category->name }}</span>
                            <span class="date ms-3">{{ $latest->published_at->format('F d, Y') }}</span>
                        </div>
                        <!-- Summary -->
                        <p class="summary">
                            {{ $latest->excerpt }}...
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- start of youtube contents -->
    <div class="container py-4">
        <div class="row">

            <!-- LEFT: Main Video -->
            <div class="col-lg-8">
                <div class="main-video">
                    <iframe id="mainVideo" width="100%" height="400" src="https://www.youtube.com/embed/5WSfJ_mtC3o"
                        frameborder="0" allowfullscreen>
                    </iframe>
                </div>
            </div>

            <!-- RIGHT: Scrollable Playlist -->
            <div class="col-lg-4">
                <div class="video-list">

                    <div class="video-item" onclick="changeVideo('5WSfJ_mtC3o')">
                        <img src="https://img.youtube.com/vi/5WSfJ_mtC3o/mqdefault.jpg">
                        <p> International Women's Day | IWD2025 | University of Rawalpindi</p>
                    </div>

                    <div class="video-item" onclick="changeVideo('gPn37k3iU5k')">
                        <img src="https://img.youtube.com/vi/gPn37k3iU5k/mqdefault.jpg">
                        <p> UOR Orientation'2024 | Welcoming UOR Pioneers | University of Rawalpindi</p>
                    </div>

                    <div class="video-item" onclick="changeVideo('ji-i9rC5MLg')">
                        <img src="https://img.youtube.com/vi/ji-i9rC5MLg/mqdefault.jpg">
                        <p> Freelance Data Scientist and Analyst | Botcamp | University of Rawalpindi</p>
                    </div>

                    <div class="video-item" onclick="changeVideo('vU8rrh_PNCQ')">
                        <img src="https://img.youtube.com/vi/vU8rrh_PNCQ/mqdefault.jpg">
                        <p>How Mentorship Changed Students at University of Rawalpindi | Global Horizons Session</p>
                    </div>

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

    <style>
.video-list {
    max-height: 400px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    padding-left: 10px;
}

.video-item {
    display: flex;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: 0.3s;
}

.video-item img {
    width: 120px;
    height: 70px;
    object-fit: cover;
}

.video-item p {
    font-size: 14px;
    margin: 0;
}

.video-item:hover {
    background: #f5f5f5;
    padding: 5px;
    border-radius: 5px;
}
</style>

    <!-- start of the latest articels and must read contents -->
    <div class="container py-4">
        <div class="row">
            <div class="col-lg-8">
                <!-- SECTION HEADER -->
                <div class="section-header d-flex align-items-center mb-4">
                    <h5 class="mb-0 fw-bold section-title">
                        LATEST ARTICLES
                    </h5>
                    <div class="flex-grow-1 ms-3 red-line"></div>
                </div>
                <div class="row">
                    @foreach ($latestArticles as $article)
                        <div class="col-md-6 mb-4">
                            <!-- IMAGE BOX -->
                            <div class="blog-image">
                                <img src="{{ asset('storage/blog-images/featured/' . ($article->featured_image ?? '')) }}"
                                    class="img-fluid w-100" alt="">
                            </div>
                            <!-- TEXT BOX -->
                            <div class="blog-content mt-2">
                                <p class="blog-category">
                                    {{ $article->category->name ?? '' }}
                                </p>
                                <h5 class="blog-title">
                                    <a href="{{ route('blog.details-show', $article->id) }}"
                                        style="text-decoration:none; color:inherit; transition: color 0.3s;"
                                        onmouseover="this.style.color='#023b7e'" onmouseout="this.style.color='inherit'">
                                        {{ $article->title }}
                                    </a>
                                </h5>
                                <p class="blog-date">
                                    {{ $article->published_at->format('F d, Y') }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- PAGINATION -->
                <div class="d-flex justify-content-center mt-4">
                    {{ $latestArticles->links('pagination::bootstrap-5') }}
                </div>
            </div>
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- SECTION HEADER -->
                        <div class="section-header d-flex align-items-center mb-4">
                            <h5 class="mb-0 fw-bold section-title">
                                MUST READ
                            </h5>
                            <div class="flex-grow-1 ms-3 red-line"></div>
                        </div>
                        @if ($mustReadBlogs->isEmpty())
                            <div class="blog-item mb-3">
                                <!-- Category -->
                                <p class="mb-1 small">No Posts</p>
                                <!-- Title -->
                                <h6 class="fw-bold mb-1" style="cursor: default; color: #999;">
                                    No popular posts available
                                </h6>
                                <!-- Date -->
                                <p class="text-secondary mb-0 small">&mdash;</p>
                            </div>
                        @else
                            @foreach ($mustReadBlogs as $post)
                                <div class="blog-item mb-3">
                                    <p class="mb-1 small">{{ $post->category->name ?? 'Uncategorized' }}</p>
                                    <h6 class="fw-bold mb-1">
                                        <a href="{{ route('blog.details-show', $post->id) }}"
                                            style="text-decoration: none; color: inherit; cursor: pointer; transition: color 0.3s;"
                                            onmouseover="this.style.color='#023b7e'"
                                            onmouseout="this.style.color='inherit'">
                                            {{ $post->title }}
                                        </a>
                                    </h6>
                                    <p class="text-secondary mb-0 small">{{ $post->published_at?->format('F d, Y') }}</p>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <div class="col-lg-12" style="margin-top: 50px;">
                        <!-- SECTION HEADER -->
                        <div class="section-header d-flex align-items-center mb-4">
                            <h5 class="mb-0 fw-bold section-title">
                                CATEGORIES
                            </h5>
                            <div class="flex-grow-1 ms-3 red-line"></div>
                        </div>

                        <div class="category-list">
                            <!-- ALL CATEGORIES -->
                            <a href="{{ url()->current() }}" style="text-decoration:none; color:inherit;">
                                <div class="d-flex justify-content-between mb-3"
                                    style="font-weight: 500; cursor: pointer; transition: color 0.3s;
                                    {{ request('category') ? '' : 'color:#023b7e;' }}"
                                    onmouseover="this.style.color='#023b7e'"
                                    onmouseout="this.style.color='{{ request('category') ? 'inherit' : '#023b7e' }}'">

                                    <span>All Categories</span>
                                    <span>{{ $categories->sum('blogs_count') }}</span>
                                </div>
                            </a>

                            @foreach ($categories as $category)
                                <a href="{{ request()->fullUrlWithQuery(['category' => $category->id]) }}"
                                    style="text-decoration:none; color:inherit;">

                                    <div class="d-flex justify-content-between mb-3"
                                        style="font-weight: 500; cursor: pointer; transition: color 0.3s;
                                        {{ request('category') == $category->id ? 'color:#023b7e;' : '' }}"
                                        onmouseover="this.style.color='#023b7e'"
                                        onmouseout="this.style.color='{{ request('category') == $category->id ? '#023b7e' : 'inherit' }}'">

                                        <span>{{ $category->name }}</span>
                                        <span>{{ $category->blogs_count }}</span>

                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    function changeVideo(videoId) {
        document.getElementById("mainVideo").src =
            "https://www.youtube.com/embed/" + videoId;
    }
</script>
@endsection