@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-sm-12">
                            <h4 class="nombre_estacion"></h4>
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-ep", ['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-sm-12">
                            <h6 id="fecha-hora-actual"></h6>
                            <p>Nuevo dato cada 1 minuto</p>
                        </div>
                        <div class="col-lg-3 col-sm-12 alineacion_derecha">
                            <div class="resumen">
                                <table>
                                    <tr>
                                        <td>Precipitacion</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_precipitacion"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Estación</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_estacion"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Red Celular Transmisor</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_red"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Alerta Lluvia</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_lluvia"></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 bloque_7 precipitaciones mb-2"></div>
                        <div class="col-xl-9 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-ep", [":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