@extends('frontend.blog-layouts.main')

@section('head')
    <!-- Open Graph Meta Tags -->
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:title" content="{{ $blog->meta_title }}">
    <meta property="og:description" content="{{ $blog->meta_description }}">
    <meta property="og:image" content="{{ asset($blog->banner_image) }}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    
    <!-- Fallback meta tags -->
    <meta name="title" content="{{ $blog->meta_title }}">
    <meta name="description" content="{{ $blog->meta_description }}">
    <meta name="keywords" content="{{ $blog->meta_keyword ?? '' }}">  <!-- Fallback if meta_keyword is null -->
@endsection

@section('meta_title', $blog->meta_title)
@section('meta_description', $blog->meta_description)
@section('meta_keyword', $blog->meta_keyword ?? '')  <!-- Using null coalescing operator for fallback -->

@section('content')
<main>
        <section class="lyt-section blog-detail-section">
            <div class="container bs-blog-detail">
                <div class="row">
                    <div class="col-md-12">
                        <div class="blog-txt-wrapper">
                            <h2 class="bs-heading title-txt mrgB72 fnt-weight700 wow fadeInUp" data-wow-delay="0.2s"
                                style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">{{$blog->title}}</h2>
                            <div class="blg-deteil-date wow fadeInUp" data-wow-delay="0.3s"
                                style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
                                <span>{{date('M d, Y', strtotime($blog->postdate))}}</span>
                                <span > . </span>
                                <span> {{$blog->reading_time}} min read</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8 blog-detail-desc">
                        <article class="bs-blog-detail blog-detail-img-desc entry">
                            <div class="entry-img blog-detail-img">
                                <img src="{{$blog->banner_image}}" alt="blog-detail-banner"
                                    class="img-fluid blog-detail wow fadeInUp" data-wow-delay="0.4s"
                                    style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
                            </div>

                            <div class="author-blg-details wow fadeInUp" data-wow-delay="0.2s"
                                style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
                                <div class="profile-detail">
                                    <div class="profile-pic">
                                        <img src="{{$blog->blog_author_image}}" class="img-fluid profile"
                                            alt="profile-img">
                                    </div>
                                    <div class="author-detail">
                                        <p class="author-name">{{$blog->blog_author_name}} <span class="icon-verified-icon icon"></span></p>
                                        <p class="author-blog-detail"><span>{{date('M d, Y', strtotime($blog->postdate))}} </span> <span> · </span> <span> {{$blog->reading_time}}
                                                min read</span></p>
                                    </div>

                                </div>
                                <div class="social-icons">
                                    <ul>
                                        <li><a class="copylink-icon links" id="copyLink" data-bs-toggle="tooltip" data-bs-placement="bottom"
                                            data-bs-title="Link Copied!" onclick="copyLink()"><span
                                                    class="icon copy-icon icon-attachment"></span></a>
                                        </li>
                                        <li><a href="" class="copyfb-icon facebook"><span
                                                    class="icon fb-icon icon-facebook"></span></a>
                                        </li>
                                        <li><a href="" class="copylink-icon fbicon linkdin"><span
                                                    class="icon link-icon icon-linkdin"></span></a></li>
                                        <li><a href="" class="copytwitt twitter"><span
                                                    class="icon twit-icon icon-twitter"></span></a></li>
                                        <!-- <li><a href="" class="copywhatsapp-icon whatsapp"><span
                                                    class="icon whatsapp-icon icon-whatsapp"></span></a>
                                        </li> -->
                                        <li class="gmail"><a href="" class="copygmail-icon"><span
                                                    class="icon icon-gmail"><span class="path1"></span><span
                                                        class="path2"></span><span class="path3"></span><span
                                                        class="path4"></span><span class="path5"></span></span></a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="blog-para-desc wow fadeInUp" data-wow-delay="0.5s"
                                style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
                                {!! $blog->description !!}
                            </div>
                        </article><!-- End blog entry -->
                    </div><!-- End blog entries list -->

                    <div class="col-lg-4">
                        <section class="bs-blog typ-blog-detail-blog wow fadeInUp" data-wow-duration="0.4s"
                            style="visibility: visible; animation-duration: 0.8s; animation-name: fadeInUp;">
                            <div class="sidebar-heading">
                                <h2>Recent Post</h2>
                            </div>
                            <div class="sidebar-blg-detail">
                                @foreach($recentBlogs as $recentBlog)
                                <a href="{{ route('blog.detail',[$recentBlog->slug])}}" class="bs-blog-card">
                                    <div class="blog-detail-img">
                                        <img src="{{$recentBlog->thumbnail_image}}" alt="blog-detail-1"
                                            class="blog-img img-fluid">
                                    </div>
                                    <div class="blog-desc">
                                        <p>{{date('M d,Y', strtotime($recentBlog->postdate))}}</p>
                                        <h2>{{$recentBlog->title}}</h2>
                                    </div>
                                </a>
                                @endforeach
                            </div>


                        </section>
                    </div><!-- End blog sidebar -->

                </div>
                <!-- <div class="row">
                    <div class="col-lg-12 blog-detail-desc">
                        <article class="bs-blog-detail blog-detail-img-desc entry">
                            <div class="author-blg-details brd-bt">
                                <div class="profile-detail">
                                    <div class="author-detail">
                                        <p class="author-blog-detail"><span>Category:</span> <span><a
                                                    href="#">product,</a></span> <span> <a
                                                    href="#">design,</a></span><span> <a href="#">culture</a></span></p>
                                    </div>

                                </div>

                                <div class="social-icons">
                                    <ul>
                                        <li><a target="_blank" href="#" class="copylink-icon"><span
                                                    class="icon copy-icon icon-attachment"></span></a>
                                        </li>
                                        <li><a target="_blank" href="#" class="copyfb-icon"><span
                                                    class="icon fb-icon icon-facebook"></span></a>
                                        </li>
                                        <li><a target="_blank" href="#" class="copylink-icon"><span
                                                    class="icon link-icon icon-linkdin"></span></a></li>
                                        <li><a target="_blank" href="#" class="copytwitt"><span
                                                    class="icon twit-icon icon-twitter"></span></a></li>
                                        <li><a target="_blank" href="#" class="copywhatsapp-icon"><span
                                                    class="icon whatsapp-icon icon-whatsapp"></span></a>
                                        </li>
                                        <li><a target="_blank" href="#" class="copygmail-icon"><span
                                                    class="icon icon-gmail"><span class="path1"></span><span
                                                        class="path2"></span><span class="path3"></span><span
                                                        class="path4"></span><span class="path5"></span></span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </article>
                    </div>
                </div> -->


            </div>
        </section>

        <section class="lyt-section founder-section">
            <div class="fonuder-detail">
                <div class="container bs-blog-detail">
                    <div class="row">
                        <div class="content-wrapper wow fadeInUp" data-wow-duration="0.6s"
                            style="visibility: visible; animation-duration: 0.8s; animation-name: fadeInUp;">
                            <div class="col-md-8">
                                <div class="author-title">
                                    <h2 class="author-txt">About The Author</h2>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="img-txt-wrapper">

                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="founder-img">
                                                <img src="{{$blog->blog_author_image}}" class="img-fluid"
                                                    alt="founder">
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="founder-desc">
                                                <div class="txt-wrapper">
                                                    <p class="desc-txt">Written By</p>
                                                    <h2 class="author-name">{{$blog->blog_author_name}}<span
                                                    class="icon-verified-icon icon"></span></h2>
                                                    <p class="author-designation">{{$blog->blog_author_designation}}</p>
                                                </div>

                                                <a href="{{$blog->blog_author_linkding}}" target="_blank" class="social-icon"><i class="icon icon-linkdin"></i></a>
                                            </div>
                                        </div>
                                      </div>
                                </div>

                            </div>
                            <div class="col-md-8">
                            <div class="about-author">
                                @php
                                    $fullDescription = strip_tags($blog->blog_author_description);
                                    $truncatedDescription = Illuminate\Support\Str::limit($fullDescription, 210, '...');
                                @endphp
                                <p class="abt-txt initial-content">{!! $truncatedDescription !!}</p>
                                <p class="abt-txt additional-content" style="display: none;">{{ $fullDescription }}</p>
                                @if ($truncatedDescription !== $fullDescription)
                                    <a href="#" class="read-more">[Read More]</a>
                                @endif
                            </div>
                            </div>
                        </div>

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




        <section class="lyt-section typ-job typ-blg-detail-swiper">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading-wrapper typ-center">
                            <h2 class="bs-heading fnt-weight700 typ-theme1 wow fadeInUp" data-wow-duration="0.4s"
                                style="visibility: visible; animation-duration: 0.4s; animation-name: fadeInUp;">
                                What to read next
                            </h2>
                            <p class="bs-heading typ-subhd fnt-400 wow fadeInUp" data-wow-duration="0.6s"
                                style="visibility: visible; animation-duration: 0.6s; animation-name: fadeInUp;">Various
                                versions have evolved over the years, sometimes by accident.</p>
                        </div>
                    </div>
                </div>
                <div class="row swiper-reverse-margin">
                    <div class="col-md-12">
                        <div class="custom-navigation margB margB28  wow fadeInUp" data-wow-duration="0.8s"
                            style="visibility: visible; animation-duration: 0.8s; animation-name: fadeInUp;">
                            <div class="swiper-button-next job-next" tabindex="0" role="button" aria-label="Next slide"
                                aria-controls="swiper-wrapper-6fcb255da3c673b5" aria-disabled="false"></div>
                            <div class="swiper-button-prev prev-next swiper-button-disabled" tabindex="-1" role="button"
                                aria-label="Previous slide" aria-controls="swiper-wrapper-6fcb255da3c673b5"
                                aria-disabled="true"></div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="bs-swiper typ-blog-detail-swiper wow fadeInUp" data-wow-duration="0.8s"
                            style="visibility: visible; animation-duration: 0.8s; animation-name: fadeInUp;">
                            <div
                                class="swiper blog-detail-swiper swiper-initialized swiper-horizontal swiper-backface-hidden">
                                <div class="swiper-wrapper" id="swiper-wrapper-6fcb255da3c673b5" aria-live="polite">
                                @foreach($recentBlogs as $recentBlog)
                                    <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 5"
                                        style="width: 306px; margin-right: 24px;">
                                        <a class="bs-card typ-blog-card typ-blg-detail-swipercard" href="{{ route('blog.detail',[$recentBlog->slug])}}">
                                            <div class="blog-card-img">

                                                <img src="{{$recentBlog->thumbnail_image}}"
                                                    class="blog-img img-fluid" alt="blog-img">
                                            </div>
                                            <div class="card-body blog-body">
                                                <div class="date-time-detail">
                                                    <img src="{{ env('APP_URL') }}assets/images/blog-detail/calender.svg"
                                                        class="img-fluid calender" alt="calender">
                                                    <p class="date">{{date('M d,Y', strtotime($recentBlog->postdate))}}</p>
                                                    <!-- <p class="reading-time">3min reading</p> -->
                                                </div>
                                                <div class="card-title">
                                                    <p class="title-txt">{{ Illuminate\Support\Str::limit(strip_tags(html_entity_decode($recentBlog->title)), 50, '...') }}</p>
                                                </div>
                                                <div class="card-desc">
                                                    <p class="desc-txt">{{ Illuminate\Support\Str::limit(strip_tags(html_entity_decode($recentBlog->description)), 100, '...') }}</p>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    @endforeach
                                </div>
                                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <a href="{{route('blog.listing')}}" class="btn bs-btn typ-cta  wow fadeInUp" data-wow-duration="1.2s"
                            style="visibility: visible; animation-duration: 1.2s; animation-name: fadeInUp;">View
                            All<span class="icon icon-right-arrow"></span></a>
                    </div>
                </div>
            </div>
        </section>

    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll('.read-more').forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    var parent = this.parentNode;
                    var initialContent = parent.querySelector('.initial-content');
                    var additionalContent = parent.querySelector('.additional-content');
                    if (additionalContent.style.display === 'none') {
                        initialContent.style.display = 'none';
                        additionalContent.style.display = 'block';
                        this.innerText = '[Read Less]';
                    } else {
                        initialContent.style.display = 'block';
                        additionalContent.style.display = 'none';
                        this.innerText = '[Read More]'; 
                    }
                });
            });
        });




          function copyLink() {
        var url = window.location.href;

        // Create a temporary input element
        var tempInput = document.createElement("input");
        tempInput.style = "position: absolute; left: -1000px; top: -1000px";
        tempInput.value = url;
        document.body.appendChild(tempInput);

        // Select the URL and copy it to the clipboard
        tempInput.select();
        document.execCommand("copy");

        // Remove the temporary input element
        document.body.removeChild(tempInput);

      var copyLinkBtn = document.getElementById('copyLink');
      var tooltip = new bootstrap.Tooltip(copyLinkBtn);

      tooltip.show();
      setTimeout(function () {
        tooltip.hide();
        copyLinkBtn.addEventListener('click', copyLink); // Reset the click event listener after hiding tooltip
      }, 2000); // 3 seconds delay

      // Remove the event listener to prevent multiple tooltips on subsequent clicks
      copyLinkBtn.removeEventListener('click', copyLink);

      // Add a click event listener to re-enable showing the tooltip on click
      copyLinkBtn.addEventListener('click', copyLink);
    }
  $(document).ready(function() {


    // Social media sharing functionality (replace '#' with the appropriate URLs)
    $('.facebook').click(function() {
        window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href));
    });

    $('.linkdin').click(function() {
        window.open('https://www.linkedin.com/shareArticle?url=' + encodeURIComponent(window.location.href));
    });

    $('.twitter').click(function() {
        window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(window.location.href));
    });

    $('.whatsapp').click(function() {
        window.open('whatsapp://send?text=' + encodeURIComponent(window.location.href));
    });

    $('.gmail').click(function() {
        event.preventDefault();
        window.open('mailto:?body=' + encodeURIComponent(window.location.href));
    });
});

</script>
@endsection