@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' =>  $article->meta_title ,
        'description' => $article->meta_description,
        'keywords' => $article->meta_keywords,
        'image' => $article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH, 'webp')['url'],
        'schema' => $article->schema
    ])
@endsection
@section('content')
<main class="main">
    <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('allblog') }}">{{ __('blog.allblog') }}</a></li>
                <li class="breadcrumb-item"><a href="{{route('blog.category', ['category_slug'=>$article->category->slug])}}">{{ $article->category->name}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $article->name }}</li>
            </ol>
        </div>
    </nav>
    <div class="mb-2"></div>

    <div class="page-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <article class="entry single-entry">
                        <figure class="entry-media">
                        <img
                             loading="lazy"
                             src="{{ $article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH, 'webp')['url'] }}"
                             alt="{{ $article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH)['alt'] }}"
                             title="{{ $article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH)['title'] }}">
                        </figure>
                        <div class="entry-body">
                            <div class="entry-meta">
                                        <span class="entry-author">
                                              {{ __('blog.by') }}   <a href="#">{{ $article->author }}</a>
                                        </span>
                                <span class="meta-separator">|</span>
                                <a href="#">{{ date('M d, Y', strtotime($article->created_at)) }}</a>
                            </div>

                            <h2 class="entry-title">
                            {{ $article->heading}}
                            </h2>

                            <div class="entry-content editor-content">
                                <p>
                                {!! $article->description !!}
                                </p>

                                <div class="pb-1"></div>
                                <div class="pb-1 clearfix"></div>
                                <blockquote>
                                    <p>“  {!! $article->quotes !!} ”</p>
                                </blockquote>

                            </div>

                            <div class="entry-footer row no-gutters flex-column flex-md-row">
                                <div class="col-md">
                                    <div class="entry-tags">
                                        <span>{{ __('blog.tags') }}:</span>
                                        @foreach ($article->tags as $tag)
                                            <a href="{{route('tags',$tag->slug)}}">{{$tag->name}}</a>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="col-md-auto mt-2 mt-md-0">
                                    <div class="social-icons social-icons-color">
                                        <span class="social-label">{{ __('blog.share_this_post') }}:</span>
                                        {!! Share::page(url(env('APP_URL') .'/'.$article->category->slug .'/'.$article->slug ,["target"=>"_blank"]))->facebook()->twitter()->whatsapp() !!}
                                    </div><!-- End .soial-icons -->
                                </div><!-- End .col-auto -->
                            </div><!-- End .entry-footer row no-gutters -->
                        </div>
                    </article>
                </div>
                <aside class="col-lg-3">
                    <div class="sidebar">
                        <div class="widget widget-search">
                            <h3 class="widget-title">{{ __('blog.search') }}</h3>

                            <form action="#">
                                <label for="ws" class="sr-only">{{ __('blog.search_in_blog') }}</label>
                                <input type="search" class="form-control" name="ws" id="ws" placeholder="Search in blog" required>
                                <button type="submit" class="btn"><i class="icon-search"></i><span class="sr-only">Search</span></button>
                            </form>
                        </div>
                        <div class="widget">
                            <h3 class="widget-title">{{ __('blog.popular_posts') }}</h3><!-- End .widget-title -->

                            <ul class="posts-list">
                            @foreach($latest_articles as $latest_article)
                                <li>
                                    <figure>
                                        <a href="{{ route('blog.show', ['category_slug'=>$latest_article->category->slug, 'slug'=>$latest_article->slug]) }}">

                                        @if(!empty($latest_article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH)) && $latest_article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH)['url'] !==null)
                                                    <img src="{{ $latest_article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH)['url'] }}"
                                                         alt="{{ $latest_article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH)['alt'] }}"
                                                         title="{{ $latest_article->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::ARTICLE_MEDIA_PATH)['title'] }}" loading="lazy">
                                        @else
                                        @if(LaravelLocalization::getCurrentLocaleDirection() == 'rtl')
                                            <img src="{{ Storage::url($settings['logo_arabic'] ?? '') }}"
                                                 alt="{{ $latest_article->name }}"
                                                 title="{{ $latest_article->name }}" loading="lazy">
                                        @else
                                            <img src="{{ Storage::url($settings['logo_english'] ?? '') }}"
                                                 alt="{{ $latest_article->name }}"
                                                 title="{{ $latest_article->name }}" loading="lazy">
                                        @endif
                                        @endif
                                        </a>
                                    </figure>

                                    <div>
                                        <span>{{ date('M d, Y', strtotime($latest_article->created_at)) }}</span>
                                        <h4><a href="{{ route('blog.show', ['category_slug'=>$latest_article->category->slug, 'slug'=>$latest_article->slug]) }}">{{ $latest_article->name }}</a></h4>
                                    </div>
                                </li>
                            @endforeach
                            </ul>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>


</main>
@include('layout.partials.faq')
@include('layout.partials.news_letter')
@endsection