@extends('frontend::layouts.app')

@section('content')

    <section class="gradient-green" id="page-title">
        <div class="container">
            <div class="page-title">
                <h1>{{ $data['news_content']['list'][0]['name'] ?? '' }}</h1>
            </div>
            <div class="breadcrumb">
                <ul>
                    <li><a href="{{ mwz_route('frontend.index') }}">{{ __('frontend::common.home') }}</a></li>
                    <li><a href="{{ $data['news']['url'] ?? '#' }}">{{ $data['news']['name'] ?? '' }}</a></li>
                    <li class="active">{{ $data['news_content']['list'][0]['name'] ?? '' }}</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Article Detail Section -->
    <section class="py-12 md:py-16 bg-background">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="max-w-4xl mx-auto">
                <!-- Article Header -->
                <div class="mb-10">
                    @if (!empty($data['news_content']['list'][0]['categories'][0]['name']))
                        <div class="mb-4">
                            <span class="inline-flex items-center rounded-md bg-primary/10 text-primary px-3 py-1 text-sm font-medium">
                                {{ $data['news_content']['list'][0]['categories'][0]['name'] }}
                            </span>
                        </div>
                    @endif
                    <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">{{ $data['news_content']['list'][0]['name'] ?? '' }}</h2>
                    <div class="flex items-center text-muted-foreground">
                        <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M8 2v4"></path>
                            <path d="M16 2v4"></path>
                            <rect width="18" height="18" x="3" y="4" rx="2"></rect>
                            <path d="M3 10h18"></path>
                        </svg>
                        <span>{{ $data['news_content']['list'][0]['publish_at'] ?? '' }}</span>
                    </div>
                </div>

                <!-- Article Image -->
                <div class="mb-10">
                    <img class="w-full h-auto rounded-lg object-cover" src="{{ $data['news_content']['list'][0]['image'] ?? '' }}" alt="{{ $data['news_content']['list'][0]['name'] ?? '' }}" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="hidden w-full h-64 bg-accent rounded-lg items-center justify-center">
                        <span class="text-muted-foreground">{{ $data['news_content']['list'][0]['name'] ?? '' }}</span>
                    </div>
                </div>

                <!-- Article Content -->
                <div class="prose prose-lg max-w-none">
                    <!-- Brief Description -->
                    <div class="mb-10">
                        <p class="text-lg text-foreground leading-relaxed">{{ $data['news_content']['list'][0]['desc'] ?? '' }}</p>
                    </div>
                    <!-- Main Content -->
                    <div class="space-y-6">
                        {!! _html($data['news_content']['list'][0]['detail'] ?? '') !!}
                    </div>
                </div>

                <!-- Image Gallery -->
                @if (!empty($data['news_content']['list'][0]['gallery']))
                    <div class="mb-8 mt-12">
                        <h2 class="text-xl font-semibold text-foreground mb-4">{{ __('frontend::common.image_gallery') }}</h2>
                        <p class="text-sm text-muted-foreground mb-4">{{ __('frontend::common.click_to_view_larger_image') }}</p>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            @foreach ($data['news_content']['list'][0]['gallery'] as $galleryItem)
                                <button class="relative h-32 md:h-40 rounded-lg overflow-hidden hover:opacity-90 transition-opacity" data-image-gallery-button type="button">
                                    <img class="object-cover w-full h-full" src="{{ check_file($galleryItem['image'] ?? '') }}" alt="Gallery image {{ $loop->iteration }}" loading="lazy">
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

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

    <!-- Image Lightbox Modal -->
    <div class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden" id="image-lightbox">
        <button class="absolute left-4 md:left-8 text-white text-3xl md:text-4xl font-semibold px-2 py-1 md:px-3 md:py-2 rounded-full bg-black/40 hover:bg-black/60 focus:outline-none focus:ring-2 focus:ring-white" id="image-lightbox-prev" type="button">
            <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            <span class="sr-only">{{ __('frontend::common.previous') }}</span>
        </button>
        <div class="relative max-w-4xl w-full px-4">
            <button class="absolute -top-3 -right-5 md:-top-4 md:-right-5 bg-white text-gray-800 rounded-full w-8 h-8 md:w-9 md:h-9 flex items-center justify-center shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white" id="image-lightbox-close" type="button">
                <span class="sr-only">{{ __('frontend::common.close') }}</span>
                &times;
            </button>
            <img class="w-full max-h-[80vh] object-contain rounded-lg shadow-2xl bg-black" id="image-lightbox-img" src="" alt="">
        </div>
        <button class="absolute right-4 md:right-8 text-white text-3xl md:text-4xl font-semibold px-2 py-1 md:px-3 md:py-2 rounded-full bg-black/40 hover:bg-black/60 focus:outline-none focus:ring-2 focus:ring-white" id="image-lightbox-next" type="button">
            <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <span class="sr-only">{{ __('frontend::common.next') }}</span>
        </button>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('image-lightbox');
            const modalImg = document.getElementById('image-lightbox-img');
            const modalClose = document.getElementById('image-lightbox-close');
            const modalPrev = document.getElementById('image-lightbox-prev');
            const modalNext = document.getElementById('image-lightbox-next');

            if (!modal || !modalImg || !modalClose || !modalPrev || !modalNext) return;

            const buttons = Array.from(document.querySelectorAll('[data-image-gallery-button]'));
            let currentIndex = 0;

            function showImage(index) {
                if (!buttons.length) return;

                // wrap around
                if (index < 0) {
                    index = buttons.length - 1;
                } else if (index >= buttons.length) {
                    index = 0;
                }

                currentIndex = index;
                const button = buttons[currentIndex];
                const img = button.querySelector('img');
                if (!img) return;

                modalImg.src = img.src;
                modalImg.alt = img.alt || '';
                modal.classList.remove('hidden');
            }

            buttons.forEach((button, index) => {
                button.addEventListener('click', () => {
                    showImage(index);
                });
            });

            function closeModal() {
                modal.classList.add('hidden');
                modalImg.src = '';
                modalImg.alt = '';
            }

            modalClose.addEventListener('click', closeModal);

            modalPrev.addEventListener('click', function(event) {
                event.stopPropagation();
                showImage(currentIndex - 1);
            });

            modalNext.addEventListener('click', function(event) {
                event.stopPropagation();
                showImage(currentIndex + 1);
            });

            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    closeModal();
                }
            });

            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
                    closeModal();
                }
                if (event.key === 'ArrowLeft' && !modal.classList.contains('hidden')) {
                    showImage(currentIndex - 1);
                }
                if (event.key === 'ArrowRight' && !modal.classList.contains('hidden')) {
                    showImage(currentIndex + 1);
                }
            });
        });
    </script>
@endsection