@extends('frontend.layouts.partials.app')
@section('title', 'News Room Detail')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>

    <section class="flex flex-col space-y-6">
        <section class="h-[250px] px-4 md:px-6 lg:h-[300px] flex items-center bg-gradient-to-tr from-[#22c1c3] to-[#004d6e]">
            <div class="w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-center">
                <div class="flex flex-col space-y-4 text-white text-center lg:text-left">
                    <p class="uppercase text-3xl sm:text-4xl lg:text-5xl font-extrabold px-4 md:px-10">
                        {{ $publications->name }}
                    </p>
                    <div
                        class="flex justify-center lg:justify-start space-x-2 text-lg sm:text-xl lg:text-2xl items-center px-4 md:px-10">
                        <a href="{{ route('homepage') }}">Home</a>
                        <p class="tracking-tight">></p>
                        <a href="{{ URL::previous() }}">Publications</a>
                        <p class="tracking-tight">></p>
                        <a href="#">{{ $publications->name }}</a>
                    </div>
                </div>
                <img src="{{ asset('assets/img/News-Image-3.jpg') }}"
                    class="hidden lg:block border-2 rounded-xl lg:w-[250px] xl:w-[300px] lg:mt-6 lg:mr-10" alt="" />
            </div>
        </section>

        <section class="flex flex-col max-h-1/3 m-10 lg:mx-20 xl:mx-40 lg:flex-row">
            <div class="basis-full lg:basis-2/3 m-6 h-full justify-center">
                <a href="{{ asset('storage/' . $publications->thumbnail_image) }}" target="_blank"
                    rel="noopener noreferrer">
                    <img src="{{ $publications->thumbnail_image ? asset('storage/' . $publications->thumbnail_image) : asset('assets/images/placeholder.jpg') }}"
                        alt="{{ $publications->name }}" class="h-[400px] w-auto object-contain rounded-lg mx-auto" />
                </a>

                <p class="text-[#828282] mt-8"><i class="fa-solid fa-calendar-days"></i>
                    &nbsp;{{ $publications->publishment_date }}</p>
                <p class="text-2xl text-[#222] font-semibold mt-4">
                    {{ $publications->name }}
                </p>
                <p class="w-full  p-4 text-justify mt-5 text-[#444]">
                    {{ $publications->short_description }}
                </p>
                <div class="mt-5 flex space-x-8">
                    <img src="{{ asset('assets/img/quote.jpg') }}" alt="" />
                    <p class="text-[#818080] text-xl">
                        {{ $publications->highlighted_text }}
                    </p>
                </div>
                <p class="w-full  p-4 text-justify mt-5 text-[#444]">
                    {!! $publications->description !!}
                </p>
            </div>

            <div class="basis-full lg:basis-1/3 flex justify-center flex-col h-full gap-4 m-6">
                <div class="flex justify-end">
                    <a href="{{ route('publications') }}"
                        class="bg-brandBlue text-center items-center text-white px-4 py-2 rounded-full cursor-pointer hover:opacity-85 w-54">
                        Explore News Articles
                    </a>
                </div>
                <div class="drop-shadow-xl shadow-gray-100 bg-white rounded-lg">
                    <!-- Heading for scroll -->
                    <div class="flex flex-row gap-4 bg-white rounded m-3 p-3">
                        <!-- Explore part -->
                        <div class="mx-3">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                                fill="currentColor">
                                <!-- Hamburger Lines -->
                                <path d="M3 6h14M3 12h14M3 18h14" stroke="black" stroke-width="2" stroke-linecap="round" />
                                <!-- Three Dots -->
                                <circle cx="20" cy="6" r="1.5" fill="black" />
                                <circle cx="20" cy="12" r="1.5" fill="black" />
                                <circle cx="20" cy="18" r="1.5" fill="black" />
                            </svg>
                        </div>
                        <h1 class="font-bold text-lg tracking-wide">All News and Articles</h1>
                    </div>

                    <!-- Content inside the heading -->
                    <div class="overflow-y-scroll h-[430px] m-3 sticky bg-white">
                        <!-- Content Repeated -->
                        @forelse ($publicationList as $publication)
                            <div class="flex flex-row gap-10 p-2 border-l-brandBlue border-l-[4px] my-2 shadow-sm h-25">
                                <div class="h-auto w-30">
                                    <img src="{{ asset(\Storage::disk('uploads')->url($publication->thumbnail_image)) }}"
                                        alt="{{ $publication->name_en }}" class="h-16 w-16 rounded-lg object-cover" />
                                </div>

                                <div class="flex flex-col gap-3">
                                    <div class="flex space-x-1">
                                        <i class="fa-solid fa-calendar-days"></i>
                                        &nbsp;{{ $publication->publishment_date }}
                                    </div>
                                    <a href="{{ route('publication.detail', $publication->slug) }}"
                                        class="line-clamp-2 text-lg font-semibold cursor-pointer hover:text-accent transition-colors duration-200">
                                        {{ $publication->name }}
                                    </a>

                                </div>
                            </div>
                        @empty
                            <div class="p-4 text-center">
                                <p>No other news or events available at the moment.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
                <div class="mt-5 bg-white shadow-lg rounded-xl p-5 flex justify-center">
                    <a href="{{ asset(\Storage::disk('uploads')->url($publication->file)) }}" download>
                        <div class="flex flex-col space-y-5 items-center cursor-pointer hover:opacity-80">
                            <img src="{{ asset('assets/img/folder.png') }}" class="w-1/4" alt="Download file" />
                            <p class="text-blue-600 font-semibold">Download here</p>
                        </div>
                    </a>
                </div>
            </div>
            </div>
        </section>



        <!-- Gallery -->
        <section>
            <div class="m-10">
                <h2 class="text-[#023f88] text-3xl font-semibold">Images</h2>

                <div class="mt-5 grid gap-2 grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                    @if (!empty($publications->images))
                        @foreach (json_decode($publications->images) as $index => $image)
                            <div class="h-48 w-48">
                                <img src="{{ asset('storage/' . $image) }}"
                                    class="h-full w-full items-center justify-center cursor-pointer object-scale-down"
                                    alt="{{ $publications->name }}" onclick="openModal({{ $index }})">
                            </div>
                        @endforeach
                    @else
                        <p>No images available.</p>
                    @endif
                </div>
            </div>

            <!-- Modal -->
            <div id="imageModal" class="hidden fixed inset-0 bg-opacity-75 flex justify-center items-center z-50">
                <div class="relative w-full h-full md:w-[90%] md:h-[80%] lg:w-[70%] lg:h-[70%] bg-white">
                    <button class="absolute top-5 right-5 text-black text-2xl font-bold z-50"
                        onclick="closeModal()">&times;</button>

                    <swiper-container id="swiperContainer" class="mySwiper" pagination="true" pagination-clickable="true"
                        navigation="true" space-between="30" centered-slides="true" autoplay-delay="2500"
                        autoplay-disable-on-interaction="false">
                        @foreach (json_decode($publications->images) as $image)
                            <swiper-slide class="relative w-full h-full">
                                <img src="{{ asset('storage/' . $image) }}" class="w-full h-screen object-scale-down"
                                    alt="">
                                <div class="absolute inset-0 "></div>
                            </swiper-slide>
                        @endforeach
                    </swiper-container>
                </div>
            </div>

        </section>



        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>

        <script>
            var glide01 = new Glide('.glide-01', {
                type: 'slider',
                focusAt: 'center',
                perView: 4,
                autoplay: 3000,
                animationDuration: 700,
                classes: {
                    activeNav: '[&>*]:bg-slate-700',
                },
            });

            glide01.mount();

            let swiperInstance = null;

            function openModal(index) {
                const modal = document.getElementById('imageModal');
                modal.classList.remove('hidden');

                if (!swiperInstance) {
                    swiperInstance = new Swiper('.mySwiper', {
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev'
                        },
                        autoplay: {
                            delay: 2500,
                            disableOnInteraction: false
                        },
                    });
                }
                swiperInstance.slideTo(index, 0, false);
            }

            function closeModal() {
                document.getElementById('imageModal').classList.add('hidden');
            }

            // Close modal on ESC key press
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    closeModal();
                }
            });

            document.getElementById('imageModal').addEventListener('click', function(event) {
                if (event.target.id === 'imageModal') {
                    closeModal();
                }
            });
        </script>


        <style>
            button.absolute.top-5.right-5 {
                z-index: 100;
            }

            .swiper-button-prev,
            .swiper-button-next {
                color: red;
            }

            .swiper-button-prev::after,
            .swiper-button-next::after {
                font-size: 24px;
            }

            .swiper-button-next,
            .swiper-button-prev {
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    @endsection