@extends('frontend.layouts.app')
@section('title',$blog->seo_title)
@section('description',$blog->seo_description)
@section('keywords',$blog->seo_keyword)
@section('tags',$blog->seo_tags)

@push('head-scripts')
    <link rel="stylesheet" href="{{ asset('frontend/owl/css/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/owl/css/owl.theme.default.min.css') }}">

    <style>
        /* Related Blogs Section */
        .related-blogs-section {
            background: #f8f9fa;
            padding: 60px 0;
        }

        .related-blogs-title {
            /*color: #115640;*/
            font-weight: 700;
            margin-bottom: 10px;
            font-family:sans-serif !important;
        }

        .title-divider {
            width: 80px;
            height: 3px;
            background: #ffc107;
            margin: 0 auto 40px;
            border-radius: 2px;
        }

        /* Carousel Item Wrapper */
        .related-blog-item {
            padding: 0 10px;
        }

        /* Blog Card */
        .related-blog-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .related-blog-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        /* Image Container */
        .related-blog-image {
            position: relative;
            overflow: hidden;
            height: 120px;
            background: #f0f0f0;
        }

        .related-blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .related-blog-card:hover .related-blog-image img {
            transform: scale(1.1);
        }

        /* Content */
        .related-blog-content {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .related-blog-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #115640;
            margin-bottom: 12px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-family:sans-serif !important;
        }
        .blog-title{
            font-size:22px;
            font-weight:700;
            font-family:sans-serif !important;
        }
        .related-blog-date {
            color: #666;
            font-size: 0.875rem;
            margin-top: auto;
        }

        .related-blog-date i {
            color: #115640;
            margin-right: 5px;
        }

        /* Owl Carousel Custom Styles */
        .related-blogs-carousel.owl-carousel {
            position: relative;
        }

        .related-blogs-carousel .owl-stage-outer {
            overflow: hidden;
            position: relative;
        }

        .related-blogs-carousel .owl-stage {
            display: flex;
        }

        .related-blogs-carousel .owl-item {
            float: left;
        }

        /* Dots */
        .related-blogs-carousel .owl-dots {
            text-align: center;
            margin-top: 30px;
        }

        .related-blogs-carousel .owl-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            transition: all 0.3s ease;
            border: none;
            padding: 0;
        }

        /* Link Reset */
        .related-blog-link {
            text-decoration: none;
            color: inherit;
            display: block;
            height: 100%;
        }

        /* floating */
        .floating-left{
            position:fixed;
            left:15px;
            top:40%;
            gap:15px;
            z-index:999;
        }
        /* RIGHT SIDE BUTTONS FINAL FIX */
        .floating-right{
            position:fixed;
            right:0;
            top:50%;
            transform:translateY(-50%);
            display:flex;
            flex-direction:column;
            align-items:flex-end;   /* important */
            gap:14px;
            z-index:9999;
        }

        /* button look */
        /* RIGHT SIDE BUTTONS FINAL FIX */
        .floating-right {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column; /* stack vertically */
            align-items: flex-end;   /* align to the right */
            gap: 14px;
            z-index: 9999;
        }

        /* button look */
        .float-btn {
            display: block;
            background: #E8063C;  /* changed to match your image color */
            color: #fff;
            padding: 30px 4px;
            border-radius: 30px 0 0 30px;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            transition: all 0.3s ease;
            text-align: center; /* ensures text is centered inside button */
            writing-mode: sideways-lr;
        }

        /* slide effect (nice UX) */
        .float-btn:hover {
            padding-right: 28px;
            background: #E8063C; /* slightly darker on hover */
            color: #fff;
        }

        /* sidebar */
        .sidebar-box{
            margin-bottom:40px;
        }
        .sidebar-title{
            font-weight:700;
            margin-bottom:20px;
            border-bottom:1px solid #ddd;
            padding-bottom:10px;
            font-family:sans-serif !important;

        }

        /* sidebar blog item */
        .side-blog{
            display:flex;
            flex-direction: column;
            gap:15px;
            margin-bottom:20px;
        }
        .side-blog img{
            width:110px;
            height:75px;
            object-fit:cover;
            /*border-radius:6px;*/
        }
        .side-blog a{
            font-weight:700;
            color:#000;
            line-height:1.3;
            font-family:sans-serif !important;

        }
        .category-list li{
            margin-bottom:8px;
            font-family:sans-serif !important;
            color:black !important; ;
        }

        .h2,
        h2 {
            font-size: 20px;
        }
        .sidebar-offset {
            margin-top: 40%; /* adjust kar sakti ho 80–160px */
        }

        @media (max-width: 991px) {
            .sidebar-offset {
                margin-top: 40px; /* mobile me zyada gap na ho */
            }
        }
        .wp-block-tag-cloud a, .tagcloud a {
            position: relative;
            display: inline-block;
            border: none;
            z-index: 1;
            font-size: 11px !important;
            font-weight: 600;
            line-height: 1;
            padding: 12px 22px;
            margin-right: 5px;
            margin-bottom: 10px;
            color: var(--title-color);
            background-color: var(--smoke-color);
            font-family: var(--title-font);
            border-radius: 9999px;
            text-transform: none;
        }
    </style>
@endpush

@section('content')
    <!--==============================
    Breadcumb
============================== -->
{{--    <div class="breadcumb-wrapper " data-bg-src="{{asset('frontend/coreui/assets/img/breadcumb/breadcumb-bg.jpg')}}">--}}
{{--        <div class="container z-index-common">--}}
{{--            <div class="breadcumb-content">--}}
{{--                <span class="breadcumb-title h1">Blog Detail</span>--}}
{{--                <p class="breadcumb-text">Linking life to learning</p>--}}
{{--                <div class="breadcumb-menu-wrap">--}}
{{--                    <ul class="breadcumb-menu">--}}
{{--                        <li><a href="{{route('front.home')}}">Home</a></li>--}}
{{--                        <li><a href="{{route('front.blog')}}">Blog</a></li>--}}
{{--                        <li>{{$blog->name}}</li>--}}
{{--                    </ul>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

    <!--==============================
    Blog Details Area
    ==============================-->



    <section class="vs-blog-wrapper blog-details mt-5 space-extra-bottom">
        <div class="container">
            <div class="row gx-40">
{{--                <div class="row gx-40">--}}

                    <!-- BLOG CONTENT -->
                    <div class="col-lg-8">
                        <div class="vs-blog blog-single">
                            <h1 class="blog-title">{{$blog->name}}</h1>

                            <div class="blog-meta mb-3">
{{--                                <i class="fa fa-eye"></i> {{$blog->views}} Views--}}
                                &nbsp;&nbsp;
                                <i class="far fa-calendar-alt"></i>
                                {{ date('M j Y', strtotime($blog->blog_date)) }}
                            </div>

                            <img class="w-100 mb-4"
                                 src="{{ asset("storage/Blog/Cover/{$blog->cover_image}") }}">

                            <div class="blog-content">
                                {!! $blog->description !!}
                            </div>
                        </div>
                        <div class="share-links clearfix mt-5">
                            <span class="share-links-title fw-bold">Tags:</span>
                            <div class="tagcloud mt-2" style="font-size: 10px;">
                                @foreach($blog->tag_blog as $tag)
                                    <a href="#">{{$tag->name}}</a>
                                @endforeach
                            </div>
                        </div>
                        <!-- Related Blogs Section -->
                        @if($relatedBlogs->count() > 0)
                            <section class="related-blogs-section">
                                <div class="container">
                                    <div class="text-center">
                                        <h2 class="related-blogs-title text-muted">Share on Social Media</h2>
                                        {{--                    <div class="title-divider"></div>--}}
                                    </div>
                                    <div class="container mt-5 mb-5">
                                        <h2 class="related-blogs-title">Recommended For You</h2>
                                    </div>
                                    <div class="related-blogs-carousel owl-carousel owl-theme">
                                        @foreach($relatedBlogs as $related)
                                            <div class="related-blog-item">
                                                <a href="{{ route('front.blog_detail', $related->slug) }}" class="related-blog-link">
                                                    <div class="related-blog-card">
                                                        <div class="related-blog-image">
                                                            <img src="{{ asset('storage/Blog/Cover/' . $related->cover_image) }}"
                                                                 alt="{{ $related->name }}">
                                                        </div>
                                                        <div class="related-blog-content">
                                                            <h4 class="related-blog-title">{{ $related->name }}</h4>
                                                            {{--                                        <p class="related-blog-date">--}}
                                                            {{--                                            <i class="far fa-calendar-alt"></i>--}}
                                                            {{--                                            {{ date('M j, Y', strtotime($related->blog_date)) }}--}}
                                                            {{--                                        </p>--}}
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </section>
                        @endif

                    </div>


                    <!-- RIGHT SIDEBAR -->
                <div class="col-lg-4 sidebar-offset">

                <!-- MOST VIEWED -->
                        <div class="sidebar-box">
                            <h2 class="sidebar-title">Readers Also Viewed These Articles</h2>

                            @foreach($viewedblogs as $item)
                                <div class="side-blog">
                                    <img src="{{ asset("storage/Blog/Cover/{$item->cover_image}") }}">
                                    <a href="{{route('front.blog_detail',$item->slug)}}">
                                        {{$item->name}}
{{--                                        <br>--}}
{{--                                        <small class="text-muted">{{ date('M j, Y', strtotime($item->blog_date)) }}</small>--}}
                                    </a>
                                </div>
                            @endforeach
                        </div>

                        <!-- CATEGORIES -->
                        <div class="sidebar-box">
                            <h2 class="sidebar-title">Categories</h2>
                            <ul class="category-list">
                                @foreach($categories as $cat)
                                    <li>
                                        <a href="{{ route('front.blog',['category_id'=>$cat->id]) }}" style="color: black">
                                            {{$cat->name}}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        <!-- NEWS & EVENTS -->
                        <div class="sidebar-box">
                            <h2 class="sidebar-title">News & Events</h2>

                            @foreach($randomBlogs as $item)
                                <div class="side-blog">
                                    <img src="{{ asset("storage/News-and-Events/Cover/{$item->cover_image}") }}">
                                    <a href="{{route('front.news-event-detail',$item->slug)}}">
                                        {{$item->name}}
{{--                                        <br>--}}
{{--                                        <small class="text-muted">{{ date('M j, Y', strtotime($item->event_date)) }}</small>--}}
                                    </a>
                                </div>
                            @endforeach
                        </div>

                    </div>

                </div>
            </div>
{{--        </div>--}}
    </section>
    <!-- LEFT SOCIAL ICONS -->
    <div class="floating-left d-none d-md-flex flex-column">
        <a href="https://www.facebook.com/UCSFaisalabad/" class="social-float">
            <img src="{{asset('/frontend/coreui/assets/img/facebook.png')}}" width="30">
        </a>
        <a href="https://www.instagram.com/ucsfaisalabad/" class="social-float">
            <img src="{{asset('/frontend/coreui/assets/img/instagram.png')}}" width="30">
        </a>
{{--        <a href="https://www.instagram.com/afhpkofficial" class="social-float">--}}
{{--            <img src="{{asset('/frontend/coreui/assets/img/twitter.png')}}" width="30">--}}
{{--        </a>--}}
{{--        <a href="https://www.youtube.com/@afhpkofficial" class="social-float">--}}
{{--            <img src="{{asset('/frontend/coreui/assets/img/linkedin.png')}}" width="30">--}}
{{--        </a>--}}
        <a href="https://www.youtube.com/@universitycambridgeschool" class="social-float">
            <img src="{{asset('/frontend/coreui/assets/img/youtube.png')}}" width="30">
        </a>
    </div>

    <!-- RIGHT SIDE BUTTONS -->
    <div class="floating-right d-none d-md-flex flex-column">
        <a href="{{ route('front.admission') }}" class="float-btn">Apply Online</a>
        <a href="{{ route('front.calender') }}" class="float-btn">School Calendar</a>
        <a href="{{ route('front.contact-us') }}" class="float-btn">Contact Us</a>
    </div>


@endsection

@push('head-scripts')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ $blog->name }}",
  "description": "{{ $blog->seo_description }}",
  "image": "{{ asset("storage/Blog/Cover/{$blog->cover_image}") }}",
  "datePublished": "{{ \Carbon\Carbon::parse($blog->blog_date)->toIso8601String() }}",
  "dateModified": "{{ \Carbon\Carbon::parse($blog->updated_at)->toIso8601String() }}",
  "author": {
    "@type": "CollegeOrUniversity",
    "name": "University Cambridge School Faisalabad"
  },
  "publisher": {
    "@type": "CollegeOrUniversity",
    "name": "University Cambridge School Faisalabad",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ asset('frontend/coreui/assets/img/logo.png') }}"
    }
  }
}
</script>
@endpush

@push('footer-scripts')
    <script src="{{ asset('frontend/owl/js/owl.carousel.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            var blogCount = {{ $relatedBlogs->count() }};

            // Initialize Related Blogs Carousel
            $('.related-blogs-carousel').owlCarousel({
                loop: blogCount > 3,          // Only loop if more than 3 items
                margin: 20,                   // Space between items
                nav: false,                   // No arrows
                // dots: true,                   // Show dots
                autoplay: true,               // Auto slide
                autoplayTimeout: 3500,        // 3.5 seconds
                autoplayHoverPause: true,     // Pause on hover
                smartSpeed: 800,              // Smooth animation
                slideBy: 1,                   // IMPORTANT: Slide 1 item at a time
                items: 1,                     // Default fallback
                responsive: {
                    0: {
                        items: 1,             // Mobile: 1 item
                        margin: 15
                    },
                    576: {
                        items: 1,             // Small tablets: 1 item
                        margin: 15
                    },
                    768: {
                        items: 2,             // Tablets: 2 items
                        margin: 20
                    },
                    992: {
                        items: 3,             // Desktop: 3 items
                        margin: 20
                    },
                    1200: {
                        items: 3,             // Large desktop: 3 items
                        margin: 25
                    }
                }
            });
        });
    </script>
@endpush