@extends('components.layouts.app')

@section('title', $page->getTranslation('meta_title', app()->getLocale()) ?: $page->getTranslation('title',
    app()->getLocale()))

    @push('meta')
        @if ($page->getTranslation('meta_description', app()->getLocale()))
            <meta name="description" content="{{ $page->getTranslation('meta_description', app()->getLocale()) }}">
        @endif
        @if ($page->getTranslation('meta_keywords', app()->getLocale()))
            <meta name="keywords" content="{{ $page->getTranslation('meta_keywords', app()->getLocale()) }}">
        @endif
        <meta property="og:title" content="{{ $page->getTranslation('title', app()->getLocale()) }}">
        <meta property="og:description"
            content="{{ $page->getTranslation('meta_description', app()->getLocale()) ?: Str::limit(strip_tags($page->getTranslation('content', app()->getLocale())), 160) }}">
        <meta property="og:type" content="website">
    @endpush

@section('content')
    <!-- Slider Section -->
    @if (isset($sliders) && $sliders->count() > 0)
        <div class="relative">
            <div class="swiper-container" x-data="{
                current: 0,
                total: 0,
                slides: [],
                interval: null,
                init() {
                    this.$nextTick(() => {
                        this.slides = Array.from(this.$el.querySelectorAll('.swiper-slide'));
                        this.total = this.slides.length;
                        if (this.total > 1) {
                            this.slides.forEach((slide, index) => {
                                if (index !== 0) {
                                    slide.style.opacity = '0';
                                    slide.style.pointerEvents = 'none';
                                }
                            });
                            this.interval = setInterval(() => this.next(), 5000);
                        }
                    });
                },
                next() {
                    if (this.total === 0) return;
                    // Fade out current slide
                    this.slides[this.current].style.opacity = '0';
                    this.slides[this.current].style.pointerEvents = 'none';
                    // Move to next slide
                    this.current = (this.current + 1) % this.total;
                    // Fade in next slide
                    this.slides[this.current].style.opacity = '1';
                    this.slides[this.current].style.pointerEvents = 'auto';
                },
                prev() {
                    if (this.total === 0) return;
                    // Fade out current slide
                    this.slides[this.current].style.opacity = '0';
                    this.slides[this.current].style.pointerEvents = 'none';
                    // Move to previous slide
                    this.current = (this.current - 1 + this.total) % this.total;
                    // Fade in previous slide
                    this.slides[this.current].style.opacity = '1';
                    this.slides[this.current].style.pointerEvents = 'auto';
                }
            }" x-init="init()">
                <div class="swiper-wrapper">
                    @foreach ($sliders as $slider)
                        @if ($slider->images && is_array($slider->images))
                            @foreach ($slider->images as $image)
                                <div class="swiper-slide transition-opacity duration-1000 ease-in-out">
                                    <div class="relative h-[400px] md:h-[500px]">
                                        <img src="{{ Storage::disk('public')->url($image) }}"
                                            alt="{{ $slider->getTranslation('title', app()->getLocale()) }}"
                                            class="w-full h-full object-cover">
                                        @if ($slider->getTranslation('title', app()->getLocale()))
                                            <div class="absolute inset-0 flex items-center justify-center">
                                                <div class="text-center text-white px-4">
                                                    <h2 class="text-3xl md:text-4xl font-bold mb-4">
                                                        {{ $slider->getTranslation('title', app()->getLocale()) }}
                                                    </h2>
                                                    @if ($slider->getTranslation('description', app()->getLocale()))
                                                        <p class="text-lg md:text-xl mb-6 max-w-2xl">
                                                            {{ $slider->getTranslation('description', app()->getLocale()) }}
                                                        </p>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    @endforeach
                </div>
                <button type="button" class="swiper-button-next" @click="next()" aria-label="Next slide">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </button>
                <button type="button" class="swiper-button-prev" @click="prev()" aria-label="Previous slide">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                        </path>
                    </svg>
                </button>
            </div>
        </div>
    @endif

    <!-- Main Content Area -->
    <div class="bg-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                <!-- Sidebar -->
                <aside class="lg:col-span-1">
                    <div class="bg-gray-50 rounded-lg p-6 sticky top-4">
                        @if (isset($departmentMenu) && $departmentMenu)
                            <h3 class="font-semibold text-gray-900 mb-4">
                                {{ $departmentMenu->getTranslation('name', app()->getLocale()) ?: __('Quick Links') }}
                            </h3>
                            <nav class="space-y-2">
                                @foreach ($departmentMenu->items as $item)
                                    <a href="{{ $item->url ?? ($item->route ? route($item->route) : '#') }}"
                                        class="block text-primary hover:text-primary-dark"
                                        target="{{ $item->target ?? '_self' }}">
                                        {{ $item->getTranslation('title', app()->getLocale()) }}
                                    </a>
                                    @if ($item->children->count() > 0)
                                        <div class="ml-4 mt-1 space-y-1">
                                            @foreach ($item->children as $child)
                                                <a href="{{ $child->url ?? ($child->route ? route($child->route) : '#') }}"
                                                    class="block text-sm text-gray-600 hover:text-primary"
                                                    target="{{ $child->target ?? '_self' }}">
                                                    {{ $child->getTranslation('title', app()->getLocale()) }}
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                @endforeach
                            </nav>
                        @else
                            {{-- Fallback to default quick links if no menu --}}
                            <h3 class="font-semibold text-gray-900 mb-4">{{ __('Quick Links') }}</h3>
                            <nav class="space-y-2">
                                <a href="{{ route('departments.index') }}"
                                    class="block text-primary hover:text-primary-dark">
                                    {{ __('All Departments') }}
                                </a>
                                <a href="{{ route('news.index') }}" class="block text-primary hover:text-primary-dark">
                                    {{ __('News') }}
                                </a>
                                <a href="{{ route('documents.index') }}"
                                    class="block text-primary hover:text-primary-dark">
                                    {{ __('Documents') }}
                                </a>
                            </nav>
                        @endif
                    </div>
                </aside>

                <!-- Main Content -->
                <main class="lg:col-span-3">
                    <h1 class="text-4xl font-bold text-gray-900 mb-6">
                        {{ $page->getTranslation('title', app()->getLocale()) }}
                    </h1>

                    <div class="prose rich-content max-w-none mb-12">
                        <x-page-rich-content :content="$page->getTranslation('content', app()->getLocale())" />
                    </div>

                    <!-- Latest News Section -->
                    @if (isset($latestNews) && $latestNews->count() > 0)
                        <div class="mt-12 border-t pt-12">
                            <div class="flex justify-between items-center mb-8">
                                <div>
                                    <h2 class="text-3xl font-bold text-primary uppercase tracking-wide"
                                        style="letter-spacing: 0.1em;">{{ __('NEWS') }}</h2>
                                    <div class="h-1 w-24 bg-secondary mt-2"></div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                @foreach ($latestNews as $item)
                                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
                                        <a href="{{ route('news.show', $item->slug) }}">
                                            <img src="{{ Storage::disk('public')->url($item->getFeaturedImageOrFallback()) }}"
                                                alt="{{ $item->getTranslation('title', app()->getLocale()) }}"
                                                class="w-full h-48 object-cover">
                                        </a>
                                        <div class="p-6">
                                            <div class="flex items-center justify-between mb-2">
                                                <span class="text-sm text-gray-500">
                                                    {{ $item->published_at->format('M d, Y') }}
                                                </span>
                                                @if ($item->categories && $item->categories->count() > 0)
                                                    <div class="flex flex-wrap gap-1">
                                                        @foreach ($item->categories as $category)
                                                            <span class="text-xs bg-secondary text-primary px-2 py-1 rounded">
                                                                {{ $category->getTranslation('name', app()->getLocale()) }}
                                                            </span>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                            <h3 class="text-xl font-semibold mb-2">
                                                <a href="{{ route('news.show', $item->slug) }}"
                                                    class="text-gray-900 hover:text-primary">
                                                    {{ $item->getTranslation('title', app()->getLocale()) }}
                                                </a>
                                            </h3>
                                            @if ($item->getTranslation('excerpt', app()->getLocale()))
                                                <p class="text-gray-600 mb-4">
                                                    {{ Str::limit($item->getTranslation('excerpt', app()->getLocale()), 100) }}
                                                </p>
                                            @endif
                                            <a href="{{ route('news.show', $item->slug) }}"
                                                class="text-primary hover:text-primary-dark font-medium">
                                                {{ __('Read More') }} →
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="text-center mt-8">
                                <a href="{{ route('news.index') }}"
                                    class="inline-block bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary-dark transition">
                                    {{ __('View All News') }}
                                </a>
                            </div>
                        </div>
                    @endif

                    <!-- Documents Section (if this is a documents page) -->
                    @if (isset($departmentDocuments))
                        <div class="mt-12 border-t pt-12">
                            <div class="flex justify-between items-center mb-8">
                                <div>
                                    <h2 class="text-3xl font-bold text-primary uppercase tracking-wide"
                                        style="letter-spacing: 0.1em;">{{ __('DOCUMENTS') }}</h2>
                                    <div class="h-1 w-24 bg-secondary mt-2"></div>
                                </div>
                            </div>

                            <!-- Category Filters -->
                            @if (isset($departmentCategories) && $departmentCategories->count() > 0)
                                <div class="mb-6">
                                    <label
                                        class="block text-sm font-medium text-gray-700 mb-3">{{ __('Filter by Category') }}</label>
                                    <div class="flex flex-wrap gap-2" x-data="{ selectedCategory: null }">
                                        <button
                                            @click="selectedCategory = null; $dispatch('filter-documents', { category: null })"
                                            class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary-dark transition">
                                            {{ __('All Documents') }}
                                        </button>
                                        @foreach ($departmentCategories as $category)
                                            <button
                                                @click="selectedCategory = '{{ $category->id }}'; $dispatch('filter-documents', { category: '{{ $category->id }}' })"
                                                class="px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition"
                                                x-bind:class="selectedCategory === '{{ $category->id }}' ? 'bg-primary text-white' :
                                                    ''">
                                                {{ $category->getTranslation('name', app()->getLocale()) }}
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            @if ($departmentDocuments->count() > 0)
                                {{-- Group documents by category --}}
                                @php
                                    $documentsByCategory = $departmentDocuments->groupBy(function ($doc) {
                                        return $doc->category ? $doc->category->id : 'uncategorized';
                                    });
                                    $categoryMap = isset($departmentCategories)
                                        ? $departmentCategories->keyBy('id')
                                        : collect();
                                @endphp

                                @foreach ($documentsByCategory as $categoryId => $categoryDocuments)
                                    @php
                                        $category =
                                            $categoryId !== 'uncategorized' ? $categoryMap->get($categoryId) : null;
                                    @endphp

                                    <div class="mb-12 category-documents" data-category-id="{{ $categoryId }}">
                                        @if ($category)
                                            <h3 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
                                                <span class="bg-secondary text-primary px-3 py-1 rounded-lg mr-3">
                                                    {{ $category->getTranslation('name', app()->getLocale()) }}
                                                </span>
                                                <span class="text-sm text-gray-500 font-normal">
                                                    ({{ $categoryDocuments->count() }} {{ __('document(s)') }})
                                                </span>
                                            </h3>
                                            @if ($category->getTranslation('description', app()->getLocale()))
                                                <p class="text-gray-600 mb-4">
                                                    {{ $category->getTranslation('description', app()->getLocale()) }}
                                                </p>
                                            @endif
                                        @else
                                            <h3 class="text-2xl font-bold text-gray-900 mb-4">
                                                {{ __('Uncategorized') }}
                                                <span class="text-sm text-gray-500 font-normal">
                                                    ({{ $categoryDocuments->count() }} {{ __('document(s)') }})
                                                </span>
                                            </h3>
                                        @endif

                                        <div class="space-y-4">
                                            @foreach ($categoryDocuments as $document)
                                                <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition">
                                                    <div
                                                        class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                                                        <div class="flex-1">
                                                            <div class="flex items-center gap-3 mb-2">
                                                                <h3 class="text-lg font-semibold text-gray-900">
                                                                    {{ $document->getTranslation('title', app()->getLocale()) }}
                                                                </h3>
                                                                @if ($document->document_type)
                                                                    <span
                                                                        class="px-2 py-1 text-xs font-semibold rounded
                                                                @if ($document->document_type === 'image') bg-green-100 text-green-800
                                                                @elseif($document->document_type === 'video') bg-yellow-100 text-yellow-800
                                                                @else bg-blue-100 text-blue-800 @endif">
                                                                        {{ strtoupper($document->document_type) }}
                                                                    </span>
                                                                @endif
                                                            </div>
                                                            @if ($document->getTranslation('description', app()->getLocale()))
                                                                <p class="text-gray-600 mb-2">
                                                                    {{ Str::limit($document->getTranslation('description', app()->getLocale()), 150) }}
                                                                </p>
                                                            @endif

                                                            {{-- Preview for images --}}
                                                            @if ($document->document_type === 'image' && $document->file_path)
                                                                <div class="my-3">
                                                                    <img src="{{ Storage::disk('public')->url($document->file_path) }}"
                                                                        alt="{{ $document->getTranslation('title', app()->getLocale()) }}"
                                                                        class="max-w-xs h-32 object-cover rounded-lg border border-gray-200">
                                                                </div>
                                                            @endif

                                                            {{-- Preview for videos --}}
                                                            @if ($document->document_type === 'video' && $document->file_path)
                                                                <div class="my-3">
                                                                    <video controls
                                                                        class="max-w-xs h-32 rounded-lg border border-gray-200">
                                                                        <source
                                                                            src="{{ Storage::disk('public')->url($document->file_path) }}"
                                                                            type="{{ $document->mime_type }}">
                                                                        {{ __('Your browser does not support the video tag.') }}
                                                                    </video>
                                                                </div>
                                                            @endif

                                                            <div
                                                                class="flex items-center gap-4 text-sm text-gray-500 flex-wrap">
                                                                @if ($document->document_type === 'file')
                                                                    <span>{{ __('Downloads') }}:
                                                                        {{ $document->download_count }}</span>
                                                                @endif
                                                                <span>{{ __('Added') }}:
                                                                    {{ $document->created_at->format('M d, Y') }}</span>
                                                                @if ($document->category)
                                                                    <span
                                                                        class="bg-secondary text-primary px-2 py-1 rounded">
                                                                        {{ $document->category->getTranslation('name', app()->getLocale()) }}
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="flex gap-2">
                                                            @if ($document->isViewableMedia())
                                                                <a href="{{ route('documents.view', $document->id) }}"
                                                                    target="_blank"
                                                                    class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition inline-flex items-center">
                                                                    <svg class="w-4 h-4 mr-2" fill="none"
                                                                        stroke="currentColor" viewBox="0 0 24 24">
                                                                        <path stroke-linecap="round"
                                                                            stroke-linejoin="round" stroke-width="2"
                                                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                                                                        </path>
                                                                        <path stroke-linecap="round"
                                                                            stroke-linejoin="round" stroke-width="2"
                                                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                                        </path>
                                                                    </svg>
                                                                    {{ __('View') }}
                                                                </a>
                                                            @endif
                                                            <a href="{{ route('documents.download', $document->id) }}"
                                                                class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition inline-flex items-center">
                                                                <svg class="w-4 h-4 mr-2" fill="none"
                                                                    stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="2"
                                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4">
                                                                    </path>
                                                                </svg>
                                                                {{ $document->document_type === 'file' ? __('Download') : __('Download File') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-center text-gray-500 py-12">{{ __('No documents found.') }}</p>
                            @endif
                        </div>

                        {{-- Add JavaScript for category filtering --}}
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                // Listen for filter events
                                window.addEventListener('filter-documents', function(event) {
                                    const categoryId = event.detail.category;
                                    const allCategories = document.querySelectorAll('.category-documents');

                                    allCategories.forEach(function(categoryDiv) {
                                        if (categoryId === null) {
                                            // Show all categories
                                            categoryDiv.style.display = 'block';
                                        } else {
                                            // Show only selected category
                                            if (categoryDiv.dataset.categoryId === categoryId.toString()) {
                                                categoryDiv.style.display = 'block';
                                            } else {
                                                categoryDiv.style.display = 'none';
                                            }
                                        }
                                    });
                                });
                            });
                        </script>
                    @endif
                </main>
            </div>
        </div>
    </div>
@endsection