@php
    $activeNotice = getActiveImportantNotice();
    $shouldDisplayNotice = false;
    $authUser = auth()->user();
    $isAdminUser = $authUser && $authUser->hasAnyRole(['admin', 'super admin']);

    // Only display for regular logged-in users (STRICTLY exclude admin & super admin)
    if (auth()->check() && ! $isAdminUser && $activeNotice && ! empty($activeNotice['is_active'])) {
        // Exclude admin management routes and API/AJAX calls
        $isAdminArea = request()->is('admin*') || request()->routeIs('admin.*') || request()->routeIs('dashboard');
        if (! $isAdminArea && ! request()->ajax() && ! request()->wantsJson()) {
            $sessionId = (string) session()->getId();
            $hasSeenInSession = session('important_notice_seen_in_session') === true
                || (string) session('important_notice_session_id') === $sessionId;

            // Only display once per login session for normal users
            if (! $hasSeenInSession) {
                $shouldDisplayNotice = true;
                // Mark immediately in session so any page refresh or navigation in this session will NOT show it again
                session()->put('important_notice_seen_in_session', true);
                session()->put('important_notice_session_id', $sessionId);
            }
        }
    }
@endphp

@if($shouldDisplayNotice && $activeNotice)
<style>
    .important-notice-modal .modal-dialog {
        max-width: 580px;
        margin: 1.75rem auto;
    }

    .important-notice-modal .modal-content {
        background: #fdfbf7;
        border: 1px solid #ebd9c5;
        border-radius: 26px;
        padding: 2.2rem 2.2rem 2rem 2.2rem;
        position: relative;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
        overflow: hidden;
    }

    .important-notice-modal .modal-content::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 152, 0, 0.22) 0%, rgba(255, 152, 0, 0) 70%);
        pointer-events: none;
    }

    .important-notice-close-btn {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.05);
        color: #757575;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s ease;
    }

    .important-notice-close-btn:hover {
        background: rgba(0, 0, 0, 0.1);
        color: #212121;
        transform: scale(1.06);
    }

    .important-notice-megaphone {
        position: absolute;
        top: 14px;
        right: 42px;
        width: 110px;
        height: 110px;
        pointer-events: none;
        z-index: 4;
    }

    .important-notice-title {
        color: #1a1a1a;
        font-weight: 700;
        font-size: 1.45rem;
        letter-spacing: -0.2px;
        margin-bottom: 1.25rem;
        padding-right: 100px;
    }

    .important-notice-inner-card {
        background: #ffffff;
        border: 1px solid #f2ede4;
        border-radius: 18px;
        padding: 1.5rem 1.6rem;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
        margin-bottom: 1.5rem;
        max-height: 350px;
        overflow-y: auto;
    }

    .important-notice-inner-card::-webkit-scrollbar {
        width: 6px;
    }

    .important-notice-inner-card::-webkit-scrollbar-track {
        background: #fdfbf7;
        border-radius: 4px;
    }

    .important-notice-inner-card::-webkit-scrollbar-thumb {
        background: #e0d7cb;
        border-radius: 4px;
    }

    .important-notice-inner-card::-webkit-scrollbar-thumb:hover {
        background: #c9bfb0;
    }

    .important-notice-headline {
        color: #1e1e1e;
        font-weight: 700;
        font-size: 1.02rem;
        line-height: 1.4;
        margin-bottom: 0.85rem;
    }

    .important-notice-body {
        color: #444444;
        font-size: 0.92rem;
        line-height: 1.65;
        white-space: pre-line;
    }

    .important-notice-highlight {
        color: #ff9800;
        font-weight: 700;
    }

    .important-notice-confirm-btn {
        background: #ff9800;
        border: 1px solid #ff9800;
        color: #ffffff;
        font-weight: 700;
        font-size: 1.05rem;
        border-radius: 14px;
        padding: 13px 28px;
        width: 100%;
        box-shadow: 0 6px 20px rgba(255, 152, 0, 0.35);
        transition: all 0.2s ease;
        display: block;
        text-align: center;
        text-decoration: none;
    }

    .important-notice-confirm-btn:hover,
    .important-notice-confirm-btn:focus {
        background: #e68900;
        border-color: #e68900;
        color: #ffffff;
        box-shadow: 0 8px 24px rgba(255, 152, 0, 0.45);
        transform: translateY(-1px);
    }

    @media (max-width: 575.98px) {
        .important-notice-modal .modal-content {
            padding: 1.5rem 1.25rem 1.4rem 1.25rem;
            border-radius: 20px;
        }

        .important-notice-megaphone {
            width: 85px;
            height: 85px;
            top: 10px;
            right: 32px;
        }

        .important-notice-title {
            font-size: 1.22rem;
            padding-right: 80px;
        }
    }
</style>

<div class="modal fade important-notice-modal" id="importantNoticeModal" tabindex="-1" aria-labelledby="importantNoticeTitle" aria-hidden="true" data-notice-version="{{ $activeNotice['updated_at'] ?? '1' }}" data-notice-id="{{ $activeNotice['id'] ?? '1' }}">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Close Cross -->
            <button type="button" class="important-notice-close-btn js-important-notice-dismiss" aria-label="Close" title="Close">
                <i class="fa-solid fa-xmark fs-5"></i>
            </button>

            <!-- 3D Megaphone Graphic with Sparks -->
            <div class="important-notice-megaphone" aria-hidden="true">
                <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(255, 140, 0, 0.28));">
                    <!-- Spark / Lightning 1 -->
                    <path d="M78 12L85 24L77 26L86 38L70 30L78 22L70 20Z" fill="#FFB703" />
                    <!-- Spark / Lightning 2 -->
                    <path d="M60 4L70 16L63 18L72 28L58 22L64 16L56 14Z" fill="#FF4D6D" />
                    <!-- Horn Body -->
                    <path d="M42 62L82 42C86 40 92 44 92 50V78C92 84 86 88 82 86L42 66V62Z" fill="url(#modal_notice_horn_grad)" />
                    <!-- Speaker Cone Rim -->
                    <ellipse cx="88" cy="64" rx="10" ry="22" fill="#FFAA00" />
                    <ellipse cx="88" cy="64" rx="7" ry="17" fill="#E67300" />
                    <circle cx="88" cy="64" r="5" fill="#FFE5A3" />
                    <!-- Handle / Base -->
                    <path d="M44 64L38 78C37 80 39 82 41 82H47C49 82 51 80 51 78L48 64H44Z" fill="#00D2D3" />
                    <path d="M30 58C30 54 34 50 38 50H44V76H38C34 76 30 72 30 68V58Z" fill="#FF9F1C" />
                    <defs>
                        <linearGradient id="modal_notice_horn_grad" x1="42" y1="52" x2="88" y2="84" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#FF9F1C" />
                            <stop offset="1" stop-color="#FF5400" />
                        </linearGradient>
                    </defs>
                </svg>
            </div>

            <!-- Title -->
            <h4 class="important-notice-title" id="importantNoticeTitle">
                {{ $activeNotice['title'] ?? 'Important Update' }}
            </h4>

            <!-- Inner card with message -->
            <div class="important-notice-inner-card">
                @if(! empty($activeNotice['headline']))
                    <h5 class="important-notice-headline">
                        {{ $activeNotice['headline'] }}
                    </h5>
                @endif

                @php
                    $rawContent = (string) ($activeNotice['content'] ?? '');
                    // Safe html escape first
                    $escaped = e($rawContent);
                    // Support bold markdown **text**
                    $formatted = preg_replace('/\*\*(.*?)\*\*/', '<strong class="important-notice-highlight">$1</strong>', $escaped);
                    // Highlight lines starting with "For ...:" or "Note:" in vibrant orange
                    $formatted = preg_replace('/(^|\n)(For [^:\n]+:)/', '$1<div class="fw-bold mt-2 mb-1 important-notice-highlight">$2</div>', $formatted);
                    $formatted = preg_replace('/(^|\n)(Note:)/', '$1<div class="fw-bold mt-2 mb-1 text-danger">$2</div>', $formatted);
                @endphp

                <div class="important-notice-body">{!! nl2br($formatted) !!}</div>
            </div>

            <!-- Action Button -->
            <button type="button" class="btn important-notice-confirm-btn js-important-notice-dismiss">
                {{ $activeNotice['button_text'] ?: 'I Know' }}
            </button>
        </div>
    </div>
</div>

<script>
    (function () {
        function initNoticeModal() {
            var modalEl = document.getElementById('importantNoticeModal');
            if (!modalEl) return;

            var currentSessionId = "{{ session()->getId() }}";
            var seenSessionId = null;
            try {
                seenSessionId = sessionStorage.getItem('important_notice_seen_session_id');
            } catch (e) {}

            // If already shown in this browser session, do not show again
            if (seenSessionId && seenSessionId === currentSessionId) {
                return;
            }

            var version = modalEl.getAttribute('data-notice-version');
            var noticeId = modalEl.getAttribute('data-notice-id') || '1';

            var noticeModalInstance = null;
            if (window.bootstrap && window.bootstrap.Modal) {
                noticeModalInstance = new window.bootstrap.Modal(modalEl, {
                    backdrop: 'static',
                    keyboard: false
                });
                noticeModalInstance.show();
            } else if (window.jQuery && typeof window.jQuery(modalEl).modal === 'function') {
                window.jQuery(modalEl).modal({
                    backdrop: 'static',
                    keyboard: false
                });
                window.jQuery(modalEl).modal('show');
            } else {
                modalEl.classList.add('show');
                modalEl.style.display = 'block';
            }

            // Immediately mark in sessionStorage that it was shown in this session
            try {
                sessionStorage.setItem('important_notice_seen_session_id', currentSessionId);
            } catch (e) {}

            var isDismissing = false;
            function doDismiss() {
                if (isDismissing) return;
                isDismissing = true;

                // Send AJAX to server to ensure session is persisted
                var csrf = document.querySelector('meta[name="csrf-token"]');
                var token = csrf ? csrf.getAttribute('content') : '';

                if (window.fetch) {
                    fetch("{{ route('important-notices.dismiss') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': token,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            updated_at: version,
                            notice_id: noticeId
                        })
                    }).catch(function () {});
                }

                // Hide modal and cleanup backdrops
                if (noticeModalInstance) {
                    noticeModalInstance.hide();
                } else if (window.jQuery && typeof window.jQuery(modalEl).modal === 'function') {
                    window.jQuery(modalEl).modal('hide');
                } else {
                    modalEl.classList.remove('show');
                    modalEl.style.display = 'none';
                }

                var backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) backdrop.remove();
                document.body.classList.remove('modal-open');
                document.body.style.removeProperty('overflow');
                document.body.style.removeProperty('padding-right');
            }

            var dismissButtons = modalEl.querySelectorAll('.js-important-notice-dismiss');
            dismissButtons.forEach(function (btn) {
                btn.addEventListener('click', function (e) {
                    e.preventDefault();
                    doDismiss();
                });
            });
        }

        // On logout click, clear sessionStorage so next login session will see the popup once
        document.addEventListener('click', function (e) {
            var logoutTarget = e.target.closest('a[href*="logout"], form[action*="logout"], button[form*="logout"]');
            if (logoutTarget) {
                try {
                    sessionStorage.removeItem('important_notice_seen_session_id');
                } catch (err) {}
            }
        });

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initNoticeModal);
        } else {
            setTimeout(initNoticeModal, 150);
        }
    })();
</script>
@endif