@extends('admin.layouts.admin')

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

@section('content')
    <div class="space-y-6">
        <div
            class="bg-white p-6 rounded-lg shadow-sm border border-slate-200 flex items-center justify-between dark:bg-[#1a233a] dark:border-white/5 transition-colors">
            <div>
                <h2 class="text-xl font-bold text-[#404e67] dark:text-slate-200">Images & Assets</h2>
                <p class="text-xs text-slate-400 mt-1">Manage your website's visual content and uploads.</p>
            </div>
            <form action="{{ route('admin.media.store') }}" method="POST" enctype="multipart/form-data"
                id="media-upload-form">
                @csrf
                <input type="file" name="image" id="media-input" class="hidden"
                    onchange="document.getElementById('media-upload-form').submit()">
                <button type="button" onclick="document.getElementById('media-input').click()"
                    class="bg-primary text-white px-5 py-2.5 rounded-md font-bold text-xs shadow-lg shadow-blue-500/20 hover:bg-primary-hover transition-all flex items-center">
                    <i class="fas fa-upload mr-2"></i> Upload New Media
                </button>
            </form>
        </div>

        <!-- Media Grid -->
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
            @forelse($media as $item)
                <div
                    class="bg-white border border-slate-200 rounded-lg overflow-hidden group relative cursor-pointer shadow-sm hover:shadow-md transition-all dark:bg-[#1a233a] dark:border-white/5">
                    <div class="aspect-square bg-slate-100 flex items-center justify-center overflow-hidden dark:bg-white/5">
                        <img src="{{ $item->path }}"
                            class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    </div>
                    <div class="p-3 border-t border-slate-100 flex items-center justify-between dark:border-white/5">
                        <div>
                            <p class="text-[10px] font-bold text-slate-700 truncate w-24 dark:text-slate-300">
                                {{ $item->filename }}</p>
                            <p class="text-[9px] text-slate-400 dark:text-slate-500">{{ round($item->size / 1024, 1) }} KB</p>
                        </div>
                        <button
                            class="text-slate-300 hover:text-red-500 transition dark:text-slate-600 dark:hover:text-rose-500"><i
                                class="fas fa-trash-alt text-xs"></i></button>
                    </div>
                </div>
            @empty
                <div
                    class="col-span-full bg-white p-20 rounded-lg border border-dashed border-slate-300 flex flex-col items-center justify-center text-slate-400 dark:bg-white/5 dark:border-white/10 dark:text-slate-500">
                    <i class="fas fa-images text-5xl mb-4 opacity-20 dark:opacity-10"></i>
                    <p class="font-bold uppercase tracking-widest text-xs dark:text-slate-400">Your library is empty</p>
                    <p class="text-[10px] mt-1">Start by uploading some images</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection