@extends('layouts.frontend')

@section('title', 'Media Library')

@section('content')
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h1 class="text-3xl font-bold text-gray-800">Media Library</h1>
            <p class="text-gray-600 mt-2">Browse and manage your uploaded media files</p>
        </div>

        @if($media->count() > 0)
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach($media as $item)
            <div class="group relative bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition">
                <div class="aspect-square flex items-center justify-center bg-gray-100">
                    <img src="{{ $item->url }}" 
                         alt="{{ $item->alt_text ?? $item->file_name }}" 
                         class="w-full h-full object-cover"
                         onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22100%22 height=%22100%22/%3E%3Ctext x=%2250%22 y=%2255%22 text-anchor=%22middle%22 fill=%22%239ca3af%22 font-size=%2212%22%3ENo Image%3C/text%3E%3C/svg%3E'">
                </div>
                <div class="p-3">
                    <p class="text-sm text-gray-700 truncate" title="{{ $item->file_name }}">{{ $item->file_name }}</p>
                </div>
                <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center gap-2">
                    <button onclick="copyUrl('{{ $item->url }}')" class="p-3 bg-white rounded-full hover:bg-gray-100" title="Copy URL">
                        <i class="fas fa-link text-gray-700"></i>
                    </button>
                </div>
            </div>
            @endforeach
        </div>

        @if($media->hasPages())
        <div class="mt-8">
            {{ $media->links() }}
        </div>
        @endif
        @else
        <div class="text-center py-16 bg-white rounded-xl">
            <i class="fas fa-images text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500">No media files uploaded yet.</p>
        </div>
        @endif
    </div>
</section>

<script>
function copyUrl(url) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function() {
            alert('URL copied to clipboard!');
        });
    } else {
        var textarea = document.createElement('textarea');
        textarea.value = url;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('URL copied to clipboard!');
    }
}
</script>
@endsection