@extends('frontend.layouts.app')
@section('title', 'Notice Title')
@section('meta', 'Notice Meta Description')
@section('content')
    <!-- banner-section -->
    <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">{{ __('notices.notices') }}</h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">{{ __('notices.home') }}</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <a href="{{ route('notices') }}"
                            class="text-white font-bold hover:cursor-pointer">{{ __('notices.notices') }}</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <a href="{{ route('notices-detail', $notices->slug) }}"
                            class="text-white font-bold">{{ app()->getLocale() == 'np' ? $notices->name_np : $notices->name_en }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[60vh] flex flex-col">
        <div class="flex flex-col max-h-1/4 lg:flex-row">
            <!-- Notice-->
            @isset($notices)
                <div class="flex-1 m-6 h-full justify-center flex flex-col gap-2">
                    <h2 class="text-primary text-xl lg:text-2xl font-extrabold">
                        {{ app()->getLocale() == 'np' ? $notices->name_np : $notices->name_en }}</h2>
                    <p class="text-gray-500 font-medium font-xs">
                        {{ \Carbon\Carbon::parse($notices->published_date)->format('d M, Y') }}
                    </p>
                    {{-- Tags --}}
                    <div class="flex flex-wrap gap-2">
                        @foreach ($notices->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>

                    <!-- Featured Image -->
                    @php
                        $images = is_array($notices->images) ? $notices->images : json_decode($notices->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>
                        <p class="mt-5 text-justify max-w-2xl">
                            {!! app()->getLocale() == 'np' ? $notices->description_np : $notices->description_en !!}</p>
                    </div>

                    <!-- Downloads-->
                    @php
                        $files = json_decode($notices->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>
            @endisset

            <!-- 2nd part -->
            <div class="flex-1 flex justify-center flex-col h-full gap-4 m-6 !xl:w-[500px]">
                <!-- explore notices -->
                <div class="flex justify-end">
                    <a href="{{ route('notices') }}"
                        class="bg-white text-primary border-2 border-primary hover:bg-primary hover:text-white px-4 py-2 tracking-wide rounded-sm cursor-pointer hover:opacity-85 font-semibold transition-all ease-in-out">
                        {{ __('notices-detail.explore_more_notices') }}
                    </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"> {{ __('notices-detail.all_notices') }}
                        </h1>
                    </div>
                    @foreach ($allNotices as $notice)
                        <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="{{ $notice->thumbnail_image ? asset('/' . $notice->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('notices-detail', $notice->slug) }}"
                                    class="line-clamp-2 text-base font-semibold cursor-pointer text-primary transition-colors">
                                    {{ app()->getLocale() == 'np' ? $notice->name_np : $notice->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($notice->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