# 🎯 Composants Modal - Guide Rapide

## ⚡ Utilisation en 2 lignes

```blade
<!-- 1. Bouton -->
<button type="button" data-modal-toggle="modal-new-product">Nouveau produit</button>

<!-- 2. Modal -->
<x-form-modal id="modal-new-product" title="Nouveau produit" action="{{ route('products.store') }}">
    <x-forms.product-form />
</x-form-modal>
```

**C'est tout ! ✅**

---

## 📁 Fichiers créés

```
resources/views/
├── components/
│   ├── form-modal.blade.php           ← Composant modal principal
│   └── forms/                         ← Vos formulaires
│       ├── product-form.blade.php
│       ├── category-form.blade.php
│       └── stock-entry-form.blade.php
```

---

## 🎨 Tailles disponibles

```blade
<x-form-modal size="sm">   ← Petit
<x-form-modal size="md">   ← Moyen (par défaut)
<x-form-modal size="lg">   ← Grand
<x-form-modal size="xl">   ← Très grand
<x-form-modal size="2xl">  ← Extra large
```

---

## 🔧 Méthodes HTTP

```blade
<x-form-modal method="POST">    ← Créer (par défaut)
<x-form-modal method="PUT">     ← Modifier
<x-form-modal method="DELETE">  ← Supprimer
```

---

## 📋 Exemples complets

### Produit
```blade
<button type="button" data-modal-toggle="modal-new-product" class="bg-blue-600 text-white px-5 py-2.5 rounded-lg">
    Nouveau produit
</button>

<x-form-modal id="modal-new-product" title="Nouveau produit" action="{{ route('products.store') }}">
    <x-forms.product-form />
</x-form-modal>
```

### Catégorie
```blade
<button type="button" data-modal-toggle="modal-new-category" class="bg-green-600 text-white px-5 py-2.5 rounded-lg">
    Nouvelle catégorie
</button>

<x-form-modal id="modal-new-category" title="Nouvelle catégorie" action="{{ route('categories.store') }}" size="sm">
    <x-forms.category-form />
</x-form-modal>
```

### Stock
```blade
<button type="button" data-modal-toggle="modal-stock-entry" class="bg-orange-600 text-white px-5 py-2.5 rounded-lg">
    Entrée de stock
</button>

<x-form-modal id="modal-stock-entry" title="Entrée de stock" action="{{ route('stock.entry') }}" size="lg">
    <x-forms.stock-entry-form :products="$products" />
</x-form-modal>
```

### Édition (PUT)
```blade
<button type="button" data-modal-toggle="modal-edit-{{ $product->id }}" class="text-blue-600">
    Modifier
</button>

<x-form-modal 
    id="modal-edit-{{ $product->id }}" 
    title="Modifier {{ $product->name }}" 
    action="{{ route('products.update', $product->id) }}"
    method="PUT"
>
    <x-forms.product-form :product="$product" />
</x-form-modal>
```

---

## ✨ Créer un nouveau formulaire

**1. Créer le fichier :** `resources/views/components/forms/supplier-form.blade.php`

```blade
@props(['supplier' => null])

<div>
    <label class="block text-sm font-medium text-gray-700 mb-2">
        Nom <span class="text-red-500">*</span>
    </label>
    <input 
        type="text" 
        name="name" 
        required
        value="{{ old('name', $supplier->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"
    >
</div>

<!-- Ajouter d'autres champs... -->
```

**2. Utiliser :**

```blade
<x-form-modal id="modal-new-supplier" title="Nouveau fournisseur" action="{{ route('suppliers.store') }}">
    <x-forms.supplier-form />
</x-form-modal>
```

---

## 🎨 Classes CSS standards

### Input / Select / Textarea
```html
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"
```

### Label
```html
class="block text-sm font-medium text-gray-700 mb-2"
```

### Champ obligatoire
```html
<span class="text-red-500">*</span>
```

---

## 📚 Documentation complète

- **`GUIDE_MODAL_COMPONENTS.md`** - Guide complet avec tous les détails
- **`demo-modals.blade.php`** - Page de démonstration visuelle
- **`USAGE_MODAL_COMPONENTS.md`** - Guide d'utilisation détaillé

---

## ✅ Caractéristiques

✨ **Centré parfaitement** - Le modal est toujours au centre de l'écran  
🎨 **Design professionnel** - Style moderne et cohérent  
📱 **Responsive** - S'adapte à tous les écrans  
🔒 **Sécurisé** - CSRF token automatique  
⚡ **Rapide** - Réutilisable en 2 lignes  
🔧 **Flexible** - Toutes les méthodes HTTP  
♿ **Accessible** - Attributs ARIA inclus  

---

## 🚀 Pour commencer

1. **Vérifiez** que les fichiers sont créés dans `resources/views/components/`
2. **Copiez** un exemple ci-dessus
3. **Changez** l'ID et le titre
4. **Testez** en cliquant sur le bouton

**Enjoy! 🎉**
