{{-- Torre de Control de importación (rtorrecontrol). Layout nuevo, MigracionLayout.MD L3.
     Indicadores por estado (definicion_control_tower del cliente), y por cada estado su tabla y su gráfica.
     El grupo 27 ve en su lugar la tabla dinámica de Central en un iframe, como antes. --}}
@php
    $dominio = session('dominio');
    $titulo = $dominio == 'asercol' ? 'Demo Control Tower' : ($dominio == 'ternium' ? 'Web Service Documental' : 'Control Tower');
    $descripcion = $dominio == 'ternium' ? 'México · Argentina · Colombia' : null;
    $conTablasCentral = session()->get('GrupoEmpresarial') == 27;
    $hex = fn ($v) => $v && preg_match('/^#?[0-9A-Fa-f]{3,8}$/', trim($v)) ? '#' . ltrim(trim($v), '#') : null;
    $sumaEstados = collect($tcontrol)->sum(fn ($e) => (float) $e->nro);
@endphp
<x-app-layout titulo="Torre de Control">
    @push('estilos')
        {{-- Las gráficas de App\Charts\Base (Chartjs) usan Chart.js 2, el mismo que cargaba planti. --}}
        <script src="{{ asset('vendors/Chart.js/dist/Chart.min.js') }}"></script>
        <script>
            // Textos y líneas de las gráficas con los tokens del tema (claro u oscuro), layout.md §6.8.
            (function () {
                var css = getComputedStyle(document.documentElement);
                Chart.defaults.global.defaultFontColor = css.getPropertyValue('--texto-suave').trim() || '#6E6E7A';
                Chart.defaults.global.defaultFontFamily = css.getPropertyValue('--fuente').trim() || 'sans-serif';
                Chart.defaults.scale.gridLines.color = css.getPropertyValue('--borde').trim() || 'rgba(0,0,0,.1)';
            })();
        </script>
    @endpush

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

        {{-- El perfil 14 no ve la torre (igual que antes) --}}
        @if (Auth::user()->perfil != 14)
            <x-encabezado-pagina ruta="Importaciones · Operaciones" :titulo="$titulo" :descripcion="$descripcion">
                <x-slot name="acciones">
                    <x-enlace-boton href="/exportpo">
                        <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Generar reporte
                    </x-enlace-boton>
                </x-slot>
            </x-encabezado-pagina>

            {{-- Indicadores por estado (color: configuración del cliente). Cada uno lleva a la búsqueda de órdenes de
                 ese estado, como antes; la barra es su proporción sobre el total de los estados. --}}
            <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
                @foreach ($tcontrol as $estado)
                    <x-indicador :titulo="$estado->titulo" :valor="(float) $estado->nro"
                                 :porcentaje="$sumaEstados > 0 ? (float) $estado->nro * 100 / $sumaEstados : null" :insignia="false"
                                 :color="$hex($estado->color_categoria)"
                                 :href="pantalla('/searchpo/' . rawurlencode($estado->titulo) . '?compania=' . $estado->id_compania)">
                        <span class="inline-flex items-center gap-1 font-semibold text-[var(--acento-texto)]">Ver detalle <x-icono nombre="arrow-right" variante="m" class="h-3.5 w-3.5" /></span>
                    </x-indicador>
                @endforeach
            </div>

            {{-- Detalle de cada estado --}}
            @foreach ($tcontrol as $i => $estado)
                <section class="space-y-3">
                    <h2 class="flex items-center gap-2 text-[15px] font-bold text-[var(--texto)]">@if ($hex($estado->color_categoria ?? null))<span class="h-2.5 w-2.5 rounded-sm" style="background-color: {{ $hex($estado->color_categoria) }};" aria-hidden="true"></span>@endif{{ $estado->titulo }}</h2>

                    @if ($conTablasCentral)
                        @if (($tabla_dinamica[$i] ?? '') != '')
                            <iframe src="{{ $tabla_dinamica[$i] }}" title="Tabla dinámica de {{ $estado->titulo }}"
                                    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
                    @else
                        <div class="grid items-start gap-5 lg:grid-cols-2">
                            <div class="ctc-tabla-caja rounded-xl border border-[var(--borde)] bg-[var(--superficie)]" style="--alto-tabla: 26rem">
                                <table class="ctc-tabla">
                                    <thead>
                                        <tr>
                                            <th>{{ $estado->titulo_campo }}</th>
                                            <th class="!text-right">Cantidad</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $total = 0; @endphp
                                        @forelse ($MyTABLA[$i] ?? [] as $item)
                                            @php $total += $item->nro; @endphp
                                            {{-- Doble clic: órdenes de ese estado y ese valor (igual que antes) --}}
                                            <tr class="cursor-pointer" title="Doble clic para ver las órdenes"
                                                ondblclick="window.location.href = @js(pantalla('/rposearchout/' . rawurlencode($estado->titulo) . '/' . rawurlencode($item->titulo)))">
                                                <td>{{ $item->titulo }}</td>
                                                <td class="text-right">{{ number_format((float) $item->nro, 0, ',', '.') }}</td>
                                            </tr>
                                        @empty
                                            <tr data-sin-hover><td colspan="2" class="py-8 text-center text-[var(--texto-tenue)]">No hay registros.</td></tr>
                                        @endforelse
                                        @if (count($MyTABLA[$i] ?? []))
                                            <tr data-sin-hover class="bg-[var(--superficie-2)] font-semibold">
                                                <td>Total</td>
                                                <td class="text-right">{{ number_format($total, 0, ',', '.') }}</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="rounded-xl border border-[var(--borde)] bg-[var(--superficie)] p-4">
                                @isset($MyCHART[$i])
                                    {!! $MyCHART[$i]->container() !!}
                                @endisset
                            </div>
                        </div>
                    @endif
                </section>
            @endforeach

            @push('scripts')
                @foreach ($MyCHART ?? [] as $grafica)
                    {!! $grafica->script() !!}
                @endforeach
            @endpush
        @endif
    </x-pagina>
</x-app-layout>