@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8 text-gray-800">Gestion de la Galerie Photos</h1>

    <div class="bg-white p-6 rounded-lg shadow mb-8 border-l-4 border-primary">
        <h2 class="font-bold text-lg mb-4">Ajouter une réalisation</h2>
        <form action="{{ route('admin.gallery.store') }}" method="POST" enctype="multipart/form-data" class="flex flex-col md:flex-row gap-4 items-end">
            @csrf

            <div class="flex-1 w-full">
                <label class="block text-sm font-bold text-gray-700 mb-1">Titre (Optionnel)</label>
                <input type="text" name="title" placeholder="Ex: Commande de Sophie" class="w-full border rounded p-2">
            </div>
            <div class="flex-1 w-full">
                <label class="block text-sm font-bold text-gray-700 mb-1">Catégorie</label>
                <select name="category_id" class="w-full border rounded p-2">
                    <option value="">-- Aucune --</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="flex-1 w-full">
                <label class="block text-sm font-bold text-gray-700 mb-1">Photo</label>
                <input type="file" name="image" class="w-full border bg-gray-50 rounded p-2" required>
            </div>

            <button type="submit" class="bg-primary hover:bg-primary-dark text-white font-bold py-2 px-6 rounded transition h-[42px]">
                Uploader
            </button>
        </form>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        @foreach($images as $img)
            <div class="bg-white rounded shadow overflow-hidden group relative">
                <img src="{{ asset($img->image_path) }}" class="w-full h-48 object-cover">
                <div class="p-2">
                    <p class="text-sm font-bold truncate">{{ $img->title ?? 'Sans titre' }}</p>
                    <p class="text-xs text-gray-500">{{ $img->created_at->format('d/m/Y') }}</p>
                </div>

                <form action="{{ route('admin.gallery.destroy', $img->id) }}" method="POST" class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition" onsubmit="return confirm('Supprimer cette photo ?');">
                    @csrf @method('DELETE')
                    <button class="bg-red-600 text-white p-2 rounded-full hover:bg-red-700 shadow-lg">
                        <i class="fas fa-trash"></i>
                    </button>
                </form>
            </div>
        @endforeach
    </div>
</div>
@endsection