@extends('layout.home', ['valor' => 'dispositivos'])

@section('content')
    <div class="text-left mb-4">
        <a href="{{ url()->previous() }}" class="btn btn-secondary">Volver</a>
    </div>
    <div class="container">
        <!-- Título con el IMEI -->
        <h1 class="titulo mb-2 text-center">IMEI: <strong>{{ $imei }}</strong></h1>

        <!-- Verificar si hay registros -->
        @if ($registros->isEmpty())
            <p class="alert alert-warning">No se encontraron reportes para este dispositivo.</p>
        @else
            <!-- Tabla para mostrar los reportes -->
            <table id="reportes-table" class="table table-striped table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Fecha dispositivo</th>
                        <th>Ultimo reporte</th>
                        <th>Evento</th>
                        <th>Velocidad</th>
                        <th>Coordenadas</th>
                        <!-- Agrega más columnas según los campos disponibles en tu tabla -->
                    </tr>
                </thead>
                <tbody>
                    @foreach ($registros as $registro)
                        <tr>
                            @php
                                $trama = json_decode($registro->data); // Es la trama del dispositivo en formato JSON de la base de datos
                            @endphp
                            <td>{{ $registro->id }}</td>
                            <td>{{ $registro->fecha_dispositivo ?? 'N/A' }}</td>
                            <td>{{ $registro->fecha_data ?? 'N/A' }}</td>
                            <td>
                                {{ $trama && isset($trama->data->descripcion_evento) ? $trama->data->descripcion_evento : 'N/A' }}
                            </td>
                            <td>
                                {{ $trama && isset($trama->data->velocidad) ? $trama->data->velocidad : 'N/A' }}
                            </td>
                            <td>
                                {{ $trama && isset($trama->data->latitud) ? $trama->data->latitud : 'N/A' }}
                                ,
                                {{ $trama && isset($trama->data->longitud) ? $trama->data->longitud : 'N/A' }}
                            </td>
                            <!-- <td>{{ $registro->data ?? 'N/A' }}</td> -->
                            <!-- Agrega más celdas según los campos disponibles en tu tabla -->
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
    <style>
        .custom-pagination-container nav {
            height: auto !important;
            /* Sobrescribe el 100vh */
            background-color: transparent;
            color: #08151e;
        }

        .titulo {
            font-size: 3vh !important;
        }
    </style>


    <script>
        $(document).ready(function() {
            var table = $('#reportes-table').DataTable();

            // Crear el dropdown para el filtro de eventos
            var eventColumn = table.column(3); // Índice de la columna de eventos
            var select = $('<select><option value="">Todos los eventos</option></select>')
                .appendTo($(eventColumn.header()).empty())
                .on('change', function() {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                    eventColumn.search(val ? '^' + val + '$' : '', true, false).draw();
                });

            // Agregar opciones al dropdown
            eventColumn.data().unique().sort().each(function(d, j) {
                select.append('<option value="' + d + '">' + d + '</option>');
            });
        });
    </script>
@endsection