{{-- Selección del reporte y rango de fechas, compartida por Reportes.index (rreport) y ExReportes.index (rexreport).
     Layout nuevo, MigracionLayout.MD L3 (lote 7).

     Parámetros: $report (reportes del grupo), $accion (URL del POST), $opcion (reporte elegido), $desde, $hasta.
     El rango de fechas se muestra solo si el reporte tiene campo_filtro: la misma regla de rvalidar/rexvalidar,
     calculada aquí para no consultar al servidor en cada cambio. --}}
@php
    $conFiltro = $report->mapWithKeys(fn ($r) => [(string) $r->id => trim((string) $r->campo_filtro) !== '']);
    $descripciones = $report->mapWithKeys(fn ($r) => [(string) $r->id => trim((string) $r->descripcion)]);
@endphp
<x-tarjeta titulo="Reporte">
    <form method="post" action="{{ $accion }}"
          x-data="{ reporte: @js((string) $opcion), filtros: @js($conFiltro), descripciones: @js($descripciones) }"
          class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @csrf
        <x-campo etiqueta="Reporte" para="cboReport" class="sm:col-span-2">
            <x-select name="cboReport" id="cboReport" x-model="reporte" required>
                <option value="0">Seleccione una opción</option>
                @foreach ($report as $fil)
                    <option value="{{ $fil->id }}" @selected($opcion == $fil->id)>{{ $fil->nombre }}</option>
                @endforeach
            </x-select>
        </x-campo>

        {{-- Ocultas también se deshabilitan: antes viajaban las fechas de una consulta anterior a un reporte sin
             campo_filtro y el SQL quedaba con un "AND  between" sin campo. --}}
        <x-campo etiqueta="Fecha desde" para="dtpFechaIni" x-show="filtros[reporte]" x-cloak>
            <x-input type="date" name="dtpFechaIni" id="dtpFechaIni" value="{{ $desde }}" x-bind:required="!!filtros[reporte]" x-bind:disabled="!filtros[reporte]" />
        </x-campo>
        <x-campo etiqueta="Hasta" para="dtpFechaFin" x-show="filtros[reporte]" x-cloak>
            <x-input type="date" name="dtpFechaFin" id="dtpFechaFin" value="{{ $hasta }}" x-bind:required="!!filtros[reporte]" x-bind:disabled="!filtros[reporte]" />
        </x-campo>

        <div class="sm:col-span-2 lg:col-span-4" x-show="descripciones[reporte]" x-cloak>
            <p class="text-[11px] font-bold uppercase tracking-wider text-[var(--texto-tenue)]">Descripción del reporte</p>
            <p class="mt-1 text-[13px] text-[var(--texto-suave)]" x-text="descripciones[reporte]"></p>
        </div>

        <div class="sm:col-span-2 lg:col-span-4">
            <x-button><x-icono nombre="document-chart-bar" /> Generar reporte</x-button>
        </div>
    </form>
</x-tarjeta>