@extends('layouts.app')

<style>
    h2 {
        text-align: center;
        /* Centraliza o subtítulo */
        color: #000000;
        /* Cor do subtítulo */
        margin-top: 20px;
        /* Espaçamento acima do subtítulo */
    }

    table {
        width: 100%;
        /* Largura total da tabela */
        border-collapse: collapse;
        /* Remove espaços entre as células */
        margin-top: 20px;
        /* Espaçamento acima da tabela */
        background-color: #fff;
        /* Fundo da tabela */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        /* Sombra da tabela */
        border-radius: 8px;
        /* Bordas arredondadas */
    }

    thead {
        background-color: #001a36;
        /* Cor de fundo para o cabeçalho */
        color: #fff;
        /* Cor do texto no cabeçalho */
    }

    th,
    td {
        padding: 15px;
        /* Espaçamento interno das células */
        border: 1px solid #ddd;
        /* Borda cinza clara */
        text-align: left;
        /* Alinhamento do texto */
    }

    tbody tr:hover {
        background-color: #f1f1f1;
        /* Efeito de destaque ao passar o mouse */
    }

    tbody tr:nth-child(even) {
        background-color: #f9f9f9;
        /* Cor de fundo alternada para linhas pares */
    }
</style>

@section('content')
    <h2>Informações dos Visitantes</h2>
    <table>
        <thead>
            <tr>
                <th>ID da Notícia</th>
                <th>Dispositivo</th>
                <th>Navegador</th>
                <th>Localização</th>
                <th>Hora da Sessão</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($visitorInfos as $info)
                <tr>
                    <td>{{ $info->news_id }}</td>
                    <td>{{ $info->device }}</td>
                    <td>{{ $info->browser }}</td>
                    <td>{{ $info->location }}</td>
                    <td>{{ $info->session_time }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection