@extends('layouts.app')

@section('content')
<div class="bg-gray-50 dark:bg-gray-900 min-h-screen">
    <div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <a href="{{ route('catalog.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                        <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                    </a>
                    <div>
                        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                            @php
                                $title = $catalog->title;
                                if (is_array($title)) {
                                    echo $title[app()->getLocale()] ?? $title['en'] ?? reset($title);
                                } else {
                                    echo $title;
                                }
                            @endphp
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            {{ __('general.file_size') }}: {{ $catalog->file_size_formatted }} | 
                            {{ __('general.download_count') }}: {{ $catalog->download_count }}
                        </p>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <a href="{{ route('catalog.download', $catalog) }}" 
                       class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200 shadow-md">
                        {{ __('general.download_catalog') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 py-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden p-0 sm:p-2">
            <div class="w-full min-h-[400px] flex items-center justify-center">
                <iframe 
                    src="{{ $fileUrl }}#toolbar=1&navpanes=1&scrollbar=1" 
                    class="w-full h-[80vh] min-h-[400px] border-0"
                    title="@php $title = $catalog->title; if (is_array($title)) { echo $title[app()->getLocale()] ?? $title['en'] ?? reset($title); } else { echo $title; } @endphp"
                >
                    <p class="p-4 text-center text-gray-500 dark:text-gray-400">
                        {{ __('general.pdf_preview_not_supported') }}
                        <a href="{{ route('catalog.download', $catalog) }}" class="text-orange-600 hover:text-orange-700 underline">
                            {{ __('general.download_catalog') }}
                        </a>
                    </p>
                </iframe>
            </div>
        </div>
    </div>
    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
        <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">
                {{ __('general.catalog_description') }}
            </h3>
            <p class="text-gray-600 dark:text-gray-400">
                @php
                    $desc = $catalog->description;
                    if (is_array($desc)) {
                        echo $desc[app()->getLocale()] ?? $desc['en'] ?? reset($desc);
                    } else {
                        echo $desc;
                    }
                @endphp
            </p>
        </div>
    </div>
</div>

<style>
/* Removed aspect-ratio CSS for better cross-browser support */
</style>
@endsection