@extends('layouts.admin', ['title' => 'Edit Gallery Image'])

@section('content')
    <div class="rounded-2xl border border-white/10 bg-white/5 p-8">
        <div class="flex items-center justify-between gap-4">
            <div>
                <div class="text-xl font-semibold">Edit Gallery Image</div>
                <div class="mt-1 text-sm text-white/60">{{ $item->title ?: 'Untitled' }}</div>
            </div>
            <a href="{{ route('admin.gallery.index') }}" class="text-sm text-white/60 hover:text-white">Back</a>
        </div>

        <div class="mt-8 overflow-hidden rounded-2xl border border-white/10 bg-slate-950/40">
            <img class="h-auto w-full" src="{{ asset('storage/'.$item->image_path) }}" alt="{{ $item->title ?: 'Gallery image' }}" loading="lazy">
        </div>

        <form class="mt-8 space-y-5" method="POST" action="{{ route('admin.gallery.update', $item) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="text-xs text-white/70">Title (optional)</label>
                    <input name="title" value="{{ old('title', $item->title) }}" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
                <div>
                    <label class="text-xs text-white/70">Caption (optional)</label>
                    <input name="caption" value="{{ old('caption', $item->caption) }}" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
            </div>

            <div class="grid gap-4 md:grid-cols-3">
                <div>
                    <label class="text-xs text-white/70">Sort Order</label>
                    <input name="sort_order" type="number" min="0" value="{{ old('sort_order', $item->sort_order) }}" required class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none focus:border-emerald-400/60">
                </div>
                <div class="flex items-center gap-2 pt-7">
                    <input name="is_published" type="checkbox" value="1" {{ old('is_published', $item->is_published) ? 'checked' : '' }} class="rounded border-white/20 bg-white/5">
                    <label class="text-sm text-white/70">Published</label>
                </div>
                <div>
                    <label class="text-xs text-white/70">Replace Image (optional)</label>
                    <input name="image" type="file" accept="image/*" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm outline-none">
                </div>
            </div>

            <div class="flex items-center gap-3">
                <button class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-white/90">
                    Save
                </button>
            </div>
        </form>

        <form class="mt-4" method="POST" action="{{ route('admin.gallery.destroy', $item) }}" onsubmit="return confirm('Delete this image?')">
            @csrf
            @method('DELETE')
            <button class="rounded-xl border border-rose-400/30 bg-rose-500/10 px-6 py-3 text-sm font-semibold text-rose-100 hover:bg-rose-500/20">Delete Image</button>
        </form>
    </div>
@endsection