@props([
    'eventName' => null,
    'columns' => [], 
    'rows' => [], 
    'type' => 'basic' , 
    'searchable'=> null,
    'searchUrl' => null,
    'labelButtom' => null,
    'buttonAdd' => true,
    'disabled' => null,
    'extraSearchParams' => null, // 🔥 nuevo
])
 {{ ($extraSearchParams) ? 'extraSearchParams':''}}
<div 
    class="p-4" 
    x-data="dataTableComponent(
        @js($rows), 
        @js($columns),
        @js($searchUrl),
        '{{ $eventName }}',
        {{ ($extraSearchParams) ? 'extraSearchParams':''}}
    )"
>

    @if ($buttonAdd)
    {{-- BOTÓN AGREGAR --}}
        <button type="button" @click="addRow()" 
            class="mb-3 px-5 py-2.5 bg-gradient-to-r from-orange-700 to-orange-600 hover:from-orange-600 hover:to-orange-500 text-white text-sm font-bold rounded-xl shadow-md transition-all active:scale-95 flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
           Agregar fila
        </button>
    @endif


    <div class=" shadow-xl rounded-xl border border-gray-100">
        <table class="min-w-full divide-y divide-gray-200 bg-white">
            <thead class="bg-gray-50">
                <tr>
                    @foreach ($columns as $column)
                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider {{ $column['width'] ?? '' }}">{{ $column['label'] }}</th>
                    @endforeach
                    <th class="px-6 py-3 text-right text-xs font-bold text-gray-500 uppercase">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                <template x-for="(row, index) in rows" :key="index">
                    <tr class="hover:bg-purple-50/50" x-effect="calculate(row)">
                        @foreach ($columns as $column)
                            @php
                                $field = $column['field'];
                                $isFormula = isset($column['formula']);
                                $prefix = $column['format_prefix'] ?? null;
                                $suffix = $column['format_suffix'] ?? null;
                                $isNumeric = ($column['type'] ?? '') === 'number' || $isFormula;
                                $isSearchable = $column['searchable'] ?? false;
                            @endphp
                            

                            <td class="px-6 py-3 {{ $column['width'] ?? '' }}">
                                <div class="relative" @click.away="row.showSearch = null">
                                    {{-- Prefijo Visual --}}
                                    @if($prefix)
                                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none z-10">
                                            <span class="text-gray-400 text-sm font-semibold">{{ $prefix }}</span>
                                        </div>
                                    @endif

                                    @php
                                        $isSelect = $column['select'] ?? false;
                                        $options  = $column['options'] ?? [];
                                        $showEmpty = $column['show_empty'] ?? false;
                                    @endphp

                                    @if($isSelect)
                                        <select
                                            x-model="row['{{ $field }}']"
                                            class="w-full border border-gray-200 rounded-lg py-1.5 text-sm bg-white text-gray-700
                                                    focus:ring-2 focus:ring-purple-500 outline-none px-3"
                                            @change="onSelectChange('{{ $field }}', row, $event)"
                                            {{ $column['disabled'] ?? false ? 'disabled' : '' }} 
                                        >   
                                            @if($showEmpty)
                                                <option value="">Seleccione </option>
                                            @endif
@foreach($options as $opt)

    @php
        $value = $opt['value'] ?? $opt['id'] ?? null;
        $label = $opt['label'] ?? $opt['nombre'] ?? null;
    @endphp

    <option 
        value="{{ $value }}"

        @if(isset($column['map']))
            @foreach($column['map'] as $from => $to)
                data-{{ $from }}="{{ $opt[$from] ?? '' }}"
            @endforeach
        @endif

        :selected="row['{{ $field }}'] == '{{ $value }}'"
    >
        {{ $label }}
    </option>

@endforeach
                                        </select>
                                    @else

                                        <input 
                                            :value="isNumericField('{{ $field }}') ? formatNumber(row['{{ $field }}']) : row['{{ $field }}']"
                                            @input="isNumericField('{{ $field }}') ? (row['{{ $field }}'] = parseFloat($event.target.value.replace(/,/g, '')) || 0) : (row['{{ $field }}'] = $event.target.value)"
                                        
                                            @if($isSearchable) @keyup.debounce.300ms="searchAsync('{{ $field }}', row)" @endif

                                            type="text"
                                            {{ $isFormula ? 'readonly' : '' }}
                                            class="w-full border border-gray-200 rounded-lg py-1.5 text-sm transition-all focus:ring-2  focus:ring-purple-500 outline-none

                                            {{ $prefix ? 'pl-7' : 'pl-3' }} 
                                            {{ ($suffix || $isSearchable) ? 'pr-10' : 'pr-3' }}
                                            {{ $isNumeric ? 'text-right font-mono' : 'text-left' }}
                                            {{ $isFormula ? 'bg-purple-50 font-bold text-purple-700 border-purple-100' : 'bg-white text-gray-700 border-gray-200' }}"
                                            placeholder="0.00"
                                            {{ $column['disabled'] ?? false ? 'disabled' : '' }}
                                        >
                                    @endif

                                    {{-- ICONO CARGANDO (Spinner) --}}
                                    <div x-show="row.loading === '{{ $field }}'" class="absolute inset-y-0 right-3 flex items-center">
                                        <svg class="animate-spin h-4 w-4 text-purple-600" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                    </div>

                                    {{-- Dropdown de resultados --}}
                                    @if($isSearchable)
                                        <div x-show="row.showSearch === '{{ $field }}'" 
                                             x-transition
                                             class="absolute z-50 w-full bg-white border border-gray-200 rounded-lg shadow-xl mt-1 max-h-48 overflow-y-auto">
                                            <template x-for="item in row.results['{{ $field }}'] || []">
                                                <div @click="selectItem(row, '{{ $field }}', item)" 
                                                     class="px-4 py-2 text-sm hover:bg-purple-600 hover:text-white cursor-pointer transition-colors border-b last:border-0">
                                                    <div class="font-bold" x-text="item.nombre"></div>
                                                    <div class="text-xs opacity-70" x-text="item.details || ''"></div>
                                                </div>
                                            </template>
                                            <div x-show="row.results['{{ $field }}']?.length === 0" class="px-4 py-2 text-xs text-gray-500">No hay resultados</div>
                                        </div>
                                    @endif

                                    {{-- Sufijo Visual --}}
                                    @if($suffix && !$isSearchable)
                                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                            <span class="text-gray-400 text-sm font-semibold">{{ $suffix }}</span>
                                        </div>
                                    @endif
                                </div>
                                @if(isset($column['render_under']))
    <template x-if="row['{{ $field }}']">
        <div class="mt-3 space-y-2 bg-gray-50 p-3 rounded-lg border">

            @foreach($column['render_under'] as $sub)
                <div class="flex items-center gap-3">
                    
                    <label class="text-xs font-semibold w-28 text-gray-600">
                        {{ $sub['label'] }}
                    </label>

                    {{-- SOLO LABEL --}}
                    @if(($sub['type'] ?? '') === 'label')
                        <div class="text-sm text-gray-800 font-medium">
                            <span x-text="row['{{ $sub['field'] }}']"></span>
                        </div>

                    {{-- SELECT --}}
                    @elseif(($sub['type'] ?? '') === 'select')
                        <select
                            x-model="row['{{ $sub['field'] }}']"
                            class="border border-gray-200 rounded px-2 py-1 text-sm w-full focus:ring-2 focus:ring-purple-500"
                            {{ $sub['disabled'] ?? false ? 'disabled' : '' }} 
                        >
                            @foreach($sub['options'] as $opt)
                                @php
                                    $value = $opt['value'] ?? $opt['id'] ?? null;
                                    $label = $opt['label'] ?? $opt['nombre'] ?? null;
                                @endphp
                                <option value="{{ $value }}">
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>

                    {{-- INPUT --}}
                    @elseif(($sub['type'] ?? '') === 'input')
                        <input
                            type="text"
                            x-model="row['{{ $sub['field'] }}']"
                            class="border border-gray-200 rounded px-2 py-1 text-sm w-full focus:ring-2 focus:ring-purple-500"
                        />
                    @endif

                </div>
            @endforeach

        </div>
    </template>
@endif
                            </td>
                        @endforeach
                        {{-- Botón Eliminar --}}
                        <td class="px-6 py-3 text-right">
                            <button type="button" @click="removeRow(index)" class="group p-2 rounded-lg hover:bg-red-50">
                                <svg class="w-5 h-5 text-red-400 group-hover:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                            </button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</div>

<script>

function dataTableComponent(
    initialRows, 
    columns, 
    searchUrl = null, 
    eventName,
    extraSearchParams = null
) {

    return {
        rows: (Array.isArray(initialRows) ? initialRows : []).map(row => ({
            ...row,
            results: {},
            loading: null,
            showSearch: null
        })),

        columns,
         extraSearchParams(row) {
          
        },

        extraSearchParams: extraSearchParams || null,

        init() {
            this.$watch('rows', (value) => {
                // Creamos una copia limpia de las filas
                const cleanRows = value.map(row => {
                // Extraemos solo lo que NO queremos enviar
                const { results, loading, showSearch, ...cleanData } = row;
                    return cleanData;
                });
                this.$dispatch(eventName, cleanRows);
            }, { deep: true });
        },

      calculate(row) {

    this.columns.forEach(col => {

        if (col.formula) {

            let formula = col.formula;

            // 🔥 Reemplazar usando TODAS las propiedades del row
            Object.keys(row).forEach(key => {

                let value = parseFloat(row[key]);

                if (isNaN(value)) value = 0;

                formula = formula.replace(
                    new RegExp(`\\b${key}\\b`, 'g'),
                    value
                );
            });

            try {
                row[col.field] = eval(formula).toFixed(2);
            } catch (e) {
                row[col.field] = "0.00";
            }

        }

    });

},

        isNumericField(field) {
            const col = this.columns.find(c => c.field === field);
            return col && (col.type === 'number' || col.formula);
        },

        formatNumber(value) {
            return new Intl.NumberFormat('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(value || 0);
        },

        async searchAsync(field, row) {
            const query = row[field];

            if (!query || query.length < 2) {
                row.showSearch = null;
                return;
            }

            row.loading = field;
            row.showSearch = field;

            try {

               const params = new URLSearchParams();
        params.append('search', query);

        // 🔥 SI EXISTE LA FUNCIÓN, LA EJECUTA
        if (typeof this.extraSearchParams === 'function') {

            const extra = this.extraSearchParams(row);

                // 🔥 SI RETORNA ERROR → DETENER
    if (extra?.error) {
           Swal.fire({
                title: '¡Atención!',
                text: extra.error,
                icon: 'warning',
                confirmButtonColor: '#7c3aed',
                confirmButtonText: 'Entendido'
            });
            return;
        return;
    }


            if (extra && typeof extra === 'object') {

                Object.keys(extra).forEach(key => {
                    if (extra[key] !== null && extra[key] !== undefined) {
                        params.append(key, extra[key]);
                    }
                });

            }
        } 

        const response = await fetch(
            searchUrl + '?' + params.toString()
        );
                const json = await response.json();
                row.results[field] = json.data ?? [];
            } catch (e) {
                row.results[field] = [];
            } finally {
                row.loading = null;
            }
        },

        selectItem(row, field, item) {
            const col = this.columns.find(c => c.field === field);
            
            if (!col?.map) return;

            Object.entries(col.map).forEach(([from, to]) => {
                if (item[from] !== undefined) {
                    row[to] = item[from];
                }
            });

            row.showSearch = null;
        },

        onSelectChange(field, row, event) {

            const col = this.columns.find(c => c.field === field);
            if (!col?.map) return;

            const opt = event.target.selectedOptions[0];
            if (!opt) return;

            Object.entries(col.map).forEach(([from, to]) => {
                if (opt.dataset[from] !== undefined) {
                    row[to] = opt.dataset[from];
                }
            });
        },

        addRow() {
            let row = {};
            this.columns.forEach(col => {
                row[col.field] = col.formula ? "0.00" : (col.type === 'number' ? 0 : '');

                // Inicializar campo ID si es searchable
                if (col.searchable) {
                    const idField = col.id_field || col.field + '_id';
                    row[idField] = null;
                }
            });

            row.results = {};
            row.loading = null;
            row.showSearch = null;

            this.rows.push(row);
        },

        removeRow(index) {
            this.rows.splice(index, 1);
  
            if (this.rows.length === 0) {
                this.addRow();
            }

        },
         emitUpdate() {
            // Emitir datos limpios
            const cleanedRows = this.rows.map(r => {
                const copy = {...r};
                delete copy.results;
                delete copy.loading;
                delete copy.showSearch;
                return copy;
            });
            
            // EMITIR EVENTO CON EL NOMBRE CORRECTO
            this.$dispatch(eventName, cleanedRows);
        }
    }
}
</script>