# Guide d'utilisation du Modal de Confirmation de Suppression

Ce composant modal réutilisable peut être utilisé partout dans votre application pour confirmer les suppressions.

## 📦 Composant créé

**Fichier**: `resources/views/components/delete-confirmation-modal.blade.php`

## ✨ Caractéristiques

- ✅ Overlay transparent avec flou important (`backdrop-blur-md`)
- ✅ Animation fluide d'ouverture/fermeture
- ✅ Design moderne avec en-tête rouge
- ✅ Réutilisable partout dans l'application
- ✅ Fermeture avec la touche Échap
- ✅ Personnalisable (titre, message, ID)

## 🚀 Utilisation

### 1. Inclure le composant dans votre vue

```blade
<x-delete-confirmation-modal 
    modalId="delete-product-modal" 
    title="Confirmer la suppression" 
    message="Êtes-vous sûr de vouloir supprimer ce produit ? Cette action est irréversible." 
/>
```

### 2. Créer un formulaire de suppression caché

```blade
<form method="POST" action="{{ route('products.destroy', $product->id) }}" 
      id="delete-form-{{ $product->id }}">
    @csrf
    @method('DELETE')
</form>
```

### 3. Ajouter un bouton qui ouvre le modal

```blade
<button type="button" 
        onclick="openDeleteProductModal('{{ $product->id }}')"
        class="btn-delete">
    Supprimer
</button>
```

### 4. Ajouter la fonction JavaScript

```javascript
<script>
    function openDeleteProductModal(productId) {
        openModal('delete-product-modal', function() {
            const form = document.getElementById('delete-form-' + productId);
            if (form) {
                form.submit();
            }
        });
    }
</script>
```

## 📝 Paramètres du composant

| Paramètre | Type | Défaut | Description |
|-----------|------|--------|-------------|
| `modalId` | string | `'delete-modal'` | ID unique du modal |
| `title` | string | `'Confirmer la suppression'` | Titre du modal |
| `message` | string | `'Êtes-vous sûr...'` | Message de confirmation |

## 🎯 Exemples complets

### Exemple 1: Suppression de produit

```blade
<!-- Dans votre vue products/index.blade.php -->

@forelse($products as $product)
    <tr>
        <!-- ... autres colonnes ... -->
        <td>
            @if(Auth::user()->hasRole(['Administrateur', 'Super Administrateur']))
                <form method="POST" 
                      action="{{ route('products.destroy', $product->id) }}" 
                      id="delete-form-{{ $product->id }}">
                    @csrf
                    @method('DELETE')
                    <button type="button" 
                            onclick="openDeleteProductModal('{{ $product->id }}')"
                            class="btn-danger">
                        Supprimer
                    </button>
                </form>
            @endif
        </td>
    </tr>
@empty
@endforelse

<!-- Modal de suppression -->
<x-delete-confirmation-modal 
    modalId="delete-product-modal" 
    title="Supprimer le produit" 
    message="Êtes-vous sûr de vouloir supprimer ce produit ? Cette action ne peut pas être annulée." 
/>

<script>
    function openDeleteProductModal(productId) {
        openDeleteConfirmModal('delete-product-modal', function() {
            document.getElementById('delete-form-' + productId).submit();
        });
    }
</script>
```

### Exemple 2: Suppression de fournisseur

```blade
<!-- Modal -->
<x-delete-confirmation-modal 
    modalId="delete-supplier-modal" 
    title="Supprimer le fournisseur" 
    message="Êtes-vous sûr de vouloir supprimer ce fournisseur ?" 
/>

<!-- Script -->
<script>
    function openDeleteSupplierModal(supplierId) {
        openDeleteConfirmModal('delete-supplier-modal', function() {
            document.getElementById('delete-form-' + supplierId).submit();
        });
    }
</script>
```

### Exemple 3: Suppression d'utilisateur

```blade
<!-- Modal -->
<x-delete-confirmation-modal 
    modalId="delete-user-modal" 
    title="Supprimer l'utilisateur" 
    message="Attention ! La suppression de cet utilisateur supprimera également toutes ses données." 
/>

<!-- Script -->
<script>
    function openDeleteUserModal(userId) {
        openDeleteConfirmModal('delete-user-modal', function() {
            document.getElementById('delete-form-' + userId).submit();
        });
    }
</script>
```

## 🎨 Personnalisation du style

Le modal utilise Tailwind CSS. Vous pouvez modifier les classes dans le fichier du composant :

- **Overlay**: `bg-gray-500/50 backdrop-blur-md` - Ajustez l'opacité et le flou
- **En-tête**: `bg-red-600` - Changez la couleur
- **Bouton supprimer**: `bg-red-600 hover:bg-red-700` - Personnalisez les couleurs

## 🔧 Fonctions JavaScript disponibles

### `openDeleteConfirmModal(modalId, confirmCallback)`
Ouvre le modal avec une fonction callback lors de la confirmation.

**Paramètres:**
- `modalId` (string): ID du modal à ouvrir
- `confirmCallback` (function): Fonction à exécuter lors de la confirmation

### `closeDeleteConfirmModal(modalId)`
Ferme le modal.

**Paramètres:**
- `modalId` (string): ID du modal à fermer

**Note:** Ces fonctions sont définies globalement dans `layouts/app.blade.php` et disponibles partout dans l'application.

## 💡 Astuces

1. **Un seul modal par page** : Utilisez un modal unique pour plusieurs éléments du même type
2. **ID uniques** : Assurez-vous que chaque modal a un ID unique
3. **Permissions** : Vérifiez toujours les permissions côté serveur
4. **Messages clairs** : Utilisez des messages explicites pour l'utilisateur

## ⚠️ Notes importantes

- Le composant nécessite Tailwind CSS
- Les fonctions JavaScript sont définies dans le composant
- Le modal se ferme automatiquement avec la touche Échap
- Le scroll du body est bloqué quand le modal est ouvert
