@extends('site.pages')

@section('title', $page_title)


@section('content')
<div class="page-cover pt-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4">
                <div class="cover-content text-center text-md-start">
                    <div class="author-detail mb-2">
                        <a  href="{{ route('blog.category_show', ['cat_id' => $data['blog']['categories']['id'] , 'name' => $data['blog']['categories']['name'] ] ) }}" class="tag white bg-theme py-1 px-3 me-2 rounded">{{ $data['blog']['categories']['name'] }}</a>
                        <a class="tag py-1 px-3"><i class="fa fa-eye"></i> {{ $data['blog']['views'] }}</a>
                    </div>
                    <h1>{{ $data['blog']['title'] }}</h1>
                    <div class="author-detail d-flex align-items-center">
                        <span class="me-3"><a><i class="fa fa-clock"></i> {{ trans('pages.posted_on') }} {{ date('d M Y', strtotime($data['blog']['created_at'])) }}</a></span>
                        <span class="me-3"><a><i class="fa fa-user"></i> {{ $data['blog']['user']['name'] }}</a></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="box-shadow p-3 rounded"><img src="{{ $data['blog']['image'] }}"
                    alt="{{ $data['blog']['title'] }}" class="w-100 rounded"></div>
            </div>
        </div>
    </div>
</div>
<!-- blog starts -->
<section class="blog pt-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-12 col-sm-12">
                <div class="blog-single">

                    <div class="blog-wrapper">

                        <div class="blog-content first-child-cap mb-4">
                            <p>{!! $data['blog']['content'] !!}</p>
                        </div>

                        <!-- blog share -->
                        <div class="blog-share d-flex justify-content-between align-items-center mb-4 bg-lgrey border rounded">
                            <div class="blog-share-tag">
                                <ul class="inline">
                                    <li><strong>{{ trans("pages.tags") }}</strong></li>
                                    @foreach($data['blog']['tags'] as $key => $tag)
                                    <li><a href="{{ route('blog.tag_show', ['tag_name' => $tag['name']]) }}" class="tag"> {{ $tag['name'] }}
                                        @if($key != count($data['blog']['tags']) - 1) , @endif
                                    </a></li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="header-social">
                                <ul>
                                    <li><a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="https://plus.google.com/share?url={{ urlencode(url()->current()) }}" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
                                    <li><a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="https://www.linkedin.com/shareArticle?url={{ urlencode(url()->current()) }}" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- blog next prev -->
                    <div class="blog-next mb-4 d-sm-flex align-items-center rounded">
                        @if($data['blog']['previous'])
                        <a href="{{ route('blog.show', ['id' => $data['blog']['previous']['id'], 'name' => $data['blog']['previous']['title']]) }}"
                         class="d-block bg-theme">
                            <div class="prev ps-4">
                                <i class="fa fa-arrow-left white"></i>
                                <p class="m-0 white">{{ $data['blog']['previous']['title'] }}</p>
                                <p class="m-0 white">{{ $data['blog']['previous']['content'] }}</p>
                            </div>
                        </a>
                        @endif
                        @if($data['blog']['next'])
                        <a href="{{ route('blog.show', ['id' => $data['blog']['next']['id'], 'name' => $data['blog']['next']['title']]) }}" class="d-block bg-grey">
                            <div class="next pr-4 text-right">
                                <i class="fa fa-arrow-right"></i>
                                <p class="m-0">{{ $data['blog']['next']['title'] }}</p>
                                <p class="m-0">{{ $data['blog']['next']['content'] }}</p>
                            </div>
                        </a>
                        @endif
                    </div>
 
         
                </div>
            </div>

            <!-- sidebar starts -->
            <div class="col-lg-4 col-md-12">
                <div class="sidebar-sticky">
                    <div class="list-sidebar">
                        <div class="author-news mb-4 box-shadow p-5 text-center border-all rounded">
                            <div class="author-news-content">
                                <div class="author-thumb mb-1">
                                    <img src="{{ asset('storage/users/'. $data['blog']['user']['avatar']) }}"
                                    alt="author">
                                </div>
                                <div class="author-content">
                                    <h3 class="title mb-1"><a href="#"> {{ $data['blog']['user']['name'] }}</a></h3>
                                    <p class="mb-2">{{ $data['blog']['user']['email'] }}</p>
                                </p>
                                    <div class="header-social">
                                        <ul>
                                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                            <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="sidebar-item mb-4">
                            <h4 class="">All Categories</h4>
                            <ul class="sidebar-category">

                                @foreach($basic_info['categories'] as $category)
                                    <li><a href="{{ route('blog.category_show', ['cat_id' => $category['id'], 'name' => $category['name']]) }}">{{ $category['name'] }}</a></li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="popular-post sidebar-item mb-4">
                            <div class="sidebar-tabs">
                                <div class="post-tabs">
                                    <!-- tab navs -->
                                    <ul class="nav nav-tabs nav-pills nav-fill" id="postsTab1" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button aria-selected="false" class="nav-link active"
                                                    data-bs-target="#popular" data-bs-toggle="tab" id="popular-tab"
                                                    role="tab" type="button">Popular
                                            </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button aria-selected="true" class="nav-link" data-bs-target="#recent"
                                                    data-bs-toggle="tab" id="recent-tab" role="tab" type="button">Recent
                                            </button>
                                        </li>
                                    </ul>
                                    <!-- tab contents -->
                                    <div class="tab-content" id="postsTabContent1">
                                        <!-- popular posts -->
                                        <div aria-labelledby="popular-tab" class="tab-pane fade active show"
                                             id="popular" role="tabpanel">
                                            @foreach($data['popular_blogs'] as $blog)
                                                <article class="post mb-3 border-b pb-3">
                                                    <div class="s-content d-flex align-items-center justify-space-between">
                                                        <div class="sidebar-image w-25 me-3">
                                                            <a href="{{ route('blog.show', ['id' => $blog['id'], 'name' => $blog['title']]) }}"><img src="{{ $blog['image'] }}" alt=""></a>
                                                        </div>
                                                        <div class="content-list w-75">
                                                            <h5 class="mb-1"><a href="{{ route('blog.show', ['id' => $blog['id'], 'name' => $blog['title']]) }}">{{ $blog['title'] }}</a></h5>
                                                            <div class="date">{{ date('d M Y', strtotime($blog['created_at'])) }}</div>
                                                        </div>
                                                    </div>
                                                </article>
                                            @endforeach

                                        </div>
                                        <!-- Recent posts -->
                                        <div aria-labelledby="recent-tab" class="tab-pane fade" id="recent"
                                             role="tabpanel">
                                            @foreach($data['recent_blogs'] as $blog)
                                                <article class="post mb-3 border-b pb-3">
                                                    <div class="s-content d-flex align-items-center justify-space-between">
                                                        <div class="sidebar-image w-25 me-3">
                                                            <a href="{{ route('blog.show', ['id' => $blog['id'], 'name' => $blog['title']]) }}"><img src="{{ $blog['image'] }}" alt=""></a>
                                                        </div>
                                                        <div class="content-list w-75">
                                                            <h5 class="mb-1"><a href="{{ route('blog.show', ['id' => $blog['id'], 'name' => $blog['title']]) }}">{{ $blog['title'] }}</a></h5>
                                                            <div class="date">{{ date('d M Y', strtotime($blog['created_at'])) }}</div>
                                                        </div>
                                                    </div>
                                                </article>
                                            @endforeach


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

                        <div class="sidebar-item mb-4">
                            <h4 class="">{{ __('pages.tags') }}</h4>
                            <ul class="sidebar-tags">
                                @foreach($data['blog']['tags'] as $tag)
                                    <li><a href="{{ route('blog.tag_show', ['tag_name' => $tag['name']]) }}">{{ $tag['name'] }}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- blog Ends -->
@endsection