@extends('layouts.admin')
@section('title', 'Nouvelle catégorie')

@section('content')

<div class="mx-auto max-w-3xl space-y-6">
    <div class="flex items-start gap-3">
        <a href="{{ route('admin.categories.index') }}" class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-200 bg-white text-gray-500 shadow-sm transition-colors hover:border-gray-300 hover:text-gray-800 hover:bg-gray-50" title="Retour à la liste">
            <i class="fas fa-arrow-left text-sm"></i>
        </a>
        <div>
            <h2 class="text-xl font-bold tracking-tight text-gray-900">Nouvelle catégorie</h2>
            <p class="mt-1 text-sm text-gray-500">Créez une catégorie pour organiser vos produits. Le nom doit être unique.</p>
        </div>
    </div>

    <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data" class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
        @csrf
        @include('admin.categories._form')
        <div class="flex flex-col-reverse gap-3 border-t border-gray-100 bg-gray-50/90 px-6 py-5 sm:flex-row sm:items-center sm:justify-end sm:px-8">
            <a href="{{ route('admin.categories.index') }}" class="inline-flex justify-center rounded-xl border border-gray-200 bg-white px-5 py-3 text-sm font-semibold text-gray-700 shadow-sm transition-colors hover:bg-gray-50">
                Annuler
            </a>
            <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700">
                <i class="fas fa-save"></i> Créer la catégorie
            </button>
        </div>
    </form>
</div>

@endsection