@extends('layouts.app')

@section('content')
<div class="container mx-auto py-8 px-6">
    <!-- Heading for the Document -->
    <h1 class="text-4xl font-semibold text-gray-800 mb-6">{{ $library->name }}</h1>

    <!-- Document Details -->
    <div class="bg-white shadow-lg rounded-lg p-6 space-y-6">
        <!-- File Type -->
        <div class="flex items-center justify-between">
            <strong class="text-gray-600">File Type:</strong>
            <span class="text-gray-800">{{ $library->file_type }}</span>
        </div>

        <!-- Uploaded By -->
        <div class="flex items-center justify-between">
            <strong class="text-gray-600">Uploaded By:</strong>
            <span class="text-gray-800">{{ $library->user->name ?? 'Unknown' }}</span>
        </div>

        <!-- Uploaded At -->
        <div class="flex items-center justify-between">
            <strong class="text-gray-600">Uploaded At:</strong>
            <span class="text-gray-800">{{ $library->created_at->format('Y-m-d H:i:s') }}</span>
        </div>

        <!-- Description -->
        <div class="flex items-center justify-between">
            <strong class="text-gray-600">Description:</strong>
            <p class="text-gray-800">{{ $library->description }}</p>
        </div>

        <!-- Document URL -->
        <div class="flex items-center justify-between">
            <strong class="text-gray-600">Document URL:</strong>
            <a href="{{ $library->url_dokumen }}" target="_blank" class="text-blue-500 hover:underline">
                {{ $library->url_dokumen ?? 'No URL provided' }}
            </a>
        </div>
    </div>

    <!-- Preview Document Section -->
    <div class="bg-white shadow-lg rounded-lg p-6 mt-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Document Preview</h2>

        @if ($library->file_type === 'pdf')
            <!-- PDF Preview -->
            <div class="flex justify-center">
                <iframe src="{{ asset('storage/' . $library->file_path) }}" width="100%" height="600px"></iframe>
            </div>
        @elseif (in_array($library->file_type, ['jpg', 'jpeg', 'png', 'gif']))
            <!-- Image Preview -->
            <div class="flex justify-center">
                <img src="{{ asset('storage/' . $library->file_path) }}" alt="Document Image" class="max-w-full h-auto rounded-lg shadow-md">
            </div>
        @else
            <!-- Display a message if the file type is not supported for preview -->
            <div class="text-center text-gray-600">
                <p>Preview is not available for this file type.</p>
            </div>
        @endif
    </div>

    <!-- Button to go back to the library list -->
    <div class="mt-6">
        <a href="{{ route('libraries.index') }}" class="bg-gray-600 text-white px-6 py-3 rounded-md hover:bg-gray-700 transition-colors">
            Back to Library List
        </a>
    </div>
</div>
@endsection