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

@section('page_title', $blog->seo_title)
@section('description', $blog->seo_description)
@section('keywords', $blog->seo_keyword ?? '')
@section('tags', $blog->seo_tags ?? '')

@section('content')

    <div class="blog-details-area pt-5" style="margin-top: 80px;">

        <div class="blog-side-buttons d-none d-md-block">
            <a href="{{route('onlineApplication')}}" class="hero-newsLetter-btn text-decoration-none" data-aos-delay="700">Apply Online</a>
            <a href="{{route('contactUs')}}" class="hero-apply-btn-contact text-decoration-none" data-aos-delay="700">Contact Us</a>
            <a href="{{route('feeStructure')}}" class="hero-meritList-btn text-decoration-none" data-aos-delay="700">Fee Structure</a>
        </div>

        <div class="blog-social-icons d-none d-md-block">
            <a href="https://www.facebook.com/ALIZCollege" class="hero-fb-icon">
                <img src="{{ asset('assets/images/fb-icon.png') }}" alt="Facebook" class="blog-social-img">
            </a>
            <a href="tel:03301980735" class="hero-link-icon">
                <img src="{{ asset('assets/images/whatsapp-icon.png') }}" alt="Whatsapp" class="blog-social-img">
            </a>
            <a href="#" class="hero-insta-icon">
                <img src="{{ asset('assets/images/insta.png') }}" alt="Instagram" class="blog-social-img">
            </a>
        </div>

        <div class="container">
            <div class="row d-flex">

                {{-- Main Content --}}
                <div class="col-lg-8 col-md-12">

                    <div class="heading pt-4">
                        @if($blog->name)
                            <h1>{{ $blog->name }}</h1>
                        @endif

                        <div class="d-flex align-items-center gap-3">
                            <div class="mb-3 fw-bold">
                                <span>Date:</span>
                                {{ \Carbon\Carbon::parse($blog->blog_date)->format('M d, Y') }}
                            </div>
                        </div>
                    </div>

                    <a href="{{ route('blog.show', $blog->slug) }}" target="_blank" class="blog-img">
                        <img src="{{ $blogData['image'] }}" alt="{{ $blog->name }}" class="main img-fluid w-100">
                    </a>

                    <div class="news-events-deltails-content mt-4">
                        @if($blog->description)
                            {!! $blog->description !!}
                        @endif
                    </div>

                    {{-- Tags --}}
                    @if($tags->count())
                        <div class="mb-3">
                            <div class="d-flex align-items-center flex-wrap rounded-pill px-3 py-2 mt-4"
                                 style="background-color: #2D1B69">
                                <span class="fw-bolder h4 me-3 ms-3 mt-2 text-white">Tags:</span>
                                @foreach($tags as $tag)
                                    <a href="{{ route('blog') }}?tag={{ $tag->slug }}" class="badge tag-badge"
                                       style="background-color: #6b5ca5;font-family: 'Poppins', sans-serif; color: #fff; font-size: 0.9rem; padding: 8px 15px; border-radius: 20px; text-decoration: none; transition: all 0.3s;">
                                        {{ $tag->name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    {{-- Share + Recommended --}}
                    <section class="bg-light">
                        <div class="container">
                            <div class="text-center mb-3">
                                <h2 class="h4 fw-bold text-primary text-black-50"
                                >Share on Social Media</h2>
                            </div>

                            @if($relevantBlogs->count() > 0)
                                <h2 class="h4 fw-bold text-primary mb-3"
                                    style="color: #111111 !important;text-align: left">
                                    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">
                                                <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 blog-card">
                                                    <div class="position-relative overflow-hidden">
                                                        <img
                                                            src="{{ $recent['image'] }}"
                                                            class="card-img-top blog-img"
                                                            alt="{{ $recent['title'] }}"
                                                            style="height: 125px; object-fit: cover; transition: transform 0.5s ease;">
                                                    </div>
                                                    <div class="card-body p-3">
                                                        <h4 class="h6 card-title fw-bold mb-0"
                                                            style="color: #111111; min-height: 50px;">
                                                            {{ Str::limit($recent['title'], 60) }}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                        </div>
                    </section>

                </div>

                {{-- Sidebar --}}
                <div class="col-lg-4 col-md-12 ps-lg-5 sidebar-offset">
                    <div class="row">

                        {{-- Readers Also Viewed --}}
                        @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" style="text-align: left;font-weight: 700;">
                                    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">
                                                <img
                                                    src="{{ !empty($view->cover_image) ? asset('storage/' . $view->cover_image) : asset('assets/images/default-blog.jpg') }}"
                                                    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="card-body">
                                                <p class="h6 card-title mb-0 text-wrap"
                                                   style="color: #111111; min-height: 50px; word-break: break-word;font-weight: 700;">
                                                    {{ Str::limit($view['name'], 100) }}
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        {{-- Categories --}}
                        @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" style="text-align: left;font-weight: 700;">Categories</h2>
                                <hr class="w-25 hr-bold">
                                <ul>
                                    @foreach($categories as $category)
                                        <li>{{ $category->name }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                    </div>
                </div>

            </div>
        </div>

    </div>

@endsection

@push('footer-scripts')
    <script>
        $(document).ready(function () {
            var blogCount = {{ count($recentBlogs ?? []) }};

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