@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 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>

                            <input type="hidden" id="tipo_filtro" name="tipo_filtro" value="D">

                            <input type="hidden" id="tabla" name="tabla" value="{!! $tabla !!}">
                            <input type="hidden" id="fechas" name="fechas" value="---">

                            @if($tabla === 'e-1b' || $tabla === 'e-2' || $tabla === 'e-4' || $tabla === 'e-5')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-ev", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif
                            @if($tabla === 'mh-6' || $tabla === 'mh-11' || $tabla === 'mh-16')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-eh", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif
                            @if($tabla === 'suez')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-ep", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif
                            @if($tabla === 'cienaga' || $tabla === 'mirador' || $tabla === 'thy3' || $tabla === 'gaviotas')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-em", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif

                            <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-6 col-sx-12">
                            <h6 id="fecha-hora-actual oculto"></h6>
                            <p class="oculto">Nuevo dato cada 1 minuto</p>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="fondo_blanco">
                        <div class="row mb-2">
                            <div class="col-12">
                                <button id="agregar" name="agregar" type="button" class="btn btn-secundary">Agregar Grafico</button>
                            </div>
                        </div>
                        <div class="row mb-3 paneles">
                            <div class="col-10">
                                <div class="datos">
                                    <div id="graficos_1" class="graficos activo"></div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="opciones">
                                    <div class="barra">
                                        <div class="accordion-section">
                                            <div class="accordion-header"><b>Rangos</b></div>
                                            <div class="accordion-content">
                                                <div class="opciones-valores">
                                                    <table class="rango">
                                                        <tr>
                                                            <td><button type="button" class="rango_fechas" data-opcion="1H">1 hora</button></td>
                                                            <td><button type="button" class="rango_fechas" data-opcion="4H">4 horas</button></td>
                                                        </tr>
                                                        <tr>
                                                            <td><button type="button" class="rango_fechas" data-opcion="8H">8 hora</button></td>
                                                            <td><button type="button" class="rango_fechas" data-opcion="12H">12 horas</button></td>
                                                        </tr>
                                                        <tr>
                                                            <td><button type="button" class="rango_fechas" data-opcion="1D">1 dia</button></td>
                                                            <td><button type="button" class="rango_fechas" data-opcion="3D">3 dias</button></td>
                                                        </tr>
                                                        <tr>
                                                            <td><button type="button" class="rango_fechas" data-opcion="1S">1 sem.</button></td>
                                                            <td><button type="button" class="rango_fechas" data-opcion="2S">2 sem.</button></td>
                                                        </tr>
                                                        <tr>
                                                            <td><button type="button" class="rango_fechas" data-opcion="1M">1 mes</button></td>
                                                            <td><button type="button" class="rango_fechas" data-opcion="3M">3 meses</button></td>
                                                        </tr>
                                                        <tr>
                                                            <td><button type="button" class="rango_fechas" data-opcion="6M">6 meses</button></td>
                                                            <td><button type="button" class="rango_fechas" data-opcion="1A">1 año</button></td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="2"><button type="button" class="rango_fechas" data-opcion="P">Personalizado</button></td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div class="fechas-valores">
                                                    <label for="dia_inicial">Fecha y Hora Inicial</label>
                                                    <div class="mb-2">
                                                        <input type="text" id="dia_inicial" name="dia_inicial" class="date-picker" value="">
                                                        <input type="time" id="hora_inicial" name="hora_inicial" step="60" class="time-picker" value="">
                                                    </div>
                                                    <label for="dia_final">Fecha y Hora Final</label>
                                                    <div class="mb-2">
                                                        <input type="text" id="dia_final" name="dia_final" class="date-picker" value="">
                                                        <input type="time" id="hora_final" name="hora_final" step="60" class="time-picker" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-section">
                                            <div class="accordion-header"><b>Parámetros</b></div>
                                            <div class="accordion-content">
                                                <div class="opciones-valores">
                                                    @foreach($opciones_graficos as $item_opcion)
                                                    <div class="">
                                                        <input type="checkbox" class="filtros" id="chk-{!! $item_opcion['posicion'] !!}" value="{!! $item_opcion['columna'] !!}" data-minimo="@if(count($item_opcion['normas']) == 0)---@else{!! $item_opcion['normas'][0]['minimo'] !!}@endif" data-maximo="@if(count($item_opcion['normas']) == 0)---@else{!! $item_opcion['normas'][0]['maximo'] !!}@endif" data-codigo="@if(count($item_opcion['normas']) == 0)---@else{!! $item_opcion['normas'][0]['codigo'] !!}@endif" data-normas="{!! count($item_opcion['normas']) !!}" {!! $item_opcion['seleccion'] !!}>
                                                        <label class="" for="chk-{!! $item_opcion['posicion'] !!}">{!! $item_opcion['etiqueta'] !!}</label>
                                                    </div>
                                                    @endforeach
                                                </div>
                                                @foreach($opciones_graficos as $item_opcion)
                                                @if(count($item_opcion['normas']) == 0)
                                                @else
                                                <div class="opciones-normas normas_{!! $item_opcion['columna'] !!} mb-2" data-seleccion="{!! $item_opcion['seleccion'] !!}">
                                                    <b>Norma(s)</b>
                                                    @if(count($item_opcion['normas']) == 1)
                                                    <div class="">
                                                        {!! $item_opcion['normas'][0]['nombre'] !!}
                                                    </div>
                                                    @else
                                                    @foreach($item_opcion['normas'] as $item_normas)
                                                    <div class="">
                                                        <label><input type="radio" class="normas" value="{!! $item_normas['codigo'] !!}" id="rb-{!! $item_opcion['posicion'] !!}" name="rb-{!! $item_opcion['posicion'] !!}" data-objeto="chk-{!! $item_opcion['posicion'] !!}" data-max="{!! $item_normas['maximo'] !!}" data-min="{!! $item_normas['minimo'] !!}"> {!! $item_normas['nombre'] !!}</label>
                                                    </div>
                                                    @endforeach
                                                    @endif
                                                </div>
                                                @endif
                                                @endforeach
                                            </div>
                                        </div>
                                        <button id="actualizar_graficos" name="actualizar_graficos" type="button" class="btn btn-secundary">Actualizar</button>
                                        <input type="hidden" id="objeto" name="objeto" value="graficos_1">
                                        <input type="hidden" id="filtros" name="filtros" value="{!! $opciones_graficos[0]['columna'] !!}">
                                        <input type="hidden" id="valores" name="valores" value="{!! $opciones_graficos[0]['columna'] !!}||@if(count($opciones_graficos[0]['normas']) == 0)---@else{!! $opciones_graficos[0]['normas'][0]['minimo'] !!}@endif||@if(count($opciones_graficos[0]['normas']) == 0)---@else{!! $opciones_graficos[0]['normas'][0]['maximo'] !!}@endif||@if(count($opciones_graficos[0]['normas']) == 0)---@else{!! $opciones_graficos[0]['normas'][0]['codigo'] !!}@endif">
                                        <input type="hidden" id="fechas" name="fechas" value="">
                                        <input type="hidden" id="rangos" name="rangos" value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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>
        var chart;
        var correlativo = 1;
        var opciones_graficos = @json($opciones_graficos);
        var configuraciones = @json($configuraciones);
        var resumen = @json($resumen);
        var total = Object.keys(configuraciones).length;

        $(document).ready(function() {
            mostrarUltimaActualizacion(resumen['Resumen']['fecha_transmisor'], resumen['Resumen']['hora_transmisor'], resumen['Resumen']['nombre_estacion']);

            if (total == 0) {
                establecerFechaHora();

                $('.opciones-normas').each(function() {
                    seleccionado = $(this).attr('data-seleccion');

                    if (seleccionado == "checked") {
                        $(this).addClass('mostrar-normas');
                    }
                });

                $("#actualizar_graficos").click();
            } else {
                var numero_mayor = -Infinity;
                $.each(configuraciones, function(index, item_configuracion) {
                    var objeto = index;
                    var parametros_guardados = [];
                    var valores_guardados = [];
                    var fechas_guardados = item_configuracion[0]['fecha_inicial'].slice(0, -3).replace(' ', 'T') + "||" + item_configuracion[0]['fecha_final'].slice(0, -3).replace(' ', 'T');
                    var rango_guardado = item_configuracion[0]['rango'];

                    datos_objeto = objeto.split('_');
                    valor_objeto = parseInt(datos_objeto[1]);

                    if (valor_objeto > numero_mayor) {
                        numero_mayor = valor_objeto;
                    }

                    $.each(item_configuracion, function(index_elemento, item_elemento) {
                        parametros_guardados.push(item_elemento['parametro']);
                        valores_guardados.push(item_elemento['parametro'] + '||' + item_elemento['minimo'] + '||' + item_elemento['maximo'] + '||' + item_elemento['codigo']);
                    });

                    parametros_guardados.join(",");
                    valores_guardados.join(",");

                    if ($('#' + objeto).length) {
                        $("#" + objeto).attr('data-parametros', parametros_guardados);
                        $("#" + objeto).attr('data-valores', valores_guardados);
                        $("#" + objeto).attr('data-fechas', fechas_guardados);
                        $("#" + objeto).attr('data-rango', rango_guardado);
                    } else {
                        contenido = "<div id='" + objeto + "' class='graficos'></div>";
                        $(".datos").append(contenido);
                        $("#" + objeto).attr('data-parametros', parametros_guardados);
                        $("#" + objeto).attr('data-valores', valores_guardados);
                        $("#" + objeto).attr('data-fechas', fechas_guardados);
                        $("#" + objeto).attr('data-rango', rango_guardado);
                    }

                    Graficos(objeto, parametros_guardados, valores_guardados, fechas_guardados, rango_guardado);
                });

                correlativo = numero_mayor;
            }

            setInterval(() => {
                $('.graficos').each(function() {
                    hoy = new Date();
                    id_grafico = $(this).prop('id');
                    parametros_grafico = $(this).attr('data-parametros');
                    valores_grafico = $(this).attr('data-valores');
                    fechas_grafico = $(this).attr('data-fechas');
                    rango_grafico = $(this).attr('data-rango');

                    Graficos(id_grafico, parametros_grafico, valores_grafico, fechas_grafico, rango_grafico);
                });
            }, 60000);
        });

        function Graficos(contenedor, parametro, valores, fechas, rango) {
            var url = '{{ route("recuperar-datos-graficos", [":parametro", ":valores", ":fechas", ":rango"]) }}';
            url = url.replace(':parametro', parametro).replace(':valores', valores).replace(':fechas', fechas).replace(':rango', rango);

            $.ajax({
                url: url,
                type: 'GET',
                success: function(data) {
                    var etiquetas_listas = data[0].etiquetas.map(transformarEtiquetas);
                    var data_serie = [];

                    $.each(data[0].series, function(index, series) {
                        data_serie.push({
                            name: series.nombre_serie,
                            type: series.tipo_grafico,
                            yAxis: series.axis,
                            color: series.color_serie,
                            data: series.datos,
                            marker: {
                                lineColor: series.color_serie
                            },
                            dataLabels: {
                                enabled: true,
                                format: '{point.y:.3f}',
                                style: {
                                    fontSize: '12px',
                                    fontWeight: 'bold',
                                    color: 'white',
                                    textOutline: 'none'
                                },
                                backgroundColor: series.color_serie,
                                borderColor: 'black',
                                borderRadius: 5,
                                borderWidth: 1,
                                padding: 5
                            },
                            zIndex: 2
                        });
                    });

                    Highcharts.setOptions({
                        lang: {
                            noData: 'No hay datos disponibles para mostrar'
                        }
                    });

                    Highcharts.chart(contenedor, {
                        chart: {
                            zooming: {
                                type: 'xy'
                            },
                            type: 'line',
                            marginTop: 80,
                            height: 675,
                            events: {
                                click: function(event) {
                                    $('.graficos').each(function() {
                                        $(this).removeClass('activo');
                                    });

                                    $('.filtros').each(function() {
                                        if (this.checked) {
                                            $(this).prop('checked', false);
                                        }
                                    });

                                    $('.opciones-normas').each(function() {
                                        $(this).removeClass('mostrar-normas');
                                    });

                                    var chart = this;
                                    var chartId = chart.renderTo.id;

                                    $('#objeto').val(chartId);
                                    $('#' + chartId).addClass('activo');
                                    fechas_actuales = $('#' + chartId).attr('data-fechas');
                                    parametros_actuales = $('#' + chartId).attr('data-parametros');
                                    valores_actuales = $('#' + chartId).attr('data-valores');
                                    rangos_actuales = $('#' + chartId).attr('data-rango');

                                    if (typeof fechas_actuales === "undefined") {} else {
                                        lista_fechas = fechas_actuales.split('||');

                                        fecha_inicial = lista_fechas[0];
                                        fecha_final = lista_fechas[1];

                                        temporal_fechas = fecha_inicial.split('T');
                                        dia_inicial = temporal_fechas[0];
                                        hora_inicial = temporal_fechas[1];

                                        temporal_fechas = fecha_final.split('T');
                                        dia_final = temporal_fechas[0];
                                        hora_final = temporal_fechas[1];

                                        $('#dia_inicial').val(dia_inicial.split('-').reverse().join('/'));
                                        $('#hora_inicial').val(hora_inicial);

                                        $('#dia_final').val(dia_final.split('-').reverse().join('/'));
                                        $('#hora_final').val(hora_final);
                                    }

                                    if (typeof parametros_actuales === "undefined") {} else {
                                        lista_parametros = parametros_actuales.split(',');
                                        lista_valores = valores_actuales.split(',');

                                        $('.filtros').each(function() {
                                            activo = 0
                                            valor = $(this).val();

                                            $.each(lista_parametros, function(index, value) {
                                                if (valor == value) {
                                                    activo = 1;

                                                    $.each(lista_valores, function(index_v, value_v) {
                                                        data_valores = value_v.split('||');

                                                        $.each(data_valores, function(index_d, value_d) {
                                                            if (valor == value_d) {
                                                                valor_minimo = data_valores[1];
                                                                valor_maximo = data_valores[2];
                                                                valor_codigo = data_valores[3];
                                                            }
                                                        });
                                                    });
                                                }
                                            });

                                            if (activo == 1) {
                                                $.each($(".normas_" + valor + " input"), function(index_x, value_x) {
                                                    if ($(this).val() == valor_codigo) {
                                                        $(this).prop('checked', true);
                                                    }
                                                });
                                                $(".normas_" + valor).addClass('mostrar-normas');
                                                $(this).prop('checked', true);
                                                $(this).attr('data-minimo', valor_minimo);
                                                $(this).attr('data-maximo', valor_maximo);
                                            }
                                        });
                                    }

                                    $('.rango_fechas').removeClass('activo');

                                    $('.rango_fechas[data-opcion="' + rangos_actuales + '"]').addClass('activo');

                                    if (rangos_actuales == "P") {
                                        $(".fechas-valores").fadeIn();
                                    }

                                    $(".accordion-header").click(function() {
                                        var content = $(this).next(".accordion-content");

                                        if (!content.is(":visible")) {
                                            $(".accordion-content:visible").slideUp();

                                            content.slideDown();
                                        }
                                    });

                                    posicionY = $('.activo').offset().top;
                                    $('html, body').animate({
                                        scrollTop: posicionY
                                    }, 'slow');
                                    $('.barra').css('position', 'absolute');
                                    $('.barra').css('top', (posicionY - 250) + 'px');
                                },
                                load: function() {
                                    var chart = this;
                                    var chartId = chart.renderTo.id;

                                    var hasData = chart.series.some(function(series) {
                                        return series.data.length > 0;
                                    });

                                    chart.renderer.button('Eliminar', 15, 15, function() {
                                            opcion = confirm("Esta seguro que quiere eliminar este grafico?");
                                            if (opcion == true) {
                                                EnviarDatos();
                                                $("#" + chartId).remove();
                                                return false;
                                            }
                                        }, {
                                            zIndex: 3
                                        })
                                        .attr({
                                            zIndex: 3
                                        })
                                        .add();
                                }
                            }
                        },
                        title: {
                            text: ' ',
                        },
                        xAxis: [{
                            type: 'datetime',
                            labels: {
                                format: '{value:%e/%m}',
                                style: {
                                    fontWeight: 'bold'
                                }
                            },
                            title: {
                                text: 'Fecha'
                            },
                            categories: data[0].categorias,
                            crosshair: true,
                            lineColor: '#000000',
                            lineWidth: 2
                        }],
                        yAxis: etiquetas_listas,
                        tooltip: {
                            crosshairs: true,
                            shared: true,
                            valueDecimals: 3
                        },
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        },
                        series: data_serie,
                        credits: false,
                        exporting: {
                            buttons: {
                                contextButton: {
                                    menuItems: [
                                        'viewFullscreen',
                                        'printChart',
                                        'downloadPNG',
                                        'downloadJPEG',
                                        'downloadPDF',
                                        'downloadSVG',
                                        'downloadCSV',
                                        'downloadXLS',
                                        'viewDataTable'
                                    ]
                                }
                            }
                        }
                    });
                }
            });
        }

        function EnviarDatos() {
            var csrfToken = $('input[name="_token"]').val();
            var orden = 1;

            var datos_enviar = {};

            $(".graficos").each(function(index) {
                var id = $(this).attr('id');
                var parametros = $(this).attr('data-parametros');
                var valores = $(this).attr('data-valores');
                var fechas = $(this).attr('data-fechas');
                var rango = $(this).attr('data-rango');

                var data_individual = id + "###" + parametros + "###" + valores + "###" + fechas + "###" + orden + "###" + rango;

                datos_enviar['individual_' + index] = data_individual;
                orden++;
            });

            datos_enviar['_token'] = csrfToken;

            $.ajax({
                url: '{{ route("grabar-graficos") }}',
                method: 'POST',
                data: datos_enviar,
                success: function(response) {
                    console.log("ok");
                },
                error: function(response) {
                    console.log("error");
                }
            });
        }
    </script>

    @endsection