@extends('layouts.main-app')
@section('title', 'Homepage')

@section('content')

    {{-- Navbar --}}
    @include('layouts.navbar', [
        'headerTitle' => 'News and Insight',
        'headerDescription' => '',
    ])

    {{-- Page Content --}}
    <section class="container max-w-screen-lg px-2 mx-auto py-28" x-data="galleryModal()">

        <div class="grid items-start justify-start grid-cols-1 gap-4 lg:grid-cols-3">

            {{-- Main Content --}}
            <div class="flex flex-col items-center justify-center col-span-1 lg:col-span-2">
                <div class="max-w-2xl p-4 mx-auto" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="150">
                    <img class="object-cover w-full h-full mb-4" src="{{ asset($news->image) }}" alt="{{ $news->title }}">
                    <div class="flex items-center mb-4" data-aos="fade-up" data-aos-duration="1100" data-aos-delay="240">
                        <div class="flex ml-3 space-x-10">
                            <p class="text-base font-medium text-gray-700">Admin</p>
                            <span class="border-r-[2px] border-gray-500"></span>
                            <p class="text-base text-gray-700">
                                {{ \Carbon\Carbon::parse($news->date)->format('M d, Y') }}
                            </p>
                        </div>
                    </div>
                    <h1 class="mb-4 text-2xl font-bold" data-aos="fade-up" data-aos-duration="1100">
                        {{ $news->title }}
                    </h1>
                    <p class="mb-4 text-gray-700" data-aos="fade-up" data-aos-duration="1100" data-aos-delay='200'>
                        {!! $news->description_with_assets !!}
                    </p>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="flex flex-col items-center justify-center col-span-1 lg:col-span-1">
                <div class="flex flex-col items-center justify-center w-full col-span-1 px-3 space-y-10 md:px-0">
                    <div class="w-full px-6 py-3 bg-white rounded-md shadow-md" data-aos="fade-up" data-aos-duration="1100"
                        data-aos-delay="150">
                        <h2 class="mb-2 font-semibold">Recent Posts</h2>
                        <ul>
                            @foreach ($allnews as $new)
                                <div class="flex items-center justify-start pb-3 space-x-3 overflow-hidden">
                                    <img src="{{ asset($new->image) }}" alt="" class="object-cover size-14">
                                    <li class="flex flex-col">
                                        <a href="{{ route('newsItem', $new->id) }}">{{ $new->title }}</a>
                                        <span class="text-sm">{{ $new->created_at->format('F d, Y') }}</span>
                                    </li>
                                </div>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {{-- Gallery Section --}}
        @if (isset($news->gallery) && count($news->gallery) > 0)
            <section class="relative mt-12 gallery-section">
                <div class="relative w-full p-6 mx-auto bg-white border-gray-200">
                    <div class="pb-2 mb-6 text-3xl font-bold text-blue-800 border-b-2 border-blue-100">
                        Gallery
                    </div>

                    {{-- Swiper --}}
                    <div class="relative newsandinsight-swiper swiper animate-fadeSlideUp">
                        <div class="swiper-wrapper">
                            @foreach ($news->gallery as $index => $slide)
                                <div class="swiper-slide" @click="openModal({{ $index }})">
                                    @include('frontend.components.newsudpate.newscard-gallery', [
                                        'image' => $slide['image'],
                                    ])
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Prev/Next --}}
                    <div class="flex items-end justify-end w-full py-8">
                        <div class="grid grid-cols-2 gap-2 w-fit">
                            <div class="z-10 cursor-pointer newsandinsight-prev">
                                <div
                                    class="flex items-center justify-center w-12 h-12 bg-blue-500 rounded-full shadow-lg hover:bg-blue-600">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2"
                                        viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M15 18l-6-6 6-6"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="z-10 cursor-pointer newsandinsight-next">
                                <div
                                    class="flex items-center justify-center w-12 h-12 bg-blue-500 rounded-full shadow-lg hover:bg-blue-600">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2"
                                        viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M9 6l6 6-6 6"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        {{-- Modal Overlay --}}
        <div x-show="open" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
            <div class="relative flex flex-col items-center justify-between w-[95%] h-[90%] bg-white shadow-2xl rounded-xl">

                {{-- Close --}}
                <button class="absolute z-50 text-5xl font-bold text-gray-700 top-6 right-8 hover:text-gray-900"
                    @click="closeModal()">&times;</button>

                {{-- Big Image (scrollable) --}}
                <div
                    class="flex items-center justify-center flex-1 w-full h-full p-6 overflow-y-auto rounded-lg bg-gray-50">
                    <template x-for="(img, idx) in images" :key="idx">
                        <img x-show="activeIndex === idx" :src="`/${img}`"
                            class="object-contain min-w-[300px] min-h-fit max-w-full max-h-full shadow-lg rounded-xl">
                    </template>
                </div>

                <!-- Modal Thumbnails -->
                <div class="relative w-full px-12 py-4 bg-white border-t rounded-b-xl" x-show="images.length > 0">
                    <div class="swiper modalThumbnailSwiper">
                        <div class="swiper-wrapper">
                            <template x-for="(img, idx) in images" :key="idx">
                                <div class="w-full h-[10rem] cursor-pointer swiper-slide" @click="activeIndex = idx">
                                    <img :src="`/${img}`" class="object-cover w-full h-full border-2 rounded-lg"
                                        :class="activeIndex === idx ? 'border-blue-500' : 'border-transparent'">
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Custom Prev/Next for Modal -->
                    <div class="absolute left-0 -translate-y-1/2 cursor-pointer top-1/2 modal-prev">
                        <div
                            class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full shadow-lg hover:bg-blue-600">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2"
                                viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M15 18l-6-6 6-6"></path>
                            </svg>
                        </div>
                    </div>

                    <div class="absolute right-0 -translate-y-1/2 cursor-pointer top-1/2 modal-next">
                        <div
                            class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full shadow-lg hover:bg-blue-600">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2"
                                viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M9 6l6 6-6 6"></path>
                            </svg>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    {{-- Alpine + Swiper Setup --}}
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        function galleryModal() {
            return {
                open: false,
                activeIndex: 0,
                images: @json($news->gallery->pluck('image')),
                openModal(index) {
                    this.activeIndex = index;
                    this.open = true;
                    document.body.classList.add('overflow-hidden');
                },
                closeModal() {
                    this.open = false;
                    document.body.classList.remove('overflow-hidden');
                }
            }
        }

        document.addEventListener("DOMContentLoaded", () => {
            new Swiper(".newsandinsight-swiper", {
                slidesPerView: 3,
                spaceBetween: 20,
                loop: true,
                navigation: {
                    nextEl: ".newsandinsight-next",
                    prevEl: ".newsandinsight-prev",
                },
            });

            const modalSwiper = new Swiper(".modalThumbnailSwiper", {
                slidesPerView: 4,
                spaceBetween: 12,
                navigation: {
                    nextEl: ".modal-next",
                    prevEl: ".modal-prev",
                },
                on: {
                    init(swiper) {
                        updateButtons(swiper);
                    },
                    slideChange(swiper) {
                        updateButtons(swiper);
                    },
                    resize(swiper) {
                        updateButtons(swiper);
                    }
                },
                // Add the breakpoints property here
                breakpoints: {
                    // when window width is >= 320px
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 10
                    },
                    // when window width is >= 480px
                    425: {
                        slidesPerView: 3,
                        spaceBetween: 15
                    },
                    // when window width is >= 640px
                    768: {
                        slidesPerView: 4,
                        spaceBetween: 20
                    },

                    1024: {
                        slidesPerView: 4,
                        spaceBetween: 22
                    },

                    1440: {
                        slidesPerView: 6,
                        spaceBetween: 24
                    }
                }
            });

            function updateButtons(swiper) {
                const prevBtn = document.querySelector(".modal-prev div");
                const nextBtn = document.querySelector(".modal-next div");

                if (swiper.isBeginning) {
                    prevBtn.classList.add("bg-gray-400", "cursor-not-allowed");
                    prevBtn.classList.remove("bg-blue-500", "hover:bg-blue-600");
                } else {
                    prevBtn.classList.remove("bg-gray-400", "cursor-not-allowed");
                    prevBtn.classList.add("bg-blue-500", "hover:bg-blue-600");
                }

                if (swiper.isEnd) {
                    nextBtn.classList.add("bg-gray-400", "cursor-not-allowed");
                    nextBtn.classList.remove("bg-blue-500", "hover:bg-blue-600");
                } else {
                    nextBtn.classList.remove("bg-gray-400", "cursor-not-allowed");
                    nextBtn.classList.add("bg-blue-500", "hover:bg-blue-600");
                }
            }

        });
    </script>
@endsection