@props(['message' => ''])

<div id="info-modal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-body p-5">
                <i data-feather="check-circle" class="w-25 h-25 text-success mb-3"></i>
                <div class="fs-5 fw-semibold">Success!</div>
                <div class="text-secondary mt-2">{{ $message }}</div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-primary w-50 mx-auto" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        new bootstrap.Modal('#info-modal').show();
    });
</script>