{{-- Toast Notification - Composant partagé
     Requiert la fonction showToast(message, type) dans le JS de la page.
     Incluez ce partial via @include('partials.toast')
--}}
<div id="toast" class="fixed bottom-4 right-4 transform translate-y-20 transition-all duration-300 ease-in-out z-50">
    <div class="bg-white shadow-lg rounded-lg px-6 py-4 border-l-4 flex items-center space-x-3 min-w-[300px]">
        <div id="toast-icon"></div>
        <div id="toast-message" class="text-sm font-medium"></div>
    </div>
</div>

<script>
function showToast(message, type) {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');
    const toastIcon = document.getElementById('toast-icon');

    if (type === 'success') {
        toastIcon.innerHTML = '<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>';
        toast.querySelector('.border-l-4').classList.add('border-green-500');
        toast.querySelector('.border-l-4').classList.remove('border-red-500');
    } else {
        toastIcon.innerHTML = '<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>';
        toast.querySelector('.border-l-4').classList.add('border-red-500');
        toast.querySelector('.border-l-4').classList.remove('border-green-500');
    }

    toastMessage.textContent = message;
    toast.classList.remove('translate-y-20');
    toast.classList.add('translate-y-0');

    setTimeout(() => {
        toast.classList.remove('translate-y-0');
        toast.classList.add('translate-y-20');
    }, 3000);
}
</script>