@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row align-items-center">
                        <div class="col-sm-6 ps-0">
                            <h3>
                                <i class="fas fa-bell mr-2"></i>
                                Platform Notifications
                            </h3>
                            <p class="text-muted mb-0" style="font-size:13px">
                                All system notifications
                            </p>
                        </div>
                        <div class="col-sm-6 pe-0 text-right">
                            <ol class="bc">
                                <li><a href="/platform/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Notifications</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Stats --}}
            <div class="container-fluid">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="card" style="border-left:4px solid #3b82f6;">
                            <div class="card-body">
                                <h6 class="text-muted mb-1">Total</h6>
                                <h3 class="mb-0">{{ $stats['total'] }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card" style="border-left:4px solid #f59e0b;">
                            <div class="card-body">
                                <h6 class="text-muted mb-1">Unread</h6>
                                <h3 class="mb-0">{{ $stats['unread'] }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card" style="border-left:4px solid #22c55e;">
                            <div class="card-body">
                                <h6 class="text-muted mb-1">Read</h6>
                                <h3 class="mb-0">{{ $stats['read'] }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card" style="border-left:4px solid #8b5cf6;">
                            <div class="card-body">
                                <h6 class="text-muted mb-1">Types</h6>
                                <h3 class="mb-0">{{ count($stats['types']) }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Notifications Table --}}
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">All Notifications</h5>
                        <div>
                            <button onclick="markAllRead()" class="btn btn-sm btn-primary">
                                <i class="fas fa-check-double mr-1"></i> Mark All Read
                            </button>
                            <button onclick="clearRead()" class="btn btn-sm btn-secondary">
                                <i class="fas fa-trash mr-1"></i> Clear Read
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="GET" class="mb-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="text" name="search" class="form-control" placeholder="Search..."
                                        value="{{ request('search') }}">
                                </div>
                                <div class="col-md-3">
                                    <select name="type" class="form-control">
                                        <option value="">All Types</option>
                                        <option value="tenant_registered" {{ request('type') == 'tenant_registered' ? 'selected' : '' }}>New Tenant</option>
                                        <option value="tenant_approved" {{ request('type') == 'tenant_approved' ? 'selected' : '' }}>Tenant Approved</option>
                                        <option value="tenant_activated" {{ request('type') == 'tenant_activated' ? 'selected' : '' }}>Tenant Activated</option>
                                        <option value="payment_received" {{ request('type') == 'payment_received' ? 'selected' : '' }}>Payment Received</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select name="status" class="form-control">
                                        <option value="">All Status</option>
                                        <option value="unread" {{ request('status') == 'unread' ? 'selected' : '' }}>
                                            Unread</option>
                                        <option value="read" {{ request('status') == 'read' ? 'selected' : '' }}>Read
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <button type="submit" class="btn btn-primary">Filter</button>
                                    <a href="{{ route('platform.notifications.index') }}"
                                        class="btn btn-secondary">Reset</a>
                                </div>
                            </div>
                        </form>

                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Type</th>
                                        <th>Title</th>
                                        <th>Message</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($notifications as $notification)
                                        <tr class="platform-notif-row"
                                            style="cursor:pointer;{{ $notification->is_read ? '' : 'background:rgba(201,169,110,0.04);' }}"
                                            data-id="{{ $notification->id }}" data-title="{{ $notification->title }}"
                                            data-message="{{ $notification->message }}"
                                            data-type="{{ ucwords(str_replace('_', ' ', $notification->type)) }}"
                                            data-color="{{ $notification->getTypeColor() }}"
                                            data-icon="{{ $notification->getTypeIcon() }}"
                                            data-sent="{{ $notification->created_at->format('d M Y, h:i A') }}"
                                            data-is-read="{{ $notification->is_read ? '1' : '0' }}"
                                            data-read-at="{{ $notification->read_at ? $notification->read_at->diffForHumans() : '' }}"
                                            onclick="showPlatformNotifDetail(this)">
                                            <td>{{ $notifications->firstItem() + $loop->index }}</td>
                                            <td>
                                                <span style="color:{{ $notification->getTypeColor() }};">
                                                    <i class="fas {{ $notification->getTypeIcon() }}"></i>
                                                </span>
                                            </td>
                                            <td><strong>{{ $notification->title }}</strong></td>
                                            <td>{{ Str::limit($notification->message, 50) }}</td>
                                            <td class="notif-status-cell">
                                                @if($notification->is_read)
                                                    <span class="badge badge-success">Read</span>
                                                @else
                                                    <span class="badge badge-warning">Unread</span>
                                                @endif
                                            </td>
                                            <td>{{ $notification->created_at->format('d M Y, h:i A') }}</td>
                                            <td>
                                                <button
                                                    onclick="event.stopPropagation();deleteNotification({{ $notification->id }})"
                                                    class="btn btn-sm btn-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center">No notifications found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        {{ $notifications->links() }}
                    </div>
                </div>
            </div>

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

<div class="modal fade" id="platformNotifModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius:12px;overflow:hidden;border:none">
            <div class="modal-header" style="border-bottom:none;padding:20px 24px 8px">
                <div class="d-flex align-items-center" style="gap:12px">
                    <div id="pfNotifIconWrap" style="width:42px;height:42px;border-radius:10px;
                                display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <i id="pfNotifIcon" class="fas"></i>
                    </div>
                    <div>
                        <span id="pfNotifType" class="text-muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700"></span>
                        <h5 class="mb-0" id="pfNotifTitle" style="font-size:16px;font-weight:700;color:#1e293b"></h5>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" style="padding:16px 24px 24px">
                <p id="pfNotifMessage" style="font-size:14px;color:#334155;line-height:1.6"></p>
                <hr style="margin:16px 0">
                <div style="font-size:12px;color:#64748b;display:flex;flex-direction:column;gap:6px">
                    <div><i class="fas fa-clock mr-2" style="color:#94a3b8"></i>Sent <span id="pfNotifSent"></span></div>
                    <div id="pfNotifReadStatus" style="color:#22c55e"><i class="fas fa-check mr-2"></i><span></span></div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('Partials.footer')

<script>
    function showPlatformNotifDetail(row) {
    const d = row.dataset;

    document.getElementById('pfNotifType').textContent = d.type;
    document.getElementById('pfNotifTitle').textContent = d.title;
    document.getElementById('pfNotifMessage').textContent = d.message;
    document.getElementById('pfNotifSent').textContent = d.sent;

    const iconWrap = document.getElementById('pfNotifIconWrap');
    const icon = document.getElementById('pfNotifIcon');
    iconWrap.style.background = d.color + '22';
    icon.className = 'fas ' + d.icon;
    icon.style.color = d.color;

    const readRow = document.getElementById('pfNotifReadStatus');
    if (d.isRead === '1') {
        readRow.style.display = 'flex';
        readRow.querySelector('span').textContent = 'Read ' + (d.readAt || '');
    } else {
        readRow.style.display = 'none';
    }

    $('#platformNotifModal').modal('show');

    if (d.isRead === '0') {
        fetch('/api/platform/notifications/' + d.id + '/mark-read', {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            row.dataset.isRead = '1';
            row.style.background = 'transparent';
            const badge = row.querySelector('.notif-status-cell');
            badge.innerHTML = '<span class="badge badge-success">Read</span>';
        })
        .catch(() => {});
    }
}

    function markRead(id) {
        fetch('/api/platform/notifications/' + id + '/mark-read', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
        })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
    }

    function markAllRead() {
        if (!confirm('Mark all notifications as read?')) return;

        fetch('{{ route("platform.notifications.mark-all-read") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
        })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
    }

    function clearRead() {
        if (!confirm('Delete all read notifications?')) return;

        fetch('{{ route("platform.notifications.clear-read") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
        })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
    }

    function deleteNotification(id) {
        if (!confirm('Delete this notification?')) return;

        fetch('/platform/notifications/' + id, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
        })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
    }
</script>