@extends('layouts/frontend/master', ['activePage' => 'Post Category', 'page' => 'Categories', 'subActive' => ''])
@section('seometa')
    {!! SEOMeta::generate() !!}
    {!! OpenGraph::generate() !!}
     <meta property="og:image:width" content="380">
    <meta property="og:image:height" content="200">
    <meta property="og:image:alt" content="Social Ads Digital Marketing">
    {!! Twitter::generate() !!}
    {!! JsonLd::generate() !!}
   
@endsection
@section('content')

<div class="section-banner sbg-2">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="banner-content">
                    <h1>{{$category->name}}</h1>
                    <nav style="--bs-breadcrumb-divider: '/';" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{url('/blogs')}}">Blogs</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{$category->name}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="blog-standard-section ptb-100">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12 col-lg-12">
                        <div class="blog-stand-card">
                            <div class="row">
                                
                                @if($category->posts->count() > 0)
                                    @foreach($category->posts as $post)
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-12">
                                            <div class="blog-card standard">
                                                <div class="blog-img">
                                                    <a href="{{ route('website.post-detail', $post->slug) }}">
                                                        <img src="{{ $post->default_image 
                                                                    ? Storage::disk('public')->url($post->default_image?->image_url) 
                                                                    : asset('assets/frontend/images/blog-default.png') }}" 
                                                             alt="{{ $post->name }}"
                                                             class="img-fluid">
                                                    </a>
                                                </div>
                                                <div class="blog-info">
                                                    <h3>
                                                        <a href="{{ route('website.post-detail', $post->slug) }}">{{ $post->name ?? $post->title }}</a>
                                                    </h3>
                                                    <ul class="blog-metainfo">
                                                        <li>
                                                            <i class="bx bx-calendar"></i>
                                                            <span>{{ $post->created_at->format('M d, Y') }}</span>
                                                        </li>
                                                        <li>
                                                            <i class="bx bx-time"></i>
                                                            <span>{{ $post->reading_time ?? '2 min' }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="col-12">
                                        <div class="text-white text-center">
                                            <i class="bx bx-info-circle"></i> No posts available in this category.
                                        </div>
                                    </div>
                                @endif
                                
                                
                                
                                
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            
</div>

<div class="topic container py-4 overflow-hidden">
    <div class="text-center mb-4 px-4">
        <h2 class="fs-3 fw-semibold social-ads-white mb-2">Explore More Topics</h2>
        <p class="blog-learning-paths-description">Explore expert insights and practical tips to help your brand shine across every channel.</p>
    </div>

    <!-- Swiper Container -->
    <div class="swiper topic-swiper">
        <div class="swiper-wrapper">
            @foreach($topics as $postCategory)
                <div class="swiper-slide">
                    <a href="{{ route('website.category-post', $postCategory->slug) }}" 
                       class="card h-100 text-secondary text-decoration-none bg-light shadow-md hover-shadow-lg">
                        <div class="overflow-hidden rounded-top">
                            @if($postCategory->default_image && $postCategory->default_image->image_url)
                                <img src="{{ Storage::disk('public')->url($postCategory->default_image->image_url) }}" 
                                     alt="{{ $postCategory->name }}" 
                                     class="img-fluid w-100 topic-image">
                            @else
                                <img src="{{ asset('assets/frontend/images/cat-placeholder.png') }}" 
                                     alt="{{ $postCategory->name }} - No Image Available" 
                                     class="img-fluid w-100 topic-image">
                            @endif
                        </div>
                        <div class="card-body py-1 py-md-1 text-center d-flex align-items-center justify-content-center">
                            <div class="d-flex align-items-center">
                                <p class="social-ads-black fs-5 fw-semibold mb-0 capitalize hover-underline social-ads-hover">
                                    {{ $postCategory->name }}
                                </p>
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" 
                                     class="ms-2 text-xl" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.707 17.707L16.414 12 10.707 6.293 9.293 7.707 13.586 12 9.293 16.293z"></path>
                                </svg>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        <!-- Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Navigation Buttons -->
        <!--<div class="swiper-button-prev"></div>-->
        <!--<div class="swiper-button-next"></div>-->
    </div>
</div>
@endsection