@extends('layouts.planti')

@section('contenido')

	{{--
		Contenedor del Dashboard V2.

		La V1 usa `padding-top: 56.25%` (16:9 fijo), que recorta una página larga
		y deja doble barra de desplazamiento. Aquí el iframe se ajusta a la altura
		real que publica el contenido (§10.2).

		El script va inline porque `layouts.planti` no declara `@stack('scripts')`.
	--}}
	<div class="container-fluid px-0">
		<iframe id="marcoDashboardV2" src="{{ route('dashboard-v2-contenido') }}" title="Torre de Control Aduanera"
			style="width:100%; height:900px; border-style:none; display:block; overflow:hidden;" scrolling="no"></iframe>
	</div>

	<script>
		(function () {
			var marco = document.getElementById('marcoDashboardV2');
			var MINIMO = 600;

			window.addEventListener('message', function (evento) {
				if (!marco || evento.source !== marco.contentWindow) {
					return;
				}

				var datos = evento.data;

				if (!datos || datos.tipo !== 'dashboardV2Altura') {
					return;
				}

				var alto = parseInt(datos.alto, 10);

				if (alto > MINIMO) {
					marco.style.height = (alto + 24) + 'px';
				}
			});
		})();
	</script>

@endsection