# 📋 Guide Complet : Composants Modal Réutilisables

## 🎯 Vue d'ensemble

Ce système vous permet de créer des modals professionnels et centrés en quelques lignes de code. Le modal est **identique** au design actuel de votre application.

---

## 📁 Structure des fichiers

```
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
│       └── [autres-formulaires].blade.php
```

---

## 🚀 Utilisation Rapide

### Étape 1 : Ajouter un bouton pour ouvrir le modal

```blade
<button type="button" data-modal-toggle="modal-new-product" 
    class="inline-flex items-center px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-sm hover:shadow-md transition-all">
    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
    Nouveau produit
</button>
```

### Étape 2 : Ajouter le modal avec le formulaire

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

**C'est tout ! ✅**

---

## 🎨 Exemples d'utilisation dans différentes vues

### 📦 Exemple 1 : Page Produits

```blade
{{-- resources/views/products/index.blade.php --}}

@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <!-- Header avec bouton -->
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">Gestion des Produits</h1>
        
        <button type="button" data-modal-toggle="modal-new-product" 
            class="inline-flex items-center px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-sm hover:shadow-md transition-all">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Nouveau produit
        </button>
    </div>

    <!-- Votre contenu ici -->
    <!-- ... -->

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

### 🏷️ Exemple 2 : Page Catégories

```blade
{{-- resources/views/categories/index.blade.php --}}

@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">Catégories</h1>
        
        <button type="button" data-modal-toggle="modal-new-category" 
            class="inline-flex items-center px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg">
            Nouvelle catégorie
        </button>
    </div>

    <!-- Votre contenu -->

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

### 📊 Exemple 3 : Page Stock avec plusieurs modals

```blade
{{-- resources/views/stock/index.blade.php --}}

@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">Gestion du Stock</h1>
        
        <div class="flex gap-3">
            <!-- Bouton Entrée -->
            <button type="button" data-modal-toggle="modal-stock-entry" 
                class="inline-flex items-center px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg">
                Entrée de stock
            </button>
            
            <!-- Bouton Sortie -->
            <button type="button" data-modal-toggle="modal-stock-exit" 
                class="inline-flex items-center px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg">
                Sortie de stock
            </button>
        </div>
    </div>

    <!-- Votre contenu -->

    <!-- Modal Entrée de Stock -->
    <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>

    <!-- Modal Sortie de Stock -->
    <x-form-modal 
        id="modal-stock-exit" 
        title="Sortie de stock" 
        action="{{ route('stock.exit') }}"
        size="lg"
    >
        <!-- Formulaire inline ou composant -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Produit <span class="text-red-500">*</span>
            </label>
            <select name="product_id" required 
                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">
                <option value="">Choisir un produit</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                @endforeach
            </select>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Quantité <span class="text-red-500">*</span>
            </label>
            <input type="number" name="quantity" required 
                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>
    </x-form-modal>
</div>
@endsection
```

### ✏️ Exemple 4 : Modal d'édition (avec méthode PUT)

```blade
<!-- Dans une boucle de produits -->
@foreach($products as $product)
    <tr>
        <td>{{ $product->name }}</td>
        <td>
            <button type="button" data-modal-toggle="modal-edit-{{ $product->id }}" 
                class="text-blue-600 hover:text-blue-800">
                Modifier
            </button>
        </td>
    </tr>
@endforeach

<!-- Modals d'édition -->
@foreach($products as $product)
    <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>
@endforeach
```

---

## 📐 Tailles disponibles

| Taille | Largeur max | Utilisation recommandée |
|--------|-------------|-------------------------|
| `sm` | 24rem (384px) | Formulaires très simples (2-3 champs) |
| `md` | 28rem (448px) | **Par défaut** - Formulaires standards |
| `lg` | 32rem (512px) | Formulaires moyens |
| `xl` | 42rem (672px) | Formulaires complexes |
| `2xl` | 56rem (896px) | Formulaires très larges |

```blade
<!-- Petit modal -->
<x-form-modal id="..." title="..." size="sm">
    ...
</x-form-modal>

<!-- Grand modal -->
<x-form-modal id="..." title="..." size="xl">
    ...
</x-form-modal>
```

---

## 🎨 Créer un nouveau formulaire

### 1. Créer le fichier de formulaire

Créez `resources/views/components/forms/supplier-form.blade.php` :

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

<!-- Nom -->
<div>
    <label for="supplier_name" class="block text-sm font-medium text-gray-700 mb-2">
        Nom du fournisseur <span class="text-red-500">*</span>
    </label>
    <input 
        type="text" 
        id="supplier_name" 
        name="name" 
        required 
        value="{{ old('name', $supplier->name ?? '') }}"
        placeholder="Entrez le nom du fournisseur"
        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>

<!-- Email -->
<div>
    <label for="supplier_email" class="block text-sm font-medium text-gray-700 mb-2">
        Email <span class="text-red-500">*</span>
    </label>
    <input 
        type="email" 
        id="supplier_email" 
        name="email" 
        required
        value="{{ old('email', $supplier->email ?? '') }}"
        placeholder="email@exemple.com"
        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('email')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

<!-- Téléphone -->
<div>
    <label for="supplier_phone" class="block text-sm font-medium text-gray-700 mb-2">
        Téléphone
    </label>
    <input 
        type="tel" 
        id="supplier_phone" 
        name="phone"
        value="{{ old('phone', $supplier->phone ?? '') }}"
        placeholder="+237 XXX XXX XXX"
        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>

<!-- Adresse -->
<div>
    <label for="supplier_address" class="block text-sm font-medium text-gray-700 mb-2">
        Adresse
    </label>
    <textarea 
        id="supplier_address" 
        name="address" 
        rows="3"
        placeholder="Adresse complète du fournisseur"
        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('address', $supplier->address ?? '') }}</textarea>
</div>
```

### 2. Utiliser le nouveau formulaire

```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

Pour maintenir la cohérence visuelle, utilisez toujours ces classes :

### Input (text, email, number, date, tel)
```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"
```

### Select
```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"
```

### 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 resize-none"
```

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

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

### Message d'erreur
```html
class="mt-1 text-sm text-red-600"
```

---

## 📋 Props du composant `form-modal`

| Prop | Type | Par défaut | Description |
|------|------|------------|-------------|
| `id` | string | **requis** | ID unique du modal |
| `title` | string | **requis** | Titre affiché en haut |
| `action` | string | `''` | URL de soumission du formulaire |
| `method` | string | `POST` | Méthode HTTP (POST, GET, PUT, PATCH, DELETE) |
| `size` | string | `md` | Taille du modal (sm, md, lg, xl, 2xl) |

---

## ⚙️ Caractéristiques automatiques

Le composant `form-modal` gère automatiquement :

✅ **CSRF Token** - Ajouté automatiquement pour POST/PUT/PATCH/DELETE  
✅ **Method Spoofing** - `@method('PUT')` ajouté automatiquement si nécessaire  
✅ **Overlay cliquable** - Ferme le modal au clic sur le fond  
✅ **Bouton de fermeture** - Icône X en haut à droite  
✅ **Boutons d'action** - Annuler et Enregistrer inclus  
✅ **Centrage parfait** - Modal toujours centré à l'écran  
✅ **Responsive** - S'adapte aux petits écrans  
✅ **Scroll interne** - Si le contenu est trop long  

---

## 🔧 JavaScript requis

Assurez-vous que votre layout (`resources/views/layouts/app.blade.php`) contient :

```javascript
<script>
// Ouvrir un modal
function openModal(modalId) {
    document.getElementById(modalId).classList.remove('hidden');
}

// Fermer un modal
function closeModal(modalId) {
    document.getElementById(modalId).classList.add('hidden');
}

// Initialisation au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    // Gestion des boutons avec data-modal-toggle
    document.querySelectorAll('[data-modal-toggle]').forEach(button => {
        button.addEventListener('click', function() {
            const modalId = this.getAttribute('data-modal-toggle');
            openModal(modalId);
        });
    });
    
    // Gestion des boutons de fermeture
    document.querySelectorAll('[data-modal-close]').forEach(button => {
        button.addEventListener('click', function() {
            const modalId = this.getAttribute('data-modal-close');
            closeModal(modalId);
        });
    });
});
</script>
```

---

## 💡 Astuces

### 1. Passer des données au formulaire

```blade
<x-form-modal id="..." title="...">
    <x-forms.product-form 
        :categories="$categories"
        :units="$units"
        :suppliers="$suppliers"
    />
</x-form-modal>
```

### 2. Formulaire inline (sans composant séparé)

```blade
<x-form-modal id="..." title="...">
    <div>
        <label>Nom</label>
        <input type="text" name="name" class="...">
    </div>
    <div>
        <label>Email</label>
        <input type="email" name="email" class="...">
    </div>
</x-form-modal>
```

### 3. Modal avec contenu personnalisé (pas un formulaire)

Si vous avez besoin d'un modal sans formulaire, utilisez le composant `modal.blade.php` existant.

### 4. Bouton coloré selon l'action

```blade
<!-- Bouton vert pour ajout -->
<button data-modal-toggle="..." 
    class="bg-green-600 hover:bg-green-700 text-white ...">
    Ajouter
</button>

<!-- Bouton rouge pour suppression -->
<button data-modal-toggle="..." 
    class="bg-red-600 hover:bg-red-700 text-white ...">
    Supprimer
</button>

<!-- Bouton orange pour édition -->
<button data-modal-toggle="..." 
    class="bg-orange-600 hover:bg-orange-700 text-white ...">
    Modifier
</button>
```

---

## ✅ Checklist pour créer un nouveau modal

- [ ] Créer le formulaire dans `components/forms/nom-form.blade.php`
- [ ] Ajouter un bouton avec `data-modal-toggle="ID_UNIQUE"`
- [ ] Ajouter le composant `<x-form-modal id="ID_UNIQUE" ...>`
- [ ] Inclure le formulaire dans le modal avec `<x-forms.nom-form />`
- [ ] Définir la taille appropriée (`size="..."`)
- [ ] Ajouter l'action vers la route appropriée
- [ ] Tester l'ouverture/fermeture du modal

---

## 🎯 Résultat

Vous obtenez un modal professionnel :
- ✨ Centré parfaitement à l'écran
- 🎨 Design moderne et cohérent
- 📱 Responsive sur tous les appareils
- ♿ Accessible (role, aria)
- 🚀 Facile à réutiliser partout
- 🔧 Facile à maintenir

**Enjoy! 🎉**
