@extends('layouts.app')

@section('content')
<div class="flex flex-col gap-4">
    <div class="flex items-start justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold tracking-wide text-white truncate">Asset Preview</h1>
            <div class="text-sm text-white/70 mt-1 space-y-1">
                <div>
                    <span class="text-white/60">Nama File:</span>
                    <span class="font-semibold text-white">{{ $image->display_name ?? $image->original_name }}</span>
                </div>
                <div>
                    <span class="text-white/60">Slug:</span>
                    <span class="font-semibold text-white">{{ $image->public_name ?? $image->slug }}</span>
                </div>
                <div>
                    <span class="text-white/60">Album:</span>
                    <span class="font-semibold text-white">{{ optional($image->album)->name ?? '—' }}</span>
                </div>
            </div>
        </div>
        <a href="{{ $isPublicUpload ? route('public_uploads.index') : route('dashboard') }}" class="px-4 py-2 rounded-xl bg-white/10 text-white hover:bg-white/20 border border-white/10 text-sm font-semibold">Kembali</a>
    </div>

    <div class="p-5 rounded-2xl bg-slate-950/60 text-white border border-white/10 shadow-xl">
        <div class="text-sm font-semibold">Edit</div>

        <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
            <form method="POST" action="{{ route('images.display_name', $image) }}" class="rounded-2xl border border-white/10 bg-white/5 p-4">
                @csrf
                @method('PATCH')
                <div class="text-sm font-semibold text-white/90">Nama File</div>
                <input name="display_name" value="{{ old('display_name', $image->display_name ?? $image->original_name) }}"
                       class="mt-2 w-full rounded-xl bg-slate-950/40 border border-white/10 px-3 py-2 text-sm text-white"
                       placeholder="contoh: banner promo">
                <button class="mt-3 px-4 py-2 rounded-xl bg-yellow-400 hover:bg-yellow-300 text-slate-950 text-sm font-extrabold">SAVE</button>
            </form>

            <form method="POST" action="{{ route('images.slug', $image) }}" class="rounded-2xl border border-white/10 bg-white/5 p-4">
                @csrf
                @method('PATCH')
                <div class="text-sm font-semibold text-white/90">Slug URL</div>
                <div class="mt-2 flex items-center gap-2">
                    <span class="text-white/60 text-sm select-none">/</span>
                    <input name="public_name" value="{{ old('public_name', $image->public_name ?? '') }}"
                           class="flex-1 rounded-xl bg-slate-950/40 border border-white/10 px-3 py-2 text-sm text-white"
                           placeholder="contoh: test1">
                </div>
                <div class="mt-2 text-xs text-white/60">Kosongkan untuk kembali pakai slug otomatis.</div>
                <button class="mt-3 px-4 py-2 rounded-xl bg-yellow-400 hover:bg-yellow-300 text-slate-950 text-sm font-extrabold">SAVE</button>
            </form>
        </div>

        <div class="mt-5">
            <div class="text-sm font-semibold">Link</div>
            <div class="mt-3 flex flex-col sm:flex-row gap-2">
                <input id="assetLink" readonly value="{{ url('/'.($image->public_name ?? $image->slug)) }}"
                       class="flex-1 rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-sm text-white">
                <button type="button" onclick="navigator.clipboard.writeText(document.getElementById('assetLink').value)"
                        class="px-4 py-2 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 text-sm font-extrabold shadow-lg shadow-cyan-500/10">COPY LINK</button>
            </div>
        </div>

        <div class="mt-4 flex gap-2">
            <form method="POST" action="{{ route('images.destroy', $image) }}" onsubmit="return confirm('Hapus foto ini?');">
                @csrf
                @method('DELETE')
                <input type="hidden" name="redirect_to" value="{{ $isPublicUpload ? route('public_uploads.index') : route('dashboard') }}">
                <button class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-sm font-semibold">Delete</button>
            </form>
        </div>
    </div>

    <div class="rounded-2xl overflow-hidden border border-white/10 bg-black/60 shadow-xl">
        <img src="{{ route('images.asset', ($image->public_name ?? $image->slug)) }}" alt="{{ $image->original_name }}" class="w-full max-h-[70vh] object-contain bg-black">
    </div>
</div>
@endsection