@extends('frontend.layouts.app')
@section('title', 'Media and Stories Title')
@section('meta', 'Media and Stories Meta Description')
@section('content')
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">
                        {{ __('media-and-stories-detail.media_and_stories') }}</h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}"
                            class="text-white font-bold">{{ __('media-and-stories-detail.home') }}</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <a href="{{ route('media-and-stories') }}"
                            class="text-white font-bold ">{{ __('media-and-stories-detail.media_and_stories') }} </a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        @if (app()->getLocale() == 'np')
                            <a href="{{ route('media-and-stories-detail', $mediaItems->slug) }}"
                                class="text-white font-bold">{{ $mediaItems->name_np }}</a>
                        @else
                            <a href="{{ route('media-and-stories-detail', $mediaItems->slug) }}"
                                class="text-white font-bold">{{ $mediaItems->name_en }}</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[60vh] flex flex-col px-4 lg:px-12">
        <div class="flex flex-col max-h-1/4 lg:flex-row">
            <!-- 1st part -->
            @isset($mediaItems)
                <div class="flex-1 m-6 h-full justify-center flex flex-col gap-2">
                    <h2 class="text-primary text-2xl font-extrabold">
                        {{ app()->getLocale() == 'np' ? $mediaItems->name_np : $mediaItems->name_en }}
                    </h2>
                    <p class="text-gray-500 font-medium font-sm">
                        {{ \Carbon\Carbon::parse($mediaItems->published_date)->format('d M, Y') }}
                    </p>

                    {{-- Tags --}}
                    <div class="flex flex-wrap gap-2">
                        @foreach ($mediaItems->tags as $tag)
                            <span class="inline-flex items-center bg-gray-100 text-black text-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 64" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linejoin="round" class="w-4 h-4 mr-1 text-black">
                                    <g transform="rotate(225 24 32)">
                                        <path d="M24 2 L44 22 L44 62 L4 62 L4 22 Z" />
                                        <circle cx="24" cy="14" r="3" />
                                    </g>
                                </svg>
                                <span>{{ app()->getLocale() == 'np' ? $tag->name_np : $tag->name_en }}</span>

                            </span>
                        @endforeach
                    </div>
                    <div>
                        <p class="mt-2  w-full text-justify">
                            {!! app()->getLocale() == 'np' ? $mediaItems->description_np : $mediaItems->description_en !!}
                        </p>

                        <!-- Featured Image -->
                        @php
                            $images = is_array($mediaItems->images)
                                ? $mediaItems->images
                                : json_decode($mediaItems->images, true);
                        @endphp

                        @if (!empty($images))
                            <div class="mt-6" x-data="{
                                imageGalleryOpened: false,
                                imageGalleryActiveUrl: null,
                                imageGalleryImageIndex: null,
                                imageGallery: [
                                    @foreach ($images as $index => $image)
                                    {
                                    photo: '{{ asset($image) }}',
                                    alt: 'Club Image {{ $index + 1 }}'
                                    }
                                    @if (!$loop->last),@endif @endforeach
                                ],
                                imageGalleryOpen(event) {
                                    this.imageGalleryImageIndex = event.target.dataset.index;
                                    this.imageGalleryActiveUrl = event.target.src;
                                    this.imageGalleryOpened = true;
                                },
                                imageGalleryClose() {
                                    this.imageGalleryOpened = false;
                                    setTimeout(() => this.imageGalleryActiveUrl = null, 300);
                                },
                                imageGalleryNext() {
                                    this.imageGalleryImageIndex = (this.imageGalleryImageIndex == this.imageGallery.length) ? 1 : (parseInt(this.imageGalleryImageIndex) + 1);
                                    this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
                                },
                                imageGalleryPrev() {
                                    this.imageGalleryImageIndex = (this.imageGalleryImageIndex == 1) ? this.imageGallery.length : (parseInt(this.imageGalleryImageIndex) - 1);
                                    this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
                                }
                            }" @image-gallery-next.window="imageGalleryNext()"
                                @image-gallery-prev.window="imageGalleryPrev()" @keyup.right.window="imageGalleryNext();">
                                <!-- Club Images Grid -->
                                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 gap-4" x-ref="gallery"
                                    id="gallery">
                                    <template x-for="(image, index) in imageGallery" :key="index">
                                        <div>
                                            <img @click="imageGalleryOpen" :src="image.photo" :alt="image.alt"
                                                :data-index="index + 1"
                                                class="w-full h-[120px] sm:h-[140px] md:h-[160px] lg:h-[140px] object-cover rounded-xl shadow-md cursor-zoom-in hover:opacity-80 transition" />
                                        </div>
                                    </template>
                                </div>

                                <!-- Lightbox -->
                                <template x-teleport="body">
                                    <div x-show="imageGalleryOpened" x-transition:enter="transition ease-in-out duration-300"
                                        x-transition:enter-start="opacity-0"
                                        x-transition:leave="transition ease-in-in duration-300"
                                        x-transition:leave-end="opacity-0" @click="imageGalleryClose"
                                        @keydown.window.escape="imageGalleryClose" x-trap.inert.noscroll="imageGalleryOpened"
                                        class="fixed inset-0 z-[99] flex items-center justify-center bg-black bg-opacity-60 select-none cursor-zoom-out"
                                        x-cloak>
                                        <div class="relative flex items-center justify-center w-11/12 xl:w-4/5 h-11/12">
                                            <!-- Prev -->
                                            <div @click="$event.stopPropagation(); $dispatch('image-gallery-prev')"
                                                class="absolute left-0 flex items-center justify-center text-white bg-white/10 hover:bg-white/20 rounded-full cursor-pointer w-12 h-12 -translate-x-10">
                                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M15.75 19.5L8.25 12l7.5-7.5" />
                                                </svg>
                                            </div>

                                            <!-- Active Image -->
                                            <img x-show="imageGalleryOpened"
                                                x-transition:enter="transition ease-in-out duration-300"
                                                x-transition:enter-start="opacity-0 transform scale-50"
                                                x-transition:leave="transition ease-in-in duration-300"
                                                x-transition:leave-end="opacity-0 transform scale-50"
                                                class="object-contain max-w-[90%] max-h-[80vh] cursor-zoom-out"
                                                :src="imageGalleryActiveUrl" alt="" />

                                            <!-- Next -->
                                            <div @click="$event.stopPropagation(); $dispatch('image-gallery-next')"
                                                class="absolute right-0 flex items-center justify-center text-white bg-white/10 hover:bg-white/20 rounded-full cursor-pointer w-12 h-12 translate-x-10">
                                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        @endif

                        <div class="mt-4 text-primary">
                            <a href="{{ $mediaItems->external_link }}" target="_blank"
                                rel="noopener noreferrer">{{ $mediaItems->external_link }}</a>
                        </div>

                        <!-- Downloads-->
                        @php
                            $files = json_decode($mediaItems->files, true);
                        @endphp

                        @if (!empty($files))
                            <div class="w-full">
                                <h3 class="text-primary p-3 font-bold text-lg">{{ __('media-and-stories-detail.downloads') }}
                                </h3>
                                <div id="iconContainer" class="flex flex-col justify-center gap-6">

                                    @foreach ($files as $file)
                                        @php
                                            $filename = basename($file);
                                            $extension = pathinfo($filename, PATHINFO_EXTENSION);
                                            $filepath = public_path($file);
                                            $filesize = file_exists($filepath)
                                                ? round(filesize($filepath) / 1024 / 1024, 2) . ' MB'
                                                : '';
                                        @endphp

                                        <a href="{{ asset($file) }}" download
                                            class="download-item flex flex-col justify-between p-3 bg-white rounded-xl shadow hover:shadow-md transition duration-300 w-full"
                                            data-filename="{{ $filename }}" data-size="{{ $filesize }}">
                                            <div class="file-info flex flex-row justify-between items-center">
                                                <div>
                                                    <span class="filename font-semibold text-sm">{{ $filename }}</span>
                                                </div>
                                                <button type="button"
                                                    class="download-btn px-4 py-2 tracking-wide text-white bg-blue-600 rounded hover:bg-blue-700 transition text-sm"
                                                    aria-label="Download {{ $filename }}">
                                                    Download
                                                </button>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endisset

            <!-- 2nd part -->
            <div class="flex-1 flex justify-center flex-col h-full gap-4 m-6 !xl:w-[500px]">

                <div class="flex justify-end">
                    <a href="{{ route('media-and-stories-detail') }}"
                        class="bg-white text-primary border-2 border-primary hover:bg-primary hover:text-white px-4 py-2 rounded-sm cursor-pointer hover:opacity-85 font-semibold transition-all ease-in-out">
                        {{ __('media-and-stories-detail.explore_more_media_and_stories') }} </a>
                </div>

                <div class="drop-shadow-xl shadow-gray-100 bg-white rounded-lg">
                    <div class="flex flex-row gap-4 bg-white rounded m-3 p-3">
                        <div class="mx-3">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                                fill="currentColor">
                                <path d="M3 6h14M3 12h14M3 18h14" stroke="black" stroke-width="2"
                                    stroke-linecap="round" />
                                <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 text-primary">
                            {{ __('media-and-stories-detail.all_media_and_stories') }}
                        </h1>
                    </div>

                    @foreach ($allMedia as $media)
                        <div class="flex flex-row gap-4 p-2 border-l-primary border-l-[4px] my-2 shadow-sm items-start">
                            <!-- Smaller Image -->
                            <div class="w-[80px] h-[80px] flex-shrink-0">
                                <img src="{{ $media->thumbnail_image ? asset('/' . $media->thumbnail_image) : asset('assets/images/placeholder.jpg') }}"
                                    alt="Notice Image" class="w-full h-full object-cover rounded-md" />
                            </div>

                            <!-- Notice Content -->
                            <div class="flex flex-col gap-2">
                                <a href="{{ route('media-and-stories-detail', $media->slug) }}"
                                    class="line-clamp-2 text-base font-semibold cursor-pointer text-primary transition-colors">
                                    {{ app()->getLocale() == 'np' ? $media->name_np : $media->name_en }}
                                </a>
                                <div class="flex items-center space-x-2">
                                    <img src="{{ asset('assets/images/news-and-events/calender-svgrepo-com.png') }}"
                                        class="w-4 h-4 object-contain" alt="Date">
                                    <p class="text-xs text-gray-500">
                                        {{ \Carbon\Carbon::parse($media->published_date)->format('d M, Y') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>

    <script>
        function toggleDescription() {
            const shortDesc = document.getElementById('short-description');
            const fullDesc = document.getElementById('full-description');
            const readMoreBtn = document.getElementById('read-more-btn');

            if (shortDesc.classList.contains('hidden')) {
                shortDesc.classList.remove('hidden');
                fullDesc.classList.add('hidden');
                readMoreBtn.textContent = 'Read More';
            } else {
                shortDesc.classList.add('hidden');
                fullDesc.classList.remove('hidden');
                readMoreBtn.textContent = 'Read Less';
            }
        }
    </script>

    @include('frontend.layouts.partials.documents-format')
@endpush