@extends('front.layouts.app')
@section('content')
    <!-- Inner Page Banner Area Start Here -->
    <div class="inner-page-banner-area">
        <div class="container">
            <div class="pagination-area">
                <h1>Blogs</h1>
                <ul>
                    <li><a href="{{ route('front.home') }}">Home</a> -</li>
                    <li>Blogs</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Inner Page Banner Area End Here -->

    <!-- Blog Page Area Start Here -->
    <div class="blog-page-area" style="padding: 80px 0; background: #f8f9fa;">
        <div class="container">

            <!-- Hero Section -->
            <div class="blog-hero-section" style="text-align: center; margin-bottom: 60px;">
                <h2
                    style="font-size: 42px; font-weight: 700; background: linear-gradient(135deg, #0d6efd 0%, #d6001c 100%);
                -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px;">
                    Blogs
                </h2>
                <p style="font-size: 18px; color: #666; max-width: 700px; margin: 0 auto; line-height: 1.6;">
                    Discover stories, insights, and updates from our vibrant campus community.
                    Explore student experiences, academic achievements, and campus life.
                </p>
            </div>

            <div class="row">

                <!-- Main Content Area -->
                <div class="col-lg-8">

                    <!-- Blog Grid -->
                    <div class="row">

                        @forelse($blogs as $blog)
                            <div class="col-md-6 mb-4">
                                <div class="blog-card"
                                    style="background: white; border-radius: 12px; overflow: hidden;
                                box-shadow: 0 4px 20px rgba(0,0,0,0.08);
                                transition: transform 0.3s, box-shadow 0.3s; height: 100%;">

                                    <!-- IMAGE -->
                                    <div style="position: relative; overflow: hidden; height: 200px;">

                                        @if ($blog->featured_image)
                                            <img src="{{ asset('storage/blog-images/featured/' . $blog->featured_image) }}"
                                                alt="{{ $blog->title }}"
                                                style="width: 100%; height: 100%; object-fit: cover; transition: 0.3s;">
                                        @else
                                            <img src="https://via.placeholder.com/600x400?text=No+Image" alt="No Image"
                                                style="width: 100%; height: 100%; object-fit: cover; transition: 0.3s;">
                                        @endif

                                        @if ($blog->category)
                                            <div style="position: absolute; top: 12px; right: 12px;">
                                                <span
                                                    style="
                                                background: rgba(255,255,255,0.95);
                                                padding: 4px 12px;
                                                border-radius: 16px;
                                                font-size: 10px;
                                                font-weight: 600;
                                                color: {{ $blog->category->color ?? '#0d6efd' }};
                                            ">
                                                    {{ strtoupper($blog->category->name) }}
                                                </span>
                                            </div>
                                        @endif
                                    </div>

                                    <!-- CONTENT -->
                                    <div style="padding: 20px;">

                                        <div style="margin-bottom: 10px;">
                                            <span style="color: #999; font-size: 12px;">
                                                📅 {{ optional($blog->published_at)->format('M d, Y') }}
                                            </span>
                                        </div>

                                        <h4
                                            style="
                                        font-size: 18px;
                                        font-weight: 700;
                                        color: #1a1a1a;
                                        margin-bottom: 10px;
                                        line-height: 1.4;">
                                            {{ $blog->title }}
                                        </h4>

                                        <p
                                            style="
                                        color: #666;
                                        font-size: 13px;
                                        line-height: 1.6;
                                        margin-bottom: 15px;">
                                            {{ Str::limit(strip_tags($blog->excerpt ?? $blog->content), 120) }}
                                        </p>

                                        <a href="{{ route('blog.details-show', $blog->id) }}"
                                            style="
                                        color: #0d6efd;
                                        font-weight: 600;
                                        text-decoration: none;
                                        font-size: 13px;
                                        display: inline-flex;
                                        align-items: center;">
                                            Read More →
                                        </a>

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

                        @empty
                            <div class="col-12 text-center">
                                <p>No blogs found.</p>
                            </div>
                        @endforelse

                    </div>

                </div>

                <!-- Sidebar (UNCHANGED) -->
                <div class="col-lg-4">
                    <!-- Social Media Follow Widget -->
                    <div class="card"
                        style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 30px; overflow: hidden;">
                        <div
                            style="background: linear-gradient(135deg, #0d6efd 0%, #d6001c 100%); padding: 20px; text-align: center;">
                            <h5 style="color: white; font-weight: 700; margin: 0; font-size: 18px;">Follow Us</h5>
                            <p style="color: rgba(255,255,255,0.9); font-size: 13px; margin: 5px 0 0 0;">Stay connected
                                with us</p>
                        </div>
                        <div style="padding: 25px;">
                            <!-- YouTube -->
                            <a href="https://www.youtube.com/@uniofrawalpindi"
                                style="display: flex; align-items: center; justify-content: space-between; padding: 15px; background: #fff; border: 2px solid #f0f0f0; border-radius: 10px; margin-bottom: 12px; text-decoration: none; transition: all 0.3s;"
                                class="social-link" target="_blank">
                                <div style="display: flex; align-items: center;">
                                    <div
                                        style="width: 45px; height: 45px; background: #FF0000; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        <svg style="width: 24px; height: 24px; fill: white;" viewBox="0 0 24 24">
                                            <path
                                                d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <p style="margin: 0; color: #1a1a1a; font-weight: 600; font-size: 15px;">YouTube
                                        </p>
                                        <p style="margin: 0; color: #666; font-size: 12px;">Subscribe</p>
                                    </div>
                                </div>
                                <div style="text-align: right;">
                                    <p style="margin: 0; color: #FF0000; font-weight: 700; font-size: 18px;">
                                        {{ $subscribers }}</p>
                                    <p style="margin: 0; color: #999; font-size: 11px;">Subscribers</p>
                                </div>
                            </a>

                            <!-- Instagram -->
                            <a href="https://www.instagram.com/uniofrawalpindi/"
                                style="display: flex; align-items: center; justify-content: space-between; padding: 15px; background: #fff; border: 2px solid #f0f0f0; border-radius: 10px; margin-bottom: 12px; text-decoration: none; transition: all 0.3s;"
                                class="social-link" target="_blank">
                                <div style="display: flex; align-items: center;">
                                    <div
                                        style="width: 45px; height: 45px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        <svg style="width: 24px; height: 24px; fill: white;" viewBox="0 0 24 24">
                                            <path
                                                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <p style="margin: 0; color: #1a1a1a; font-weight: 600; font-size: 15px;">Instagram
                                        </p>
                                        <p style="margin: 0; color: #666; font-size: 12px;">Follow</p>
                                    </div>
                                </div>
                                <div style="text-align: right;">
                                    <p style="margin: 0; color: #e1306c; font-weight: 700; font-size: 18px;">2.1k</p>
                                    <p style="margin: 0; color: #999; font-size: 11px;">Followers</p>
                                </div>
                            </a>

                            <!-- Facebook -->
                            <a href="https://www.facebook.com/uniofrawalpindi/followers"
                                style="display: flex; align-items: center; justify-content: space-between; padding: 15px; background: #fff; border: 2px solid #f0f0f0; border-radius: 10px; margin-bottom: 0; text-decoration: none; transition: all 0.3s;"
                                class="social-link" target="_blank">
                                <div style="display: flex; align-items: center;">
                                    <div
                                        style="width: 45px; height: 45px; background: #1877F2; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        <svg style="width: 24px; height: 24px; fill: white;" viewBox="0 0 24 24">
                                            <path
                                                d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <p style="margin: 0; color: #1a1a1a; font-weight: 600; font-size: 15px;">Facebook
                                        </p>
                                        <p style="margin: 0; color: #666; font-size: 12px;">Like</p>
                                    </div>
                                </div>
                                <div style="text-align: right;">
                                    <p style="margin: 0; color: #1877F2; font-weight: 700; font-size: 18px;">8.4K</p>
                                    <p style="margin: 0; color: #999; font-size: 11px;">Likes</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Categories Widget -->
                    <div class="card"
                        style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 30px;">

                        <div style="padding: 25px 25px 15px 25px; border-bottom: 2px solid #f0f0f0;">
                            <h5 style="color: #1a1a1a; font-weight: 700; margin: 0; font-size: 18px;">
                                Categories
                            </h5>
                        </div>

                        <div style="padding: 20px 25px;">

                            <!-- ALL CATEGORIES LINK -->
                            <a href="{{ route('front.blogs') }}"
                                style="
                            display:flex;
                            align-items:center;
                            justify-content:space-between;
                            padding:12px 12px;
                            text-decoration:none;
                            border-bottom:1px solid #f0f0f0;
                            transition:all 0.3s;
                            border-left:4px solid {{ request('category') ? 'transparent' : '#0d6efd' }};
                            background: {{ request('category') ? 'transparent' : '#f5f9ff' }};"
                                class="category-link">

                                <div style="display: flex; align-items: center;">
                                    <div
                                        style="width: 8px; height: 8px; background: #0d6efd; border-radius: 50%; margin-right: 12px;">
                                    </div>
                                    <span style="color: #333; font-weight: 500; font-size: 14px;">All Categories</span>
                                </div>

                                <span style="color: #999; font-size: 13px; font-weight: 600;">
                                    {{ $categories->sum('blogs_count') ?? '' }}
                                </span>
                            </a>

                            <!-- LOOP THROUGH CATEGORIES -->
                            @forelse($categories as $category)
                                <a href="{{ route('front.blogs', ['category' => $category->id]) }}"
                                    style="
                                display:flex;
                                align-items:center;
                                justify-content:space-between;
                                padding:12px 12px;
                                text-decoration:none;
                                border-bottom: {{ !$loop->last ? '1px solid #f0f0f0' : 'none' }};
                                transition:all 0.3s;
                                border-left:4px solid {{ request('category') == $category->id ? $category->color ?? '#0d6efd' : 'transparent' }};
                                background: {{ request('category') == $category->id ? '#f8fbff' : 'transparent' }};"
                                    class="category-link">

                                    <div style="display: flex; align-items: center;">
                                        <!-- Color Dot From DB -->
                                        <div
                                            style="width: 8px; height: 8px; background: {{ $category->color ?? '#0d6efd' }};
                                            border-radius: 50%; margin-right: 12px;">
                                        </div>
                                        <span style="color: #333; font-weight: 500; font-size: 14px;">
                                            {{ $category->name }}
                                        </span>
                                    </div>

                                    <!-- Blog Count -->
                                    <span style="color: #999; font-size: 13px; font-weight: 600;">
                                        {{ $category->blogs_count ?? '' }}
                                    </span>

                                </a>
                            @empty
                                <p class="text-muted">No categories found</p>
                            @endforelse

                        </div>
                    </div>
                    
                    <!-- Popular Posts Widget -->
                    <div class="card" style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">

                        <div style="padding: 25px 25px 15px 25px; border-bottom: 2px solid #f0f0f0;">
                            <h5 style="color: #1a1a1a; font-weight: 700; margin: 0; font-size: 18px;">
                                Popular Posts
                            </h5>
                        </div>

                        <div style="padding: 20px 25px;">

                            @forelse($popularPosts as $post)
                                <a href="{{ route('blog.details-show', $post->id) }}"
                                    style="display: flex; margin-bottom: 20px; text-decoration: none; transition: all 0.3s;"
                                    class="popular-post-link">

                                    <img src="{{ $post->featured_image
                                        ? asset('storage/blog-images/featured/' . $post->featured_image)
                                        : 'https://via.placeholder.com/200' }}"
                                        alt="{{ $post->title }}"
                                        style="width: 70px; height: 70px; object-fit: cover; border-radius: 8px; margin-right: 15px;">

                                    <div style="flex: 1;">

                                        <h6
                                            style="
                                                color: #1a1a1a;
                                                font-size: 14px;
                                                font-weight: 600;
                                                margin: 0 0 5px 0;
                                                line-height: 1.4;">
                                            {{ Str::limit($post->title, 45) }}
                                        </h6>

                                        <p style="color: #999; font-size: 11px; margin: 0;">
                                            {{ optional($post->published_at)->format('M d, Y') }}
                                            • {{ $post->views }} views
                                        </p>

                                    </div>
                                </a>

                            @empty
                                <p style="font-size: 13px; color: #999;">No popular posts yet.</p>
                            @endforelse

                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>

    <style>
        .blog-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(13, 110, 253, 0.15) !important;
        }

        .blog-card:hover img {
            transform: scale(1.05);
        }

        .social-link:hover {
            border-color: #0d6efd !important;
            transform: translateX(5px);
        }

        .category-link:hover span:first-child {
            color: #0d6efd !important;
        }

        .popular-post-link:hover h6 {
            color: #0d6efd !important;
        }
    </style>
@endsection