@extends('layouts.app')

@section('content')
<div class="p-5 rounded-2xl bg-slate-950/55 text-white border border-white/10 shadow-xl">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h2 class="text-lg font-extrabold tracking-wide">PUBLIC UPLOADS</h2>
            <div class="text-xs text-white/60 mt-1">Daftar gambar yang diupload tanpa login.</div>
        </div>
        <form method="GET" action="{{ route('public_uploads.index') }}" class="flex gap-2" id="publicSearchForm">
            <input id="publicSearchBox" name="q" value="{{ $q }}" placeholder="Search"
                   class="w-64 max-w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/50">
        </form>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5">
        @forelse($images as $img)
            <div class="rounded-2xl overflow-hidden border border-white/10 bg-white/5">
                <a href="{{ route('images.show', $img) }}" class="block">
                    <img src="{{ route('images.asset', ($img->public_name ?? $img->slug)) }}" alt="{{ $img->original_name }}" class="w-full h-44 object-contain bg-black/50">
                </a>
                <div class="p-3">
                    <div class="text-xs text-white/70">
                        <div class="truncate"><span class="font-semibold text-white/80">Nama:</span> {{ $img->display_name ?? $img->original_name }}</div>
                        <div class="mt-2 grid grid-cols-[44px,1fr,auto] items-center gap-2">
                            <div class="text-white/60 font-semibold">URL:</div>
                            <button type="button" class="underline hover:text-cyan-300 truncate text-white/80 text-left" data-copy="{{ url('/'.($img->public_name ?? $img->slug)) }}">/{{ $img->public_name ?? $img->slug }}</button>
                            <div class="flex items-center gap-2">
                                <a href="{{ route('images.show', $img) }}" class="px-3 py-2 rounded-xl bg-yellow-400 hover:bg-yellow-300 text-slate-950 font-extrabold text-xs">Edit</a>
                                <button type="button" class="px-3 py-2 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 font-extrabold text-xs" data-copy="{{ url('/'.($img->public_name ?? $img->slug)) }}">Copy</button>
                            </div>
                        </div>
                        @php $dt = $img->created_at->timezone('Asia/Jakarta')->locale('id'); @endphp
                        <div class="text-xs text-white/60 mt-2">{{ number_format($img->size / 1024, 0) }} KB • {{ $img->mime }}</div>
                        <div class="text-xs text-white/60">• {{ $dt->translatedFormat('d M Y') }} • {{ $dt->format('H:i') }} WIB</div>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-sm text-white/70">Belum ada public uploads.</div>
        @endforelse
    </div>

    <div class="mt-6">
        {{ $images->links() }}
    </div>
</div>

<script>
(() => {
  const box = document.getElementById('publicSearchBox');
  const form = document.getElementById('publicSearchForm');
  if (!box || !form) return;
  let t;
  box.addEventListener('input', () => {
    clearTimeout(t);
    t = setTimeout(() => form.submit(), 250);
  });
})();
</script>
@endsection