@extends('admin.layout')

@section('title', 'Services de réservation')
@section('header', 'Services de réservation')

@section('content')
<nav class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
    <a href="{{ route('admin.reservation.index') }}" class="text-slate-500 hover:text-slate-900 text-sm">← Réservation</a>
    <a href="{{ route('admin.reservation.services.create') }}" class="px-6 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">+ Nouveau service</a>
</nav>

<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
    <table class="w-full min-w-[600px]">
        <thead class="bg-slate-50 text-left text-sm text-slate-500">
            <tr>
                <th class="px-6 py-3 font-medium">Service</th>
                <th class="px-6 py-3 font-medium">Durée</th>
                <th class="px-6 py-3 font-medium">Prix</th>
                <th class="px-6 py-3 font-medium w-40">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            @forelse($services as $s)
            <tr class="hover:bg-slate-50/50">
                <td class="px-6 py-4">
                    <div class="flex items-center gap-4">
                        @if($s->image_url)
                        <img src="{{ $s->image_url }}" alt="{{ $s->name }}" class="w-14 h-14 object-cover rounded-xl">
                        @else
                        <div class="w-14 h-14 bg-slate-100 rounded-xl flex items-center justify-center text-slate-400">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14"/></svg>
                        </div>
                        @endif
                        <div>
                            <span class="font-medium text-slate-800">{{ $s->name }}</span>
                            @if($s->description)
                            <p class="text-sm text-slate-500 mt-0.5">{{ Str::limit($s->description, 80) }}</p>
                            @endif
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 text-slate-600">{{ $s->duration_minutes }} min</td>
                <td class="px-6 py-4">{{ $s->price ? number_format($s->price, 2, ',', ' ').' €' : 'Gratuit' }}</td>
                <td class="px-6 py-4">
                    <a href="{{ route('admin.reservation.services.edit', ['reservationService' => $s->id]) }}" class="px-4 py-2 bg-primary-500 text-white rounded-lg text-sm font-medium hover:bg-primary-600 transition">Modifier</a>
                    <span class="inline-block w-px h-6 bg-slate-200 mx-2 align-middle"></span>
                    <form method="POST" action="{{ route('admin.reservation.services.destroy', ['reservationService' => $s->id]) }}" class="inline" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce service ?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-500 hover:text-red-700 text-sm font-medium">Supprimer</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-16 text-center">
                    <p class="text-slate-500 mb-4">Aucun service. Créez votre premier service (ex: Atelier Bijoux, Consultation, Massage...).</p>
                    <a href="{{ route('admin.reservation.services.create') }}" class="inline-flex px-6 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">Créer un service</a>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>
@endsection
