@section('title', $blog->meta_title)
@section('description', $blog->meta_description)
@section('keywords', $blog->meta_keywords)
@section('tags', $blog->meta_tags)
@extends('front.new.layouts.app')
@section('content')
    <!-- Stat Blog Details Area, pt-5 previously -->
    <div class="blog-details-area pt-150">
        <div class="container">
            <div class="row d-flex">

                <div class="col-lg-8 col-md-12">

                    <div class="heading pt-4">
                        @if(isset($blog['name']))
                            <h1 style="font-family: Noto Sans, sans-se rif !important;">{{ $blog['name'] }}</h1>
                        @endif

                        <div class="d-flex align-items-center gap-3">
                            <div class="mb-3 fw-bold">
                                <span style="font-family: Noto Sans, sans-se rif !important;">Date:</span>
                                {{ \Carbon\Carbon::parse($blog->b_date)->format('M d, Y') }}
                            </div>
                        </div>
                    </div>
                    {{--banner_url_name previously: href="{{route('blog-details',$blog->slug)}}" > need to update blog-post-detail for new blade --}}
                    <a href="{{route('blog-details',$blog->slug)}}" target="_blank" class="blog-img">
                        {{--                        <img src="{{route('blog-banner.getImageBanner',[$blog->id,$blog->img]) }}" alt="" class="main">--}}
                        <img src="{{ URL('/') }}/front/images/new-giu/blog/{{ $blog->img }}" alt="">
                    </a>

                    <div class="news-events-deltails-content" style="font-family: Noto Sans, sans-serif !important;">
                        @if(isset($blog['long_description']))
                            {!! $blog['long_description'] !!}
                        @endif
                    </div>

                    {{-- Tags --}}
                    <div class="mb-3">
                        @if($tags->count())
                            <div class="d-flex align-items-center flex-wrap rounded-pill px-3 py-2 mt-4"
                                 style="background-color: var(--green)">
                                <span class="fw-bolder h4 me-3 ms-3 mt-2 text-white"
                                      style="font-family: Noto Sans, sans-se rif !important;">Tags:</span>
                                @foreach($tags as $tag)
                                    <a href="#"
                                       class="badge bg-white h3 rounded-pill me-2 mt-2"
                                       style="color: black;font-family: Noto Sans, sans-se rif !important;">
                                        {{ $tag->name }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <section class="bg-light">
                        <div class="container">
                            <div class="text-center mb-3">
                                <h2 class="h4 fw-bold text-primary text-black-50"
                                    style="font-family: Noto Sans, sans-se rif !important;"> Share on Social Media</h2>
                            </div>
                            @if($relevantBlogs->count()>0)
                                <h2 class="h4 fw-bold text-primary mb-3"
                                    style="color: #111111 !important;font-family: Noto Sans, sans-se rif !important;">
                                    Recommended For You</h2>
                                {{--banner_url_name --}}
                                <div class="owl-carousel owl-theme recent-blogs-slider">
                                    {{--banner_url_name previously: href="{{route('blog-details',$blog->slug)}}" > need to update blog-post-detail for new blade --}}
                                @foreach($relevantBlogs as $recent)
                                        <div class="item px-2">
                                            <a href="{{ route('blog-details', $recent->slug) }}"
                                               class="text-decoration-none blog-link"
                                               data-blog-id="{{$recent->id}}">
                                                <div
                                                    class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 blog-card">
                                                    <div class="position-relative overflow-hidden">
{{--                                                        <img--}}
{{--                                                            src="{{ URL('/') }}/front/images/new-giu/blog/{{ $recent->img }}"--}}
{{--                                                            class="card-img-top blog-img"--}}
{{--                                                            alt="{{ $recent['name'] }}"--}}
{{--                                                            style="height: 125px; object-fit: cover; transition: transform 0.5s ease;"--}}
{{--                                                            loading="lazy">--}}
                                                        <div class="giu-blog-img-container position-relative overflow-hidden">
                                                            <img
                                                                src="{{ URL('/') }}/front/images/new-giu/blog/{{ $recent->img }}"
                                                                class="card-img-top"
                                                                alt="{{ $recent['name'] }}"
                                                                loading="lazy">
                                                        </div>
                                                    </div>
                                                    <div class="card-body p-3">
                                                        <h4 class="h6 card-title fw-bold mb-0"
                                                            style="color: #111111; min-height: 50px;font-family: Noto Sans, sans-se rif !important;">
                                                            {{ Str::limit($recent['name'], 60) }}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                        </div>
                    </section>

                </div>

                <div class="col-lg-4 col-md-12 ps-lg-5 sidebar-offset">
                    <div class="row">
                        @if($viewedBlogs->count()>0)
                            <div class="col-md-6 col-lg-12 col-12 mb-4 text-start text-md-start">
                                <h2 class="h6 p-0 fw-bold" style="font-family: Noto Sans, sans-se rif !important;">Readers Also Viewed These Articles</h2>
                                <hr class="w-75 hr-bold">
                                @foreach($viewedBlogs as $view)
                                    <div class="item p-0">
                                        <a href="{{ route('blog-details', $view['slug']) }}"
{{--                                        <a href="{{ route('blog-post-detail', $view->slug), data-blog-id="{{$recent->id}}" }}"--}}
                                           class="text-decoration-none blog-link"
                                           data-blog-id="{{$view->id}}">
                                            <div class="position-relative overflow-hidden mb-2 p-0">
                                                <img
{{--                                                    src="{{route('blog-banner.getImageBanner',[$recent->id,$recent->img]) }}"--}}
                                                    src="{{ URL('/') }}/front/images/new-giu/blog/{{ $view->img }}"
{{--                                                    class="card-img-top blog-img"--}}
                                                    alt="{{ $view['name'] }}"
                                                    style="height: 70px; width: 120px; object-fit: cover; transition: transform 0.5s ease;">
                                            </div>
                                            <div class="mt-1">
                                                <p class="h6 card-title mb-0 text-wrap fw-bold"
                                                   style="color: #111111; min-height: 50px; word-break: break-word;font-family: Noto Sans, sans-se rif !important;">
                                                    {{ Str::limit($view['name'], 100) }}
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        @if($categories->count()>0)
                            <div class="col-md-6 col-lg-12 col-12 mb-4 text-start text-md-start">
                                <h2 class="h6 p-0 fw-bold">Categories</h2>
                                <hr class="w-25 hr-bold">
                                <ul class="category-list">
                                    @foreach($categories as $category)
                                        <li>
                                            {{ $category->name  }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
{{--                                        thumbnail_url_name--}}
                    @if($newsEvents->count()>0)
                        <div class="row pt-2">
                            <div class="col-12 text-start text-md-start">
                                <h2 class="h6 p-0 fw-bold">News & Events</h2>
                                <hr class="w-50 hr-bold">
                                @foreach($newsEvents as $newsEvent)
                                    <div class="item p-0">
{{--                                        <a href="{{route('news-and-events-details',$newsEvent->slug)}}"--}}
                                        <a href="{{ route('post-detail', $newsEvent->slug) }}"
                                           class="text-decoration-none blog-link"
                                           data-blog-id="{{$newsEvent->id}}">
                                            <div class="position-relative overflow-hidden mb-2 p-0">
{{--                                                <img--}}
{{--                                                    src="{{route('event-thumbnail.getImageThumbnail',[$newsEvent->id,$newsEvent->img]) }}"--}}
{{--                                                    class="card-img-top blog-img"--}}
{{--                                                    alt="{{ $newsEvent['name'] }}"--}}
{{--                                                    style="height: 70px; width: 120px; object-fit: cover; transition: transform 0.5s ease;">--}}
                                                <img
                                                    src="{{URL('/')}}/front/images/new-giu/news-events/{{ $newsEvent->img }}"
{{--                                                    class="card-img-top"--}}
                                                    alt="{{ $newsEvent['name'] }}"
                                                    style="height: 70px; width: 120px; object-fit: cover; transition: transform 0.5s ease;" loading="lazy">
                                            </div>
                                            <div class="mt-1">
                                                <p class="h6 card-title mb-0 text-wrap fw-bold"
                                                   style="color: #111111; min-height: 50px; word-break: break-word;">
                                                    {{ Str::limit($newsEvent['name'], 100) }}
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                </div>

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

    {{--    <!-- End Blog Details Area -->--}}

@endsection

@push('js')
{{--    <script src="{{ asset('front/js/owl.carousel.min.js') }}"></script>--}}
    <script>
        $(document).ready(function () {
            var blogCount = {{ count($relevantBlogs) }}

            // Destroy existing carousel if it exists
            // if ($('.recent-blogs-slider').hasClass('owl-loaded')) {
            //     $('.recent-blogs-slider').trigger('destroy.owl.carousel');
            // }

            $(".recent-blogs-slider").owlCarousel({
                loop: blogCount > 3,
                margin: 20,
                dots: true,
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    576: {
                        items: 2
                    },
                    992: {
                        items: 3
                    }
                }
            });
        });
    </script>
{{--    <script>--}}
{{--        $(document).ready(function () {--}}
{{--            $(document).on('click', '.blog-link', function (e) {--}}
{{--                e.preventDefault();--}}

{{--                let blogId = $(this).data('blog-id');--}}
{{--                let blogUrl = $(this).attr('href');--}}

{{--                $.ajax({--}}
{{--                    url: '{{ route('blog.track-view') }}',--}}
{{--                    type: 'POST',--}}
{{--                    data: {--}}
{{--                        blog_id: blogId,--}}
{{--                        _token: '{{ csrf_token() }}'--}}
{{--                    },--}}
{{--                    success: function (response) {--}}
{{--                        console.log('View tracked successfully');--}}
{{--                    },--}}
{{--                    error: function (xhr, status, error) {--}}
{{--                        console.error('Error tracking view:', error);--}}
{{--                    },--}}
{{--                    complete: function () {--}}
{{--                        // Navigate to blog details page after tracking--}}
{{--                        window.location.href = blogUrl;--}}
{{--                    }--}}
{{--                });--}}
{{--            });--}}
{{--        })--}}
{{--    </script>--}}
@endpush