@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' => $blogCategory->meta_title,
        'description' => $blogCategory->meta_description,
        'keywords' => $blogCategory->meta_keywords,
        'image' => $blogCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_MEDIA_PATH, 'webp')['url'],
        'schema' => $blogCategory->schema
    ])
@endsection
@section('content')
    <div class="wpo-breadcumb-area" style="background: url({{$blogCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH, 'webp')['url']}}) no-repeat center top/cover;"
         title="{{$blogCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH)['title']}}"
         role="img" aria-label="{{$blogCategory->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_CATEGORY_BANNER_MEDIA_PATH)['alt']}}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wpo-breadcumb-wrap">
                        <h1>{{ $blogCategory->name }}</h1>
                        <ul>
                            <li><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                            <li><span>{{ $blogCategory->name }}</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="wpo-pricing-section section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6">
                    <div class="wpo-section-title-s2">
                        <h2>{{ $blogCategory->heading }}</h2>
                        {!! $blogCategory->description !!}
                    </div>
                </div>
            </div>
            <div class="wpo-pricing-wrap">
                <div class="row">
                    @foreach($blogCategory->articles as $article)
                    <div class="col col-lg-4 col-md-6 col-12 mb-4">
                        <div class="wpo-pricing-item">
                            <div class="wpo-pricing-top">
                                <div class="wpo-pricing-img">
                                    <a href="{{ route('blog.show', [$country->slug, $blogCategory->slug, $article->slug]) }}">
                                        <img loading="lazy"
                                             src="{{$article->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH, 'webp')['url']}}"
                                             alt="{{$article->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH)['alt']}}"
                                             title="{{$article->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH)['title']}}">
                                    </a>
                                </div>
                                <div class="wpo-pricing-text">
                                    <ul class="info">
                                        <li><a><i class="fa fa-calendar"></i>{{ date('d M Y', strtotime($article->created_at)) }}</a></li>
                                        @if($article->author)
                                        <li><a><i class="fa fa-user"></i>{{ $article->author }}</a></li>
                                        @endif
                                    </ul>
                                    <h4><a href="{{ route('blog.show', [$country->slug, $blogCategory->slug, $article->slug]) }}">{{ $article->name }}</a></h4>
                                    @if($article->short_description)
                                    <p>

                                        {!! Str::limit(strip_tags($article->short_description), 100) !!}

                                    </p>
                                    @endif
                                </div>
                            </div>
                            <div class="wpo-pricing-bottom">
                                <div class="wpo-pricing-bottom-text">
                                    <a class="theme-btn" href="{{ route('blog.show', [$country->slug, $blogCategory->slug, $article->slug]) }}">{{ __('general.read_more') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @include('layout.partials.newsletter')
    @include('layout.partials.faq')
    @include('layout.partials.partner')
@endsection