@extends('layouts.app')

@section('title', 'TemTechnik | ' . __('general.page_title_catalogs'))

@push('head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ url('/') }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ __('general.catalogs') }}",
      "item": "{{ url()->current() }}"
    }
  ]
}
</script>

<!-- Collection Page Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "{{ __('general.catalogs') }}",
  "description": "{{ __('general.catalog_description') }}",
  "url": "{{ url()->current() }}",
  "mainEntity": {
    "@type": "ItemList",
    "numberOfItems": {{ $catalogs->count() }},
    "itemListElement": [
      @foreach($catalogs as $index => $catalog)
      {
        "@type": "ListItem",
        "position": {{ $index + 1 }},
        "item": {
          "@type": "DigitalDocument",
          "name": "{{ is_array($catalog->title) ? ($catalog->title[app()->getLocale()] ?? $catalog->title['en'] ?? $catalog->title) : $catalog->title }}",
          "description": "{{ is_array($catalog->description) ? ($catalog->description[app()->getLocale()] ?? $catalog->description['en'] ?? $catalog->description) : $catalog->description }}",
          "url": "{{ route('catalog.preview', $catalog) }}",
          "fileFormat": "{{ $catalog->file_type }}",
          "contentSize": "{{ $catalog->file_size_formatted }}",
          "downloadUrl": "{{ route('catalog.download', $catalog) }}"
        }
      }@if(!$loop->last),@endif
      @endforeach
    ]
  }
}
</script>
@endpush

@section('content')
<div class="bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen">
    <div class="bg-white dark:bg-gray-800 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="text-center">
                <h1 class="text-4xl font-bold text-orange-500 dark:text-orange-400 mb-4">
                    {{ __('general.catalogs') }}
                </h1>
                <p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
                    {{ __('general.catalog_description') }}
                </p>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        @if($catalogs->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($catalogs as $catalog)
                    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-2xl hover:scale-105 transition-transform duration-300 overflow-hidden p-4 flex flex-col justify-between max-w-xs w-full mx-auto">
                        @if($catalog->preview_image)
                            <div class="relative w-full aspect-[3/4] bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 overflow-hidden cursor-pointer" onclick="window.open('{{ route('catalog.preview', $catalog) }}', '_blank')">
                                <img src="{{ asset('storage/' . $catalog->preview_image) }}" alt="Preview" class="object-cover w-full h-full">
                                @if($catalog->description)
                                    <div class="absolute inset-0 bg-black/80 dark:bg-gray-900/90 text-white flex items-center justify-center text-xs p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20 text-center pointer-events-none">
                                        @php
                                            $desc = is_array($catalog->description) ? ($catalog->description[app()->getLocale()] ?? $catalog->description['en'] ?? $catalog->description) : $catalog->description;
                                        @endphp
                                        {{ $desc }}
                                    </div>
                                @endif
                            </div>
                        @else
                        <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6 text-center cursor-pointer" onclick="window.open('{{ route('catalog.preview', $catalog) }}', '_blank')">
                            @if(strtolower($catalog->file_type) === 'pdf')
                                <svg class="w-16 h-16 mx-auto text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
                                </svg>
                            @else
                                <svg class="w-16 h-16 mx-auto text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
                                </svg>
                            @endif
                            <div class="mt-2">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-white text-blue-600">
                                    {{ strtoupper($catalog->file_type) }}
                                </span>
                            </div>
                        </div>
                        @endif

                        <div class="relative flex-1 flex flex-col justify-between">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-1 truncate cursor-pointer" onclick="window.open('{{ route('catalog.preview', $catalog) }}', '_blank')">
                                @php
                                    $title = is_array($catalog->title) ? ($catalog->title[app()->getLocale()] ?? $catalog->title['en'] ?? $catalog->title) : $catalog->title;
                                @endphp
                                {{ $title }}
                            </h3>
                            <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-2 mt-2">
                                <span>{{ __('general.file_size') }}: {{ $catalog->file_size_formatted }}</span>
                                <span>{{ __('general.download_count') }}: {{ $catalog->download_count }}</span>
                            </div>
                            <div class="flex space-x-2 mt-auto">
                                @if(strtolower($catalog->file_type) === 'pdf')
                                    <a href="{{ route('catalog.preview', $catalog) }}" 
                                       class="flex-1 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-center py-1.5 px-2 rounded-md text-xs font-medium transition duration-200">
                                        {{ __('general.preview_catalog') }}
                                    </a>
                                @endif
                                <a href="{{ route('catalog.download', $catalog) }}" 
                                   class="flex-1 bg-orange-500 hover:bg-orange-600 text-white text-center py-1.5 px-2 rounded-md text-xs font-medium transition duration-200">
                                    {{ __('general.download_catalog') }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('general.no_catalogs_available') }}</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    {{ __('general.catalog_description') }}
                </p>
            </div>
        @endif
    </div>
</div>
@endsection