@extends('admin.layout')

@section('title', 'Catégories produits')
@section('header', 'Catégories produits')

@section('content')
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
    <h2 class="text-lg font-semibold text-slate-800">Catégories</h2>
    <form method="POST" action="{{ route('admin.ecommerce.categories.store') }}" class="flex flex-wrap gap-2">
        @csrf
        <input type="text" name="name" placeholder="Nom de la catégorie" required class="px-4 py-2 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
        <select name="parent_id" class="px-4 py-2 border border-slate-200 rounded-xl">
            <option value="">— Catégorie principale —</option>
            @foreach($categories->whereNull('parent_id') as $p)
            <option value="{{ $p->id }}">{{ $p->name }}</option>
            @endforeach
        </select>
        <input type="number" name="order" placeholder="Ordre" value="0" min="0" class="w-20 px-4 py-2 border border-slate-200 rounded-xl">
        <button type="submit" class="px-6 py-2 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">Ajouter</button>
    </form>
</div>

<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
    <table class="w-full min-w-[500px]">
        <thead class="bg-slate-50 text-left text-sm text-slate-500">
            <tr>
                <th class="px-4 sm:px-6 py-3 font-medium">Nom</th>
                <th class="px-4 sm:px-6 py-3 font-medium">Parent</th>
                <th class="px-4 sm:px-6 py-3 font-medium">Produits</th>
                <th class="px-4 sm:px-6 py-3 font-medium w-48">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            @forelse($categories as $cat)
            <tr class="hover:bg-slate-50/50">
                <td class="px-6 py-4 font-medium">{{ $cat->parent_id ? '↳ ' : '' }}{{ $cat->name }}</td>
                <td class="px-6 py-4 text-slate-500">{{ $cat->parent?->name ?? '—' }}</td>
                <td class="px-6 py-4">{{ $cat->products_count ?? 0 }}</td>
                <td class="px-4 sm:px-6 py-4">
                    <form method="POST" action="{{ route('admin.ecommerce.categories.update', $cat) }}" class="inline-flex flex-wrap gap-2 items-center">
                        @csrf
                        @method('PATCH')
                        <input type="text" name="name" value="{{ $cat->name }}" class="w-32 px-2 py-1 text-sm border rounded">
                        <select name="parent_id" class="px-2 py-1 text-sm border rounded">
                            <option value="">—</option>
                            @foreach($categories->whereNull('parent_id')->where('id', '!=', $cat->id) as $p)
                            <option value="{{ $p->id }}" {{ $cat->parent_id == $p->id ? 'selected' : '' }}>{{ $p->name }}</option>
                            @endforeach
                        </select>
                        <input type="number" name="order" value="{{ $cat->order }}" min="0" class="w-16 px-2 py-1 text-sm border rounded">
                        <button type="submit" class="text-primary-500 hover:underline text-sm">Modifier</button>
                    </form>
                    <form method="POST" action="{{ route('admin.ecommerce.categories.destroy', $cat) }}" class="inline ml-2" onsubmit="return confirm('Supprimer cette catégorie ?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-500 hover:underline text-sm">Supprimer</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="4" class="px-6 py-12 text-center text-slate-500">Aucune catégorie.</td></tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>

<p class="mt-4 text-sm text-slate-500">Les sous-catégories s'affichent avec ↳. Les produits d'une catégorie parent incluent ceux des sous-catégories.</p>
@endsection
