@extends('web.layouts.container')

@section('header')
    <div class="container">
        <div class="inner">
            <div class="top">
                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}">{{__('main.home')}}</a>
                <span>{{$blogPage->title}}</span>
            </div>
{{--            <h2>{{$blogPage->title}}</h2>--}}
{{--            <p>{{stripText($blogPage->description)}}</p>--}}
        </div>
    </div>
@endsection

@section('content')
    <div class="blog_det">
        <div class="content">
            <section class="blog-sec pb-0">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 pl-4">
                            <div class="side_title">
                                <h5> <i class="fas fa-long-arrow-alt-left"></i>{{__('articles.similar_blogs')}} </h5>
                            </div>
                            @if(count($relatedBlogs))
                                @foreach($relatedBlogs as $relatedBlog)
                                    @if($relatedBlog->id == $blogs->id) @continue @endif
                                    <div class="card">
                                        <div class="image-content">
                                            <img src="{{asset($relatedBlog->image)}}" class="main-blog">
                                        </div>
                                        <div class="card-body">
                                            <h5>{{$relatedBlog->title}}</h5>
                                            <p>{{stripText($relatedBlog->description, 200)}}</p>
                                            <a href="{{route('blog.show', $relatedBlog->id)}}" class="more"> <i class="fas fa-long-arrow-alt-left"></i> {{__('articles.more')}}</a>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="col-lg-9">
                            <div class="l_side">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        @if(count($blogs->photos))
                                            @foreach($blogs->photos as $photo)
                                                <div class="swiper-slide">
                                                    <div class="image-content">
                                                        <img src="{{asset($photo->image)}}" class="main-blog">
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <!-- Add Pagination -->
                                    <div class="swiper-pagination"></div>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                        <span class="date">{{date('d M, Y', strtotime($blogs->created_at))}}</span>
                                        <h5>{{$blogs->title}}</h5>
                                        <p>{!! $blogs->description !!}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@section('inner_js')
    <script>
        let url = "{{asset($blogPage->image)}}";
        $('header').addClass('inner_header').attr('style', 'background: url('+url+')');
        $('.navs-container').addClass('inner_nav');
    </script>
@endsection