@extends('layouts.website_layout')
@section('meta_title', $blog->meta_title)
@section('meta_description', $blog->meta_description)
@section('canonical_tag', "blog/".$blog_category->blog_category_url_slug."/".$blog->blog_url_slug)
@section('banner_image', "blogs/".$blog->blog_thumbnail)
@section('content')
<main>
    <article class="container-fluid blogHeader">
        <nav class="custom__row row" aria-label="breadcrumb">
            <div class="col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{url('/')}}/blog">Blog</a></li>
                    <li class="breadcrumb-item"><a href="{{url('/')}}/blog/{{$blog_category->blog_category_url_slug}}">{{$blog_category->blog_category_name}}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{$blog->blog_title}}</li>
                </ol>
            </div>
        </nav>
    </article>
    <article class="container-fluid blogDetails">
        <div class="custom__row row">
            <div class="col-12 title">
                <h1>{{$blog->blog_title}}</h1>
            </div>
            @if(!empty(count($blog_tags)))
            <div class="col-12 tags">
                <p>Related Tags :</p>
                @foreach($blog_tags as $blog_tag_row)
                <a href="{{url('/')}}/blog-tag/{{$blog_tag_row->blog_tag_url_slug}}">{{$blog_tag_row->blog_tag_name}}</a>
                @endforeach
            </div>
            @endif
            <div class="col-12 date">
                <p>{{date('d F Y', strtotime($blog->blog_published_date))}}</p>
            </div>
            <div class="col-12 info">
                @if(!empty($blog->blog_author_name))
                <div class="authorpic">
                    @if(!empty($blog->blog_author_picture))
                    <img src="{{url('/')}}/assets/images/blogs/{{$blog->blog_author_picture}}" alt="{{$blog->blog_author_name}}" class="img-fluid">
                    @else
                    <img src="{{url('/')}}/assets/images/blogs/dummy-author.png" alt="{{$blog->blog_author_name}}" class="img-fluid">
                    @endif
                </div>
                <p class="paragraph">{{$blog->blog_author_name}}</p>
                @endif
                <div class="share">
                    <span id="btn-share" class="btn btn-simple popover-html">  <img src="{{url('/')}}/assets/images/product-details/share.png" alt="Share" class="img-fluid" title="Share">
            
                    <span id="popoverHiddenContent" class="hidden">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{url('/')}}/blog/{{$blog_category->blog_category_url_slug}}/{{$blog->blog_url_slug}}" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                        <a href="https://twitter.com/intent/tweet/?text={{$blog->blog_preview}}&url={{url('/')}}/blog/{{$blog_category->blog_category_url_slug}}/{{$blog->blog_url_slug}}" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{url('/')}}/blog/{{$blog_category->blog_category_url_slug}}/{{$blog->blog_url_slug}}" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                    </span>
            
                    </span>
                    
                </div>
            </div>
            <div class="col-12 content">
                <div class="row">
                    <div class="col-12 col-md-6">
                        @if(!empty($blog->blog_headline))
                        <h2 class="mb-4 pb-4">{!!nl2br($blog->blog_headline)!!}</h2>
                        @endif
                        @if(!empty($blog->blog_content_one))
                        <p class="paragraph">{!!$blog->blog_content_one!!}</p>
                        @endif
                    </div>
                    @if(!empty($blog->blog_content_one_image))
                    <div class="col-12 col-md-6">
                        <img src="{{url('/')}}/assets/images/blogs/{{$blog->blog_content_one_image}}" alt="{{$blog->blog_title}}" class="img-fluid">
                    </div>
                    @endif
                    @if(!empty($blog->blog_content_two_image))
                    <div class="col-12 my-5">
                        <img src="{{url('/')}}/assets/images/blogs/{{$blog->blog_content_two_image}}" alt="{{$blog->blog_title}}" class="img-fluid">
                    </div>
                    @endif
                    @if(!empty($blog->blog_content_two))
                    <div class="col-12 spit__text">
                        <p class="paragraph">{!!$blog->blog_content_two!!}</p>
                    </div>
                    @endif
                    @if(!empty($blog->blog_content_youtube_banner))
                    <figure class="col-12 specifications__video my-5 @if(!empty($blog->blog_content_youtube_id)) play__icon @endif" data-youtube-id="{{$blog->blog_content_youtube_id}}">
                        <img src="{{url('/')}}/assets/images/blogs/{{$blog->blog_content_youtube_banner}}" alt="{{$blog->blog_title}}" class="img-fluid">
                        @if(!empty($blog->blog_content_youtube_id))
                        <img src="{{url('/')}}/assets/images/product-details/play-button.png" alt="play" class="img-fluid play">
                        @endif
                    </figure>
                    @endif
                    @if(!empty($blog->blog_content_three))
                    <div class="col-12 normal__text">
                        <p class="paragraph">{!!$blog->blog_content_three!!}</p>
                    </div>
                    @endif
                    @if(!empty($blog->blog_content_footer))
                    <div class="quote__text px-5 py-5">
                        <h2>{!!nl2br($blog->blog_content_footer)!!}</h2>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </article>
</main>
@endsection