@extends('layouts.app')

@section('content')
<div class="flex items-start justify-between gap-3">
    <div>
        <h1 class="text-xl font-semibold">{{ $album->name }}</h1>
        <p class="text-sm text-slate-400 mt-1">{{ $album->description }}</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('albums.edit', $album) }}" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-sm">Edit</a>
        <form method="POST" action="{{ route('albums.destroy', $album) }}" onsubmit="return confirm('Hapus album ini? Foto tidak akan terhapus, hanya keluar dari album.');">
            @csrf
            @method('DELETE')
            <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="grid lg:grid-cols-3 gap-4 mt-5">
    <div class="lg:col-span-2 p-5 rounded-2xl bg-slate-900 border border-slate-800">
        <h2 class="font-semibold">Foto di album</h2>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
            @forelse($images as $img)
                <div class="rounded-2xl overflow-hidden border border-slate-800 bg-slate-950/30">
                    <a href="{{ route('images.show', $img) }}" class="block">
                        <img src="{{ route('images.asset', ($img->public_name ?? $img->slug)) }}" class="w-full h-36 object-contain bg-black/50">
                    </a>
                    <div class="p-3 flex items-center justify-between gap-2">
                        <div class="text-xs text-slate-400 truncate">{{ $img->original_name }}</div>
                        <form method="POST" action="{{ route('albums.detach', $album) }}">
                            @csrf
                            <input type="hidden" name="image_id" value="{{ $img->id }}">
                            <button class="text-xs px-2 py-1 rounded-lg bg-slate-800 hover:bg-slate-700">Remove</button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="text-sm text-slate-400">Belum ada foto di album ini.</div>
            @endforelse
        </div>
        <div class="mt-6">{{ $images->links() }}</div>
    </div>

    <div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
        <h2 class="font-semibold">Tambah foto</h2>
        <p class="text-sm text-slate-400 mt-1">Pilih dari foto milikmu.</p>

        <form method="POST" action="{{ route('albums.attach', $album) }}" class="mt-4 space-y-3">
            @csrf
            <select name="image_id" class="w-full rounded-xl bg-slate-950 border border-slate-800 px-3 py-2">
                @foreach($ownedImages as $img)
                    <option value="{{ $img->id }}">{{ $img->original_name }}</option>
                @endforeach
            </select>
            <button class="w-full px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-sm font-semibold">
                Add to Album
            </button>
        </form>

        <div class="mt-6">
            <a href="{{ route('albums.index') }}" class="inline-flex w-full items-center justify-center px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-sm">
                Back to Albums
            </a>
        </div>
    </div>
</div>
@endsection