@extends('header_nuevo_generico')
@section('styles')
    <link rel="stylesheet" href="{{ URL::asset('/Libreria_CA/css/vista_generica.css') }}">
    <style>
        .api-nav{
            width:250px;
            border-top-left-radius: 1.5rem !important;
            border-top-right-radius: 1.5rem !important;
            border: 1px solid white !important;
            text-align: center;
        }
        .card-procesos{
            border-radius: 1.0rem !important;
            width:250px;
            height:150px;
        }

        .card-procesos-cuerpo{
            border-radius: 1.0rem !important;
            width:450px;
            height:172px;
        }
        .graficos_style{
            border-radius: 1.0rem !important;
            height:350px !important;
            
        }

        .card-sin-datos{
            border-radius: 1.0rem !important;
            width:250px;
            height:150px;
        }

        .info-icon .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 100%;
            left: 98%;
            transform: translateX(-100%); /* Ajuste para alinear a la derecha */
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        /* Flechita posicionada a la derecha */
        .info-icon .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            right: 10px; /* Posición desde la derecha */
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }
        
        .info-icon:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        .periodo-btn {
            border: 1px solid #1a4e3b;
            background-color: white;
            color: #1a4e3b;
            border-radius: 20px;
            padding: 5px 20px;
            font-weight: 500;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .periodo-btn.active {
            background-color: #d0f0e4; /* verde suave */
            color: #1a4e3b;
            border: none;
        }
    </style>
@endsection
@section('main')
<input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">
<div class="rectangle_bg_backend align-items-start pt-5 pb-5 mt-5 mb-5">
    <div class="d-flex flex-column" style="width: 100%;">
        <!-- Título y breadcrumb -->
        <div class="d-flex align-items-center mb-3 pt-3">
            <h1 class="title_page mb-0" style="font-size: 1.5rem; font-weight: 500;">Gestor de APIs</h1>
        </div>
        
        <!-- Barra de navegación -->
        <div class="nav-apis nav-container" style="border-bottom: 1px solid #dee2e6;">
            <ul class="nav nav-tabs border-0">
                <li class="nav-item rounder">
                    <a class="nav-link api-nav text-secondary fs-7 me-1 " href="#" disabled style="background-color: #8fa88d !important; color: white !important;">Clientes y APIs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link api-nav active fs-7 me-1" aria-current="page" href="#" style="color: black; border-bottom: 2px solid #0d6efd;">Supervisión de APIs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link api-nav text-secondary fs-7" href="#" disabled style="background-color: #8fa88d !important; color: white !important;">Información de APIs</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div style="display: flex; justify-content: center; align-items: center; width: 100%;">
    <div class="content-target">   
        <div class="content-box">
            <div class="mt-2">   
                <div id="contenedor">
                         <!-- TOP BOTONES Y SELECT -->
                        <div id="contenedor-botones" class="d-flex flex-wrap align-items-center gap-3 mt-3 mb-4">
                            <!-- Botones -->
                            <button id="periodo_actual" class="btn btn-success d-none">Actual</button>
                            <button id="periodo_diario" class="btn periodo-btn">Diario</button>
                            <button id="periodo_mensual" class="btn periodo-btn active" value="{{ $mesboton }}">Mensual</button>
                            <!-- Select Mes -->
                            <select class="form-select" id="mes_seleccion" style="width: auto;" onchange="this.value">
                                <option value="1">Enero</option>
                                <option value="2">Febrero</option>
                                <option value="3">Marzo</option>
                                <option value="4">Abril</option>
                                <option value="5">Mayo</option>
                                <option value="6">Junio</option>
                                <option value="7">Julio</option>
                                <option value="8">Agosto</option>
                                <option value="9">Septiembre</option>
                                <option value="10">Octubre</option>
                                <option value="11">Noviembre</option>
                                <option value="12">Diciembre</option>
                            </select>
                            <select class="form-select" id="fecha_seleccion" style="width: auto;" disabled>
                                <!-- Las opciones se llenarán dinámicamente -->
                            </select>
                            <!-- Select APIs -->
                            <select id="producto" class="form-select ms-auto" style="width: auto;">
                                <option value="" selected>Todas las APIs</option>
                                @foreach($productosApis as $producto)
                                    <option value='{{$producto->producto}}'>{{strtoupper($producto->nombre_producto)}}</option>
                                @endforeach
                            </select>

                            <!-- Select Clientes -->
                            <select id="cliente" class="form-select" style="width: auto;">
                                <option value="" selected>Todos los clientes</option>
                                @foreach($clientesApis as $cliente)
                                    <option value="{{$cliente->cliente}}">{{strtoupper($cliente->nombre_cliente)}}</option>                                
                                @endforeach
                            </select>
                        </div>                        
                                       
                    <!-- Primera fila de tarjetas métricas -->
                    <div class="row g-3 mb-4">
                        <!-- Contenedor de tarjetas pequeñas -->
                        <div class="col-md-6">
                            <div class="d-flex flex-wrap gap-3">
                                <!-- Card 1 -->
                                 
                               <div class="card-procesos card shadow p-3 flex-grow-1" style="min-width 200px;">
                                    <div class="d-flex justify-content-between">
                                        <small class="text fs-7 pe-2">SOLICITUDES TOTALES</small>
                                            
                                         <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text">Total de llamadas realizadas a la API, incluyendo aciertos y errores</span>
                                    </span>
                                    </div>   
                                    <small class="mes-consultado text-muted fs-7 pe-2">{{ $mesConsultado }}</small>
                                    @if(isset($solicitudesTotales->cantidad_total) && !is_null($solicitudesTotales->cantidad_total))
                                        <h3 class="fs-2 mt-4 text-start "id="Soli_cant"><b>{{ $solicitudesTotales->cantidad_total }} <!--<span class="text-success">↑</span>--></b></h3>
                                    @else
                                        <div class="card-body text-center">
                                            <div class="">
                                                <i class="bi bi-database-x fs-1 text-danger"></i>
                                            </div>
                                            <h5 class="text-muted mb-2">Sin datos disponibles</h5>
                                        </div>
                                    @endif                                    
                                </div>
                                                              

                                <!-- Card 2 -->
                                <div class="card-procesos card shadow p-3 flex-grow-1" style="min-width 200px;">
                                    <div class="d-flex justify-content-between">
                                        <small class="text fs-7 pe-2" >TIEMPO DE PROCESAMIENTO</small>
                                         <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text">Tiempo que transcurre entre que llega la solicitud hasta que sale la respuesta.</span>
                                    </span>
                                    </div>
                                    <small class="mes-consultado text-muted fs-7 pe-2">{{ $mesConsultado }}</small>
                                    @if(isset($tiempoPromedioResp) && !is_null($tiempoPromedioResp))
                                        <h3 class="fs-2 mt-4 text-start" id="tempPros"><b>{{ number_format($tiempoPromedioResp, 2, '.', '') }} seg <!-- <span class="text-success">↓</span> --></b></h3>
                                    @else
                                        <div class="card-body text-center">
                                            <div class="">
                                                <i class="bi bi-database-x fs-1 text-danger"></i>
                                            </div>
                                            <h5 class="text-muted mb-2">Sin datos disponibles</h5>
                                        </div>
                                    @endif  
                                </div>

                                <!-- Card 3 -->
                                <div class="card-procesos card shadow p-3 flex-grow-1" style="min-width 200px;">
                                    <div class="d-flex justify-content-between">
                                        <small class="text fs-7 pe-2">ÚLTIMA CONSULTA EXITOSA RENAPER</small>
                                         <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text">Fecha y hora de la última consulta que se realizó exitosamente a Renaper.</span>
                                    </span>
                                    </div>
                                    <!-- <h3 class="fs-4 mt-4 text-start"><b>24/02/25 17:55hs</b></h3> -->
                                    <span class="text-start mt-4" style="font-size: 50px;">🏗️</span>
                                    <!-- <h3 style="color: #2ecc71; margin-top: 10px;">
                                        ¡Proximamente!
                                    </h3> -->
                                </div>

                                <!-- Card Aciertos -->
                                <div class="card-procesos card shadow p-3 flex-grow-1" style="min-width 200px;">
                                    <div class="d-flex justify-content-between">
                                        <small class="text fs-7 pe-2">ACIERTOS</small>
                                         <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text">Consumo real, llamadas que dieron una respuesta.</span>
                                    </span>
                                    </div>
                                    <small class="mes-consultado text-muted fs-7 pe-2">{{ $mesConsultado }}</small>
                                    <h3 class="fs-2 mt-4 text-start">
                                        <span id="total_ok"><b>{{ $solicitudesTotales->total_ok }}</b><!--<span class="text-success">↑</span>--></span> 
                                        
                                    </h3>
                                </div>
                            
                                <!-- Card Errores -->
                                <div class="card-procesos card shadow p-3 flex-grow-1" style="min-width 200px;">
                                    <div class="d-flex justify-content-between">
                                        <small class="text fs-7 pe-2">ERRORES</small>
                                         <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text">Llamadas que resultaron e errores de la API. No se cuentan como consumo para el cliente</span>
                                    </span>
                                    </div>
                                    <small class="mes-consultado text-muted fs-7 pe-2">{{ $mesConsultado }}</small>
                                    <h3 class="fs-2 mt-4 text-start">
                                        <span id="total_error"><b>{{ $solicitudesTotales->total_error }}</b><!-- <span class="text-success">↓</span> --></span> 
                                        
                                    </h3>
                                </div>

                                <!-- Card 6 -->
                                <div class="card-procesos card shadow p-3 flex-grow-1" style="min-width 200px;">
                                    <div class="d-flex justify-content-between">
                                        <small class="text fs-7 pe-2">ÚLTIMA CONSULTA EXITOSA ARCA</small>
                                         <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text">Fecha y hora de la última consulta que se realizó exitosamente a ARCA.</span>
                                    </span>
                                    </div>
                                    <span class="text-center" style="font-size: 20px;">🚚 🚚 🚚💨</span>
                                    <!-- <h3 class="text-center" style="color: #2ecc71; margin-top: 10px;">
                                        ¡Proximamente!
                                    </h3> -->
                                    <p class="text-center" style="color: #7f8c8d;">
                                        En construción
                                    </p>
                                    <!-- <h3 class="fs-4 mt-4 text-start"><b>24/02/25 17:45hs</b></h3> -->
                                </div>
                            </div>
                        </div>

                        <!-- Contenedor de tarjeta grande -->
                        <div class="col-md-6">
                            <div class="card-procesos card shadow p-3 h-100  w-100">
                                <div style="
                                    background: #f8f9fa;
                                    border-radius: 8px;
                                    padding: 40px;
                                    text-align: center;
                                    font-family: Arial;
                                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                    height: 100%;
                                    width:100%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                ">
                                    <span style="font-size: 50px;">🚧</span>
                                    <h3 style="color: #2ecc71; margin-top: 10px;">
                                        ¡Proximamente!
                                    </h3>
                                    <p style="color: #7f8c8d;">
                                        En construción
                                    </p>
                                </div>  
                            </div>
                        </div>
                    </div>

                    <!-- Segunda fila de gráficos principales -->
                    <div class="row g-3 mb-4">
                        <!-- Gráfico de Solicitudes Totales -->
                        <div class="col-md-3">
                            <div id="solicitudesTotales" class="graficos_style shadow h-100 w-100 " style=""></div>
                        </div>

                        <!-- Gráfico de APIs con Mayor Consumo -->
                        <div class="col-md-3">
                            <div id="apisConsumo" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>

                        <!-- Gráfico de Clientes con Mayor Consumo -->
                        <div class="col-md-3">
                            <div id="clientesConsumo" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>


                        <!-- Tarjetas de consumo promedio -->
                        <div class="col-md-3">
                            <div class="card-procesos-cuerpo card shadow p-3 w-100 mb-2 justify-content-center">
                                <div class="d-flex justify-content-between">
                                    <small class="text fs-7 pe-2">CONSUMO PROMEDIO POR API*</small>
                                    <span class="info-icon">
                                        <i class="bi bi-info-circle"></i>
                                        <span class="tooltip-text">Promedio = Aciertos totales / Cantidad de APIs disponibles</span>
                                    </span>
                                </div>
                                <small class="mes-consultado text-muted fs-7 pe-2">{{ $mesConsultado }}</small>
                                <h3 class="fs-2 mt-2 text-start">
                                    <span id="consumoPromedioApi"><b>{{ number_format($promedioConsumoApi[0]->promedio_por_api, 0, '.', '') }}<!-- <span class="text-danger">↓</span> --></b></span> 
                                    
                                   <!--  <br><h6 class="fs-7  text-start">Rango : 0000 - 000000</h6> -->
                                </h3>
                                <span class="text-start text-muted fs-7 m-2">*Incluye solo los aciertos</span>
                            </div>
                            <div class="card-procesos-cuerpo card shadow p-3 w-100">
                                <div class="d-flex justify-content-between">
                                    <small class="text fs-7 pe-2">CONSUMO PROMEDIO POR CLIENTE*</small>
                                    <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text">Promedio = Aciertos totales / Cantidad de clientes activos</span>
                                    </span>
                                </div>
                                <small class="mes-consultado text-muted fs-7 pe-2">{{ $mesConsultado }}</small>
                                <h3 class="fs-2 mt-2 text-start">
                                    <span id="consumoPromedioCliente"><b>{{ number_format($promedioConsumoCliente[0]->promedio_por_cliente, 0, '.', '') }} <!-- <span class="text-danger">↓</span> --></b></span> 
                                   
                                    <!-- <br><h6 class="fs-7  text-start">Rango : 0000 - 000000</h6> -->
                                </h3>
                                <span class="text-start text-muted fs-7 m-2">*Incluye solo los aciertos</span>
                            </div>
                        </div>
                        
                    </div>               

                    <!-- Cuarta fila de gráficos -->
                    <div class="row g-3 mb-4">
                        <!-- Gráfico de tasa de errores -->
                        <div class="col-md-3">
                            <div id="TasadeErrores" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>
                        <!-- Gráfico de APIs con mas errores -->
                        <div class="col-md-3">
                            <div id="ApimasErrores" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>

                        <!-- Gráfico de codigos de respuesta -->
                        <div class="col-md-3">
                            <div id="CodigosResp" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>

                        <!-- Gráfico de torta con porcentaje -->
                        <div class="col-md-3">
                            <div id="TortaPorcentaje" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>
                    </div>

                    <!-- Quinta fila de gráficos de tiempo -->
                    <div class="row g-3 mb-4">
                        <!-- Gráfico de tiempo de Procesamiento -->
                        <div class="col-md-3">
                            <div id="TiempoProcesamiento" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>

                        <!-- Gráfico de Apis mas Lentas-->
                        <div class="col-md-3">
                            <div id="ApismasLentas" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>

                        <!-- Gráfico de distribucion de tiempos de procesamiento -->
                        <div class="col-md-3">
                            <div id="DistriProce" class="graficos_style shadow h-100 w-100" style=""></div>
                        </div>

                        
                        <div class="col-md-3">
                            <div class="card-procesos-cuerpo card shadow p-3 w-100 h-100 mb-2">
                                <div class="d-flex justify-content-between">
                                    <small class="text fs-7 pe-2">PROMEDIO DE TIEMPO DE PROCESAMIENTO</small>
                                    <span class="info-icon">
                                        <i class="bi bi-info-circle">

                                        </i>
                                        <span class="tooltip-text text-start fs-7">Primer dato: Promedio de tiempo de procesamiento según filtros o general sin ellos. <br></br>
                                            Renaper: promedio del servidor de Renaper <br></br>
                                            ARCA: promedio del servidor de ARCA <br></br>
                                            Worldsys: promedio del servidor de Worldsys.</span>
                                    </span>
                                </div>
                                <small class="mes-consultado text-muted fs-7 pe-2">{{ $mesConsultado }}</small>

                                        <!-- API Cliente -->
                                    <div class="mt-2 border-bottom pb-2">
                                        <div class="d-flex justify-content-between">
                                            <span class="fw-semibold nombre_tiempoProce"> {{ $tiempoProce[0]->nombre_producto }} - {{ $tiempoProce[0]->nombre_cliente }}</span>
                                            <span class="fw-bold text-dark promedio_duracion ">{{ $tiempoProce[0]-> promedio_duracion }} </span>
                                        </div>
                                        <!-- <small class="text-muted">Rango: 142ms - 547ms</small> -->
                                    </div>

                                    <!-- RENAPER -->
                                    <div class="mt-2 border-bottom pb-2">
                                        <div class="d-flex justify-content-between">
                                            <span class="fw-semibold">RENAPER</span>
                                            <span class="fw-bold text-dark renaper_duracion">{{ $tiempoProce[0]-> promedio_duracion_renaper }} </span>
                                        </div>
                                        <!-- <small class="text-muted">Rango: 247ms - 544ms</small> -->
                                    </div>

                                    <!-- ARCA -->
                                    <div class="mt-3 border-bottom pb-2">
                                        <div class="d-flex justify-content-between">
                                            <span class="fw-semibold">ARCA</span>
                                            <span class="fw-bold text-dark arca_duracion">{{ $tiempoProce[0]-> promedio_duracion_arca }} </span>
                                        </div>
                                        <!-- <small class="text-muted">Rango: 188ms - 687ms</small> -->
                                    </div>

                                    <!-- WORLDDSYS -->
                                    <div class="mt-3">
                                        <div class="d-flex justify-content-between">
                                            <span class="fw-semibold">WORLDDSYS</span>
                                            <span class="fw-bold text-dark worlddsys_duracion">{{ $tiempoProce[0]-> promedio_duracion_worlddsys}} </span>
                                        </div>
                                        <!-- <small class="text-muted">Rango: 201ms - 230ms</small> -->
                                    </div>                                 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Recalculando -->
    <div class="modal fade" id="modalRecalculando" tabindex="-1" aria-labelledby="modalRecalculandoLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center">
                <div class="modal-body py-5">
                    <div class="spinner-border text-fidelitas mb-3" role="status">
                        <span class="visually-hidden">Cargando...</span>
                    </div>
                    <h5 id="modalRecalculandoLabel" class="mb-0">Recalculando...</h5>
                </div>
            </div>
        </div>
    </div>
</div>





@endsection
@section('funcionesJS')
    <script src="{{ asset('/HighCharts/code/highcharts.js') }}"></script>
    <script src="{{ asset('/HighCharts/code/modules/heatmap.js')}}"></script>
    <script src="{{ asset('/HighCharts/code/modules/accessibility.js')}}"></script>
    <script src="{{ asset('/Libreria_CA/Js/apiDashboard.js')}}"></script>
    <script>     
        let datosparames = @json($totalPromedioRespuestaGraf);
        let categorias = @json($categorias);
       // console.log(categorias);
        let aciertos = @json($aciertos);
        let errores = @json($errores);
        let totalconsumos = @json($totales);
        let mesConsultado = @json($mesConsultado);        

        let aciertos_1 = @json($solicitudesTotales->total_ok);
        let errores_1 = @json($solicitudesTotales->total_error);
        let totalconsumos_1 = @json($solicitudesTotales->cantidad_total);

        let productos = @json($producto); // Nombres de las APIs
        let consumos = @json($total_registros); // Valores numéricos
        let nombre_cliente = @json($nombre_cliente); // Nombres de las APIs
        let consumo_total = @json($consumo_total); // Valores numéricos
        let filteredDataConsumo = consumo_total.filter(value => value > 300);
        let mes_promedio = @json($mes_tiempoPromedio); // Nombres de las APIs
        let promedio_duracion = @json($promedio_duracion); // Valores numéricos
        //let tiempo_api_resp = @json($tiempo_api_resp);
        let tiempo_api_resp = @json($tiempo_api_resp).map(value => parseFloat(value.toFixed(3)));
        let nombre_api = @json($nombre_api); 
        let codigo_resultado = @json($codigo_resultado); 
        let cantidad_Respuesta = @json($cantidad_Respuesta);
        // DistriProce
        let rango_tiempo = @json($rango_tiempo);
        let cantidad_Tiempo = @json($cantidad_Tiempo);

        let agrupado = @json($agrupado); // ['Oct', 'Nov', ...]
        let series = @json($series);  // [{ name: 'ERROR', data: [...] }, ...]
        let nombre_producto_errores = @json($nombre_producto_errores);
        let errores_por_tipo = @json($errores_por_tipo);
        // 1. Filtrado nuclear (no pasa ni un cero)
        let errores_filtrados = Object.entries(errores_por_tipo);
        let subtitulo = @json($subtitulo);

        $(document).ready(function() {
            solicitudesTotales();
            TasaAciertos();
            apisConsumo();
            clientesConsumo(); //-- > todavia no
            TiempoProcesamiento();
            codigoResp();
            DistriProce();
            TasadeErrores();
            ApimasErrores();
            ApismasLentas();

            $('[data-bs-toggle="tooltip"]').each(function() {
                new bootstrap.Tooltip(this);
            });
            /**Selecciona el mes q viene de base */
            const mesesANumeros = {
                'enero': 1, 'febrero': 2, 'marzo': 3, 'abril': 4, 'mayo': 5, 'junio': 6,
                'julio': 7, 'agosto': 8, 'septiembre': 9, 'octubre': 10, 'noviembre': 11, 'diciembre': 12
            };
            
            const mesConsultado_select = {!! json_encode(strtolower($mesConsultado)) !!}; 
          
            $('#mes_seleccion').val(mesesANumeros[mesConsultado_select]); 


            const selectFecha = $('#fecha_seleccion');
            const hoy = new Date();

            const meses = [
                "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
                "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
            ];

            for (let i = 0; i <= 15; i++) {
                let fecha = new Date();
                fecha.setDate(hoy.getDate() - i); // Restar días

                let dia = fecha.getDate();
                let mesNumero = String(fecha.getMonth() + 1).padStart(2, '0'); //numero del mes
                let mes = meses[fecha.getMonth()]; // Nombre del mes
                let anio = fecha.getFullYear();

                let valor = `${anio}-${mesNumero}-${dia}`;
                let texto = `${dia} de ${mes}`;      // Ej: 28 de Abril 

                selectFecha.append(new Option(texto, valor));
            }
            /** */
            // $('#mes_seleccion').on('change', function () {
            //  let mesSeleccionado = $(this).val(); // valor 1-12
            //  meses(mesSeleccionado)
            //  });   

            // $('#periodoMensual').on('click', function () {
            //     const mesTexto = $(this).val().trim().toLowerCase(); // obtenemos el texto del botón
            //     const mesSeleccionado = mesesANumeros[mesTexto];
            //     //console.log(mesSeleccionado);
            //     $('#mes_seleccion').val(mesSeleccionado); 
            //     if (mesSeleccionado) {
            //         meses(mesSeleccionado); // tu función de cambio
            //     } else {
            //         console.warn('Mes no reconocido:', mesTexto);
            //     }
            // });

            // $('#periodoDiario').on('click', function () {               
            //     diario();               
            // });

            // $('#producto').on('change', function () {               
            //     let idProducto = $(this).val();
            //     filtroProducto(idProducto);                                
            // }); */

            // // Clic en botones de período
            // $('.periodo-btn').on('click', function () {

            //     $('.periodo-btn').removeClass('active');
            //     $(this).addClass('active');
            //     actualizarVista();

            // });

            // // Cambio en cualquier select
            // $('#mes_seleccion, #producto, #cliente').on('change', actualizarVista);
            actualizarSelects();
            $('.periodo-btn').on('click', function () {
                const clickedId = $(this).attr('id');
                $('.periodo-btn').removeClass('active');
                $(this).addClass('active');

                if (clickedId === 'periodo_mensual') {
                    const mesActual = new Date().getMonth() + 1; // JavaScript: 0 = enero
                    $('#mes_seleccion').val(mesActual);
                }
                actualizarSelects();   
                actualizarVista(); // Se ejecuta con el nuevo período
            });

            function actualizarSelects() {
                let periodoActivo = $('.periodo-btn.active').attr('id');

                if (periodoActivo === 'periodo_mensual') {
                    $('#mes_seleccion').show();
                    $('#fecha_seleccion').hide();
                } else if (periodoActivo === 'periodo_diario') {
                    $('#fecha_seleccion').show();
                    $('#mes_seleccion').hide();
                } else {
                    // Si no es ni mensual ni diario (por ejemplo "actual"), ocultamos ambos
                    $('#mes_seleccion').hide();
                    $('#fecha_seleccion').hide();
                }
            }



            // === MANEJO DEL SELECT DE MES ===
            $('#mes_seleccion').on('change', function () {
                actualizarVista(); // Actualiza al cambiar el mes
            });
            // === MANEJO DEL SELECT DE DIA -15 ===
            $('#fecha_seleccion').on('change', function () {
                actualizarVista(); // Actualiza al cambiar el mes
            });
            // === MANEJO DEL SELECT DE PRODUCTO ===
            $('#producto').on('change', function () {
                actualizarVista(); // Actualiza al cambiar el producto
            });

            // === MANEJO DEL SELECT DE CLIENTE ===
            $('#cliente').on('change', function () {
                actualizarVista(); // Actualiza al cambiar el cliente
            });

        }); 

        function meses(mesSeleccionado){
            $.ajax({
                url: '/dashboard-api/filtro-mensual', // poné tu ruta
                method: 'POST',
                data: { mes: mesSeleccionado ,_token: $('#token').val()},
                beforeSend: function(){
                    $('#modalRecalculando').modal('show');
                },
                success: function (response) {            
                    $('#modalRecalculando').modal('hide');
                    
                    const meses = [
                        "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
                        "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
                    ];
                    mesConsultado = meses[mesSeleccionado - 1];                                    
                    //mesConsultado = mesSeleccionado;                        
                    $('.mes-consultado').html(mesConsultado);
                    
                    consumos = response.total_registros;                                                
                    productos = response.productos;
                    apisConsumo();

                    categorias = response.categorias;
                    aciertos = response.aciertos;
                    errores = response.errores;      
                      // alert(response.categorias);   
                    solicitudesTotales();

                    aciertos_1 = response.solicitudesTotales.total_ok;
                    errores_1 = response.solicitudesTotales.total_error;
                    TasaAciertos();

                    agrupado = response.agrupado;
                    series = response.series;
                    //TasadeErrores();     
                    
                    tiempo_api_resp = response.tiempo_api_resp.map(value => parseFloat(value.toFixed(3)));
                    nombre_api = response.nombre_api;                                                 
                    ApismasLentas();

                    promedio_duracion = response.promedio_duracion;
                    //TiempoProcesamiento();     
                    nombre_cliente = response.nombre_cliente; // Nombres de las APIs
                    consumo_total = response.consumo_total; // Valores numéricos
                    filteredDataConsumo = consumo_total.filter(value => value > 300);
                    clientesConsumo();

                    nombre_producto_errores = response.nombre_producto_errores;
                    errores_por_tipo = response.errores_por_tipo;
                    // 1. Filtrado nuclear (no pasa ni un cero)
                    errores_filtrados = Object.entries(errores_por_tipo);
                    ApimasErrores();



                    codigo_resultado = response.codigo_resultado; 
                    cantidad_Respuesta = response.cantidad_Respuesta;
                    codigoResp();

                    // DistriProce
                    rango_tiempo = response.rango_tiempo;
                    cantidad_Tiempo = response.cantidad_Tiempo;
                    DistriProce();

                    let duracionMinimaApi = response.tiempoMayorMenor[0].duracion_minima ?? '';
                    let duracionMaximaApi = response.tiempoMayorMenor[0].duracion_maxima ?? '';

                    // Verifica si los valores son nulos o vacíos
                    if (duracionMinimaApi && duracionMaximaApi || duracionMinimaApi != 0 || duracionMaximaApi != 0  ) {
                        $('#tiempoDuracionMinima').html('<b>' + duracionMinimaApi + ' seg</b>');
                        $('#tiempoDuracionMax').html('<b>' + duracionMaximaApi + ' seg</b>');
                    } else {
                        $('#tiempoDuracionMinima').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                        $('#tiempoDuracionMax').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }


                    let promedioConsumoApi = Math.round(response.promedioConsumoApi[0].promedio_por_api ?? '');
                    if (promedioConsumoApi) {
                        // Si hay datos, actualiza solo el valor numérico
                        $('#consumoPromedioApi').html('<b>' + promedioConsumoApi + '</b>');
                    } else {
                        // Si no hay datos, muestra el mensaje de error
                        $('#consumoPromedioApi').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let promedioClienteConsumo = Math.round(response.promedioConsumoCliente[0].promedio_por_cliente ?? '');
                    if (promedioClienteConsumo) {
                        $('#consumoPromedioCliente').html('<b>' + promedioClienteConsumo + '</b>');
                    } else {
                        $('#consumoPromedioCliente').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let cantidad_total = response.solicitudesTotales.cantidad_total
                
                    if (cantidad_total) {
                        $('#Soli_cant').html('<b>' + cantidad_total + '</b>');
                    } else {
                        $('#Soli_cant').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }
                    
                    const tiempoNum = parseFloat(response.tiempoPromedioResp);
                    let  temp_promedio = tiempoNum.toFixed(2);
                    //console.log(temp_promedio)
                    if (temp_promedio && temp_promedio != '0.00') {
                        $('#tempPros').html('<b>' + temp_promedio + ' seg</b>');
                    } else {
                        $('#tempPros').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let total_error = response.solicitudesTotales.total_error
                
                    if (total_error) {
                        $('#total_error').html('<b>' + total_error + '</b>');
                    } else {
                        $('#total_error').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }  
                    

                    let total_aciertos_card = response.solicitudesTotales.total_ok
                
                    if (total_aciertos_card) {
                        $('#total_ok').html('<b>' + total_aciertos_card + '</b>');
                    } else {
                        $('#total_ok').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }  
                },
                error: function (xhr, status, error) {
                    console.error('Error al obtener datos del mes:', error);
                }
            });
        }

        function diario(){
            $.ajax({
                url: '/dashboard-api/diario', // poné tu ruta
                method: 'POST',
                data: {_token: $('#token').val()},
                beforeSend: function(){
                    $('#modalRecalculando').modal('show');
                },
                success: function (response) {            
                    $('#modalRecalculando').modal('hide');

                    mesConsultado = response.soymes;      //uso Mesconsultado pero en realidad me esta dando el di
                    $('.mes-consultado').html(mesConsultado);

                    consumos = response.total_registros;                                                
                    productos = response.productos;
                    apisConsumo();

                    categorias = response.categorias;
                    aciertos = response.aciertos;
                    errores = response.errores;                        
                    //solicitudesTotales();

                    aciertos_1 = response.solicitudesTotales.total_ok;
                    errores_1 = response.solicitudesTotales.total_error;
                    TasaAciertos();

                    agrupado = response.agrupado;
                    series = response.series;
                    //TasadeErrores();     
                    
                    tiempo_api_resp = response.tiempo_api_resp.map(value => parseFloat(value.toFixed(3)));
                    nombre_api = response.nombre_api;                                                 
                    ApismasLentas();

                    promedio_duracion = response.promedio_duracion;
                    //TiempoProcesamiento();     
                    nombre_cliente = response.nombre_cliente; // Nombres de las APIs
                    consumo_total = response.consumo_total; // Valores numéricos
                    filteredDataConsumo = consumo_total.filter(value => value > 300);
                    clientesConsumo();

                    nombre_producto_errores = response.nombre_producto_errores;
                    errores_por_tipo = response.errores_por_tipo;
                    // 1. Filtrado nuclear (no pasa ni un cero)
                    errores_filtrados = Object.entries(errores_por_tipo);
                    ApimasErrores();



                    codigo_resultado = response.codigo_resultado; 
                    cantidad_Respuesta = response.cantidad_Respuesta;
                    codigoResp();

                    // DistriProce
                    rango_tiempo = response.rango_tiempo;
                    cantidad_Tiempo = response.cantidad_Tiempo;
                    DistriProce();

                    let duracionMinimaApi = response.tiempoMayorMenor[0].duracion_minima ?? '';
                    let duracionMaximaApi = response.tiempoMayorMenor[0].duracion_maxima ?? '';

                    // Verifica si los valores son nulos o vacíos
                    if (duracionMinimaApi && duracionMaximaApi || duracionMinimaApi != 0 || duracionMaximaApi != 0  ) {
                        $('#tiempoDuracionMinima').html('<b>' + duracionMinimaApi + ' seg</b>');
                        $('#tiempoDuracionMax').html('<b>' + duracionMaximaApi + ' seg</b>');
                    } else {
                        $('#tiempoDuracionMinima').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                        $('#tiempoDuracionMax').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }


                    let promedioConsumoApi = Math.round(response.promedioConsumoApi[0].promedio_por_api ?? '');
                    if (promedioConsumoApi) {
                        // Si hay datos, actualiza solo el valor numérico
                        $('#consumoPromedioApi').html('<b>' + promedioConsumoApi + '</b>');
                    } else {
                        // Si no hay datos, muestra el mensaje de error
                        $('#consumoPromedioApi').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let promedioClienteConsumo = Math.round(response.promedioConsumoCliente[0].promedio_por_cliente ?? '');
                    if (promedioClienteConsumo) {
                        $('#consumoPromedioCliente').html('<b>' + promedioClienteConsumo + '</b>');
                    } else {
                        $('#consumoPromedioCliente').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let cantidad_total = response.solicitudesTotales.cantidad_total
            
                    if (cantidad_total) {
                        $('#Soli_cant').html('<b>' + cantidad_total + '</b>');
                    } else {
                        $('#Soli_cant').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    const tiempoNum = parseFloat(response.tiempoPromedioResp[0].segundos);
                    let  temp_promedio = tiempoNum.toFixed(2);
                    //console.log(temp_promedio)
                    if (temp_promedio && temp_promedio != '0.00') {
                        $('#tempPros').html('<b>' + temp_promedio + ' seg</b>');
                    } else {
                        $('#tempPros').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let total_error = response.solicitudesTotales.total_error
            
                    if (total_error) {
                        $('#total_error').html('<b>' + total_error + '</b>');
                    } else {
                        $('#total_error').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }  
                    

                    let total_aciertos_card = response.solicitudesTotales.total_ok
            
                    if (total_aciertos_card) {
                        $('#total_ok').html('<b>' + total_aciertos_card + '</b>');
                    } else {
                        $('#total_ok').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }  
                },
                error: function (xhr, status, error) {
                    console.error('Error al obtener datos del mes:', error);
                }
            });
        }

        function filtroProducto(idProducto){
            $.ajax({
                url: '/dashboard-api/producto', 
                method: 'POST',
                data: { producto: idProducto ,_token: $('#token').val()},
                beforeSend: function(){
                    $('#modalRecalculando').modal('show');
                },
                success: function (response) {            
                    $('#modalRecalculando').modal('hide');

                    nombre_cliente = response.nombre_cliente; 
                    consumo_total = response.consumo_total; 
                    filteredDataConsumo = consumo_total.filter(value => value > 300);
                    clientesConsumo();
                }
            })            
        }

        function actualizarVista() {

            let periodoId = $('.periodo-btn.active').attr('id') || null;
            let periodo = '';

            switch (periodoId) {
                case 'periodo_mensual':
                    periodo = 'mensual';
                    break;
                case 'periodo_diario':
                    periodo = 'diario';
                    break;
                case 'periodo_actual':
                    periodo = 'actual';
                    break;
                default:
                    periodo = 'mensual';
            }

            let mes = $('#mes_seleccion').val();
            let producto = $('#producto').val();
            let cliente = $('#cliente').val();
            let dia = $('#fecha_seleccion').val();
            console.log({ periodo, mes,dia, producto, cliente });

            $.ajax({
                url: '/dashboard-api/filtrado', 
                method: 'POST',
                data: { 
                    periodo: periodo,
                    mes: mes,
                    producto: producto,
                    cliente: cliente,
                    dia: dia,
                    _token: $('#token').val()
                },
                beforeSend: function(){
                    $('#modalRecalculando').modal('show');
                },
                success: function (response) {            
                    $('#modalRecalculando').modal('hide');

                    const meses = [
                        "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
                        "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
                    ];

                    subtitulo = response.subtitulo;
                    //console.log(subtitulo);
                    mesConsultado = meses[mes - 1]; 

                    if(response.periodo == 'diario'){
                        mesConsultado = response.soymes;      //uso Mesconsultado pero en realidad me esta dando el di
                    }

                    $('.mes-consultado').html(mesConsultado);

                    /**tiempos cards */
                    if (response.tiempoProce && response.tiempoProce.length > 0) {
                        const datos = response.tiempoProce[0];

                        $('.nombre_tiempoProce').html(
                            (datos.nombre_producto || '') + ' - ' + (datos.nombre_cliente || '')
                        );
                     //   console.log(datos.promedio_duracion);
                        $('.promedio_duracion').html(datos.promedio_duracion || 'No hay datos disponibles');
                        $('.renaper_duracion').html(datos.promedio_duracion_renaper || 'No hay datos disponibles');
                        $('.arca_duracion').html(datos.promedio_duracion_arca || 'No hay datos disponibles');
                        $('.worlddsys_duracion').html(datos.promedio_duracion_worlddsys || 'No hay datos disponibles');
                    } else {
                        $('.nombre_tiempoProce, .promedio_duracion, .renaper_duracion, .arca_duracion, .worlddsys_duracion')
                            .html('No hay datos disponibles');
                    }

                    consumos = response.total_registros;                                                 
                    productos = response.productos;
                    apisConsumo();

                    categorias = response.categorias;
                    aciertos = response.aciertos;
                    errores = response.errores;      
                    //alert(response.categorias);   
                    solicitudesTotales();


                    aciertos_1 = response.solicitudesTotales.total_ok;
                    errores_1 = response.solicitudesTotales.total_error;
                    TasaAciertos();

                    agrupado = response.agrupado;
                    series = response.series;
                    //TasadeErrores();     
                    
                    tiempo_api_resp = response.tiempo_api_resp.map(value => parseFloat(value.toFixed(3)));
                    nombre_api = response.nombre_api;                                                 
                    ApismasLentas();

                    promedio_duracion = response.promedio_duracion;
                    //TiempoProcesamiento();     
                    nombre_cliente = response.nombre_cliente; // Nombres de las APIs
                    consumo_total = response.consumo_total; // Valores numéricos
                    filteredDataConsumo = consumo_total.filter(value => value > 300);
                    clientesConsumo();

                    nombre_producto_errores = response.nombre_producto_errores;
                    errores_por_tipo = response.errores_por_tipo;
                    // 1. Filtrado nuclear (no pasa ni un cero)
                    errores_filtrados = Object.entries(errores_por_tipo);
                    ApimasErrores();



                    codigo_resultado = response.codigo_resultado; 
                    cantidad_Respuesta = response.cantidad_Respuesta;
                    codigoResp();

                    // DistriProce
                    rango_tiempo = response.rango_tiempo;
                    cantidad_Tiempo = response.cantidad_Tiempo;
                    DistriProce();

                    let duracionMinimaApi = response.tiempoMayorMenor[0].duracion_minima ?? '';
                    let duracionMaximaApi = response.tiempoMayorMenor[0].duracion_maxima ?? '';

                    // Verifica si los valores son nulos o vacíos
                    if (duracionMinimaApi && duracionMaximaApi || duracionMinimaApi != 0 || duracionMaximaApi != 0  ) {
                        $('#tiempoDuracionMinima').html('<b>' + duracionMinimaApi + ' seg</b>');
                        $('#tiempoDuracionMax').html('<b>' + duracionMaximaApi + ' seg</b>');
                    } else {
                        $('#tiempoDuracionMinima').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                        $('#tiempoDuracionMax').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }


                    let promedioConsumoApi = Math.round(response.promedioConsumoApi[0].promedio_por_api ?? '');
                    if (promedioConsumoApi) {
                        // Si hay datos, actualiza solo el valor numérico
                        $('#consumoPromedioApi').html('<b>' + promedioConsumoApi + '</b>');
                    } else {
                        // Si no hay datos, muestra el mensaje de error
                        $('#consumoPromedioApi').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let promedioClienteConsumo = Math.round(response.promedioConsumoCliente[0].promedio_por_cliente ?? '');
                    if (promedioClienteConsumo) {
                        $('#consumoPromedioCliente').html('<b>' + promedioClienteConsumo + '</b>');
                    } else {
                        $('#consumoPromedioCliente').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let cantidad_total = response.solicitudesTotales.cantidad_total
            
                    if (cantidad_total) {
                        $('#Soli_cant').html('<b>' + cantidad_total + '</b>');
                    } else {
                        $('#Soli_cant').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    const tiempoNum = parseFloat(response.tiempoPromedioResp[0].segundos);
                    let  temp_promedio = tiempoNum.toFixed(2);
                    //console.log(temp_promedio)
                    if (temp_promedio && temp_promedio != '0.00') {
                        $('#tempPros').html('<b>' + temp_promedio + ' seg</b>');
                    } else {
                        $('#tempPros').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }

                    let total_error = response.solicitudesTotales.total_error
            
                    if (total_error) {
                        $('#total_error').html('<b>' + total_error + '</b>');
                    } else {
                        $('#total_error').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }  
                    

                    let total_aciertos_card = response.solicitudesTotales.total_ok
            
                    if (total_aciertos_card) {
                        $('#total_ok').html('<b>' + total_aciertos_card + '</b>');
                    } else {
                        $('#total_ok').html('<b style="font-size: 20px;"><i class="bi bi-database-x fs-1 text-danger"></i> Sin datos disponibles</b>');
                    }  
                }
            })   
        }
    </script>
@endsection