@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')

@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::newsArticle(
            $blog->name,
            URL('/') . '/front/images/new-giu/blog/' . $blog->img,
            date('c', strtotime($blog->b_date)),
        ),
    ) !!}
@endpush

@section('content')
    <!-- Stat Blog Details Area, pt-5 previously -->
    <div class="blog-details-area pt-150">
        {{-- Right Side Pin Buttons --}}
        <div class="blog-side-buttons d-none d-md-flex flex-column align-items-end">
            <a href="https://admission.giu.edu.pk/" class="hero-apply-btn text-decoration-none" data-aos-delay="700">Apply
                Online</a>
            <a href="/fee-structure" class="hero-feeStructure-btn text-decoration-none" data-aos-delay="700">Fee Structure</a>
            <a href="/scholarship-policy" class="hero-scholarships-btn text-decoration-none"
                data-aos-delay="700">Scholarships</a>
            <a href="/international/fewer-opportunities" class="hero-inPrograms-btn text-decoration-none"
                data-aos-delay="700">International Programs</a>
            <a href="/news-letters" class="hero-newsLetter-btn text-decoration-none" data-aos-delay="700">Our News
                Letter</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/studyatgiu/" class="hero-fb-icon" target="_blank" title="Facebook">
                <img src="{{ asset('front/icons/facebook.svg') }}" alt="Facebook">
            </a>
            <a href="https://www.instagram.com/studyatgiu/" class="hero-insta-icon" target="_blank" title="Instagram">
                <img src="{{ asset('front/icons/instagram.svg') }}" alt="Instagram">
            </a>
            <a href="https://www.youtube.com/@studyatgiu/" class="hero-yt-icon" target="_blank" title="YouTube">
                <img src="{{ asset('front/icons/youtube.svg') }}" alt="YouTube">
            </a>
            <a href="https://www.linkedin.com/in/studyatgiu/" class="hero-link-icon" target="_blank" title="LinkedIn">
                <img src="{{ asset('front/icons/linkedin.svg') }}" alt="LinkedIn">
            </a>
            <a href="https://www.tiktok.com/@studyatgiu/" class="hero-tiktok-icon" target="_blank" title="TikTok">
                <img src="{{ asset('front/icons/tiktok.svg') }}" alt="TikTok">
            </a>
            <a href="https://www.snapchat.com/add/studyatgiu/" class="hero-snap-icon" target="_blank" title="Snapchat">
                <img src="{{ asset('front/icons/snapchat.svg') }}" alt="Snapchat">
            </a>
            <a href="https://twitter.com/studyatgiu/" class="hero-twitter-icon" target="_blank" title="X">
                <img src="{{ asset('front/icons/twitter.svg') }}" alt="X">
            </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 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 fw-bold">
                                <span style="font-family: Noto Sans, sans-serif !important;">Date:</span>
                                {{ \Carbon\Carbon::parse($blog->b_date)->format('M d, Y') }}
                            </div>
                        </div>
                    </div>
                    <a href="{{ route('blog-details', $blog->slug) }}" target="_blank" class="blog-img">
                        <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']))
                            <div class="rich-text-content">
                                {!! $blog['long_description'] !!}
                            </div>
                        @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-serif !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-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-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">
                                                        <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-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-details', $view['slug']) }}"
                                            class="text-decoration-none blog-link" data-blog-id="{{ $view->id }}">
                                            <div class="position-relative overflow-hidden mb-2 p-0">
                                                <img src="{{ URL('/') }}/front/images/new-giu/blog/{{ $view->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-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">
                                    @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('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="{{ URL('/') }}/front/images/new-giu/news-events/{{ $newsEvent->img }}"
                                                    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>
        $(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