{{-- Estadísticas RIM (rim/stats, rim/show-stats), kit ui-ctc (MigracionLayout.MD, pantallas de L2a).
     Filtros (año, mes, asistente) + Consultar; indicadores del periodo; pestañas Solicitudes RIM / Prórrogas con sus
     gráficas, la tabla de cumplimiento del SLA por asistente y los registros que no cumplieron (con su descarga).
     Las gráficas se dibujan con ctcDibujarGrafica (resources/js/ctc.js) desde data-grafico: antes llegaban por eventos
     rim:render* y un <script> en @push, que no corre en las respuestas de Livewire 3. --}}
@php
    $r = $resultado;
    $g = $r['graficos'];
    $res = $r['resumen'];
    $pct = function ($parte, $total) { return $total > 0 ? $parte * 100 / $total : null; };
    $fecha = function ($valor) { return !empty($valor) ? date('Y-m-d', strtotime($valor)) : null; };
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $incumplidos = count($r['registrosIncumplidosAsistentes']);
    $incumplidosProrrogas = count($r['registrosIncumplidosAsistentesProrrogas']);
    $nombreAsistente = null;
    foreach ($lstAsistentes as $a) {
        if ((string) $a->id === (string) $asistente) { $nombreAsistente = trim($a->nombre1 . ' ' . $a->apellido1); }
    }
    $descripcion = 'Periodo ' . $r['fechaInicio'] . ' a ' . $r['fechaFin'] . ($nombreAsistente ? ' · Asistente: ' . $nombreAsistente : '') . '.';
    // Cada gráfica en su caja; wire:key cambia con la configuración y así se redibuja al consultar.
    $grafica = function ($clave, $alto = 420) use ($g) {
        return ['clave' => $clave, 'json' => $g[$clave] ?? '{}', 'alto' => $alto];
    };
    $pestanas = [
        'rim' => [
            'graficas' => [[$grafica('graficoGlobal')], [$grafica('graficoAsistente'), $grafica('graficoSucursalOperativa')],
                           [$grafica('graficoPromedioDiasAsistente', 460)], [$grafica('graficoPromedioDiasComprobador', 460)],
                           [$grafica('graficoCumplimientoAsistentes', 460)]],
        ],
        'prorrogas' => [
            'graficas' => [[$grafica('graficoGlobalProrrogas')], [$grafica('graficoAsistenteProrrogas'), $grafica('graficoSucursalOperativaProrrogas')],
                           [$grafica('graficoPromedioDiasAsistenteProrrogas', 460)], [$grafica('graficoCumplimientoAsistentesProrrogas', 460)]],
        ],
    ];
@endphp
<div x-data="{ pestana: 'rim' }">
<x-pagina>
    <x-encabezado-pagina ruta="Importaciones · RIM" titulo="Estadísticas RIM" :descripcion="$descripcion" />

    {{-- Filtros: los mismos tres de siempre (wire:model diferido) y Consultar --}}
    <x-tarjeta titulo="Periodo de consulta">
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <x-campo etiqueta="Año de consulta" para="anio">
                <x-select id="anio" wire:model="anio">
                    @foreach ($periodos as $periodo)<option value="{{ $periodo }}">{{ $periodo }}</option>@endforeach
                </x-select>
            </x-campo>
            <x-campo etiqueta="Mes de consulta" para="mes">
                <x-select id="mes" wire:model="mes">
                    <option value="">Todo el año</option>
                    @foreach ($meses as $indice => $nombreMes)<option value="{{ $indice }}">{{ $nombreMes }}</option>@endforeach
                </x-select>
            </x-campo>
            <x-campo etiqueta="Asistente" para="asistente">
                <x-select id="asistente" wire:model="asistente">
                    <option value="">Todos</option>
                    @foreach ($lstAsistentes as $a)<option value="{{ $a->id }}">{{ $a->nombre1 }} {{ $a->apellido1 }}</option>@endforeach
                </x-select>
            </x-campo>
            <div class="flex items-start sm: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 las estadísticas; puede tardar unos segundos…
        </p>
    </x-tarjeta>

    {{-- Indicadores del periodo. Clic: abre la pestaña correspondiente --}}
    <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(200px,1fr))]">
        <x-indicador titulo="Solicitudes RIM aprobadas" :valor="$res['aprobadas']" ayuda="Aprobadas en el periodo"
                     x-on:click="pestana = 'rim'" title="Ver solicitudes RIM" />
        <x-indicador :titulo="'Cumplen SLA (≤ ' . $slaDiasMaximo . ' días)'" :valor="$res['slaCumple']" :total="$res['slaTotal']"
                     :porcentaje="$pct($res['slaCumple'], $res['slaTotal'])" :insignia="false" color="#16a34a"
                     :ayuda="$incumplidos > 0 ? $incumplidos . ($incumplidos == 1 ? ' solicitud no cumplió' : ' solicitudes no cumplieron') : 'Todas cumplieron'"
                     :ayuda-aviso="$incumplidos > 0" x-on:click="pestana = 'rim'" title="Ver solicitudes RIM" />
        <x-indicador titulo="Prórrogas aprobadas" :valor="$res['prorrogasAprobadas']" ayuda="Radicadas en el periodo"
                     x-on:click="pestana = 'prorrogas'" title="Ver prórrogas" />
        <x-indicador :titulo="'Prórrogas en SLA (≤ ' . $slaDiasMaximo . ' días)'" :valor="$res['slaCumpleProrrogas']" :total="$res['slaTotalProrrogas']"
                     :porcentaje="$pct($res['slaCumpleProrrogas'], $res['slaTotalProrrogas'])" :insignia="false" color="#16a34a"
                     :ayuda="$incumplidosProrrogas > 0 ? $incumplidosProrrogas . ($incumplidosProrrogas == 1 ? ' prórroga no cumplió' : ' prórrogas no cumplieron') : 'Todas cumplieron'"
                     :ayuda-aviso="$incumplidosProrrogas > 0" x-on:click="pestana = 'prorrogas'" title="Ver prórrogas" />
    </div>

    {{-- Pestañas. Al cambiar, las gráficas de la pestaña visible se reajustan al ancho (se dibujaron ocultas) --}}
    <div role="tablist" class="flex gap-1 border-b border-[var(--borde)]"
         x-effect="pestana; $nextTick(() => window.Highcharts && Highcharts.charts.forEach((c) => c && c.reflow()))">
        <x-pestana etiqueta="Solicitudes RIM" :conteo="$res['aprobadas']" icono="document-text" alpine="pestana === 'rim'" x-on:click="pestana = 'rim'" />
        <x-pestana etiqueta="Prórrogas" :conteo="$res['prorrogasAprobadas']" icono="clock" alpine="pestana === 'prorrogas'" x-on:click="pestana = 'prorrogas'" />
    </div>

    @foreach ($pestanas as $clavePestana => $p)
        @php $esRim = $clavePestana === 'rim'; @endphp
        <div class="space-y-5" x-show="pestana === '{{ $clavePestana }}'" @unless ($esRim) x-cloak @endunless role="tabpanel">
            @foreach ($p['graficas'] as $fila)
                <div class="grid gap-5 {{ count($fila) > 1 ? 'xl:grid-cols-2' : '' }}">
                    @foreach ($fila as $gr)
                        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)] p-4">
                            <div class="w-full" style="height: {{ $gr['alto'] }}px" id="{{ $gr['clave'] }}"
                                 wire:key="grafica-{{ $gr['clave'] }}-{{ md5($gr['json']) }}" data-grafico="{{ $gr['json'] }}"
                                 x-data x-init="ctcDibujarGrafica($el)" x-on:tema-cambiado.window="ctcDibujarGrafica($el)"></div>
                        </section>
                    @endforeach
                </div>
            @endforeach

            @php
                $cumplimiento = $esRim ? $r['cumplimientoAsistentes'] : $r['cumplimientoAsistentesProrrogas'];
                $filas = $esRim ? $r['registrosIncumplidosAsistentes'] : $r['registrosIncumplidosAsistentesProrrogas'];
                $metodo = $esRim ? 'descargarRegistrosIncumplidosSlaAsistentes' : 'descargarRegistrosIncumplidosSlaAsistentesProrrogas';
            @endphp

            <div class="grid gap-5 2xl:grid-cols-[minmax(0,26rem)_minmax(0,1fr)]">
                {{-- Cumplimiento SLA por asistente --}}
                <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)]">Cumplimiento SLA por asistente{{ $esRim ? '' : ' (prórrogas)' }}</h2>
                        <p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">Solicitud → radicado en ≤ {{ $slaDiasMaximo }} días</p>
                    </div>
                    <div class="ctc-tabla-caja" style="--alto-tabla: 28rem">
                        <table class="ctc-tabla">
                            <thead><tr>
                                <th>Asistente</th>
                                <th class="text-right">Total</th>
                                <th class="text-right">Cumple</th>
                                <th class="text-right">No cumple</th>
                                <th class="text-right">% Cumpl.</th>
                            </tr></thead>
                            <tbody>
                                @forelse ($cumplimiento as $c)
                                    <tr wire:key="cum-{{ $clavePestana }}-{{ $loop->index }}">
                                        <td class="whitespace-nowrap">{{ $c['asistente'] }}</td>
                                        <td class="text-right tabular-nums">{{ number_format($c['total'], 0, ',', '.') }}</td>
                                        <td class="text-right tabular-nums text-emerald-700 dark:text-emerald-300">{{ number_format($c['cumple'], 0, ',', '.') }}</td>
                                        <td class="text-right tabular-nums text-rose-700 dark:text-rose-300">{{ number_format($c['no_cumple'], 0, ',', '.') }}</td>
                                        <td class="text-right tabular-nums font-semibold">{{ number_format($c['pct'], 1, ',', '.') }}%</td>
                                    </tr>
                                @empty
                                    <tr data-sin-hover><td colspan="5" 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">Sin datos para calcular cumplimiento.</p>
                                        </div>
                                    </td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>

                {{-- Registros que no cumplieron, con su descarga --}}
                <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)]">{{ $esRim ? 'Registros' : 'Prórrogas' }} que no cumplieron</h2>
                            <p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">{{ number_format(count($filas), 0, ',', '.') }} para análisis, de más a menos días</p>
                        </div>
                        <x-secondary-button wire:click="{{ $metodo }}" wire:loading.attr="disabled" wire:target="{{ $metodo }}">
                            <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" wire:loading.remove wire:target="{{ $metodo }}" />
                            <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" wire:loading wire:target="{{ $metodo }}" />
                            Descargar Excel
                        </x-secondary-button>
                    </div>
                    <div class="ctc-tabla-caja" style="--alto-tabla: 28rem">
                        <table class="ctc-tabla">
                            <thead><tr>
                                <th>DO</th>
                                <th>Aprobación</th>
                                @unless ($esRim)<th>Radicado</th>@endunless
                                <th>Cliente</th>
                                <th>Sucursal</th>
                                <th>Asistente</th>
                                <th>Fecha solicitud</th>
                                @if ($esRim)
                                    <th>Envío comprobación</th>
                                    <th>Fecha comprobación</th>
                                    <th class="text-right">Días comprobación</th>
                                    <th>Fecha radicado</th>
                                    <th class="text-right">KPI días radicado</th>
                                    <th>Fecha aprobación</th>
                                @else
                                    <th>Fecha radicado</th>
                                    <th class="text-right">KPI días</th>
                                @endif
                            </tr></thead>
                            <tbody>
                                @forelse ($filas as $f)
                                    <tr wire:key="inc-{{ $clavePestana }}-{{ $loop->index }}">
                                        <td class="whitespace-nowrap font-medium">{!! filled($f['NUMERO_DO']) ? e($f['NUMERO_DO']) : $vacio !!}</td>
                                        <td class="whitespace-nowrap">{!! filled($f['NUMERO_APROBACION']) ? e($f['NUMERO_APROBACION']) : $vacio !!}</td>
                                        @unless ($esRim)<td class="whitespace-nowrap">{!! filled($f['NUMERO_RADICADO'] ?? null) ? e($f['NUMERO_RADICADO']) : $vacio !!}</td>@endunless
                                        <td class="min-w-[12rem] text-[12.5px]">{!! filled($f['CLIENTE']) ? e($f['CLIENTE']) : $vacio !!}</td>
                                        <td>@if (filled($f['SUC_OPERATIVA']))<x-etiqueta variante="acento">{{ $f['SUC_OPERATIVA'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                        <td class="whitespace-nowrap">{{ $f['ASISTENTE'] }}</td>
                                        <td class="whitespace-nowrap tabular-nums">{!! $fecha($f['FECHA_SOLICITUD']) ? e($fecha($f['FECHA_SOLICITUD'])) : $vacio !!}</td>
                                        @if ($esRim)
                                            <td class="whitespace-nowrap tabular-nums">{!! $fecha($f['FECHA_ENVIO_COMPROBACION'] ?? null) ? e($fecha($f['FECHA_ENVIO_COMPROBACION'])) : $vacio !!}</td>
                                            <td class="whitespace-nowrap tabular-nums">{!! $fecha($f['FECHA_COMPROBACION'] ?? null) ? e($fecha($f['FECHA_COMPROBACION'])) : $vacio !!}</td>
                                            <td class="text-right tabular-nums">{!! ($f['DIAS_COMPROBACION'] ?? null) !== null ? e($f['DIAS_COMPROBACION']) : $vacio !!}</td>
                                            <td class="whitespace-nowrap tabular-nums">{!! $fecha($f['FECHA_RADICADO']) ? e($fecha($f['FECHA_RADICADO'])) : $vacio !!}</td>
                                            <td class="text-right tabular-nums font-semibold text-rose-700 dark:text-rose-300">{{ $f['dias'] }}</td>
                                            <td class="whitespace-nowrap tabular-nums">{!! $fecha($f['FECHA_APROBACION'] ?? null) ? e($fecha($f['FECHA_APROBACION'])) : $vacio !!}</td>
                                        @else
                                            <td class="whitespace-nowrap tabular-nums">{!! $fecha($f['FECHA_RADICADO']) ? e($fecha($f['FECHA_RADICADO'])) : $vacio !!}</td>
                                            <td class="text-right tabular-nums font-semibold text-rose-700 dark:text-rose-300">{{ $f['dias'] }}</td>
                                        @endif
                                    </tr>
                                @empty
                                    <tr data-sin-hover><td colspan="{{ $esRim ? 12 : 9 }}" class="!p-0">
                                        <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]">
                                            <x-icono nombre="check-circle" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                            <p class="mt-2">No hay {{ $esRim ? 'registros' : 'prórrogas' }} incumplid{{ $esRim ? 'os' : 'as' }} en el periodo.</p>
                                        </div>
                                    </td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
        </div>
    @endforeach
</x-pagina>
</div>