@extends('layouts.admin')
@section('title', 'Réalisations')
@section('page_title', 'Réalisations')

@section('content')

<div class="flex justify-end mb-6">
    <a href="{{ route('admin.portfolio.create') }}" class="inline-flex items-center gap-2 btn-gold text-navy-dark font-display font-bold text-sm px-4 py-2.5 rounded-xl shadow-md hover:brightness-105 transition-all">
        <x-icon name="plus" class="w-4 h-4" /> Nouvelle réalisation
    </a>
</div>

<div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
    @forelse($items as $item)
        <div class="flex items-center justify-between gap-4 px-5 py-4 border-b border-gray-50 last:border-0">
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-12 h-9 rounded-lg bg-navy/5 overflow-hidden shrink-0">
                    @if($item->cover_image)<img src="{{ Storage::url($item->cover_image) }}" class="w-full h-full object-cover">@endif
                </div>
                <div class="min-w-0">
                    <p class="font-bold text-sm text-navy-dark truncate">{{ $item->title }}</p>
                    <p class="text-xs text-gray-400 truncate">{{ $item->client_name }} @if($item->category) · {{ $item->category }} @endif</p>
                </div>
                @unless($item->is_published)
                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 shrink-0">Brouillon</span>
                @endunless
            </div>
            <div class="flex items-center gap-1 shrink-0">
                <a href="{{ route('admin.portfolio.edit', $item) }}" class="p-2 text-gray-400 hover:text-navy rounded-lg hover:bg-gray-50"><x-icon name="pencil" class="w-4 h-4" /></a>
                <form method="POST" action="{{ route('admin.portfolio.destroy', $item) }}" onsubmit="return confirm('Supprimer cette réalisation ?');">
                    @csrf @method('DELETE')
                    <button class="p-2 text-gray-400 hover:text-rose-600 rounded-lg hover:bg-rose-50"><x-icon name="trash" class="w-4 h-4" /></button>
                </form>
            </div>
        </div>
    @empty
        <p class="text-center text-gray-400 py-10">Aucune réalisation pour l'instant.</p>
    @endforelse
</div>

@endsection