{{-- Torre de Control de exportación (rtorrecontrol_ex). Gemela de TorreControl.index. Layout nuevo, MigracionLayout.MD L3.
     Indicadores por estado, gráfica general opcional (session grafica_global) y por cada estado su tabla y su gráfica. --}}
@php
    $titulo = session('dominio') == 'asercol' ? 'Demo ventas: salidas al resto del mundo' : 'Exportaciones';
    $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 de exportación">
    @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>
            (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

        <x-encabezado-pagina ruta="Exportaciones · Operaciones" :titulo="$titulo">
            <x-slot name="acciones">
                {{-- Antes abría una ventana emergente con el contenido y la imprimía; ahora imprime la página
                     (el layout oculta menú y encabezado al imprimir). --}}
                <x-secondary-button onclick="window.print()" class="ctc-no-imprimir">
                    <x-icono nombre="printer" /> Generar reporte
                </x-secondary-button>
            </x-slot>
        </x-encabezado-pagina>

        {{-- Indicadores por estado. Tienen dos enlaces, como antes: la tabla del estado en esta página y la búsqueda
             de órdenes de ese estado; el texto de porcentaje sale de sql_porcentaje del cliente. --}}
        <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
            @foreach ($tcontrol as $i => $estado)
                <x-indicador estatico :titulo="$estado->titulo" :valor="(float) $estado->nro"
                             :porcentaje="$sumaEstados > 0 ? (float) $estado->nro * 100 / $sumaEstados : null" :insignia="false"
                             :color="$hex($estado->color_categoria ?? null)" :ayuda="$estado->porcentaje ?: null">
                    <span class="flex flex-wrap gap-x-3">
                        <a href="#estado-{{ $i }}" class="font-semibold text-[var(--acento-texto)] hover:underline">Ver tabla</a>
                        <a href="{{ pantalla('/searchexpo/' . rawurlencode($estado->titulo)) }}" class="inline-flex items-center gap-1 font-semibold text-[var(--acento-texto)] hover:underline">Ver detalle <x-icono nombre="arrow-right" variante="m" class="h-3.5 w-3.5" /></a>
                    </span>
                </x-indicador>
            @endforeach
        </div>

        @if (session('grafica_global') == 'SI')
            <x-tarjeta titulo="Estado de la operación">
                {!! $grafico_general->container() !!}
            </x-tarjeta>
        @endif

        @foreach ($tcontrol as $i => $estado)
            <section id="estado-{{ $i }}" class="scroll-mt-4 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>
                <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: igual que antes, abre /rexdatosordenes/{estado} en otra ventana --}}
                                    <tr class="cursor-pointer" title="Doble clic para ver las órdenes"
                                        ondblclick="window.open('/rexdatosordenes/' + encodeURIComponent(@js($estado->titulo)), 'Seguimiento de la Orden de Compra', 'width=850,height=600')">
                                        <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>
            </section>
        @endforeach
    </x-pagina>

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