{{-- Régimen cambiario de importación (rdeclaracion, búsqueda POST rdeclaracionsrh), kit ui-ctc.
     El ícono de la fila abre el formulario de la declaración de cambio en un diálogo (Alpine) y lo llena con
     regcamb?numaceptacion=… (antes jQuery $.ajax + modal de Bootstrap). Los campos conservan id y name. --}}
@php
    // Campos que llenaba la respuesta de regcamb (los demás quedaban vacíos, igual que antes).
    $camposDeclaracion = ['NOMBRE_TIPO_DECLARACION', 'numero_factura', 'cuentacompensacion_2', 'NUMERO_PEDIDO', 'tipo_8', 'nit_9', 'dv_9',
        'nombreimportador_10', 'monedafob_11', 'trmfob_12', 'valorfob_14', 'valorfobusd_15', 'nombre_16', 'nit_17', 'observaciones',
        'valor1_20_1', 'numero_aceptacion'];
    $claseCampo = 'form-input block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie-2)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)]';
@endphp
<x-app-layout titulo="Régimen cambiario">
    <div x-data="{
            abierto: false,
            cargando: false,
            sinDatos: false,
            d: {},
            async mostrarDetalles(numeroAceptacion) {
                this.abierto = true; this.cargando = true; this.sinDatos = false; this.d = {};
                try {
                    const r = await fetch({{ \Illuminate\Support\Js::from(route('regcamb')) }} + '?numaceptacion=' + encodeURIComponent(numeroAceptacion),
                        { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } });
                    const declaracion = await r.json();
                    if (declaracion && declaracion.length) { this.d = declaracion[0]; } else { this.sinDatos = true; }
                } catch (e) { this.sinDatos = true; }
                this.cargando = false;
            },
            v(campo) { return this.d[campo] ?? ''; }
         }"
         x-on:keydown.escape.window="abierto = false">
        <x-pagina>
            <x-encabezado-pagina ruta="Importaciones · Configuración" titulo="Régimen cambiario"
                                 descripcion="Formulario de declaraciones de cambio por importaciones de bienes" />

            @if (Session::has('success'))
                <x-alerta tipo="info">{{ Session::get('success') }}</x-alerta>
            @endif

            <x-catalogo.busqueda :accion="url('rdeclaracionsrh')" :valor="$busqueda ?? ''" placeholder="Numero de Factura"
                                 :limpiar="url('/rdeclaracion')" requerido />

            <x-catalogo.lista titulo="Facturas" :total="count($query)" :leyendaInactivo="false">
                <thead>
                    <tr>
                        <th>Nro factura</th>
                        <th>Fecha factura</th>
                        <th class="text-right">Total factura</th>
                        <th>Proveedor</th>
                        <th>Número DO</th>
                        <th>Proceso</th>
                        <th>Número aceptación</th>
                        <th class="text-center">Formulario</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($query as $fil)
                        <tr>
                            <td class="font-medium">{{ $fil->numero_factura }}</td>
                            <td class="whitespace-nowrap">{{ $fil->fecha_factura }}</td>
                            <td class="whitespace-nowrap text-right tabular-nums">{{ $fil->TOTAL_FACTURA }}</td>
                            <td>{{ $fil->NOMBRE_EXPORTADOR }}</td>
                            <td class="whitespace-nowrap">{{ $fil->numero_do }}</td>
                            <td>{!! $fil->nombre ? e($fil->nombre) : '<span class="text-[var(--texto-tenue)]">—</span>' !!}</td>
                            <td class="whitespace-nowrap">{!! $fil->numero_aceptacion !== '' ? e($fil->numero_aceptacion) : '<span class="text-[var(--texto-tenue)]">—</span>' !!}</td>
                            <td class="w-[1%] whitespace-nowrap text-center !px-2">
                                <button type="button" class="ctc-accion"
                                        x-on:click="mostrarDetalles({{ \Illuminate\Support\Js::from((string) $fil->numero_aceptacion) }})"
                                        title="Ver formulario de la factura {{ $fil->numero_factura }}" aria-label="Ver formulario de la factura {{ $fil->numero_factura }}">
                                    <x-icono nombre="document-text" sprite class="h-[18px] w-[18px]" />
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr data-sin-hover><td colspan="8" class="!p-0">
                            <div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">No hay registros.</div>
                        </td></tr>
                    @endforelse
                </tbody>
            </x-catalogo.lista>
            <x-icono-simbolos :nombres="['o:document-text']" />
        </x-pagina>

        {{-- Diálogo: formulario de la declaración de cambio (solo lectura, salvo el numeral 13 que no se envía). --}}
        <template x-teleport="body">
            <div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="regimen-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="abierto = false"></div>
                <div class="relative flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <div class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
                        <span class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--acento-suave)] text-[var(--acento-texto)]"><x-icono nombre="banknotes" class="h-5 w-5" /></span>
                        <h2 id="regimen-titulo" class="flex-1 text-[15px] font-bold text-[var(--texto)]">Régimen cambiario</h2>
                        <span x-show="cargando" class="flex items-center gap-1.5 text-[12px] text-[var(--acento-texto)]" role="status">
                            <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                        </span>
                        <button type="button" class="ctc-accion" x-on:click="abierto = false" title="Cerrar" aria-label="Cerrar"><x-icono nombre="x-mark" class="h-[18px] w-[18px]" /></button>
                    </div>

                    <div class="space-y-5 overflow-y-auto px-5 py-4">
                        <div class="flex flex-wrap items-center gap-3">
                            <img src="{{ asset('img/banrep.png') }}" class="h-12 w-auto" alt="Banco de la República">
                            <h3 class="text-[18px] font-semibold text-[var(--texto)]">Declaración de Cambio por Importaciones de Bienes</h3>
                        </div>
                        <template x-if="sinDatos">
                            <x-alerta tipo="aviso">No se encontró la declaración para este número de aceptación.</x-alerta>
                        </template>

                        @php
                            // [sección, [[etiqueta, id, tipo], …]]
                            $secciones = [
                                ['I. Tipo de operación', [['1. Número', 'NOMBRE_TIPO_DECLARACION', 'text']]],
                                ['II. Identificación de la declaración inicial', [['Factura', 'numero_factura', 'text'], ['2. Cuenta compensación', 'cuentacompensacion_2', 'text'],
                                    ['3. Fecha compensación', 'fechadc_3', 'date'], ['4. Número pedido', 'NUMERO_PEDIDO', 'text']]],
                                ['III. Identificación de la declaración de cambio anterior', [['5. Nit anterior', 'cuentaanterior_5', 'text'], ['6. Fecha dec. anterior', 'fechaanterior_6', 'date'],
                                    ['7. Número dec. anterior', 'numero_7', 'text']]],
                                ['IV. Identificación del importador', [['8. Tipo', 'tipo_8', 'text'], ['9. Nit', 'nit_9', 'text'], ['DV', 'dv_9', 'text'], ['Nombre', 'nombreimportador_10', 'text']]],
                            ];
                        @endphp
                        @foreach ($secciones as [$seccion, $campos])
                            <fieldset>
                                <legend class="mb-2 text-[12px] font-bold uppercase tracking-wide text-[var(--texto-suave)]">{{ $seccion }}</legend>
                                <div class="grid gap-x-4 gap-y-3 [grid-template-columns:repeat(auto-fill,minmax(180px,1fr))]">
                                    @foreach ($campos as [$etiqueta, $id, $tipo])
                                        <x-campo :etiqueta="$etiqueta" :para="$id">
                                            <input type="{{ $tipo }}" id="{{ $id }}" name="{{ $id }}" readonly="readonly" class="{{ $claseCampo }}"
                                                   @if (in_array($id, $camposDeclaracion)) x-bind:value="v('{{ $id }}')" @endif value="">
                                        </x-campo>
                                    @endforeach
                                </div>
                            </fieldset>
                        @endforeach

                        <fieldset>
                            <legend class="mb-2 text-[12px] font-bold uppercase tracking-wide text-[var(--texto-suave)]">V. Descripción de la operación</legend>
                            <div class="grid gap-x-4 gap-y-3 [grid-template-columns:repeat(auto-fill,minmax(180px,1fr))]">
                                <x-campo etiqueta="11. Moneda" para="monedafob_11"><input type="text" id="monedafob_11" name="monedafob_11" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('monedafob_11')" value=""></x-campo>
                                <x-campo etiqueta="12. Tipo de cambio a USD" para="trmfob_12"><input type="text" id="trmfob_12" name="trmfob_12" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('trmfob_12')" value=""></x-campo>
                                <x-campo etiqueta="13. Numeral" para="numeralfob_13">
                                    <x-select id="numeralfob_13" name="numeralfob_13">
                                        <option value="0">Seleccione un Numeral</option>
                                        @foreach ($data as $file)
                                            <option value="{{ $file->numeral }}">{{ $file->concepto }}</option>
                                        @endforeach
                                    </x-select>
                                </x-campo>
                                <x-campo etiqueta="14. Moneda giro" para="valorfob_14"><input type="text" id="valorfob_14" name="valorfob_14" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('valorfob_14')" value=""></x-campo>
                                <x-campo etiqueta="15. Valor USD" para="valorfobusd_15"><input type="text" id="valorfobusd_15" name="valorfobusd_15" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('valorfobusd_15')" value=""></x-campo>
                            </div>
                        </fieldset>

                        <fieldset>
                            <legend class="mb-2 text-[12px] font-bold uppercase tracking-wide text-[var(--texto-suave)]">VI. Identificación del declarante</legend>
                            <div class="grid gap-x-4 gap-y-3 sm:grid-cols-2">
                                <x-campo etiqueta="Nombre" para="nombre_16"><input type="text" id="nombre_16" name="nombre_16" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('nombre_16')" value=""></x-campo>
                                <x-campo etiqueta="9. Nit" para="nit_17"><input type="text" id="nit_17" name="nit_17" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('nit_17')" value=""></x-campo>
                            </div>
                        </fieldset>

                        <x-campo etiqueta="Observaciones" para="observaciones">
                            <textarea id="observaciones" name="observaciones" rows="5" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('observaciones')"></textarea>
                        </x-campo>

                        <fieldset>
                            <legend class="mb-2 text-[12px] font-bold uppercase tracking-wide text-[var(--texto-suave)]">VII. Información documentos de importación</legend>
                            <div class="grid gap-x-4 gap-y-3 [grid-template-columns:repeat(auto-fill,minmax(180px,1fr))]">
                                <x-campo etiqueta="19. Número de aceptación" para="numero_aceptacion"><input type="text" id="numero_aceptacion" name="numero_aceptacion" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('numero_aceptacion')" value=""></x-campo>
                                <x-campo etiqueta="20. Valor USD" para="valor1_20_1"><input type="text" id="valor1_20_1" name="valor1_20_1" readonly="readonly" class="{{ $claseCampo }}" x-bind:value="v('valor1_20_1')" value=""></x-campo>
                            </div>
                        </fieldset>
                    </div>

                    <div class="flex justify-end border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="abierto = false">General</x-secondary-button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</x-app-layout>