@props(['categories' => [], 'units' => [], 'suppliers' => [], 'product' => null, 'showStockFields' => false])

@php
$inputClass = 'w-full px-3 py-2.5 text-sm border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none';
@endphp

<!-- Section Produit -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
    <!-- Nom du produit -->
    <div class="">
        <label for="product_name" class="block text-sm font-medium text-gray-700 mb-2">
            Nom du produit <span class="text-red-500">*</span>
        </label>
        <input type="text" id="product_name" name="name" required placeholder="Entrez le nom du produit" value="{{ old('name', $product->name ?? '') }}" class="{{ $inputClass }}">
        @error('name')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <!-- Catégorie -->
    <div>
        <label for="product_category" class="block text-sm font-medium text-gray-700 mb-2">
            Catégorie <span class="text-red-500">*</span>
        </label>
        <x-searchable-select name="category_id" :options="$categories" :selected="old('category_id', $product?->category_id ?? '')" placeholder="Choisir une catégorie" searchPlaceholder="Rechercher une catégorie..." :required="true" :inputClass="$inputClass" />
        @error('category_id')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <!-- Fournisseur -->
    <div>
        <label for="product_supplier" class="block text-sm font-medium text-gray-700 mb-2">
            Fournisseur <span class="text-red-500">*</span>
        </label>
        <x-searchable-select name="supplier_id" :options="$suppliers" :selected="old('supplier_id', $product?->supplier_id ?? '')" placeholder="Choisir un fournisseur" searchPlaceholder="Rechercher un fournisseur..." :required="true" :inputClass="$inputClass" />
        @error('supplier_id')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <!-- Unité -->
    <div>
        <label for="product_unit" class="block text-sm font-medium text-gray-700 mb-2">
            Unité de mesure
        </label>
        <select id="product_unit" name="unit_id" class="{{ $inputClass }}">
            <option value="">Choisir une unité</option>
            @if(count($units) > 0)
            @foreach($units as $unit)
            <option value="{{ $unit->id }}" {{ old('unit_id', $product->unit_id ?? '') == $unit->id ? 'selected' : '' }}>
                {{ $unit->name }} ({{ $unit->abbreviation ?? '' }})
            </option>
            @endforeach
            @endif
        </select>
        @error('unit_id')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>
</div>

@if($showStockFields)
<!-- Section Stock initial -->
<div class="pt-5 mt-5 border-t border-gray-200">
    <div class="flex items-center gap-2 mb-4">
        <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
            <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
            </svg>
        </div>
        <p class="text-sm font-semibold text-gray-700">Stock initial (optionnel)</p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
            <label for="initial_quantity" class="block text-sm font-medium text-gray-700 mb-2">
                Quantité initiale
            </label>
            <input type="number" id="initial_quantity" name="initial_quantity" min="0" value="{{ old('initial_quantity', 1) }}" placeholder="1" class="{{ $inputClass }}">
            @error('initial_quantity')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label for="alert_threshold" class="block text-sm font-medium text-gray-700 mb-2">
                Seuil d'alerte
            </label>
            <input type="number" id="minimum_threshold" name="minimum_threshold" min="5" value="{{ old('alert_threshold', 5) }}" placeholder="10" class="{{ $inputClass }}">
            <p class="mt-1 text-xs text-gray-500">Alerte quand le stock passe en dessous</p>
            @error('alert_threshold')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>
@endif
