@extends('layouts.app')

@section('title', 'Media Library')
@section('nav_media', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Media Library')
@section('page_subtitle', 'Upload once, reuse anywhere — every image is auto-optimized')

@section('content')

@if(session('error'))
<div class="mb-4 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">{{ session('error') }}</div>
@endif
@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border-[0.5px] border-green-200 rounded-xl text-sm text-green-700">{{ session('success') }}</div>
@endif
@if($errors->any())
<div class="mb-4 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">{{ $errors->first() }}</div>
@endif

@php $inp = 'w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400'; @endphp

{{-- Upload + search --}}
<div class="flex flex-col lg:flex-row gap-4 mb-6">
    <form action="{{ route('media.store') }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-xl border-[0.5px] border-gray-200 p-4 flex-1 flex items-end gap-3">
        @csrf
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-600 mb-1.5">Upload images <span class="text-gray-400">(multiple allowed)</span></label>
            <input type="file" name="files[]" accept="image/*" multiple required
                   class="block text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100">
        </div>
        <button type="submit" class="flex-none bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-4 py-2 rounded-lg transition-colors">Upload</button>
    </form>
    <form method="GET" action="{{ route('media.index') }}" class="flex items-end gap-2">
        <input type="text" name="search" value="{{ $search }}" placeholder="Search title or alt…" class="{{ $inp }} sm:w-56">
        <button type="submit" class="px-3 py-2 text-sm font-medium bg-white border-[0.5px] border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">Search</button>
        @if($search)<a href="{{ route('media.index') }}" class="text-xs text-gray-400 hover:text-gray-600 self-center">Clear</a>@endif
    </form>
</div>

@if($media->isEmpty())
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-16 text-center text-gray-300 text-sm">
    @if($search) No media matches "{{ $search }}". @else Your media library is empty. Upload images above to reuse them across the site. @endif
</div>
@else
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-4">
    @foreach($media as $m)
    <div x-data="{ edit: false, copied: false }" class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden group">
        <div class="relative aspect-square bg-gray-50">
            <img src="{{ $m->url() }}" alt="{{ $m->alt_text }}" class="w-full h-full object-contain">
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
                <button type="button"
                        @click="navigator.clipboard.writeText('{{ $m->url() }}'); copied = true; setTimeout(() => copied = false, 1500)"
                        class="text-xs font-medium bg-white/95 text-gray-700 hover:bg-white px-2.5 py-1 rounded-lg" x-text="copied ? 'Copied!' : 'Copy URL'"></button>
                <button type="button" @click="edit = !edit" class="text-xs font-medium bg-white/95 text-teal-700 hover:bg-white px-2.5 py-1 rounded-lg">Edit</button>
            </div>
        </div>
        <div x-show="!edit" class="p-2.5">
            <p class="text-xs font-medium text-gray-700 truncate">{{ $m->title ?: 'Untitled' }}</p>
            <div class="flex items-center justify-between mt-0.5">
                <span class="text-[10px] text-gray-400">{{ $m->width }}×{{ $m->height }} · {{ $m->humanSize() }}</span>
                <form method="POST" action="{{ route('media.destroy', $m->id) }}" data-confirm="Remove this image from the library?" data-danger="true">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-[10px] font-medium text-red-500 hover:text-red-700">Delete</button>
                </form>
            </div>
        </div>
        <form x-show="edit" x-cloak method="POST" action="{{ route('media.update', $m->id) }}" class="p-2.5 space-y-2">
            @csrf @method('PATCH')
            <input type="text" name="title" value="{{ $m->title }}" placeholder="Title" maxlength="150" class="w-full border-[0.5px] border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            <input type="text" name="alt_text" value="{{ $m->alt_text }}" placeholder="Alt text (for SEO / accessibility)" maxlength="200" class="w-full border-[0.5px] border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            <div class="flex items-center justify-end gap-2">
                <button type="button" @click="edit = false" class="text-[10px] font-medium text-gray-400 hover:text-gray-600">Cancel</button>
                <button type="submit" class="text-[10px] font-semibold bg-teal-600 hover:bg-teal-700 text-white px-2.5 py-1 rounded-lg">Save</button>
            </div>
        </form>
    </div>
    @endforeach
</div>

<div class="mt-5">{{ $media->links() }}</div>
@endif

@endsection