@extends('layout.layout')

@section('content')

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Your Notifications</h2>

            <form action="{{ route('notifications.markAllRead') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-outline-secondary">
                    Mark All as Read
                </button>
            </form>
        </div>

        <div class="card-body">
            @if ($notifications->isEmpty())
                <div class="text-center py-5">
                    <i class="fas fa-bell-slash" style="font-size: 48px; color: #e5e7eb; margin-bottom: 15px;"></i>
                    <h3>No notifications yet</h3>
                    <p class="mt-2">You'll see notifications here when you have new activity.</p>
                </div>
            @else
                <div class="notification-list">
                    @foreach ($notifications as $notification)
                        <div class="notification-item {{ $notification->read_at ? '' : 'unread' }}"
                            data-id="{{ $notification->id }}">
                            <div class="notification-icon">
                                <i class="fas fa-bell"></i>
                            </div>

                            <div class="notification-content">
                                <div class="notification-message">
                                    {{ $notification->data['message'] }}
                                </div>
                                <div class="notification-time">
                                    {{ $notification->created_at->diffForHumans() }}
                                </div>
                            </div>

                            <div class="notification-actions">
                                @if (!$notification->read_at)
                                    <button class="btn btn-outline-secondary mark-as-read" data-id="{{ $notification->id }}">
                                        Mark as Read
                                    </button>
                                @endif
                                <a href="{{ $notification->data['action_url'] ?? '#' }}" class="btn btn-outline-primary">
                                    View
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="pagination">
                    {{ $notifications->links() }}
                </div>
            @endif
        </div>
    </div>

    <script>
        document.querySelectorAll('.mark-as-read').forEach(button => {
            button.addEventListener('click', function() {
                const notificationId = this.dataset.id;
                markAsRead(notificationId);
            });
        });

        function markAsRead(notificationId) {
            fetch("{{ route('notifications.markAsRead') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        id: notificationId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Remove unread styling
                        const item = document.querySelector(`.notification-item[data-id="${notificationId}"]`);
                        if (item) {
                            item.classList.remove('unread');

                            // Remove the mark-as-read button
                            const button = item.querySelector('.mark-as-read');
                            if (button) button.remove();

                            // Update notification count
                            updateNotificationCount(-1);
                        }
                    }
                });
        }
    </script>

@endsection