@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3>Notificaciones</h3>
                    @if(Auth::user()->unreadNotifications->count() > 0)
                        <button class="btn btn-sm btn-primary" onclick="markAllAsRead()">
                            Marcar todas como leídas
                        </button>
                    @endif
                </div>
                
                <div class="card-body">
                    @if($notifications->count() > 0)
                        @foreach($notifications as $notification)
                            <div class="notification-item p-3 border-bottom 
                                {{ !$notification->read_at ? 'bg-light' : '' }}">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div class="flex-grow-1">
                                        <h5 class="mb-1">
                                            {{ $notification->data['post_title'] ?? 'Notificación' }}
                                        </h5>
                                        <p class="text-muted mb-2">
                                            {!! $notification->data['message'] !!}
                                        </p>
                                        <small class="text-muted">
                                            {{ $notification->created_at->diffForHumans() }}
                                        </small>
                                    </div>
                                    
                                    @if(!$notification->read_at)
                                        <button class="btn btn-sm btn-outline-primary ml-3" 
                                                onclick="markSingleAsRead('{{ $notification->id }}')">
                                            Marcar como leída
                                        </button>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        
                        <!-- Paginación -->
                        <div class="mt-4">
                            {{ $notifications->links() }}
                        </div>
                    @else
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-inbox fa-3x mb-3"></i>
                            <p>No hay notificaciones</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function markSingleAsRead(notificationId) {
    fetch(`/api/notifications/${notificationId}/read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        location.reload();
    })
    .catch(error => console.error('Error:', error));
}

function markAllAsRead() {
    fetch('/api/notifications/mark-all-as-read', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        location.reload();
    })
    .catch(error => console.error('Error:', error));
}
</script>
@endsection