{{-- Dashboard de importaciones (dashboard/impo): filtros, totales por medio de transporte (importación y exportación) y
     las gráficas configuradas del cliente. Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a). Las gráficas las dibuja
     el script de pantallas/Dashboard/dashboard-importaciones. --}}
<div>
<x-pagina>
    <x-encabezado-pagina ruta="Dashboard · Importaciones" titulo="Dashboard de importaciones"
                         :descripcion="$empresa ? 'Cifras de ' . $empresa : null" />

    <x-tarjeta titulo="Consulta">
        <div class="grid gap-4 sm:grid-cols-2 {{ $filtroCompania ? 'lg:grid-cols-4' : 'lg:grid-cols-3' }}">
            @if ($filtroCompania)
                {{-- Sin opción «todas»: con varias compañías siempre se consulta una (P14 · decisión S de la V2). --}}
                <x-campo etiqueta="Importador" para="idCompania">
                    <x-select id="idCompania" wire:model="idCompania">
                        @foreach ($lstCompanias as $index => $compania)<option value="{{ $index }}">{{ $compania }}</option>@endforeach
                    </x-select>
                </x-campo>
            @endif
            <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="">Todos los meses</option>
                    @foreach ($meses as $index => $nombreMes)<option value="{{ $index }}">{{ $nombreMes }}</option>@endforeach
                </x-select>
            </x-campo>
            <div class="flex items-end gap-3">
                <x-button type="button" wire:click="consultarData" wire:loading.attr="disabled"><x-icono nombre="magnifying-glass" /> Consultar</x-button>
                <span wire:loading.flex wire:target="consultarData" class="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" /> Consultando…</span>
            </div>
        </div>
    </x-tarjeta>

    <div class="grid gap-5 xl:grid-cols-2">
        <x-tarjeta titulo="Importaciones">
            @livewire('dashboard.importaciones-totale-stats', $this->parametrosIniciales)
        </x-tarjeta>
        <x-tarjeta titulo="Exportaciones">
            @livewire('dashboard.exportaciones-totale-stats', $this->parametrosIniciales)
        </x-tarjeta>
    </div>

    @livewire('dashboard.importaciones-graph', $this->parametrosIniciales)
    @livewire('dashboard.detalle-graph', $this->parametrosIniciales)
</x-pagina>
</div>