@extends('frontend.layouts.app')
@section('page_title', $blog->seo_title)
@section('description', $blog->seo_description)
@section('keywords', $blog->seo_keyword)
@section('tags', $blog->seo_tags)
@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::newsArticle(
            $blog['name'],
           asset('storage/' . $blog->cover_image),
            date('c', strtotime($blog->blog_date)),
        ),
    ) !!}
@endpush
@section('content')
    <!-- Stat Blog Details Area -->
    <div class="py-5 hero-section-about-page">
        {{-- Right Side Pin Buttons --}}
        <div class="blog-side-buttons d-none d-md-flex flex-column align-items-end">
            <a href="/Contact-us" class="hero-visit-btn text-decoration-none" data-aos-delay="700">Book a Visit</a>
            <a href="/admission" class="hero-admission-btn text-decoration-none" data-aos-delay="700">Admission Form</a>
            <a href="{{ url('/') }}#calendar-section" class="hero-calendar-btn text-decoration-none" data-aos-delay="700">School Calendar</a>
        </div>
        {{-- Left Side Pin Social Icons --}}
        <div class="blog-social-icons d-none d-md-flex flex-column">
            <a href="https://www.facebook.com/igss.edu.pk/" class="hero-fb-icon" target="_blank" title="Facebook">
                <img src="{{ asset('assets/img/facebook.svg') }}" alt="Facebook">
            </a>
            <a href="https://www.instagram.com/igss.edu.pk/" class="hero-insta-icon" target="_blank" title="Instagram">
                <img src="{{ asset('assets/img/instagram.svg') }}" alt="Instagram">
            </a>
            <a href="https://www.youtube.com/@IgniteSchoolSystem/" class="hero-yt-icon" target="_blank" title="YouTube">
                <img src="{{ asset('assets/img/youtube.svg') }}" alt="YouTube">
            </a>
            <a href="https://www.linkedin.com/company/ignite-school-system//" class="hero-link-icon" target="_blank" title="LinkedIn">
                <img src="{{ asset('assets/img/linkedin.svg') }}" alt="LinkedIn">
            </a>
        </div>
        <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 class="fw-bold" style="font-family: Noto Sans, sans-serif !important;">{{ $blog['name'] }}</h1>
                        @endif
                        <div class="d-flex align-items-center gap-3">
                            <div class="mb-3" style="color: var(--light-text)">
                                <span style="font-family: Noto Sans, sans-serif !important;">Date:</span>
                                {{ \Carbon\Carbon::parse($blog->blog_date)->format('M d, Y') }}
                            </div>
                        </div>
                    </div>
                    <div class="blog-img-wrapper mb-4" style="width: 100%; overflow: hidden;">
                        <a href="{{route('blog.show', $blog['slug'])}}" target="_blank">
                            @if(isset($blog->cover_image))
                                <img src="{{ asset('storage/' . $blog->cover_image) }}"
                                     alt="{{ $blog->name }}"
                                     class="img-fluid w-100"
                                     style="object-fit: cover; max-height: 500px; display: block;">
                            @else
                                <img src="{{ asset('assets/img/default.jpg') }}" class="img-fluid w-100">
                            @endif
                        </a>
                    </div>
                    <div class="news-events-deltails-content" style="font-family: Noto Sans, sans-serif !important;">
                        @if(isset($blog->description))
                            {!! $blog->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(--primary)">
                                <span class="fw-bolder h4 me-3 ms-3 mt-2 text-white"
                                      style="font-family: 'Noto Sans', sans-serif !important;">Tags:</span>
                                @foreach($tags as $tag)
                                    <a href="#"
                                       class="badge bg-white h3 rounded-pill me-2 mt-2 text-decoration-none"
                                       style="color: black; font-family: 'Noto Sans', sans-serif !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-serif !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-serif !important;">
                                    Recommended For You</h2>
                                <div class="owl-carousel owl-theme recent-blogs-slider">
                                    @foreach($relevantBlogs as $recent)
                                        <div class="item px-2">
                                            <a href="{{ route('blog.show', $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">
                                                        <div
                                                            class="giu-blog-img-container position-relative overflow-hidden">
                                                            @if(isset($recent->cover_image))
                                                                <img
                                                                    src="{{ asset('storage/' . $recent->cover_image) ?? asset('assets/img/default.jpg') }}"
                                                                    class="card-img-top" alt="{{ $recent['name'] }}"
                                                                    loading="lazy">
                                                            @endif
                                                        </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-serif !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-serif !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.show', $view['slug']) }}"
                                           class="text-decoration-none blog-link"
                                           data-blog-id="{{$view->id}}">
                                            <div class="position-relative overflow-hidden mb-2 p-0">
                                                @if(isset($view->cover_image))
                                                    <img
                                                        src="{{ asset('storage/' . $view->cover_image) ?? asset('assets/img/default.jpg') }}"
                                                        class="card-img-top" alt="{{ $view['name'] }}"
                                                        style="height: 70px; width: 120px; object-fit: cover; transition: transform 0.5s ease;"
                                                        loading="lazy">
                                                @endif
                                            </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-serif !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" style="text-transform: capitalize;">
                                    @foreach($categories as $category)
                                        <li>
                                            {{ $category->name  }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    @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('newsEventDetail', $newsEvent->slug) }}"
                                           class="text-decoration-none blog-link"
                                           data-blog-id="{{$newsEvent->id}}">
                                            <div class="position-relative overflow-hidden mb-2 p-0">
                                                @if(isset($newsEvent->cover_image))
                                                    <img
                                                        src="{{ asset('storage/' . $newsEvent->cover_image) ?? asset('assets/img/default.jpg') }}"
                                                        class="card-img-top" alt="{{ $newsEvent['name'] }}"
                                                        style="height: 70px; width: 120px; object-fit: cover; transition: transform 0.5s ease;"
                                                        loading="lazy">
                                                @endif
                                            </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('footer-scripts')
    <script>
        $(document).ready(function () {
            var blogCount = {{ count($relevantBlogs) }}

            $(".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