@if (!empty(session('success')))
    <div class="flex justify-center">
        <div class="w-full max-w-4xl px-6 py-3 mx-auto mb-2 text-green-700 bg-green-100 border-green-500 rounded-lg shadow-md alert"
            role="alert">
            <div class="flex items-center space-x-2">
                <!-- Icon -->
                {{-- <svg class="w-[108px] h-6 text-green-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20h.01M9 20h.01M15 20h.01M4 4h16v2H4z" />
                </svg> --}}
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[108px] h-6 text-green-700" fill="#046c4e" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>
                <span>
                    <strong>{{ session('success') }}</strong>
                </span>
            </div>
        </div>
    </div>
@endif

@if (!empty(session('error')))
    <div class="flex justify-center">
        <div class="inline-block px-6 py-3 mb-2 text-red-700 bg-red-100 border-red-500 rounded-lg shadow-md alert"
            role="alert">
            <div class="flex items-center space-x-2">
                <!-- Icon -->
                {{-- <svg class="h-6 text-red-700 w-[108px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20h.01M9 20h.01M15 20h.01M4 4h16v2H4z" />
                </svg> --}}
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 text-red-700 w-[108px]" fill="#c81e1e" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
                <span>
                    <strong> {{ session('error') }} </strong>
                </span>
            </div>
        </div>
    </div>
@endif

@if (!empty(session('payment-error')))
    <div class="flex justify-center">
        <div class="w-full max-w-4xl px-6 py-3 mx-auto mb-2 text-red-700 bg-red-100 border-red-500 rounded-lg shadow-md alert"
            role="alert">
            <div class="flex items-center space-x-2">
                <!-- Icon -->
                {{-- <svg class="h-6 text-red-700 w-[108px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20h.01M9 20h.01M15 20h.01M4 4h16v2H4z" />
                </svg> --}}
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 text-red-700 w-[108px]" fill="#c81e1e" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
                <span>
                    <strong> {{ session('payment-error') }}</strong>
                </span>
            </div>
        </div>
    </div>
@endif

@if (!empty(session('warning')))
    <div class="flex justify-center">
        <div class="w-full max-w-4xl px-6 py-3 mx-auto mb-2 text-yellow-700 bg-yellow-100 border-yellow-500 rounded-lg shadow-md alert"
            role="alert">
            <div class="flex items-center space-x-2">
                <!-- Icon -->
                {{-- <svg class="w-[108px] h-6 text-yellow-700" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20h.01M9 20h.01M15 20h.01M4 4h16v2H4z" />
                </svg> --}}
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 text-yellow-700 w-[108px]" fill="#8e4b10" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
                <span>
                    <strong> {{ session('warning') }}</strong>
                </span>
            </div>
        </div>
    </div>
@endif

@if (!empty(session('info')))
    <div class="flex justify-center">
        <div class="w-full max-w-4xl px-6 py-3 mx-auto mb-2 text-blue-700 bg-blue-100 border-blue-500 rounded-lg shadow-md alert"
            role="alert">
            <div class="flex items-center space-x-2">
                <!-- Icon -->
                {{-- <svg class="w-[108px] h-6 text-blue-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20h.01M9 20h.01M15 20h.01M4 4h16v2H4z" />
                </svg> --}}
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[108px] h-6 text-blue-700" fill="#1a56db" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
                <span>
                    <strong> {{ session('info') }}</strong>
                </span>
            </div>
        </div>
    </div>
@endif

@if (!empty(session('secondary')))
    <div class="flex justify-center">
        <div class="w-full max-w-4xl px-6 py-3 mx-auto mb-2 rounded-lg shadow-md alert bg-grey-100 border-grey-500 text-grey-700"
            role="alert">
            <div class="flex items-center space-x-2">
                <!-- Icon -->
                <svg class="h-6 w-[108px] text-grey-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20h.01M9 20h.01M15 20h.01M4 4h16v2H4z" />
                </svg>
                <span>
                    <strong> {{ session('secondary') }}</strong>
                </span>
            </div>
        </div>
    </div>
@endif

@if (!empty(session('status')))
    <div class="flex justify-center">
        <div class="w-full max-w-4xl px-6 py-3 mx-auto mb-2 text-green-700 bg-green-100 border-green-500 rounded-lg shadow-md alert"
            role="alert">
            <div class="flex items-center space-x-2">
                <!-- Icon -->
                <svg class="w-[108px] h-6 text-green-700" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20h.01M9 20h.01M15 20h.01M4 4h16v2H4z" />
                </svg>
                <span>
                    <strong> {{ session('status') }}</strong>
                </span>
            </div>
        </div>
    </div>
@endif


<script>
    document.querySelectorAll('.alert').forEach(function(alert) {
        setTimeout(function() {
            alert.classList.add('opacity-0');
            alert.classList.add('transition-opacity');
            alert.classList.add('duration-500');
            setTimeout(function() {
                alert.style.display = 'none';
            }, 700);
        }, 6000);
    });
</script>

<div class="clear-both"></div>