@if(!empty($campos) && count($campos) > 0)
<div class="mt-4 pt-2 border-t-2 border-dashed border-gray-300 campos-adicionales-section">
    <div class="mb-2">
        <i class="material-icons text-blue-500 text-lg">settings</i>
        <span class="text-base font-semibold text-gray-800 p-1">Campos adicionales</span>
        <p class="text-sm text-gray-500 my-2">
            <i class="material-icons text-xs align-middle">info</i>
            Estos campos son opcionales y se configuran en los parámetros del sistema
        </p>
    </div>
    <div class="grid grid-cols-12 gap-4 mt-4">
        @foreach($campos as $campo)
        @php
        $campoId = 'campo_excel_' . $campo['id'];
        $campoNombre = strtolower(str_replace(' ', '_', $campo['nombre']));
        $tipoCampo = strtolower($campo['tipo']);

        // Determinar el ancho del campo según su tipo
        $colSpanClass = $__isConciliacion ? 'col-span-6' : 'col-span-3';
        if (in_array($tipoCampo, ['textarea', 'texto_largo'])) {
        $colSpanClass = 'col-span-12';
        } elseif (in_array($tipoCampo, ['checkbox', 'radio', 'color'])) {
        $colSpanClass = $__isConciliacion ? 'col-span-6' : 'col-span-3';
        }
        @endphp

        <div class="{{ $colSpanClass }}" data-tipo-movimiento="{{ $campo['tipo_movimiento'] ?? '' }}">
            <label class="block text-sm font-medium text-gray-600 mb-1 flex items-center gap-1">
                {{ $campo['nombre'] }}:
            </label>

            {{-- SELECT / DROPDOWN --}}
            @if($tipoCampo === 'select' || $tipoCampo === 'dropdown')
            <select id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}">
                <option value="">-Selecciona-</option>
            </select>

            {{-- TEXTAREA --}}
            @elseif($tipoCampo === 'textarea' || $tipoCampo === 'texto_largo')
            <textarea id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}"
                placeholder="Ingresa {{ strtolower($campo['nombre']) }}"></textarea>

            {{-- FECHA --}}
            @elseif($tipoCampo === 'date' || $tipoCampo === 'fecha')
            <input type="date"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}">

            {{-- HORA --}}
            @elseif($tipoCampo === 'time')
            <input type="time"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}">

            {{-- FECHA Y HORA --}}
            @elseif($tipoCampo === 'datetime' || $tipoCampo === 'datetime-local')
            <input type="datetime-local"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}">

            {{-- NÚMERO --}}
            @elseif($tipoCampo === 'number' || $tipoCampo === 'numero')
            <input type="number"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                step="0.01"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}"
                placeholder="Ingresa {{ strtolower($campo['nombre']) }}">

            {{-- MONEDA --}}
            @elseif($tipoCampo === 'moneda' || $tipoCampo === 'currency')
            <div class="relative">
                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">$</span>
                <input type="number"
                    id="{{ $campoId }}"
                    name="{{ $campoNombre }}"
                    step="0.01"
                    min="0"
                    class="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-300 bg-gray-50 campo-excel-dinamico"
                    data-campo-id="{{ $campo['id'] }}"
                    placeholder="0.00">
            </div>

            {{-- PORCENTAJE --}}
            @elseif($tipoCampo === 'porcentaje' || $tipoCampo === 'percentage')
            <div class="relative">
                <input type="number"
                    id="{{ $campoId }}"
                    name="{{ $campoNombre }}"
                    step="0.01"
                    min="0"
                    max="100"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                    data-campo-id="{{ $campo['id'] }}"
                    placeholder="0.00">
                <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">%</span>
            </div>

            {{-- EMAIL --}}
            @elseif($tipoCampo === 'email')
            <input type="email"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}"
                placeholder="ejemplo@correo.com">

            {{-- URL --}}
            @elseif($tipoCampo === 'url')
            <input type="url"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}"
                placeholder="https://ejemplo.com">

            {{-- TELÉFONO --}}
            @elseif($tipoCampo === 'telefono' || $tipoCampo === 'tel' || $tipoCampo === 'phone')
            <input type="tel"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}"
                placeholder="(555) 123-4567"
                pattern="[0-9\s\-\(\)]+">

            {{-- COLOR --}}
            @elseif($tipoCampo === 'color')
            <div class="flex items-center gap-2">
                <input type="color"
                    id="{{ $campoId }}"
                    name="{{ $campoNombre }}"
                    value="#000000"
                    class="h-10 w-20 border border-gray-200 rounded-md cursor-pointer bg-gray-50 campo-excel-dinamico"
                    data-campo-id="{{ $campo['id'] }}">
                <input type="text"
                    id="{{ $campoId }}_text"
                    class="flex-1 px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-300 bg-gray-50"
                    placeholder="#000000"
                    pattern="^#[0-9A-Fa-f]{6}$"
                    maxlength="7">
            </div>

            {{-- CHECKBOX --}}
            @elseif($tipoCampo === 'checkbox')
            <div class="flex items-center">
                <input type="checkbox"
                    id="{{ $campoId }}"
                    name="{{ $campoNombre }}"
                    value="1"
                    class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 campo-excel-dinamico"
                    data-campo-id="{{ $campo['id'] }}">
                <label for="{{ $campoId }}" class="ml-2 text-sm text-gray-700">
                    Marcar si aplica
                </label>
            </div>

            {{-- RADIO --}}
            @elseif($tipoCampo === 'radio')
            <div class="flex items-center space-x-4">
                <label class="inline-flex items-center">
                    <input type="radio"
                        id="{{ $campoId }}_si"
                        name="{{ $campoNombre }}"
                        value="si"
                        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 campo-excel-dinamico"
                        data-campo-id="{{ $campo['id'] }}">
                    <span class="ml-2 text-sm text-gray-700">Sí</span>
                </label>
                <label class="inline-flex items-center">
                    <input type="radio"
                        id="{{ $campoId }}_no"
                        name="{{ $campoNombre }}"
                        value="no"
                        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 campo-excel-dinamico"
                        data-campo-id="{{ $campo['id'] }}">
                    <span class="ml-2 text-sm text-gray-700">No</span>
                </label>
            </div>

            {{-- Por defecto: campo de texto --}}
            @else
            <input type="text"
                id="{{ $campoId }}"
                name="{{ $campoNombre }}"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 campo-excel-dinamico"
                data-campo-id="{{ $campo['id'] }}"
                placeholder="Ingresa {{ strtolower($campo['nombre']) }}">
            @endif
        </div>
        @endforeach
    </div>
</div>
@endif

{{-- Estilos FUERA del @if --}}
<style>
    .campos-adicionales-section {
        border-radius: 0.5rem;
        margin-top: 2rem;
    }
</style>