@extends('layouts.app', [
'namePage' => 'Table List',
'class' => 'sidebar-mini',
'activePage' => 'table',
])
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.standalone.min.css">
<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 class="tiempo_actualizacion">Nuevo dato cada 1 minuto</p>
                        </div>
                        <div class="col-lg-3 col-sx-12 alineacion_derecha">
                            <div class="resumen">
                                <table>
                                    <tr>
                                        <td>Vertimiento</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_vertimiento"></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>Sensor de Velocidad</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_velocidad"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Sensor de Nivel</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_nivel"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Sensor de Caudal</td>
                                        <td>&nbsp;:&nbsp;</td>
                                        <td><span id="estado_caudal"></span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">

                    <div class="row mb-3 {!! $tabla !!}">

                        <div class="col-12">
                            <div class="row mb-3">
                                <div class="col-xl-3 col-sm-12 fondo_blanco">
                                    <img id="animacion" src="" height="280" />
                                </div>
                                <div class="col-xl-3 col-sm-12 bloque_1">
                                </div>
                                <div class="col-xl-3 col-sm-12 bloque_2">
                                </div>
                                <div class="col-xl-3 col-sm-12 bloque_3">
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="row mb-3">
                                <div class="col-xl-3 col-sm-12 fondo_blanco">
                                    <div class="datos_vertimiento">
                                        <h4>Control de Vertimientos</h4>
                                        <table class="table vertimientos">
                                            <thead>
                                                <tr class="text-center">
                                                    <td>N°</td>
                                                    <td>Fecha y Hora de Inicio</td>
                                                    <td>Fecha y Hora de Fin</td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-sm-12 bloque_4">
                                </div>
                                <div class="col-xl-3 col-sm-12 bloque_5">
                                </div>
                                <div class="col-xl-3 col-sm-12 bloque_7 acumulados">
                                </div>
                            </div>
                        </div>                        
                        <div class="col-12">
                            <div class="row mb-3">
                                <div class="col-12 bloque_7 listados"></div>
                            </div>
                        </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-ev", [":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