@section('title', $blog->meta_title)
@section('description', $blog->meta_description)
@section('keywords', $blog->meta_keywords)
@section('tags', $blog->meta_tags)
@extends('front.layouts.app')
@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::blogPost(
            $blog->name,
            route('blog-banner.getImageBanner', [$blog->id, $blog->banner_url_name]),
            \Carbon\Carbon::parse($blog->b_date)->toDateString(),
            route('blog-details', $blog->slug),
            strip_tags($blog->long_description ?? ''),
            'Madina Teaching Hospital (MTH)'
        )
    ) !!}
@endpush
@section('content')
    <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: 220px;
            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:#87191f;  /* 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: #87191f; /* 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 */
            }
        }

    </style>
    <!-- Stat Blog Details Area -->
    <div class="blog-details-area">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="heading">
                        @if(isset($blog['name']))
                            <h1>{{ $blog['name'] }}</h1>
                        @endif

                        <div class="d-flex align-items-center gap-3">
{{--                            <div>--}}
{{--                                <a href="{{ route('blog-details', $blog->slug) }}"--}}
{{--                                   class="text-decoration-none text-muted">--}}
{{--                                    <i class="ri-building-4-line"></i>--}}
{{--                                    {{ $blog->department_name }}--}}
{{--                                </a>--}}
{{--                            </div>--}}
                            <div class="pb-2">
                                <i class="ri-calendar-line"></i>
                                {{ \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="{{route('blog-banner.getImageBanner',[$blog->id,$blog->banner_url_name]) }}"
                            alt="" class="main">
                    </a>

                    <div class="news-events-deltails-content py-1">
                        @if(isset($blog['long_description']))
                            {!! $blog['long_description'] !!}
                        @endif
                    </div>

                    {{-- Tags --}}
                    <div class="mb-5">
                        @if($tags->count())
                            <div class="d-flex align-items-center flex-wrap rounded-pill px-3 py-2 mt-4" style="background-color: #87191f;">
                                <span class="fw-bolder fs-5 me-3 ms-3 mt-1 text-white">Tags:</span>
                                @foreach($tags as $tag)
                                    <a href="#"
                                       class="badge bg-white h3 rounded-pill me-2 mt-2" style="color: black;">
                                        {{ $tag->name }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <!-- Relevant Blogs Section -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="p-3 bg-light rounded shadow-sm mt-5">

                            @if($relevantBlogs->count() > 0)
                                    <div class="text-center mb-5">
                                        <div class="text-center">
                                            <h2 class="related-blogs-title text-muted">Share on Social Media</h2>
                                        </div>
                                    </div>
                                    <div class="container mt-5 mb-5">
                                        <h2 class="related-blogs-title">Recommended For You</h2>
                                    </div>
                                    <div class="owl-carousel owl-theme mth-relevant-blogs-carousel">
                                        @foreach($relevantBlogs as $relBlog)
                                            <div class="item">
                                                <div class="card shadow-sm border-0 h-100">
                                                    <a href="{{ route('blog-details', $relBlog->slug) }}" class="blog-img">
                                                        <img
                                                            src="{{route('blog-banner.getImageBanner',[$relBlog->id,$relBlog->banner_url_name]) }}"
                                                            alt="{{ $relBlog->name }}"
                                                            class="card-img-top"
                                                            style="height: 150px; object-fit: cover;">
                                                    </a>
                                                    <div class="card-body p-3">
                                                        <h4 class="card-title mb-0" style="font-size: 20px">
                                                            {{ Str::limit($relBlog['name'], 60) }}
                                                        </h4>
                                                        {{--                                    <p class="text-muted small mb-1">--}}
                                                        {{--                                        {{ \Carbon\Carbon::parse($relBlog->b_date)->format('M d, Y') }}--}}
                                                        {{--                                    </p>--}}
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-muted text-center">No relevant blogs found.</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <!-- RIGHT SIDEBAR -->
                <div class="col-lg-4 ps-lg-5 sidebar-offset">

                    <!-- MOST 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="font-family: Noto Sans, sans-se rif !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="{{route('blog-banner.getImageBanner',[$view->id,$view->banner_url_name]) }}"
                                                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-family: Noto Sans, sans-se rif !important;">
                                                {{ Str::limit($view['name'], 100) }}
                                            </p>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @endif

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

                    <!-- NEWS & EVENTS -->
                    @if($newsevents->count()>0)
                    <div class="sidebar-box">
                        <h2 class="sidebar-title">News & Events</h2>

                        @foreach($newsevents as $item)
                            <div class="side-blog">
                                <img src="{{route('event-thumbnail.getImageThumbnail',[$item->id,$item->thumbnail_url_name]) }}">
                                <a href="{{route('news-and-events-details',$item->slug)}}">
                                    {{$item->name}}
                                    {{--                                    <br>--}}
                                    {{--                                    <small class="text-muted">{{ date('M j, Y', strtotime($item->date)) }}</small>--}}
                                </a>
                            </div>
                        @endforeach
                    </div>
                    @endif
                    <!-- LEFT SOCIAL ICONS -->
{{--                    <div class="floating-left d-none d-md-flex flex-column">--}}
{{--                        <a href="https://www.facebook.com/mth.org.pk" class="social-float">--}}
{{--                            <img src="{{asset('/front/img/facebook.png')}}" width="30">--}}
{{--                        </a>--}}
{{--                        <a href="https://www.instagram.com/aumdcofficial/" class="social-float">--}}
{{--                            <img src="{{asset('/front/images/instagram.png')}}" width="30">--}}
{{--                        </a>--}}
{{--                        <a href="https://twitter.com/aumdcofficial" class="social-float">--}}
{{--                            <img src="{{asset('/front/images/twitter.png')}}" width="30">--}}
{{--                        </a>--}}
{{--                        <a href="https://www.linkedin.com/in/aumdcofficial/" class="social-float">--}}
{{--                            <img src="{{asset('/front/images/linkedin.png')}}" width="30">--}}
{{--                        </a>--}}
{{--                        <a href="https://www.youtube.com/@aumdcofficial" class="social-float">--}}
{{--                            <img src="{{asset('/front/images/youtube.png')}}" width="30">--}}
{{--                        </a>--}}
{{--                    </div>--}}
                    <!-- RIGHT SIDE BUTTONS -->
                    <div class="floating-right d-none d-md-flex flex-column">
                        <a href="{{ route('our-team') }}" class="float-btn">Find a Doctor</a>
                        <a href="{{ route('contact-us') }}" class="float-btn">Emergency Contact</a>
                        <a href="https://pp.mth.org.pk/" class="float-btn">Patient Portal</a>
                    </div>
                </div>
            </div>


        </div>
    </div>


    <!-- End Blog Details Area -->

    <!-- Start Knock us Area -->
    <div class="knock-us-area bg-color-0057b8 ptb-100">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="knock-us-content text-center">
                        <p class="h2 text-white">Get in touch with us today to get medical services</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Knock us Area -->

@endsection

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

        .mth-relevant-blogs-carousel .owl-nav button:hover {
            background: #003d82 !important;
        }
        .mth-relevant-blogs-carousel .owl-dots {
            text-align: center;
            margin-top: 20px;
        }
        .mth-relevant-blogs-carousel .owl-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
        }
        .mth-relevant-blogs-carousel .owl-dot.active {
            background: #0057b8;
        }
    </style>
@endpush

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

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

            // Only initialize if there are blogs
            if (mthBlogCount > 0) {
                // Destroy existing carousel if it exists
                if ($('.mth-relevant-blogs-carousel').hasClass('owl-loaded')) {
                    $('.mth-relevant-blogs-carousel').trigger('destroy.owl.carousel');
                }

                // Initialize carousel
                $('.mth-relevant-blogs-carousel').owlCarousel({
                    loop: mthBlogCount > 3,
                    margin: 20,
                    nav: false,
                    dots: true,
                    autoplay: true,
                    autoplayTimeout: 4000,
                    autoplayHoverPause: true,
                    autoHeight: false,
                    smartSpeed: 600,
                    responsive: {
                        0: {
                            items: 1,
                            stagePadding: 0
                        },
                        576: {
                            items: 2,
                            stagePadding: 0
                        },
                        768: {
                            items: 2
                        },
                        992: {
                            items: 3
                        }
                    }
                });
            }
        });
    </script>
@endpush