@if (!request()->routeIs('login'))
    @php
        $messages = collect([
            'success' => Session::get('success'),
            'error' => Session::get('error'),
            'warning' => Session::get('warning'),
            'info' => Session::get('info'),
            'status' => Session::get('status'),
        ])->filter();
    @endphp

    @if ($messages->isNotEmpty())
        <div>
            @foreach ($messages as $type => $message)
                <div @class([
                    'alert-container alert flex justify-between items-start  ',
                    'alert-info' => in_array($type, ['info', 'status']),
                    'alert-warning' => $type === 'warning',
                    'alert-danger' => $type === 'error',
                    'alert-success' => $type === 'success',
                ]) role="alert">
                    <div class="flex items-center gap-3">
                        @if (in_array($type, ['info', 'status']))
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="lucide lucide-info-icon lucide-info">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M12 16v-4" />
                                <path d="M12 8h.01" />
                            </svg>
                        @elseif ($type === 'error')
                            <svg xmlns="http://www.w3.org/2000/svg" class="lucide lucide-x-circle" width="24"
                                height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M15 9l-6 6M9 9l6 6" />
                            </svg>
                        @elseif ($type === 'success')
                            <svg xmlns="http://www.w3.org/2000/svg" class="lucide lucide-check-circle" width="24"
                                height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M9 12l2 2l4 -4" />
                            </svg>
                        @elseif ($type === 'warning')
                            <svg xmlns="http://www.w3.org/2000/svg" class="lucide lucide-alert-triangle" width="24"
                                height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path
                                    d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                                <line x1="12" y1="9" x2="12" y2="13" />
                                <line x1="12" y1="17" x2="12.01" y2="17" />
                            </svg>
                        @endif
                        <strong>{!! nl2br(e($message)) !!}</strong>
                    </div>

                    <button class="alert-btn-close ml-4 shrink-0" type="button" aria-label="{{ __('Fermer') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="lucide lucide-x" width="24" height="24"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M18 6 6 18" />
                            <path d="m6 6 12 12" />
                        </svg>
                    </button>
                </div>
            @endforeach
        </div>
    @endif
@endif

<script nonce="{{ $nonce ?? '' }}">
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('.alert-btn-close').forEach(function(btn) {
            btn.addEventListener('click', function() {
                this.closest('.alert').classList.add('hidden');
            });
        });
    });
</script>