{{-- KPI - Indicadores de gestión, común a las gemelas (MigracionLayout.MD L3, kit ui-ctc):
     importación (rkpi / searchkpi, KPI.index) y exportación (rexkpi / searchexkpi, ExKPI.index).
     Variables que pone cada index: $ruta (migas), $accion (URL del formulario), $descarga (URL de "Generar reporte"),
     $detalle ('/rkpidetalle/' o '/rexkpidetalle/'), $codificarDetalle (exportación cambia el primer ? por +++ y la
     primera / por --- en el nombre, como antes), $conTablasCentral (importación, grupo 27: iframes de Central).
     Lo del controlador llega igual que antes: $mediciones, $kpi, $chart, $columname, $IdMedicion, $Fechaini, $Fechafin. --}}
@php
    if ($Fechaini == null) {
        $Fechaini = date('Y-m-d', strtotime(date('Y-m-d') . '- 1 month'));
    }
    if ($Fechafin == null) {
        $Fechafin = old('fecha', date('Y-m-d'));
    }
    $columname = $columname ?? [];
    $hayDatos = count($kpi) > 0;

    // Total (suma de las columnas nro / total, igual que la fila TOTAL de antes) e indicadores de cumplimiento si la
    // medición los trae.
    $tot = 0;
    $cumple = null;
    $noCumple = null;
    foreach ($kpi as $fila) {
        foreach ($fila as $nombre => $valor) {
            if ($nombre == 'nro' || $nombre == 'total') { $tot += (float) $valor; }
            if ($nombre == 'cumple') { $cumple = ($cumple ?? 0) + (float) $valor; }
            if ($nombre == 'no_cumple') { $noCumple = ($noCumple ?? 0) + (float) $valor; }
        }
    }
    $formatoTotal = fn ($n) => number_format($n, floor($n) == $n ? 0 : 2, ',', '.');

    // Gráfica: la misma que armaba el controlador (App\Charts\TorreControl, Chart.js 2), como datos; la pinta
    // kpiDibujarGrafica con los colores del tema.
    $grafica = null;
    if ($hayDatos && $chart && count($chart->datasets)) {
        $grafica = [
            'type'     => $chart->formatType(),
            'labels'   => array_values((array) $chart->labels),
            'datasets' => json_decode($chart->formatDatasets(), true),
            'options'  => json_decode($chart->formatOptions(true), true),
        ];
    }
@endphp
<x-app-layout titulo="KPI - Indicadores de Gestión">
    @push('estilos')
        {{-- Chart.js 2 (el mismo que cargaba planti), solo en esta pantalla. --}}
        <script src="{{ asset('vendors/Chart.js/dist/Chart.min.js') }}"></script>
        <script>
            // Dibuja (o redibuja al cambiar el tema) la gráfica cuya configuración viaja en data-grafica.
            // Textos, líneas y colores salen de los tokens (layout.md §6.8): serie con el acento; en tortas, acento,
            // secundario y luego la paleta de siempre.
            window.kpiDibujarGrafica = function (nodo) {
                if (!window.Chart || !nodo.dataset.grafica) { return; }
                var css = getComputedStyle(document.documentElement);
                var token = function (n, d) { return css.getPropertyValue(n).trim() || d; };
                var texto = token('--texto', '#16161A'), suave = token('--texto-suave', '#6E6E7A');
                var borde = token('--borde', '#E4E4E7'), fuente = token('--fuente', 'sans-serif');
                var acento = token('--acento', '#2e7d32'), secundario = token('--secundario', '#5BCBC4');
                var superficie = token('--superficie', '#FFFFFF');
                var conAlfa = function (color, alfa) {
                    var c = document.createElement('canvas').getContext('2d');
                    c.fillStyle = color;
                    var v = c.fillStyle;
                    if (v.charAt(0) !== '#') { return v; }
                    return 'rgba(' + parseInt(v.substr(1, 2), 16) + ',' + parseInt(v.substr(3, 2), 16) + ',' + parseInt(v.substr(5, 2), 16) + ',' + alfa + ')';
                };
                var paleta = [acento, secundario, '#AFB2B2', '#FF33FF', '#FFFF99', '#00B3E6', '#E6B333', '#3366E6', '#999966',
                    '#99FF99', '#B34D4D', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#FF99E6', '#CCFF1A',
                    '#FF1A66', '#E6331A', '#33FFCC', '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', '#66664D',
                    '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
                    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#FF3380', '#CCCC00', '#66E64D', '#4D80CC',
                    '#9900B3', '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

                Chart.defaults.global.defaultFontColor = suave;
                Chart.defaults.global.defaultFontFamily = fuente;
                Chart.defaults.scale.gridLines.color = borde;

                var config = JSON.parse(nodo.dataset.grafica);
                var porSector = ['pie', 'doughnut', 'polarArea'].indexOf(config.type) !== -1;
                (config.datasets || []).forEach(function (d) {
                    if (porSector) {
                        d.backgroundColor = paleta;
                        d.borderColor = superficie;
                    } else if (config.type === 'line' || config.type === 'radar') {
                        d.borderColor = acento;
                        d.backgroundColor = conAlfa(acento, 0.15);
                        d.pointBackgroundColor = acento;
                    } else {
                        d.backgroundColor = acento;
                        d.borderColor = acento;
                    }
                });
                var opciones = config.options || {};
                if (opciones.title) {
                    opciones.title.fontColor = texto;
                    opciones.title.fontFamily = fuente;
                }
                opciones.legend = Object.assign({}, opciones.legend, { labels: Object.assign({}, (opciones.legend || {}).labels, { fontColor: texto }) });

                if (nodo._grafica) { nodo._grafica.destroy(); }
                var lienzo = nodo.querySelector('canvas');
                nodo._grafica = new Chart(lienzo.getContext('2d'), {
                    type: config.type,
                    data: { labels: config.labels, datasets: config.datasets },
                    options: opciones,
                });
            };
        </script>
    @endpush

    <x-pagina>
        <x-encabezado-pagina :ruta="$ruta" titulo="KPI - Indicadores de Gestión">
            @if ($hayDatos)
                <x-slot name="acciones">
                    <x-enlace-boton :href="$descarga">
                        <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Generar reporte
                    </x-enlace-boton>
                </x-slot>
            @endif
        </x-encabezado-pagina>

        @if (Session::has('success'))
            <x-alerta tipo="exito">{{ Session::get('success') }}</x-alerta>
        @endif

        @if ($errors->any())
            <x-alerta tipo="error">
                <ul class="list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </x-alerta>
        @endif

        {{-- Filtros: el mismo POST de antes (cboMedicion, txtFechaini, txtFechafin) --}}
        <x-tarjeta titulo="Medición">
            <form method="post" action="{{ $accion }}" class="grid items-end gap-4 sm:grid-cols-2 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_auto]">
                @csrf
                <x-campo etiqueta="Medición" para="cboMedicion">
                    <x-select name="cboMedicion" id="cboMedicion" required>
                        <option value="">Seleccione una opción</option>
                        @foreach ($mediciones as $fil)
                            <option value="{{ $fil->id }}" @if ($fil->id == $IdMedicion) selected @endif>{{ $fil->medicion }}</option>
                        @endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Fecha desde" para="txtFechaini">
                    <x-input type="date" name="txtFechaini" id="txtFechaini" required :value="$Fechaini" />
                </x-campo>
                <x-campo etiqueta="Fecha hasta" para="txtFechafin">
                    <x-input type="date" name="txtFechafin" id="txtFechafin" required :value="$Fechafin" />
                </x-campo>
                <div>
                    <x-button type="submit" class="w-full"><x-icono nombre="magnifying-glass" /> Buscar</x-button>
                </div>
            </form>
        </x-tarjeta>

        @if (!$hayDatos && $IdMedicion)
            <x-alerta tipo="info">La medición no arrojó resultados en ese rango de fechas.</x-alerta>
        @endif

        @if ($hayDatos)
            @if (!empty($conTablasCentral))
                {{-- Grupo 27: tablas dinámicas de Central, como antes --}}
                @forelse ($tabla_dinamica ?? [] as $rutaCentral)
                    @if ($rutaCentral != '')
                        <iframe src="{{ $rutaCentral }}" title="Tabla dinámica" class="block h-[500px] w-full rounded-xl border border-[var(--borde)] bg-white"></iframe>
                    @else
                        <p class="text-[13px] text-[var(--texto-tenue)]">Sin información.</p>
                    @endif
                @empty
                @endforelse
            @else
                {{-- Indicadores de la medición (solo lectura): mismos totales de la tabla --}}
                <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
                    <x-indicador estatico titulo="Registros" :valor="count($kpi)" />
                    <x-indicador estatico titulo="Total" :valor="$formatoTotal($tot)" />
                    @if ($cumple !== null)
                        <x-indicador estatico titulo="Cumple" :valor="$formatoTotal($cumple)" :total="$tot > 0 ? $formatoTotal($tot) : null"
                                     :porcentaje="$tot > 0 ? $cumple * 100 / $tot : null" :insignia="false" />
                    @endif
                    @if ($noCumple !== null)
                        <x-indicador estatico titulo="No cumple" :valor="$formatoTotal($noCumple)" :total="$tot > 0 ? $formatoTotal($tot) : null"
                                     :porcentaje="$tot > 0 ? $noCumple * 100 / $tot : null" :insignia="false" />
                    @endif
                </div>

                <div class="grid items-start gap-5 xl:grid-cols-2">
                    <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
                        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
                            <h2 class="text-[15px] font-bold text-[var(--texto)]">Resultado</h2>
                            <p class="text-[12px] text-[var(--texto-suave)]">Doble clic en una fila para ver su detalle</p>
                        </div>
                        <div class="ctc-tabla-caja" style="--alto-tabla: 30rem">
                            <table class="ctc-tabla">
                                <thead>
                                    <tr>@foreach ($columname as $fil)<th>{{ strtoupper($fil) }}</th>@endforeach</tr>
                                </thead>
                                <tbody>
                                    @foreach ($kpi as $fil)
                                        {{-- Doble clic: detalle de la fila en otra ventana (igual que antes) --}}
                                        <tr class="cursor-pointer" title="Doble clic para ver el detalle"
                                            data-medicion="{{ $IdMedicion }}" data-nombre="{{ $fil->nombre ?? '' }}"
                                            data-ini="{{ $Fechaini }}" data-fin="{{ $Fechafin }}"
                                            ondblclick="kpiAbrirDetalle(this.dataset)">
                                            @foreach ($fil as $nombre => $valor)
                                                @if ($valor === null || $valor === '')
                                                    <td class="text-[var(--texto-tenue)]">—</td>
                                                @elseif (is_numeric($valor))
                                                    <td class="whitespace-nowrap text-right tabular-nums">{{ $valor }}</td>
                                                @else
                                                    <td>{{ $valor }}</td>
                                                @endif
                                            @endforeach
                                        </tr>
                                    @endforeach
                                    <tr data-sin-hover class="bg-[var(--superficie-2)] font-semibold">
                                        <td colspan="{{ max(count($columname) - 1, 1) }}">TOTAL</td>
                                        <td class="whitespace-nowrap text-right tabular-nums">{{ $formatoTotal($tot) }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </section>

                    <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)] p-4">
                        @if ($grafica)
                            <div class="relative h-[420px] w-full" data-grafica="{{ json_encode($grafica, JSON_INVALID_UTF8_SUBSTITUTE) }}"
                                 x-data x-init="kpiDibujarGrafica($el)" x-on:tema-cambiado.window="kpiDibujarGrafica($el)">
                                <canvas aria-label="Gráfica de la medición" role="img"></canvas>
                            </div>
                        @endif
                    </section>
                </div>
            @endif
        @endif
    </x-pagina>

    @push('scripts')
        <script>
            // Abre el detalle de la fila en otra ventana, con la misma URL de antes.
            window.kpiAbrirDetalle = function (d) {
                var pro = d.nombre;
                var url;
                @if (!empty($codificarDetalle))
                    pro = pro.replace('?', '+++');
                    pro = pro.replace('/', '---');
                    url = {{ \Illuminate\Support\Js::from($detalle) }} + d.medicion + '/' + pro + '/' + d.ini + '/' + d.fin;
                    window.open(url);
                @else
                    url = {{ \Illuminate\Support\Js::from($detalle) }} + d.medicion + '/' + pro + '/' + d.ini + '/' + d.fin;
                    window.open(url, 'width=850, height=600');
                @endif
            };
        </script>
    @endpush
</x-app-layout>