@extends('frontend.layouts.app')
@section('page_title',$blogData['seo_title'])
@section('description',$blogData['seo_description'])
@section('keywords',$blogData['seo_keyword'])
@section('tags',$blogData['seo_tags'])

@section('content')

    <!-- Blog Detail Section -->
    <section class="py-5 hero-section-about-page">
        <div class="container">
            <div class="row">
                <!-- Blog Content -->
                <div class="col-12">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                        <img src="{{ $blogData['image'] }}" class="card-img-top" alt="Blog Image" style="max-height: 450px; object-fit: cover;">
                        <div class="card-body p-4">
                            <h1 class="fw-bold mb-3">{{ $blogData['title'] }}</h1>
                            <div class="d-flex align-items-center text-muted mb-3">
                                <i class="bi bi-calendar-event me-2"></i>
                                <small>{{ \Carbon\Carbon::parse($blogData['blog_date'])->format('M d, Y') }}</small>
                            </div>
                            <p class="lh-lg text-secondary" style="font-size: 1.05rem;">{!! $blogData['description'] !!}</p>

                            @if(count($blogData['tags']))
                                <div class="mt-4 blog-tags p-3 rounded-3" style="background-color: #06377B;">
                                    <h6 class="fw-bold text-white mb-3">Tags:</h6>
                                    @foreach($blogData['tags'] as $tag)
                                        <a href="#"
                                           class="badge me-2 mb-2"
                                           style="background-color: #ED1A3B; color: #fff; font-size: 0.9rem; padding: 11px 15px; border-radius: 20px;">
                                            {{ $tag->name }}
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold text-primary mb-2" style="color: #06377B !important;">Relevant Blogs</h2>
                <div class="mx-auto bg-danger rounded" style="width: 80px; height: 3px; background-color: #ED1A3B !important;"></div>
            </div>

            <div class="owl-carousel owl-theme recent-blogs-slider">
                @foreach($recentBlogs as $recent)
                    <div class="item px-2">
                        <a href="{{ route('blog.show', $recent['slug']) }}" class="text-decoration-none">
                            <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: 180px; object-fit: cover; transition: transform 0.5s ease;">
                                </div>
                                <div class="card-body p-3">
                                    <h6 class="card-title fw-bold mb-0" style="color: #06377B; min-height: 50px;">
                                        {{ Str::limit($recent['title'], 60) }}
                                    </h6>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


@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>
@endpush