@section('title', $blog['meta_title'])
@section('description', $blog['meta_description'])
@section('keywords', $blog['meta_keywords'])
@section('tags', $blog['meta_tags'])
@extends('front.layouts.app')

@section('content')
    <style>
        .blog-card {
            transition: all 0.3s ease;
        }

        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
        }

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

    </style>
    <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 */
            }
        }
        ul {
            list-style: inside;
            margin: 0;
            padding: 0;
        }
    </style>
    <section class="news-events-deltails faculty-resources mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-8 mt-5">
                    <div class="heading pt-4">
                        @if(isset($blog['name']))
                            <h1 class="mb-0">{{ $blog['name'] }} </h1>
                        @endif
                        <p class="text-muted mb-1">
                            Date: {{ \Carbon\Carbon::parse($blog->b_date)->format('M d, Y') }}
                        </p>
                    </div>

                    <a href="{{route('blog-details',$blog->slug)}}" target="_blank" class="blog-img">
                        <img src="{{asset('front/images/blog/' .$blog->banner )}}" alt="Image">
                    </a>

                    <div class="news-events-deltails-content my-1 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 bg-warning rounded-pill px-3 py-2 mt-4">
                                <span class="fw-bolder h4 me-3 ms-3 mt-2 text-black">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>
                    @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 recent-blogs-slider">
                        @foreach($relevantBlogs as $recent)
                            <div class="item px-2">
                                <a href="{{ route('blog-details', $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="{{asset('front/images/blog/' .$recent->banner )}}"
                                                 class="card-img-top blog-img"
                                                 alt="{{ $recent['slug'] }}"
                                                 style=" object-fit: cover; transition: transform 0.5s ease;">
                                        </div>
                                        <div class="card-body p-2">
                                            {{--                                    <div class="d-flex align-items-center text-muted mb-2">--}}
                                            {{--                                        <i class="bi bi-calendar-event me-2"></i>--}}
                                            {{--                                        <small>{{ \Carbon\Carbon::parse($recent['blog_date'])->format('M d, Y') }}</small>--}}
                                            {{--                                    </div>--}}
                                            <h4 class="card-title fw-bold mb-0" style="color: #06377B; min-height: 50px;">
                                                {{ Str::limit($recent['name'], 60) }}
                                            </h4>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                    @endif
                </div>
                <!-- RIGHT SIDEBAR -->
                <div class="col-lg-4 ps-lg-5 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('front/images/blog/' .$item->banner )}}">
                                <a href="{{route('blog-details',$item->slug)}}">
                                    @if(isset($item['name']))
                                        {{ $item['name'] }}
                                    @endif
{{--                                    <br>--}}
{{--                                    <small class="text-muted">{{ \Carbon\Carbon::parse($item->b_date)->format('M d, Y') }}</small>--}}
                                </a>
                            </div>
                        @endforeach
                    </div>

                    <!-- CATEGORIES -->
                    <div class="sidebar-box">
                        <h2 class="sidebar-title">Categories</h2>
                        <ul class="category-list" style="list-style: disc !important; margin-left: 30px; 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 -->
                    <div class="sidebar-box">
                        <h2 class="sidebar-title">News & Events</h2>

                        @foreach($randomBlogs as $item)
                            <div class="side-blog">
                                <img src="{{asset('front/images/news and events/' .$item->thumbnail )}}">
                                <a href="{{route('news-events-details',$item->slug)}}">
                                    {{$item->title}}
{{--                                    <br>--}}
{{--                                    <small class="text-muted">{{ date('M j, Y', strtotime($item->date)) }}</small>--}}
                                </a>
                            </div>
                        @endforeach
                    </div>
                    <!-- LEFT SOCIAL ICONS -->
                    <div class="floating-left d-none d-md-flex flex-column">
                        <a href="https://www.facebook.com/aumdcofficial" class="social-float">
                            <img src="{{asset('/front/images/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="https://admission.aumdc.edu.pk/login" class="float-btn">Apply Online</a>
                        <a href="{{ route('news-and-events') }}" class="float-btn">News & Events</a>
                        <a href="{{ route('feeStructure') }}" class="float-btn">Fee Structure</a>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection
@push('js')
    <script>
        $(document).ready(function(){
            var blogCount = {{ $relevantBlogs->count() }};

            $(".recent-blogs-slider").owlCarousel({
                loop: blogCount > 3,
                margin: 20,
                dots: true,
                nav: false,
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,
                responsive: {
                    0: { items: 1 },
                    576: { items: 2 },
                    992: { items: 3 }
                }
            });
        });
    </script>
@endpush