@props(['category' => null])

<!-- Nom de la catégorie -->
<div>
    <label for="category_name" class="block text-sm font-medium text-gray-700 mb-2">
        Nom de la catégorie <span class="text-red-500">*</span>
    </label>
    <input 
        type="text" 
        id="category_name" 
        name="name" 
        required 
        placeholder="Entrez le nom de la catégorie" 
        value="{{ old('name', $category->name ?? '') }}"
        class="w-full px-3 py-2.5 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none"
    >
    @error('name')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

<!-- Description -->
<div>
    <label for="category_description" class="block text-sm font-medium text-gray-700 mb-2">
        Description
    </label>
    <textarea 
        id="category_description" 
        name="description" 
        rows="3"
        placeholder="Description de la catégorie (optionnel)"
        class="w-full px-3 py-2.5 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none resize-none"
    >{{ old('description', $category->description ?? '') }}</textarea>
    @error('description')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

<!-- Code (optionnel) -->
<div>
    <label for="category_code" class="block text-sm font-medium text-gray-700 mb-2">
        Code
    </label>
    <input 
        type="text" 
        id="category_code" 
        name="code" 
        placeholder="Code de la catégorie (ex: ALI, ENT)"
        value="{{ old('code', $category->code ?? '') }}"
        maxlength="10"
        class="w-full px-3 py-2.5 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none"
    >
    @error('code')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>
