<x-app-layout>
    @push('styles')
    <style>
        .ck-editor__editable {
            min-height: 200px;
        }
    </style>
    @endpush

    <div class="container-fluid pb-4">
        <div class="row align-items-center mb-4">
            <div class="col">
                <h4 class="fw-bold mb-1">{{ __('Notification Center') }}</h4>
                <p class="text-secondary small mb-0">{{ __('Manage system notifications and activity feed.') }}</p>
            </div>
            @hasanyrole('Developer|Administrator')
            <div class="col-auto d-flex flex-wrap gap-2">
                <button type="button"
                    class="btn btn-outline-dark btn-sm rounded-pill px-3 d-inline-flex align-items-center gap-1"
                    data-bs-toggle="modal" data-bs-target="#notifDocsModal">
                    <i class="bi bi-book"></i>{{ __('Documentation') }}
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-dark btn-sm rounded-pill px-3" id="page-mark-all-read">
                        <i class="bi bi-check-all me-1"></i>{{ __('Mark all read') }}
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-sm rounded-pill px-3 ms-2" id="page-clear-read">
                        <i class="bi bi-trash3 me-1"></i>{{ __('Clear read') }}
                    </button>
                </div>
                <button type="button" class="btn btn-dark btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#sendNotificationModal">
                    <i class="bi bi-plus-lg me-1"></i>{{ __('Send') }}
                </button>
            </div>
            @else
            <div class="col-auto d-flex gap-2">
                <button type="button"
                    class="btn btn-outline-dark btn-sm rounded-pill px-3 d-inline-flex align-items-center gap-1"
                    data-bs-toggle="modal" data-bs-target="#notifDocsModal">
                    <i class="bi bi-book"></i>{{ __('Documentation') }}
                </button>
                <button type="button" class="btn btn-outline-dark btn-sm rounded-pill px-3" id="page-mark-all-read">
                    <i class="bi bi-check-all me-1"></i>{{ __('Mark all read') }}
                </button>
            </div>
            @endhasanyrole
        </div>

        <div class="row justify-content-center">
            <div class="col-12 col-xl-10 col-lg-11">
                {{-- Standardized Notification Feed --}}
                <div id="notification-feed">
                    <div class="card adminuiux-card border-0 shadow-sm rounded-3">
                        <div class="card-body text-center py-5">
                            <div class="spinner-border text-primary spinner-border-sm" role="status"></div>
                            <p class="text-secondary small mt-2">{{ __('Loading...') }}</p>
                        </div>
                    </div>
                </div>

                {{-- Pagination --}}
                <div id="feed-pagination" class="d-flex justify-content-center mt-5"></div>
            </div>
        </div>

        {{-- ====================================================================
             DOCUMENTATION (MODAL)
             ==================================================================== --}}
        <div class="modal fade" id="notifDocsModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content rounded-4 border-0 shadow-lg overflow-hidden">
                    <div class="modal-header p-0 border-0" style="background:#0f172a;">
                        <div class="d-flex w-100 align-items-center justify-content-between p-4 p-lg-5 text-white">
                            <div>
                                <div class="extra-small opacity-50 fw-bold mb-2" style="letter-spacing:1.5px;">REFERENCE GUIDE</div>
                                <h3 class="fw-black mb-2" style="letter-spacing:-1px;">{{ __('Notification Center Guide') }}</h3>
                                <p class="mb-0 opacity-75" style="font-size:.9rem;line-height:1.7;max-width:720px;">
                                    {{ __('How notifications flow through this system — from sending to bell icon to acknowledged. Who sees what, when, and why.') }}
                                </p>
                            </div>
                            <div class="d-flex align-items-start gap-3">
                                <i class="bi bi-bell-fill display-3 opacity-25 d-none d-md-inline"></i>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body p-0">
                        <div class="p-4 p-lg-5">

                            {{-- LIFECYCLE DIAGRAM --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-arrow-right-circle text-primary me-1"></i>{{ __('Notification lifecycle') }}
                            </h6>
                            <div class="p-4 rounded-4 mb-5" style="background:#f8fafc;border:1px solid #e2e8f0;">
                                <div class="row text-center align-items-center g-3">
                                    <div class="col-md-2">
                                        <div class="p-3 rounded-4 bg-white shadow-sm h-100">
                                            <i class="bi bi-send-fill text-primary fs-3"></i>
                                            <div class="fw-bold small mt-2">{{ __('Sent') }}</div>
                                            <div class="extra-small text-muted">Admin clicks Send / system triggers</div>
                                        </div>
                                    </div>
                                    <div class="col-md-1 d-none d-md-block"><i class="bi bi-arrow-right fs-4 text-muted"></i></div>
                                    <div class="col-md-2">
                                        <div class="p-3 rounded-4 bg-white shadow-sm h-100">
                                            <i class="bi bi-database-fill text-info fs-3"></i>
                                            <div class="fw-bold small mt-2">{{ __('Persisted') }}</div>
                                            <div class="extra-small text-muted">Row written to <code>notifications</code> table</div>
                                        </div>
                                    </div>
                                    <div class="col-md-1 d-none d-md-block"><i class="bi bi-arrow-right fs-4 text-muted"></i></div>
                                    <div class="col-md-2">
                                        <div class="p-3 rounded-4 bg-white shadow-sm h-100">
                                            <i class="bi bi-broadcast text-warning fs-3"></i>
                                            <div class="fw-bold small mt-2">{{ __('Broadcast') }}</div>
                                            <div class="extra-small text-muted">Real-time via Reverb WebSocket</div>
                                        </div>
                                    </div>
                                    <div class="col-md-1 d-none d-md-block"><i class="bi bi-arrow-right fs-4 text-muted"></i></div>
                                    <div class="col-md-2">
                                        <div class="p-3 rounded-4 bg-white shadow-sm h-100">
                                            <i class="bi bi-bell-fill text-success fs-3"></i>
                                            <div class="fw-bold small mt-2">{{ __('Delivered') }}</div>
                                            <div class="extra-small text-muted">Bell icon + feed updates</div>
                                        </div>
                                    </div>
                                </div>
                                <p class="small text-muted text-center mb-0 mt-4" style="line-height:1.7;">
                                    {{ __('Notifications persist in the database even after they are read — only "Clear read" deletes them. The feed paginates 15 per page.') }}
                                </p>
                            </div>

                            {{-- THREE TYPES --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-tags-fill text-info me-1"></i>{{ __('Notification types · pick the right one') }}
                            </h6>
                            <div class="row g-3 mb-5">
                                <div class="col-md-4">
                                    <div class="p-4 rounded-4 h-100" style="background:#eff6ff;border:1px solid #bfdbfe;">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <i class="bi bi-info-circle-fill text-primary fs-3"></i>
                                            <div class="fw-bold text-primary fs-6">{{ __('INFORMATION') }}</div>
                                        </div>
                                        <div class="small text-muted mb-3" style="line-height:1.7;">
                                            {{ __('Neutral updates. No action required from the recipient.') }}
                                        </div>
                                        <div class="extra-small text-muted">
                                            <span class="fw-bold text-dark">{{ __('Use for:') }}</span>
                                            <ul class="mb-0 ps-3 mt-1" style="line-height:1.8;">
                                                <li>{{ __('New feature announcement') }}</li>
                                                <li>{{ __('Scheduled maintenance reminder') }}</li>
                                                <li>{{ __('Newsletter / company update') }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="p-4 rounded-4 h-100" style="background:#fffbeb;border:1px solid #fde68a;">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <i class="bi bi-exclamation-triangle-fill text-warning fs-3"></i>
                                            <div class="fw-bold fs-6" style="color:#a16207;">{{ __('WARNING') }}</div>
                                        </div>
                                        <div class="small text-muted mb-3" style="line-height:1.7;">
                                            {{ __('Recipient should pay attention. Soft urgency.') }}
                                        </div>
                                        <div class="extra-small text-muted">
                                            <span class="fw-bold text-dark">{{ __('Use for:') }}</span>
                                            <ul class="mb-0 ps-3 mt-1" style="line-height:1.8;">
                                                <li>{{ __('Quota nearing limit') }}</li>
                                                <li>{{ __('Pending approval required') }}</li>
                                                <li>{{ __('Deprecated feature retiring soon') }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="p-4 rounded-4 h-100" style="background:#fef2f2;border:1px solid #fecaca;">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <i class="bi bi-megaphone-fill text-danger fs-3"></i>
                                            <div class="fw-bold text-danger fs-6">{{ __('SYSTEM ALERT') }}</div>
                                        </div>
                                        <div class="small text-muted mb-3" style="line-height:1.7;">
                                            {{ __('Immediate attention. Affects the platform itself.') }}
                                        </div>
                                        <div class="extra-small text-muted">
                                            <span class="fw-bold text-dark">{{ __('Use for:') }}</span>
                                            <ul class="mb-0 ps-3 mt-1" style="line-height:1.8;">
                                                <li>{{ __('Emergency maintenance starting NOW') }}</li>
                                                <li>{{ __('Security incident notification') }}</li>
                                                <li>{{ __('Service outage / degradation') }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- RECIPIENT TARGETING --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-people-fill text-success me-1"></i>{{ __('Recipient targeting') }}
                            </h6>
                            <div class="row g-3 mb-5">
                                <div class="col-md-6">
                                    <div class="p-4 rounded-4 h-100" style="background:#f0fdf4;border:1px solid #bbf7d0;">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <i class="bi bi-globe text-success fs-4"></i>
                                            <div class="fw-bold text-success">{{ __('All Users (Public)') }}</div>
                                        </div>
                                        <div class="small text-muted" style="line-height:1.7;">
                                            {{ __('Broadcast to every active account in the system, regardless of role. Use for company-wide announcements only — over-using this trains users to ignore the bell icon.') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="p-4 rounded-4 h-100" style="background:#eff6ff;border:1px solid #bfdbfe;">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <i class="bi bi-funnel-fill text-primary fs-4"></i>
                                            <div class="fw-bold text-primary">{{ __('By Role') }}</div>
                                        </div>
                                        <div class="small text-muted" style="line-height:1.7;">
                                            {{ __('Pick a specific role (e.g. Developer, Manager, Staff). Only users holding that role will see the notification. Precise — recommended default.') }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- USER ACTIONS --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-hand-index-fill text-warning me-1"></i>{{ __('Reader actions') }}
                            </h6>
                            <div class="row g-3 mb-5">
                                @php
                                    $actions = [
                                        ['icon'=>'bi-check2','color'=>'#22c55e','title'=>'Mark as read','desc'=>'Click a single notification card. Removes its unread highlight; stays in the feed.','boldWord'=>null],
                                        ['icon'=>'bi-check-all','color'=>'#3b82f6','title'=>'Mark all read','desc'=>'Bulk action. Marks every unread notification at once. Useful after vacation / morning catch-up.','boldWord'=>null],
                                        ['icon'=>'bi-trash3-fill','color'=>'#ef4444','title'=>'Clear read','desc1'=>'Permanently deletes ','boldWord'=>'already-read','desc2'=>' notifications. Unread ones are preserved. Cannot be undone.'],
                                        ['icon'=>'bi-x-lg','color'=>'#94a3b8','title'=>'Delete one','desc'=>'Dismiss a single notification (read or unread). Removes it from your feed only — other recipients still see theirs.','boldWord'=>null],
                                    ];
                                @endphp
                                @foreach($actions as $a)
                                    <div class="col-md-6 col-lg-3">
                                        <div class="p-3 rounded-4 h-100" style="background:#fff;border:1px solid #e2e8f0;">
                                            <div class="rounded-3 d-inline-flex align-items-center justify-content-center mb-2"
                                                 style="background:{{ $a['color'] }}1a;color:{{ $a['color'] }};width:40px;height:40px;">
                                                <i class="{{ $a['icon'] }} fs-5"></i>
                                            </div>
                                            <div class="fw-bold text-dark mb-1" style="font-size:.88rem;">{{ $a['title'] }}</div>
                                            <div class="small text-muted" style="line-height:1.6;">
                                                @if(isset($a['boldWord']))
                                                    {{ $a['desc1'] }}<span class="fw-bold">{{ $a['boldWord'] }}</span>{{ $a['desc2'] }}
                                                @else
                                                    {{ $a['desc'] }}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- WRITING GUIDE --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-pencil-square text-info me-1"></i>{{ __('Writing a good notification') }}
                            </h6>
                            <div class="row g-3 mb-5">
                                <div class="col-md-6">
                                    <div class="p-3 rounded-4 h-100" style="background:#f0fdf4;border:1px solid #bbf7d0;">
                                        <div class="fw-bold text-success mb-2"><i class="bi bi-check-circle me-1"></i>{{ __('DO') }}</div>
                                        <ul class="small text-muted mb-0" style="line-height:1.8;padding-left:1.2rem;">
                                            <li>{{ __('Lead with the most important info — recipients scan, not read') }}</li>
                                            <li>{{ __('Keep title under 60 characters (it gets truncated on mobile)') }}</li>
                                            <li>{{ __('Use plain language, avoid internal jargon') }}</li>
                                            <li>{{ __('Include an action verb if user needs to do something ("Click here", "Approve", "Review")') }}</li>
                                            <li>{{ __('Match the type to the urgency') }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="p-3 rounded-4 h-100" style="background:#fef2f2;border:1px solid #fecaca;">
                                        <div class="fw-bold text-danger mb-2"><i class="bi bi-x-circle me-1"></i>{{ __("DON'T") }}</div>
                                        <ul class="small text-muted mb-0" style="line-height:1.8;padding-left:1.2rem;">
                                            <li>{{ __('Use SYSTEM ALERT for routine info — it loses meaning') }}</li>
                                            <li>{{ __('Send the same message twice — there is no undo') }}</li>
                                            <li>{{ __('Include sensitive data (passwords, tokens) — notifications are stored plaintext') }}</li>
                                            <li>{{ __('Mass-send "All Users" for things only a few care about') }}</li>
                                            <li>{{ __('Forget to test on the recipient role first (small group) before broadcasting') }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            {{-- ARCHITECTURE --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-gear-fill text-secondary me-1"></i>{{ __('How it works under the hood') }}
                            </h6>
                            <div class="p-4 rounded-4 mb-5" style="background:#0f172a;color:#e2e8f0;">
                                <pre class="mb-0" style="font-family:'Fira Code',monospace;font-size:.78rem;line-height:2;white-space:pre-wrap;color:#cbd5e1;">
<span style="color:#22c55e;">DELIVERY PIPELINE:</span>

<span style="color:#fbbf24;">[1]</span> Admin submits form → <span style="color:#22c55e;">NotificationCenterController::store()</span>
<span style="color:#fbbf24;">[2]</span> Recipients resolved:
       <span style="color:#94a3b8;">• "all"   → User::where('active', true)->get()
       • role-X → User::role('X')->get()</span>
<span style="color:#fbbf24;">[3]</span> Laravel <span style="color:#22c55e;">SystemManagementNotification</span> dispatched per user
       <span style="color:#94a3b8;">Channels: ['database', 'broadcast']</span>
<span style="color:#fbbf24;">[4]</span> <span style="color:#22c55e;">database</span> channel  → row in <code style="color:#f59e0b;">notifications</code> table
<span style="color:#fbbf24;">[5]</span> <span style="color:#22c55e;">broadcast</span> channel → Reverb WebSocket → bell icon updates live
<span style="color:#fbbf24;">[6]</span> Recipient pulls feed → <span style="color:#22c55e;">GET /notification-center/api/recent</span>

<span style="color:#94a3b8;"># Feature flag: <code style="color:#f59e0b;">feature_notification_center</code> in Global Settings
# When OFF, the menu hides for non-admins but admins still see it.</span></pre>
                            </div>

                            {{-- PERMISSIONS --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-person-badge text-secondary me-1"></i>{{ __('Who can do what') }}
                            </h6>
                            <div class="table-responsive mb-5">
                                <table class="table table-hover align-middle mb-0" style="background:#f8fafc;border-radius:12px;overflow:hidden;">
                                    <thead style="background:#e2e8f0;">
                                        <tr>
                                            <th class="ps-3">{{ __('CAPABILITY') }}</th>
                                            <th>{{ __('REQUIRED ROLE / PERMISSION') }}</th>
                                            <th>{{ __('NOTES') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Read own feed') }}</td>
                                            <td class="small"><code>view notification center</code></td>
                                            <td class="small text-muted">{{ __('Required to even open this page') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Mark / delete own notifications') }}</td>
                                            <td class="small"><code>view notification center</code></td>
                                            <td class="small text-muted">{{ __('Implicit — users can always manage their own feed') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Send to a role') }}</td>
                                            <td class="small">{{ __('Role:') }} <span class="badge bg-dark text-white">Developer</span> {{ __('or') }} <span class="badge bg-dark text-white">Administrator</span></td>
                                            <td class="small text-muted">{{ __('Anyone outside these roles will not see the Send button') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Toggle the whole feature off') }}</td>
                                            <td class="small"><code>manage global settings</code></td>
                                            <td class="small text-muted">{{ __('Global Settings → Notifications →') }} <code>feature_notification_center</code></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            {{-- TROUBLESHOOTING --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-wrench-adjustable-circle text-secondary me-1"></i>{{ __('Troubleshooting') }}
                            </h6>
                            <div class="table-responsive mb-5">
                                <table class="table table-hover align-middle mb-0" style="background:#f8fafc;border-radius:12px;overflow:hidden;">
                                    <thead style="background:#e2e8f0;">
                                        <tr>
                                            <th class="ps-3">{{ __('SYMPTOM') }}</th>
                                            <th>{{ __('LIKELY CAUSE') }}</th>
                                            <th>{{ __('FIX') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Sent but recipient sees nothing') }}</td>
                                            <td class="small text-muted">{{ __('Recipient has no matching role, or is inactive') }}</td>
                                            <td class="small text-muted">{{ __('Verify the user is active + holds the targeted role') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Bell icon does not update live') }}</td>
                                            <td class="small text-muted">{{ __('Reverb WebSocket disconnected') }}</td>
                                            <td class="small text-muted">{{ __('Check Monitoring Center → Reverb status. Restart if IDLE during traffic.') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('"Clear read" did nothing') }}</td>
                                            <td class="small text-muted">{{ __('Nothing was read yet — only read items get purged') }}</td>
                                            <td class="small text-muted">{{ __('Mark as read first, then Clear read') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Menu hidden in sidebar') }}</td>
                                            <td class="small text-muted">{{ __('Feature flag') }} <code>feature_notification_center</code> {{ __('is OFF') }}</td>
                                            <td class="small text-muted">{{ __('Global Settings → Notifications → enable the toggle') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Send button missing') }}</td>
                                            <td class="small text-muted">{{ __('Account lacks Developer / Administrator role') }}</td>
                                            <td class="small text-muted">{{ __('Ask an admin to grant the role, or use CLI to seed') }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-3 fw-bold text-dark">{{ __('Feed empty even after sending') }}</td>
                                            <td class="small text-muted">{{ __('The notifications table was truncated') }}</td>
                                            <td class="small text-muted">{{ __('Send a fresh one — old data is gone, new ones will appear') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            {{-- BEST PRACTICES --}}
                            <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                                <i class="bi bi-stars text-success me-1"></i>{{ __('Best practices') }}
                            </h6>
                            <div class="row g-2 mb-4">
                                @php
                                    $tips = [
                                        ['icon'=>'bi-target','title'=>'Be specific with audience','desc'=>'Target a role, not "All Users", whenever the message only matters to a subset. Saves everyone scroll time.'],
                                        ['icon'=>'bi-clock-history','title'=>'Mind the timing','desc'=>'Avoid sending non-urgent notifications outside business hours — push fatigue eats engagement.'],
                                        ['icon'=>'bi-funnel','title'=>'One topic per notification','desc'=>'If you have three things to say, send three notifications. Long mixed messages get skimmed.'],
                                        ['icon'=>'bi-chat-square-quote','title'=>'Test on yourself first','desc'=>'Send to "Developer" role first, check how it looks on mobile + desktop, then broadcast.'],
                                        ['icon'=>'bi-shield-check','title'=>'Never include secrets','desc'=>'Database rows persist until cleared. Passwords, tokens, payment info → never via notification.'],
                                        ['icon'=>'bi-bell-slash','title'=>'Respect the bell','desc'=>'Each unnecessary notification is one step closer to users disabling the bell entirely. Less is more.'],
                                    ];
                                @endphp
                                @foreach($tips as $tip)
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-start gap-2 p-3 rounded-3" style="background:#f0fdf4;border:1px solid #bbf7d0;">
                                            <i class="{{ $tip['icon'] }} text-success fs-4"></i>
                                            <div>
                                                <div class="fw-bold text-dark mb-1" style="font-size:.85rem;">{{ $tip['title'] }}</div>
                                                <div class="small text-muted" style="line-height:1.6;">{{ $tip['desc'] }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- FOOTER NOTE --}}
                            <div class="d-flex align-items-center gap-3 p-3 rounded-4" style="background:#fef3c7;border:1px solid #fde68a;">
                                <i class="bi bi-info-circle-fill text-warning fs-3"></i>
                                <div>
                                    <div class="fw-bold text-dark mb-1" style="font-size:.85rem;">{{ __('Implementation note') }}</div>
                                    <div class="small text-muted">
                                        Notifications use Laravel's built-in <code>Illuminate\Notifications</code> with two channels:
                                        <code>database</code> (persistent storage) and <code>broadcast</code> (real-time via Reverb WebSocket).
                                        The notification class is <code>App\Notifications\SystemManagementNotification</code>.
                                        Per-user rows live in the <code>notifications</code> table with Laravel-standard UUIDs.
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL --}}
    <div class="modal fade" id="sendNotificationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-3 border-0 shadow-lg">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Send Notification') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form method="POST" action="{{ route('notification-center.store') }}" id="manualNotificationForm" class="ajax-form" data-reset="true">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Title') }} <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" placeholder="{{ __('Notification Title') }}" required maxlength="100">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Message') }} <span class="text-danger">*</span></label>
                            <textarea id="notificationMessage" name="message" class="form-control" rows="4"></textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Recipient') }} <span class="text-danger">*</span></label>
                                <select name="recipient" class="form-select">
                                    <option value="all">{{ __('All Users (Public)') }}</option>
                                    @foreach($roles as $roleName)
                                        <option value="{{ $roleName }}" {{ $roleName === 'Developer' ? 'selected' : '' }}>{{ ucfirst($roleName) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Type') }} <span class="text-danger">*</span></label>
                                <select name="type" class="form-select">
                                    <option value="info">{{ __('Information') }}</option>
                                    <option value="warning">{{ __('Warning') }}</option>
                                    <option value="system">{{ __('System Alert') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-dark rounded-pill px-4" data-bs-dismiss="modal">
                            {{ __('Close') }}
                        </button>
                        <button type="submit" class="btn btn-dark rounded-pill px-4">
                            <i class="bi bi-send me-1"></i> {{ __('Send Notification') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js" crossorigin="anonymous"></script>
    <script>
    $(document).ready(function() {
        let notificationEditor;
        let currentPage = 1;

        const editorEl = document.querySelector('#notificationMessage');
        if (editorEl && typeof ClassicEditor !== 'undefined') {
            ClassicEditor
                .create(editorEl, {
                    ckfinder: { uploadUrl: "{{ route('editor.upload') }}?_token={{ csrf_token() }}" }
                })
                .then(newEditor => {
                    notificationEditor = newEditor;
                    editorEl.ckeditorInstance = newEditor;
                })
                .catch(error => console.error('CKEditor Error:', error));
        }

        // Load feed — this MUST always run
        loadFeed(1);

        function loadFeed(page = 1) {
            currentPage = page;
            const $container = $('#notification-feed');
            
            $.ajax({
                url: "{{ route('notification-center.index') }}",
                data: {
                    start: (page - 1) * 10,
                    length: 10,
                    draw: 1
                },
                success: function(response) {
                    console.log('Notification Response:', response);
                    if (!response.data || response.data.length === 0) {
                        $container.html(`
                            <div class="text-center py-5 opacity-50">
                                <i class="bi bi-inbox h1 display-1"></i>
                                <p class="small mt-2">{{ __('Inbox is empty') }}</p>
                            </div>
                        `);
                    } else {
                        let html = '';
                        response.data.forEach(n => {
                            try {
                                html += window.renderNotificationCard(n);
                            } catch (e) {
                                console.error('Render Error:', e, n);
                            }
                        });
                        $container.html(html);
                    }
                    renderPagination(response.recordsTotal, page);
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', status, error, xhr.responseText);
                    let message = 'Failed to load notifications.';
                    try {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                    } catch(e) {}
                    
                    $container.html(`
                        <div class="card adminuiux-card border-0 shadow-sm rounded-3">
                            <div class="card-body text-center py-5 text-danger">
                                <i class="bi bi-exclamation-circle h3"></i>
                                <p class="small mt-2">${message}</p>
                                <p class="text-muted smallest">Status: ${xhr.status}</p>
                                <button class="btn btn-sm btn-outline-danger mt-2" onclick="location.reload()">Refresh Page</button>
                            </div>
                        </div>
                    `);
                }
            });
        }

        window.reloadFeed = () => loadFeed(currentPage);

        function renderPagination(total, current) {
            const pages = Math.ceil(total / 10);
            if (pages <= 1) { $('#feed-pagination').html(''); return; }
            
            let html = '<ul class="pagination pagination-sm m-0">';
            
            // Previous button
            html += `<li class="page-item ${current === 1 ? 'disabled' : ''}"><a class="page-link rounded-circle mx-1 border-0 shadow-sm" href="#" data-page="${current - 1}">&laquo;</a></li>`;

            // Page numbers with sliding window (current page +/- 2)
            const delta = 2;
            const left = current - delta;
            const right = current + delta;
            const range = [];

            for (let i = 1; i <= pages; i++) {
                if (i === 1 || i === pages || (i >= left && i <= right)) {
                    range.push(i);
                }
            }

            let last = 0;
            for (let i of range) {
                if (last) {
                    if (i - last === 2) {
                        html += `<li class="page-item"><a class="page-link rounded-circle mx-1 border-0 shadow-sm" href="#" data-page="${last + 1}">${last + 1}</a></li>`;
                    } else if (i - last !== 1) {
                        html += `<li class="page-item disabled"><span class="page-link rounded-circle mx-1 border-0 shadow-sm">...</span></li>`;
                    }
                }
                html += `<li class="page-item ${i === current ? 'active' : ''}"><a class="page-link rounded-circle mx-1 border-0 shadow-sm" href="#" data-page="${i}">${i}</a></li>`;
                last = i;
            }

            // Next button
            html += `<li class="page-item ${current === pages ? 'disabled' : ''}"><a class="page-link rounded-circle mx-1 border-0 shadow-sm" href="#" data-page="${current + 1}">&raquo;</a></li>`;
            
            html += '</ul>';
            $('#feed-pagination').html(html);
        }

        $(document).on('click', '.page-link', function(e) {
            e.preventDefault();
            loadFeed($(this).data('page'));
        });

        $(document).on('click', '.btn-delete', function() {
            const url = $(this).data('url');
            StandardSwal.fire({
                title: 'Delete this notification?',
                text: 'This notification will be permanently removed from your history.',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn-pill-danger',
                    cancelButton: 'btn-pill-cancel'
                },
                confirmButtonText: 'Yes, Delete',
                cancelButtonText: "Cancel",
            }).then(result => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        method: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: (res) => {
                            window.reloadNotificationUI();
                            window.showNotificationToast('success', res.message || 'Notification deleted');
                        },
                        error: (xhr) => window.showNotificationToast('error', 'Delete failed')
                    });
                }
            });
        });

        $('#page-mark-all-read').on('click', function() {
            $.ajax({
                url: "{{ route('notification-center.read-all') }}",
                method: 'PATCH',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: (res) => {
                    window.reloadNotificationUI();
                    window.showNotificationToast('success', res.message || 'All marked as read');
                },
                error: () => window.showNotificationToast('error', 'Process failed')
            });
        });

        $('#page-clear-read').on('click', function() {
            StandardSwal.fire({
                title: "Clear all read notifications?",
                text: "All read updates will be permanently purged from your feed.",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn-pill-danger',
                    cancelButton: 'btn-pill-cancel'
                },
                confirmButtonText: "Yes, Clear",
                cancelButtonText: "Cancel",
            }).then(result => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('notification-center.clear-read') }}",
                        method: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: (res) => {
                            window.reloadNotificationUI();
                            window.showNotificationToast('success', res.message || 'Read notifications cleared');
                        },
                        error: () => window.showNotificationToast('error', 'Clear failed')
                    });
                }
            });
        });

        // Listen for standard AJAX success to reload feed
        $('#manualNotificationForm').on('ajaxForm:success', function() {
            window.reloadNotificationUI();
            if (notificationEditor) notificationEditor.setData('');
        });
    });
    </script>
    @endpush
</x-app-layout>
