{{-- Indicadores KPI V2 (kpi-graph): indicadores configurados en `graficos_kpi`. Resumen en tabla, su gráfica y, si el
     indicador lo tiene, el detalle con su descarga. Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a).
     La gráfica se dibuja con ctcDibujarGrafica (resources/js/ctc.js): antes era un <script> dentro de la respuesta de
     Livewire, que Livewire 3 no ejecuta. --}}
@php
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $celda = function ($valor) use ($vacio) {
        if ($valor === null || $valor === '') { return ['', $vacio]; }
        return [is_numeric($valor) ? 'whitespace-nowrap text-right' : 'min-w-[7rem] text-[12.5px]', e($valor)];
    };
@endphp
<div>
<x-pagina>
    <x-encabezado-pagina ruta="Dashboard · Indicadores" titulo="Indicadores KPI"
                         descripcion="Indicadores generados a partir de la información de nuestros sistemas." />

    @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

    <x-tarjeta titulo="Indicador">
        <div class="grid gap-4 sm:grid-cols-2 {{ $filtroCompania ? 'lg:grid-cols-5' : 'lg:grid-cols-4' }}">
            @if ($filtroCompania)
                <x-campo etiqueta="Importador" para="idCompania">
                    <x-select id="idCompania" wire:model="idCompania">
                        <option value="">Todos</option>
                        @foreach ($lstCompanias as $id => $nombre)<option value="{{ $id }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
            @endif
            <x-campo etiqueta="Indicador KPI" para="idKpi">
                <x-select id="idKpi" wire:model="idKpi">
                    <option value="">Seleccione un indicador</option>
                    @foreach ($indicadores as $id => $nombre)<option value="{{ $id }}">{{ $nombre }}</option>@endforeach
                </x-select>
            </x-campo>
            <x-campo etiqueta="Fecha inicial" para="fechaInicial" ayuda="Vacía: 1 de enero.">
                <x-input type="date" id="fechaInicial" wire:model="fechaInicial" />
            </x-campo>
            <x-campo etiqueta="Fecha final" para="fechaFinal" ayuda="Vacía: hoy.">
                <x-input type="date" id="fechaFinal" wire:model="fechaFinal" />
            </x-campo>
            <div class="flex items-start pt-6">
                <x-button type="button" wire:click="consultarData()" wire:loading.attr="disabled" wire:target="consultarData"><x-icono nombre="magnifying-glass" /> Consultar</x-button>
            </div>
        </div>
        <p wire:loading.flex wire:target="consultarData" class="mt-3 items-center gap-1.5 text-[12px] text-[var(--texto-suave)]" role="status">
            <x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Generando la consulta; puede tardar unos segundos…
        </p>
    </x-tarjeta>

    @if ($consultado && !$resultado)
        <x-alerta tipo="aviso">El resultado ya no está disponible: consulte de nuevo.</x-alerta>
    @elseif ($resultado)
        <div class="grid gap-5 xl:grid-cols-2">
            <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
                <div class="border-b border-[var(--borde)] px-5 py-3">
                    <h2 class="text-[15px] font-bold text-[var(--texto)]">{{ $resultado['titulo'] }}</h2>
                    <p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">{{ number_format(count($resultado['resumen']['filas']), 0, ',', '.') }} registros</p>
                </div>
                <div class="ctc-tabla-caja" style="--alto-tabla: 26rem">
                    <table class="ctc-tabla">
                        <thead><tr>@foreach ($resultado['resumen']['cabecera'] as $columna)<th>{{ str_replace('_', ' ', $columna) }}</th>@endforeach</tr></thead>
                        <tbody>
                            @forelse ($resultado['resumen']['filas'] as $fila)
                                <tr>@foreach ($fila as $valor)@php [$clase, $html] = $celda($valor); @endphp<td class="{{ $clase }}">{!! $html !!}</td>@endforeach</tr>
                            @empty
                                <tr data-sin-hover><td colspan="{{ max(count($resultado['resumen']['cabecera']), 1) }}" class="!p-0">
                                    <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]"><x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" /><p class="mt-2">La consulta no arrojó resultados.</p></div>
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
            <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)] p-4">
                <div class="h-[420px] w-full" wire:key="grafica-{{ md5($resultado['grafico']) }}" data-grafico="{{ $resultado['grafico'] }}"
                     x-data x-init="ctcDibujarGrafica($el)" x-on:tema-cambiado.window="ctcDibujarGrafica($el)"></div>
            </section>
        </div>

        @if ($resultado['detalle'])
            <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">
                    <div>
                        <h2 class="text-[15px] font-bold text-[var(--texto)]">Detalle</h2>
                        <p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">{{ number_format(count($resultado['detalle']['filas']), 0, ',', '.') }} registros</p>
                    </div>
                    @if (count($resultado['detalle']['filas']))
                        <x-secondary-button wire:click="exportarDetalleExcel" wire:loading.attr="disabled" wire:target="exportarDetalleExcel">
                            <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar detalle
                        </x-secondary-button>
                    @endif
                </div>
                <div class="ctc-tabla-caja">
                    <table class="ctc-tabla">
                        <thead><tr>@foreach ($resultado['detalle']['cabecera'] as $columna)<th>{{ str_replace('_', ' ', $columna) }}</th>@endforeach</tr></thead>
                        <tbody>
                            @forelse ($resultado['detalle']['filas'] as $fila)
                                <tr>@foreach ($fila as $valor)@php [$clase, $html] = $celda($valor); @endphp<td class="{{ $clase }}">{!! $html !!}</td>@endforeach</tr>
                            @empty
                                <tr data-sin-hover><td colspan="{{ max(count($resultado['detalle']['cabecera']), 1) }}" class="!p-0">
                                    <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]"><x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" /><p class="mt-2">La consulta no arrojó resultados.</p></div>
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        @endif
    @endif
</x-pagina>
</div>