@extends('layouts.app', [
'namePage' => 'Table List',
'class' => 'sidebar-mini',
'activePage' => 'table',
])
<link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}?v={{ rand() }}">

@section('content')

<div id="loader" style="display: none;">
    <div class="spinner"></div>
</div>

<div class="panel-header panel-header-sm">
</div>
<div class="container" style="margin-top:50px;background:red !important;">
    <div class="row">
    </div>
</div>

<div class="content" style="background:#f1f6f2 !important;">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-lg-6 col-sx-12">
                            <h4 class="nombre_estacion"></h4>
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-eh", ['parametros' => $tabla]) }}'">Dashboard </button>
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-datos", ['parametros' => $tabla]) }}'">Datos</button>
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("graficos", ['parametros' => $tabla]) }}'">Graficos</button>
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("alarmas", ['parametros' => $tabla]) }}'">Alarmas</button>
                        </div>
                        <div class="col-lg-3 col-sx-12">
                            <h6 id="fecha-hora-actual"></h6>
                            <p>Nuevo dato cada 1 minuto</p>
                        </div>
                        <div class="col-lg-3 col-sx-12 alineacion_derecha">
                            <div class="resumen">
                                <table>
                                    <tr>
                                        <td>Estación Meteorológica</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_estacion"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Internet del Datalogger</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_internet"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Energia del Datalogger</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_energia"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Batería del Datalogger</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_bateria"></span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row mb-3 {!! $tabla !!}">
                        <div class="col-xl-3 col-sm-12 mb-2 rosa_viento bloque_8">
                        </div>
                        <div class="col-xl-9 col-sm-12 mb-2">
                            <div class="row">
                                <div class="col-xl-4 col-sm-12 mb-1 bloque_8 et"></div>
                                <div class="col-xl-4 col-sm-12 mb-1 bloque_8 humedad"></div>
                                <div class="col-xl-4 col-sm-12 mb-1 bloque_8 velocidad_viento"></div>
                                <div class="col-xl-4 col-sm-12 mb-1 bloque_8 direccion_viento"></div>
                                <div class="col-xl-4 col-sm-12 mb-1 bloque_8 radiacion_solar"></div>
                                <div class="col-xl-4 col-sm-12 mb-1 bloque_8 indice_uv"></div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-12 bloque_7 precipitaciones mb-2"></div>
                        <div class="col-xl-9 col-sm-12 mb-2">
                            <div class="row">
                                <div class="col-xl-4 col-sm-12 barometro mb-2"></div>                        
                                <div class="col-xl-8 col-sm-12 temperaturas mb-2"></div>                        
                            </div>
                        </div>
                        <div class="col-xl-12 col-sm-12 bloque_7 diario mb-2"></div>
                        <div class="col-xl-6 col-sm-12 bloque_7 mensual"></div>
                        <div class="col-xl-6 col-sm-12 bloque_7 anual"></div>                         
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="tabla" name="tabla">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ asset('assets') }}/js/core/bootstrap.min.js"></script>

    <script src="https://cdn.horte.pe/librerias/highcharts/highcharts.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/highcharts-more.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/highcharts-3d.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/cylinder.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/solid-gauge.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/exporting.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/export-data.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/accessibility.js"></script>
    <script src="https://cdn.horte.pe/librerias/highcharts/no-data-to-display.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.es.min.js"></script>

    <script src="{{ asset('assets/js/custom.js') }}?v={{ rand() }}"></script>

    <script>
        $(document).ready(function() {
            recuperarDashboard('{!! $tabla !!}');

            setInterval(() => {
                recuperarDashboard('{!! $tabla !!}');
            }, 60000);
        });

        function recuperarDashboard(tabla) {
            $('#loader').show();
            var url = '{{ route("recuperar-dashboard-em", [":parametro"]) }}';
            url = url.replace(':parametro', tabla);

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    mostrarUltimaActualizacion(response['Resumen']['fecha_transmisor'], response['Resumen']['hora_transmisor'], response['Resumen']['nombre_estacion']);
                    rellenarDashboard(response, tabla);
                    $('#loader').hide();
                },
                error: function(response) {
                    console.log("error");
                }
            });
        }     
    </script>
    @endsection