@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 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-12">
                            <h6 id="fecha-hora-actual"></h6>
                            <input type="hidden" id="url_exportacion" name="url_exportacion" value="{{ route("exportar-dashboard", [":parametro", ":fechas"]) }}">

                            <p>Nuevo dato cada 1 minuto</p>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-12 col-xl-6 estacion">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="row e-1b">
                                        <div class="col-12 nombre_estacion mb-3">
                                            <h4 class="text-center">Estación E-1B</h4>
                                        </div>                                        
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_6 listados mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_1 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_2 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_3 mb-2">
                                                </div>
                                                <div class="col-sm-12 acumulados bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                    </div>     
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-xl-6 estacion">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="row e-2">
                                        <div class="col-12 nombre_estacion mb-3">
                                            <h4 class="text-center">Estación E-2</h4>
                                        </div>                                        
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_6 listados mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_1 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_2 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_3 mb-2">
                                                </div>
                                                <div class="col-sm-12 acumulados bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                    </div>     
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-12 col-xl-6 estacion">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="row e-4">
                                        <div class="col-12 nombre_estacion mb-3">
                                            <h4 class="text-center">Estación E-4</h4>
                                        </div>                                        
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_6 listados mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_1 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_2 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_3 mb-2">
                                                </div>
                                                <div class="col-sm-12 acumulados bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                    </div>     
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-xl-6 estacion">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="row e-5">
                                        <div class="col-12 nombre_estacion mb-3">
                                            <h4 class="text-center">Estación E-5</h4>
                                        </div>                                        
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_6 listados mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-xl-6">
                                            <div class="row">
                                                <div class="col-sm-12 bloque_1 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_2 mb-2">
                                                </div>
                                                <div class="col-sm-12 bloque_3 mb-2">
                                                </div>
                                                <div class="col-sm-12 acumulados bloque_7 mb-2">
                                                </div>
                                            </div>
                                        </div>
                                    </div>     
                                </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://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="{{ asset('assets/js/datepicker-es.js') }}"></script>
    <script src="{{ asset('assets/js/custom.js') }}?v={{ rand() }}"></script>

    <script>
        $(document).ready(function() {
            recuperarDashboard('e-1b');
            recuperarDashboard('e-2');
            recuperarDashboard('e-4');
            recuperarDashboard('e-5');

            setInterval(() => {
                obtenerActualizacion();
                recuperarDashboard('e-1b');    
                recuperarDashboard('e-2');        
                recuperarDashboard('e-4');        
                recuperarDashboard('e-5'); 
            }, 60000);              
        });

        function recuperarDashboard(tabla) {
            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);
                },
                error: function(response) {
                    console.log("error");
                }
            });
        }
    </script>
    @endsection