@php
    $importantNews = $activeImportantNews ?? null;
    $shouldShow = (bool) session()->pull('show_important_news_popup', false);
@endphp

@if($shouldShow && $importantNews)
    <div class="modal fade" id="importantNewsModal" tabindex="-1" aria-labelledby="importantNewsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title" id="importantNewsModalLabel">{{ $importantNews->title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="text-muted">{{ $importantNews->details }}</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('common.close') }}</button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const modalEl = document.getElementById('importantNewsModal');
                if (!modalEl) return;
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            });
        </script>
    @endpush
@endif