@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('blog_site_title'),
        'description' => nova_get_setting_translate('blog_site_description'),
        'keywords' => nova_get_setting_translate('blog_site_keywords'),
        'image' => Storage::url(nova_get_setting('blog_banner')) ?? Storage::url(nova_get_setting('logo')),
        'schema' => nova_get_setting('blog_schema')
    ])
@endsection
@section('content')

    <!-- Common Banner Area -->
    <section id="common_banner"
             style="background: url({{ Storage::url(nova_get_setting('blog_banner')) }}) no-repeat center top/cover;"
             title="{{nova_get_setting_translate('blog_site_title')}}"
             role="img"
             aria-label="{{nova_get_setting_translate('blog_site_title')}}">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="common_bannner_text">
                        <h2>
                            {{ JSONByLocale($settings['blog_title_first'] ?? '') }}
                        </h2>
                        <ul>
                            <li><a href="{{route('home')}}">{{__('general.home')}}</a></li>
                            <li><span><i class="fas fa-circle"></i></span> {{__('general.blog')}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- News Area -->
    <section id="news_main_arae" class="section_padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="section_heading_center">
                        <h2>{{ JSONByLocale($settings['blog_title_second'] ?? '') }}</h2>
                    </div>
                </div>
            </div>
            <div class="news_tabs_boxed">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="theme_nav_tab">
                            <nav class="theme_nav_tab_item">
                                <div class="nav nav-tabs" id="nav-tab1" role="tablist">
                                    @foreach($articleCategories as $articleCategory)
                                    <button class="nav-link @if($loop->first) active @endif" id="nav-summer-tab{{$articleCategory->id}}" data-bs-toggle="tab"
                                            data-bs-target="#nav-summer{{$articleCategory->id}}" type="button" role="tab" aria-controls="nav-summer{{$articleCategory->id}}"
                                            aria-selected="false">{{$articleCategory->name}}</button>
                                    @endforeach
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="tab-content" id="nav-tabContent">
                    @foreach($articleCategories as $articleCategory)

                    <div class="tab-pane fade @if($loop->first) show active @endif" id="nav-summer{{$articleCategory->id}}" role="tabpanel"
                         aria-labelledby="nav-summer-tab {{$articleCategory->id}}">
                        <div class="row">
                            @foreach($articleCategory->articles as $article)
                            <div class="col-lg-4 col-md-6 col-sm-12 col-12">
                                <div class="news_item_boxed">
                                    <div class="news_item_img">
                                        <a href="{{route('blog.show' , [$article->category->slug , $article->slug])}}">
                                            <img style="height: 220px;"
                                                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="news_item_content">
                                        <h3><a href="{{route('blog.show' , [$article->category->slug , $article->slug])}}">
                                                {{$article->name}}
                                            </a></h3>
                                        <p>
                                            {!! Str::limit(strip_tags($article->short_description), 250) !!}
                                        </p>
                                    </div>
                                    <div class="news_author_area">
                                        <div class="news_author_img">
                                            <img src="{{ Storage::url(nova_get_setting('logo')) }}"
                                                 alt="{{ nova_get_setting_translate('logo_alt') }}"
                                                 title="{{ nova_get_setting_translate('logo_title') }}">
                                        </div>
                                        <div class="news_author_area_name">
                                            <h4>{{$article->author ?? 'admin'}}</h4>
                                            <p><a href="{{route('blog.show' , [$article->category->slug , $article->slug])}}">{{ \Carbon\Carbon::parse($article->created_at)->format('F d, Y') }}</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    {{--    --}}
    @include('layout.partials.reviews')
    @include('layout.partials.faqs')
    @include('layout.partials.partner')
    {{--    --}}
@endsection