{{-- Dashboard de importaciones (dashboard/impo). Antes: Dashboard.dashboard-iframe + Dashboard.dashboard-importaciones en
     un iframe; desde L2a en el layout nuevo, y con el kit ui-ctc (MigracionLayout.MD L3). Carga solo lo que usa:
     Highcharts (cdnjs, versión fija, con exportación) y Google GeoChart para el mapa. Ya no carga Font Awesome. --}}
<x-app-layout titulo="Dashboard de importaciones">
    @push('estilos')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/highcharts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/modules/exporting.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/modules/export-data.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/modules/accessibility.js"></script>
        <script src="https://www.gstatic.com/charts/loader.js"></script>
        <script>google.charts.load('current', { packages: ['geochart'] });</script>
    @endpush

    @livewire('dashboard.importaciones-admin')

    <script>
        /*
         * Dibujo de las gráficas de dashboard.importaciones-graph. Cada nodo trae su configuración en data-grafico y se
         * redibuja tras cada actualización de ese componente (y solo de ese: abrir el detalle no redibuja nada) y al
         * cambiar el tema. Textos, líneas y fondos salen de los tokens del layout (ctcDibujarGrafica en resources/js/ctc.js).
         */
        (function () {
            var googleListo = false;

            function dibujarHighcharts() {
                document.querySelectorAll('[data-grafico][data-tipo]:not([data-tipo="map"])').forEach(function (nodo) {
                    if (nodo.dataset.dibujado) { return; }
                    nodo.dataset.dibujado = '1';
                    ctcDibujarGrafica(nodo);
                });
            }

            function dibujarMapas() {
                if (!googleListo) { return; }
                var k = ctcTokens();
                document.querySelectorAll('[data-grafico][data-tipo="map"]').forEach(function (nodo) {
                    if (nodo.dataset.dibujado) { return; }
                    nodo.dataset.dibujado = '1';
                    nodo.innerHTML = '';
                    var config = JSON.parse(nodo.dataset.grafico);
                    new google.visualization.GeoChart(nodo).draw(google.visualization.arrayToDataTable(config.data), {
                        region: 'world',
                        displayMode: 'regions',
                        // Degradado de la superficie al color de la empresa. Antes llegaba config.mainColor = 'empresa',
                        // que no es un color.
                        colorAxis: { colors: [k.superficie2, k.acento] },
                        backgroundColor: k.superficie,
                        datalessRegionColor: k.superficie2,
                        defaultColor: k.superficie2,
                        legend: { textStyle: { color: k.texto, fontSize: 12 } },
                    });
                });
            }

            // forzar = true: se limpian las marcas para rehacer todo (datos nuevos o tema nuevo).
            function redibujar(forzar) {
                if (forzar === true) {
                    document.querySelectorAll('[data-grafico][data-dibujado]').forEach(function (nodo) { delete nodo.dataset.dibujado; });
                }
                requestAnimationFrame(function () { dibujarHighcharts(); dibujarMapas(); });
            }

            google.charts.setOnLoadCallback(function () { googleListo = true; dibujarMapas(); });

            document.addEventListener('livewire:initialized', function () {
                redibujar(false);
                Livewire.hook('morphed', function ({ el, component }) {
                    if (component.name === 'dashboard.importaciones-graph') { redibujar(true); }
                });
            });

            window.addEventListener('tema-cambiado', function () { redibujar(true); });

            window.addEventListener('detalle-sin-datos', function () {
                alert('No hay datos para exportar');
            });
        })();
    </script>
</x-app-layout>