@extends('layouts.app')
@section('title','Catalogue')
@section('heading','Catalogue de prestations')
@section('actions')<x-btn :href="route('services.create')">➕ Nouvelle prestation</x-btn>@endsection
@section('content')
<div class="space-y-6">
    @forelse($categories as $cat)
        <x-card>
            <div class="flex items-center gap-2 mb-3">
                <span class="text-xl">{{ $cat->icon }}</span>
                <h3 class="font-semibold text-lg" style="color: {{ $cat->color }}">{{ $cat->name }}</h3>
                <span class="text-xs text-slate-400">{{ $cat->services->count() }} prestations</span>
                <form method="POST" action="{{ route('categories.destroy',$cat) }}" class="ml-auto"
                      onsubmit="return confirm('Supprimer la catégorie « {{ $cat->name }} » ?{{ $cat->services->count() ? '\n\nSes '.$cat->services->count().' prestation(s) seront déplacées vers « Sans catégorie ».' : '' }}')">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-xs text-slate-400 hover:text-rose-600 flex items-center gap-1" title="Supprimer la catégorie">🗑️ Supprimer</button>
                </form>
            </div>
            @if($cat->services->isEmpty())
                <p class="text-sm text-slate-400">Aucune prestation dans cette catégorie.</p>
            @else
                <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-3">
                    @foreach($cat->services as $s)
                        @include('partials.service-card')
                    @endforeach
                </div>
            @endif
        </x-card>
    @empty <x-empty message="Aucune catégorie" /> @endforelse

    @if($uncategorized->isNotEmpty())
        <x-card>
            <div class="flex items-center gap-2 mb-3">
                <span class="text-xl">📦</span>
                <h3 class="font-semibold text-lg text-slate-500">Sans catégorie</h3>
                <span class="text-xs text-slate-400">{{ $uncategorized->count() }} prestations</span>
            </div>
            <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-3">
                @foreach($uncategorized as $s)
                    @include('partials.service-card')
                @endforeach
            </div>
        </x-card>
    @endif

    <x-card title="Nouvelle catégorie">
        <form method="POST" action="{{ route('categories.store') }}" class="flex gap-2 items-end">@csrf
            <input name="name" placeholder="Nom de la catégorie" required class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <input name="icon" placeholder="Icône (emoji)" class="rounded-lg border border-slate-300 px-3 py-2 text-sm w-32">
            <input name="color" type="color" value="#6366f1" class="h-10 w-14 rounded-lg border border-slate-300">
            <x-btn type="submit">Ajouter</x-btn>
        </form>
    </x-card>
</div>
@endsection