@extends('admin.layout.app')
@section('title', 'Notifications')
@section('content')

    <style>
        .notif-page-wrapper {
            max-width: 780px;
            margin: 0 auto;
            padding: 30px 16px;
        }

        .notif-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .notif-page-title {
            font-size: 22px;
            font-weight: 700;
            color: #222;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .notif-page-title .count-badge {
            background: #1471C7;
            color: white;
            font-size: 12px;
            font-weight: 700;
            border-radius: 50px;
            padding: 3px 12px;
        }

        .btn-mark-all {
            background: white;
            border: 2px solid #1471C7;
            color: #1471C7;
            font-weight: 700;
            font-size: 13px;
            border-radius: 50px;
            padding: 8px 20px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .btn-mark-all:hover {
            background: #1471C7;
            color: white;
        }

        .btn-mark-all:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .notif-card {
            background: white;
            border-radius: 14px;
            border-left: 5px solid #ddd;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            padding: 18px 20px;
            margin-bottom: 14px;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            transition: all 0.3s ease;
            position: relative;
        }

        .notif-card.unread {
            border-left-color: #1471C7;
            background: #fff8f4;
        }

        .notif-card:hover {
            transform: translateX(4px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        }

        .notif-card.removing {
            opacity: 0;
            transform: translateX(30px);
            margin-bottom: 0;
            padding: 0;
            height: 0;
            overflow: hidden;
        }

        .notif-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .notif-icon.unread {
            background: #1471C7;
        }

        .notif-icon.read {
            background: #f0f0f0;
        }

        .notif-body {
            flex: 1;
            min-width: 0;
        }

        .notif-name {
            font-size: 14px;
            font-weight: 700;
            color: #222;
            margin: 0 0 4px;
            line-height: 1.4;
        }

        .notif-name span {
            color: #1471C7;
        }

        .notif-listing {
            font-size: 13px;
            color: #888;
            margin: 0 0 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .notif-time {
            font-size: 11px;
            color: #bbb;
            margin: 0;
        }

        .notif-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            flex-shrink: 0;
        }

        .btn-dismiss {
            background: none;
            border: none;
            cursor: pointer;
            color: #ccc;
            padding: 4px;
            border-radius: 50%;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
        }

        .btn-dismiss:hover {
            background: #fee2e2;
            color: #ef4444;
        }

        .unread-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #1471C7;
            margin-top: 4px;
        }

        .notif-link {
            text-decoration: none;
            display: block;
            flex: 1;
            min-width: 0;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state svg {
            margin-bottom: 16px;
        }

        .empty-state p {
            color: #bbb;
            font-size: 15px;
            font-weight: 500;
        }

        @media (max-width: 576px) {
            .notif-card {
                padding: 14px 14px;
                gap: 10px;
            }

            .notif-icon {
                width: 36px;
                height: 36px;
            }

            .notif-name {
                font-size: 13px;
            }
        }
    </style>


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <div class="notif-page-wrapper">

                                {{-- Page Header --}}
                                <div class="notif-page-header">
                                    <div class="notif-page-title">
                                        <svg width="22" height="22" viewBox="0 0 24 24" fill="#FF7101">
                                            <path
                                                d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.36 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.63 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16Z"/>
                                        </svg>
                                        Notifications
                                        @php $unread = auth()->user()->unreadNotifications->count(); @endphp
                                        @if($unread > 0)
                                            <span class="count-badge" id="unreadBadge">{{ $unread }} New</span>
                                        @endif
                                    </div>

                                    <button class="btn-mark-all" id="markAllBtn" {{ $unread === 0 ? 'disabled' : '' }}>
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
                                        </svg>
                                        Mark All Read
                                    </button>
                                </div>

                                {{-- Notifications List --}}
                                <div id="notifList">
                                    @forelse($notifications as $notif)
                                        @php
                                            $isUnread = is_null($notif->read_at);
                                            $data = $notif->data;
                                            $link = route('admin.listings.inquiries', [
                                                'id'         => $data['listing_id'],
                                                'inquiry_id' => $data['inquiry_id'],
                                            ]);
                                        @endphp

                                        <div class="notif-card {{ $isUnread ? 'unread' : '' }}"
                                             id="notif-{{ $notif->id }}"
                                             data-id="{{ $notif->id }}">

                                            {{-- Icon --}}
                                            <div class="notif-icon {{ $isUnread ? 'unread' : 'read' }}">
                                                <svg width="18" height="18" viewBox="0 0 24 24"
                                                     fill="{{ $isUnread ? 'white' : '#999' }}">
                                                    <path
                                                        d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z"/>
                                                </svg>
                                            </div>

                                            {{-- Clickable Body --}}
                                            <a href="{{ $link }}" class="notif-link"
                                               onclick="markRead('{{ $notif->id }}')">
                                                <p class="notif-name">
                                                    New inquiry from
                                                    <span>{{ $data['inquirer_name'] ?? 'Someone' }}</span>
                                                </p>
                                                <p class="notif-listing">
                                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="#bbb"
                                                         style="margin-right:4px; vertical-align:middle;">
                                                        <path
                                                            d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99z"/>
                                                    </svg>
                                                    {{ $data['listing_title'] ?? 'N/A' }}
                                                </p>
                                                <p class="notif-time">
                                                    <svg width="11" height="11" viewBox="0 0 24 24" fill="#bbb"
                                                         style="margin-right:3px; vertical-align:middle;">
                                                        <path
                                                            d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
                                                    </svg>
                                                    {{ $notif->created_at->diffForHumans() }}
                                                </p>
                                            </a>

                                            {{-- Actions --}}
                                            <div class="notif-actions">
                                                <button class="btn-dismiss" onclick="dismissNotif('{{ $notif->id }}')"
                                                        title="Dismiss">
                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                                        <path
                                                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                                                    </svg>
                                                </button>
                                                @if($isUnread)
                                                    <div class="unread-dot" id="dot-{{ $notif->id }}"></div>
                                                @endif
                                            </div>

                                        </div>
                                    @empty
                                        <div class="empty-state" id="emptyState">
                                            <svg width="56" height="56" viewBox="0 0 24 24" fill="#e0e0e0">
                                                <path
                                                    d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.36 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.63 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16Z"/>
                                            </svg>
                                            <p>You're all caught up! No notifications.</p>
                                        </div>
                                    @endforelse
                                </div>

                                {{-- Pagination --}}
                                @if($notifications->hasPages())
                                    <div class="tfcl-pagination paging-navigation clearfix mt-4">
                                        @if($notifications->onFirstPage())
                                            <span class="prev page-numbers disabled"><i
                                                    class="far fa-angle-left"></i></span>
                                        @else
                                            <a class="prev page-numbers" href="{{ $notifications->previousPageUrl() }}"><i
                                                    class="far fa-angle-left"></i></a>
                                        @endif

                                        @foreach($notifications->getUrlRange(1, $notifications->lastPage()) as $page => $url)
                                            @if($page == $notifications->currentPage())
                                                <span class="page-numbers current">{{ $page }}</span>
                                            @else
                                                <a class="page-numbers" href="{{ $url }}">{{ $page }}</a>
                                            @endif
                                        @endforeach

                                        @if($notifications->hasMorePages())
                                            <a class="next page-numbers" href="{{ $notifications->nextPageUrl() }}"><i
                                                    class="far fa-angle-right"></i></a>
                                        @else
                                            <span class="next page-numbers disabled"><i class="far fa-angle-right"></i></span>
                                        @endif
                                    </div>
                                @endif

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




@endsection
@push('scripts')
    <script>
        const CSRF = '{{ csrf_token() }}';
        const MARK_READ_URL = "{{ route('admin.notifications.markRead', ':id') }}";
        const DELETE_URL    = "{{ route('admin.notifications.destroy', ':id') }}";

        // Single notification mark read
        function markRead(id) {
            const url = MARK_READ_URL.replace(':id', id);
            fetch(url, {
                method: 'POST',
                headers: {'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json'}
            }).then(() => {
                const card = document.getElementById(`notif-${id}`);
                const dot = document.getElementById(`dot-${id}`);
                if (card) {
                    card.classList.remove('unread');
                    card.querySelector('.notif-icon').classList.replace('unread', 'read');
                    card.querySelector('.notif-icon svg').setAttribute('fill', '#999');
                }
                if (dot) dot.remove();
                updateBadge(-1);
            });
        }

        // Dismiss (delete) notification
        function dismissNotif(id) {
            const url = DELETE_URL.replace(':id', id);
            fetch(url, {
                method: 'DELETE',
                headers: {'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json'}
            }).then(() => {
                const card = document.getElementById(`notif-${id}`);
                if (!card) return;

                const wasUnread = card.classList.contains('unread');
                card.style.transition = 'all 0.3s ease';
                card.style.opacity = '0';
                card.style.transform = 'translateX(30px)';
                card.style.maxHeight = card.offsetHeight + 'px';

                setTimeout(() => {
                    card.style.maxHeight = '0';
                    card.style.marginBottom = '0';
                    card.style.padding = '0';
                    card.style.overflow = 'hidden';
                }, 200);

                setTimeout(() => {
                    card.remove();
                    if (wasUnread) updateBadge(-1);
                    checkEmpty();
                }, 500);
            });
        }

        // Mark all read
        document.getElementById('markAllBtn').addEventListener('click', function () {
            this.disabled = true;
            this.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg> Done!';

            fetch('{{ route('admin.notifications.markAllRead') }}', {
                method: 'POST',
                headers: {'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json'}
            }).then(() => {
                document.querySelectorAll('.notif-card.unread').forEach(card => {
                    card.classList.remove('unread');
                    const icon = card.querySelector('.notif-icon');
                    if (icon) {
                        icon.classList.replace('unread', 'read');
                        icon.querySelector('svg').setAttribute('fill', '#999');
                    }
                    const dot = card.querySelector('.unread-dot');
                    if (dot) dot.remove();
                });

                const badge = document.getElementById('unreadBadge');
                if (badge) badge.remove();
            });
        });

        // Badge count update
        function updateBadge(delta) {
            const badge = document.getElementById('unreadBadge');
            if (!badge) return;
            let count = parseInt(badge.textContent) + delta;
            if (count <= 0) {
                badge.remove();
                const btn = document.getElementById('markAllBtn');
                if (btn) btn.disabled = true;
            } else {
                badge.textContent = count + ' New';
            }
        }

        // Empty state check
        function checkEmpty() {
            const list = document.getElementById('notifList');
            if (list && list.querySelectorAll('.notif-card').length === 0) {
                list.innerHTML = `
                <div class="empty-state">
                    <svg width="56" height="56" viewBox="0 0 24 24" fill="#e0e0e0">
                        <path d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.36 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.63 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16Z"/>
                    </svg>
                    <p>You're all caught up! No notifications.</p>
                </div>`;
            }
        }
    </script>
@endpush