@section('title', $newsEventDetail->meta_title)
@section('description', $newsEventDetail->meta_description)
@section('keywords', $newsEventDetail->meta_keywords)
@section('tags', $newsEventDetail->meta_tags)
@extends('front.new.layouts.app')

@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::newsArticle(
            $newsEventDetail->name,
            URL('/') . '/front/images/new-giu/news-events/' . $newsEventDetail->img,
            date('c', strtotime($newsEventDetail->e_date)),
        ),
    ) !!}
@endpush

@section('content')
    <style>
        .main-wrapper {
            margin-top: 170px;
            background: #fff;
            position: relative;
            z-index: 1;
            font-family: sans-serif;
        }

        .quick-link-item {
            display: flex;
            align-items: center;
            color: #444;
            text-decoration: none;
            transition: 0.3s;
            font-size: 19.4px !important;
            font-family: sans-serif;
        }

        .quick-link-item::before {
            content: "◆";
            color: #22A64A;
            margin-right: 12px;
            font-size: 12px;
            flex-shrink: 0;
        }

        .quick-link-item:hover {
            color: #ff4f1e !important;
            padding-left: 5px;
        }

        .fs-24 {
            font-size: 24px !important;
        }

        @media (max-width: 991px) {
            .main-wrapper {
                margin-top: 100px;
            }

            .display-large {
                font-size: 2rem !important;
            }
        }
    </style>

    <div class="main-wrapper pb-0">
        <div class="container py-lg-4">
            <div class="row g-4 mb-5">
                <aside class="col-lg-3 col-md-4">
                    <div class="card border-0 bg-light rounded-3 p-4 shadow-sm">

                        <h6 class="text-uppercase fw-bold text-center text-dark fs-24 mb-2" style="letter-spacing: 1px;">
                            Quick Links
                        </h6>

                        <ul class="list-unstyled mb-0">
                            <li class="py-2">
                                <a href="/housing-transport" class="quick-link-item fw-normal">Housing & Transport at
                                    GIU</a>
                            </li>
                            <li class="py-2">
                                <a href="/student-societies" class="quick-link-item fw-normal">Student Societies</a>
                            </li>
                            <li class="py-2">
                                <a href="/campus-facilities" class="quick-link-item fw-normal">Campus Facilities</a>
                            </li>
                            <li class="py-2">
                                <a href="/co-curricular-activities" class="quick-link-item fw-normal">Co-curricular
                                    Activities</a>
                            </li>
                        </ul>
                    </div>
                </aside>
                <main class="col-lg-9 col-md-8">
                    <img src="{{ URL('/') }}/front/images/new-giu/news-events/{{ $newsEventDetail->img }}"
                        class="img-fluid rounded shadow-sm  border bg-white" alt="{{ $newsEventDetail->name }}">
                </main>
            </div>

            <div class="row mb-5">
                <article class="col-12">
                    <span>{{ date('d M Y', strtotime($newsEventDetail->e_date)) }}</span>
                    <h1 class="fw-bolder mb-3 display-large" style="color: #111; line-height: 1.2; font-size: 2.8rem;">
                        {{ $newsEventDetail->name }}
                    </h1>
                    <hr>
                    <div class="mt-4 lh-lg text-dark" style="font-size: 1.1rem;">
                        <div class="rich-text-content">
                            {!! $newsEventDetail->long_description !!}
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
    {{-- Relevant Events (Owl Carousel) --}}
    @if ($recentPost->count())
        <section class="relevant-events-section py-5 bg-light">
            <div class="container">

                <div class="text-center mb-5">
                    <h2 class="fw-bold" style="color:#115640">Recent Posts</h2>
                    <div class="mx-auto rounded bg-yellow" style="width:80px;height:3px;"></div>
                </div>

                <div class="owl-carousel owl-theme giu-recent-events-carousel">
                    @foreach ($recentPost as $post)
                        <div class="giu-event-carousel-item">
                            <a href="{{ route('post-detail', $post->slug) }}" class="text-decoration-none">

                                <div class="giu-event-card-wrapper card border-0 shadow-sm rounded-4 overflow-hidden">

                                    <div class="giu-event-img-container position-relative overflow-hidden">
                                        <img src="{{ URL('/') }}/front/images/new-giu/news-events/{{ $post->img }}"
                                            class="giu-event-thumbnail card-img-top" alt="{{ $post->name }}"
                                            loading="lazy">
                                    </div>

                                    <div class="giu-event-card-content card-body p-3">
                                        <h6 class="giu-event-title fw-bold mb-0" style="color:#06377B;">
                                            {{ Str::limit($post->name, 60) }}
                                        </h6>
                                    </div>

                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>

            </div>
        </section>
    @endif
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('front/css/owl.carousel.css') }}">
    <link rel="stylesheet" href="{{ asset('front/css/owl.theme.default.css') }}">

    <style>
        /* Relevant Events Section - Unique Namespaced Classes */
        .relevant-events-section .giu-event-carousel-item {
            padding: 0 10px;
            height: auto !important;
        }

        .relevant-events-section .giu-event-card-wrapper {
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .relevant-events-section .giu-event-card-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
        }

        .relevant-events-section .giu-event-img-container {
            width: 100%;
            height: 180px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .relevant-events-section .giu-event-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .relevant-events-section .giu-event-card-wrapper:hover .giu-event-thumbnail {
            transform: scale(1.1);
        }

        .relevant-events-section .giu-event-card-content {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .relevant-events-section .giu-event-title {
            line-height: 1.4;
            min-height: 50px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Owl Carousel Specific Fixes */
        .giu-recent-events-carousel.owl-carousel {
            display: block !important;
        }

        .giu-recent-events-carousel .owl-stage-outer {
            padding: 10px 0 30px 0;
            overflow: visible;
        }

        .giu-recent-events-carousel .owl-stage {
            display: flex !important;
            align-items: stretch;
        }

        .giu-recent-events-carousel .owl-item {
            display: flex !important;
            align-items: stretch;
            height: auto !important;
        }

        /* Owl Dots Custom Styling */
        .giu-recent-events-carousel .owl-dots {
            text-align: center;
            margin-top: 20px;
        }

        .giu-recent-events-carousel .owl-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background: #d6d6d6;
            border-radius: 50%;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .giu-recent-events-carousel .owl-dot:hover {
            background: #999;
        }

        .giu-recent-events-carousel .owl-dot.active {
            background: #115640;
            width: 30px;
            border-radius: 5px;
        }

        /* Mobile responsiveness */
        @media (max-width: 767px) {
            .relevant-events-section .giu-event-img-container {
                height: 200px;
            }

            .relevant-events-section .giu-event-title {
                font-size: 0.95rem;
            }
        }

        @media (min-width: 768px) and (max-width: 991px) {
            .relevant-events-section .giu-event-img-container {
                height: 160px;
            }
        }
    </style>
@endpush

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

    <script>
        $(document).ready(function() {
            var giuEventCount = {{ count($recentPost) }};

            // Destroy existing carousel if it exists
            if ($('.giu-recent-events-carousel').hasClass('owl-loaded')) {
                $('.giu-recent-events-carousel').trigger('destroy.owl.carousel');
            }

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